テンプレートをSANGOに変更してやったカスタマイズまとめ

テンプレートを「SANGO」に変更してやったカスタマイズをまとめておきます。

ヘッダー（ロゴ）画像

［外観］⇒［カスタマイズ］⇒［サイト基本情報］で、ロゴ画像を選択する。

横幅を広げるには

［外観］⇒［CSS編集］で、子テーマのstyle.cssに追加。

@media only screen and (min-width: 768px) {
 #logo, #logo img, .desktop-nav li a {
 height: 50px;
 line-height: 50px;
 }
}

画面サイズが大画面表示のとき（768px以上）のみ、サイズを変えられる。

タイトル文字サイズ変更

［外観］⇒［CSS編集］で、子テーマのstyle.cssに追加。

#logo {
 font-size: 23px;
}

23pxの数字を変えると、タイトルサイズが調整できる。

スポンサーリンク

メニュー作成

［外観］⇒［メニュー］で作成。
メニューは4つ作ろう。

1. ヘッダーメニュー（パソコン用）
2. フッターメニュー
3. モバイル用メニュー
4. ハンバーガーメニュー

メニューの文字列には、FontAwesomeのアイコンフォントが使える。
自分の好きなアイコンコードを貼り付けてカスタマイズしよう。
⇒FontAwesome

ハンバーガーメニュー

［外観］⇒［ウィジェット］⇒［スマホ用ナビドロワー（ハンバーガーメニュー）］

スポンサーリンク

入れ直さないといけないもの

• サーチコンソール
• グーグルアナリティクス

［外観］⇒［テーマの編集］⇒テーマヘッダー(header.php）
に入れ直し。

GoogleAnalytics（グーグルアナリティクス）

トラッキングIDを
［外観］⇒［カスタマイズ］⇒［詳細設定］
で入れる。

広告

「AdSense Integration WP QUADS」を停止。
→ウィジェットで、記事上・記事下・関連のコードを入れる。

タイトル下にアイキャッチ画像を非表示

［外観］⇒［カスタマイズ］⇒［詳細設定］⇒「記事のタイトル下にアイキャッチ画像を表示しない」にチェック。

スポンサーリンク

シェアボタン

モバイル用メニューのシェアボタン

［外観］⇒［カスタマイズ］⇒［フッター固定メニュー（モバイルのみ）］

記事タイトル下にSNSボタンを追加したい時

［外観］⇒［カスタマイズ］⇒［詳細設定］⇒「タイトル下にシェアボタンを並べて表示」にチェック。

固定ページのシェアボタンを消す

［外観］⇒［テーマの編集］⇒個別投稿ページ (page.php)⇒<?php insert_social_buttons();?>を消す。

シェア数を消す

プラグイン「SNS Count Cache」が入っていれば、削除する。

タイトル下のギザギザを消す

［外観］⇒［CSS編集］で、子テーマのstyle.cssに下記CSSを貼り付け。

.nothumb .entry-meta:after, .nothumb .page-title:after {
 content: none;
}

スポンサーリンク

親テーマで編集したもの

固定ページのタイトル下アイキャッチ巨大画像非表示

［外観］⇒［テーマの編集］⇒個別投稿ページ (page.php)⇒<?php the_post_thumbnail(‘large’);?>を消す。

バージョン1.6以降

<?php if (has_post_thumbnail()): //アイキャッチ ?>
<p class=”post-thumbnail”><?php the_post_thumbnail(‘thumb-940’);?></p>
<?php endif; ?>

を消す。

記事下の「前後の記事」を消す

［外観］⇒［テーマの編集］⇒個別投稿(single.php）⇒</article>の後の
<?php get_template_part(‘parts/single/prev-next-entry’);//前後の記事へのリンク?>
を消す。

コメント欄を消す

［外観］⇒［テーマの編集］⇒コメント(comments.php）⇒中身を全部削除。

スポンサーリンク

表をレスポンシブにするには

ビジュアルエディタの場合

1. 表の1番左上のセルにカーソルを置く。
2. 「フォーマット」⇒「スタイル」⇒「表をレスポンシブに変える」を選ぶ。

テキストエディタの場合

HTMLの場合、以下のように追加。

	 	
~略~	

表をレスポンシブにした時の注意

テーブルの全体幅を指定しないこと。
行幅を指定するのはOK。
<table style=”width: 300px;”>などの記述があると、はみ出てしまう。