Theme “Savona” Customize
Deno site URL:https://optimathemes.com/savona-free/demo/
Theme 「Savona」
投稿記事をフロントページにすると、スライダーや Featured ブロックが使える
スライダーのスタイルが選択できる
◆「投稿記事を先頭に固定する」を使う(一件)
◆固定ページのアイキャッチは、サイズ 1080×240 で統一
◆「カスタマイズ」のところで
・アクセントカラー・ヘッダーテキスト(ロゴを使う場合はパス)・ヘッダー背景色
・各ブロックのレイアウトとサイドバーのサイズ
・スライダーのカテゴリー(投稿記事)と表示数(1~3に抑える)
・Featured Links 設定(固定ページも可)
コメント数は外す・関連投稿表示・著者を非表示
ドロップキャップ(ブロックの先頭にある大きな大文字)
・ソーシャルメディア・・・Top Bar に表示される
・Page Footer で Copyright 入力
◆page.php より削除(サイドバー)
<?php
// Sidebar Left
get_template_part( ‘templates/sidebars/sidebar’, ‘left’ );
?>
<?php
// Sidebar Right
get_template_part( ‘templates/sidebars/sidebar’, ‘right’ );
?>
※スタイルを追加してフルワイドにする <div class=”main-container” style=”width:100%;”>
◆個別投稿 (single.php)からコメントソースを削除
// Comments
if ( savona_options( ‘single_page_show_comments_area’ ) === true ) {
get_template_part( ‘templates/single/comments’, ‘area’ );
}
◆ テーマのための関数 (functions.php)・・・似た記事のサムネイルをスクエアに
add_image_size( ‘savona-grid-thumbnail’, 500, 330, true ); ⇒ 290, 290, true );
◆サイトタイトル変更
.header-logo a {
display: inline-block;
font-size: 40px;
line-height: 1;
font-family: ‘Book Antiqua’, EB Garamond, sans-serif;
letter-spacing: 0.1em;
color: #ccc;
}
.site-description {
display: inline-block;
margin-top: 0px;
margin-bottom: 0;
color: #ccc;
font-family: ‘Book Antiqua’, EB Garamond, sans-serif;
letter-spacing: 0.1em;
font-size: 21px;
}
※ assets ⇒ css ⇒ responsive.css
@media screen and ( max-width: 640px ) {
#page-header .entry-header {
height: auto;
padding: 30px 0;
}
.header-logo {
padding-top: 0 !important;
}
.header-logo a {
font-size: 35px;
}
※スマホでのバグ修正
.featured-link {
float:none;
}
.featured-link img {
width: 100%;
margin-top:20px;
}
◆ページタイトル・・・2つあるので削除して 40px
.post-title {
margin-bottom: 13px;
}
.page-title {
margin-bottom: 24px;
}
◆タイトルサイズ変更 80px
.post-title,
.page-title {
font-size: 40px;
line-height: 44px;
letter-spacing: 0.5px;
font-family: ‘Book Antiqua’, EB Garamond, YuMincho,Yu Mincho,’游明朝’,”ヒラギノ明朝 ProN W6″,HiraMinProN-W6,”HG明朝E”,”MS P明朝”,MS PMincho,”MS 明朝”,sans-serif;
}
◆基本フォントや見出しを変更
#page-header .entry-header {
height: auto;
padding: 50px 0;
}
/*————————————————————–
16.0 Typography
————————————————————–*/
body {
font-size: 13px !important;
line-height: 2.0;
font-family: Meiryo,‘メイリオ’, Hiragino Kaku Gothic Pro, ‘ヒラギノ角ゴ Pro W3’,sans-serif !important;
}
※変更・追加
h7,
#reply-title,
#reply-title a {
font-family: YuMincho,Yu Mincho,’游明朝’,”ヒラギノ明朝 ProN W6″,HiraMinProN-W6,”HG明朝E”,”MS P明朝”,MS PMincho,”MS 明朝”,serif;
font-weight: 400;
}
h4 { color: #5b6356 !important; font-weight: 600;}
h7 {
font-size: 18px;
}
◆スライダー read more ブロック削除(templates ⇒ header ⇒ featured-slider.php)
<?php if ( savona_options( ‘featured_slider_more’ ) === true ) : ?>
<div class=”slider-read-more”>
<a href=”<?php echo esc_url( get_permalink() ); ?>”><?php esc_html_e( ‘read more’,’savona’ ); ?></a>
</div>
<?php endif; ?>
※そのスペースにインスタのアイコンを置く
<center><img src=”http://workshop.jeez.jp/wp-content/uploads/2018/05/ins.png” style=”width:28px;” /></center>
◆投稿記事の、初めの文字のフォントスタイルとサイズを変更
/* Headings Fonts */
.post-content > p:first-child:first-letter {
font-family: YuMincho,Yu Mincho,’游明朝’,”ヒラギノ明朝 ProN W6″,HiraMinProN-W6,”HG明朝E”,”MS P明朝”,MS PMincho,”MS 明朝”,serif;
font-size: 60px !important;
font-weight: 500;
}
◆画像の位置指定が無い時は、横に並ぶようにを削除
img { display: block;
◆Blockquotes タグを利用する(書き換え)
/*————————————————————–
2.0 General Styles & Classes
————————————————————–*/
blockquote { margin: 0 0 40px 20px; padding: 3px 0 0 15px; border-left: 1px solid #eee;line-height: 2.0;}
blockquote a {
font-style: italic;
}
◆フッターの色を変更・クレジットを目立たないようにする
/*————————————————————–
15.0 Page Footer
————————————————————–*/
.credit
.footer-copyright
◆スタイルを追加/フッターブロックの色・ブロック要素
/*————————————————————–
20.0 Original
————————————————————–*/
#page-footer {background-color: #222 !important;}
.block-1 { float: left; display: inline; width: 46%; margin-right: 2%; }
@media only screen and (max-width: 768px) {
.block-1 {float: none; display: block; width: 100%; }
.block-left, .block-right { float: none; width: 100%; margin: 1%;}
}
◆contact form の枠幅調整
.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 input[type=”url”] {
width: 60%;
}
.wpcf7 input[type=”number”] {
width: 60px;
}
.wpcf7 input[type=”tel”],
.wpcf7 input[type=”date”] {
width: 60%;
}
.wpcf7 textarea {
width: 60%;
height: 250px;
}
◆Featured Links.phpブロックのバグを修正・・・最新バージョンは修正済み
@media screen and ( max-width: 979px ) {
#top-bar > div,
#main-nav > div,
#featured-slider.boxed-wrapper,
#featured-links,
.main-content,
.page-footer-inner {
padding-left: 15px;
padding-right: 15px;
}
@media screen and ( max-width: 768px ) {
削除
.featured-link {
display: none;
}