Theme “Savona” Customize

> Master Course > 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;
}

© 2024 . Powered by WordPress. Theme by Viva Themes.
PAGE TOP