以前の記事で、WordPressの見た目を整えるために、「テーマの編集」を使っていて失敗したことを書きました。
同じ失敗を繰り返さないために、テーマをインストールし直し、子テーマを操作することでやりなおそうとしています。
そのために書き加えたこと、やったことをまとめておきます。
（随時追記していきます）
元となっているテーマ：Twenty Fifteen
※子テーマ作成のやりかたはこちらをご参照ください。
（子テーマの考え方の説明も分かりやすかったです。）
https://www.webcreatorbox.com/tech/wordpress-child-theme
それでは、style.cssとfunctions.phpの2つのみができている前提で、メモを始めます。
やったこと① フォントの指定（Googleフォント）
Twenty Fifteenのデフォルト書体は明朝体。
ひとまずゴシック体にしたいぞ。
—–
①webフォントのインポート
②フォントの指定
—–
という大きく２段構成になっています。
①webフォントのインポート
まず、子テーマのstyle.cssの、親テーマからのインポート記述のすぐ下あたりにこれを書き加えます。
[php]
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
[/php]
これで、「Googleフォントのサイトから指定の書体をインポートしてね」という指示ができます。
（下の方に書こうとしたら「この辺りに書く内容じゃないよ」というエラーメッセージがでてしまいました。）
私はGoogleフォントの「Noto Sans Japanese」を使用していますので、他のフォントを選ぶ際は「notosansjapanese.css」の部分を変えてください。
Googleフォントの日本語版の一覧ページはこちら↓
https://googlefonts.github.io/japanese/
フォントを選ぶと右側に以下のようなタグがでます。
[php]
<link href="https://fonts.googleapis.com/earlyaccess/◯◯◯◯◯.css" rel="stylesheet" />
[/php]
上記のやつの「notosansjapanese.css」を「◯◯◯◯.css」部分に書き換えてください。
②フォントのインポート
インポートしたフォントをここで使ってね、という記述です。
これはインポートの記述よりも後であれば、style.cssのどこに記述しても大丈夫です。
[php]
/*フォントを指定する*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-family: ‘Noto Sans Japanese’, serif;
}
[/php]
これも、Noto Sans Japanese以外のフォントを使用するなら’Noto Sans Japanese’の部分を書き換えてください。
ここの書き方はGoogle fontのサイトでフォントを選ぶと表示される、＜a href=””〜ではない方のタグの、
[php]
.wf-notosansjapanese { font-family: "Noto Sans Japanese"; }
[/php]
↑これで言う、「font-family:〜」の””内の表記です。お間違いなく〜。
これでサイト全体のフォント指定が完了です。
ちなみに、私がNoto Sans Japaneseを選んだ一番の理由は、ファミリーが豊富なこと。
（ファミリーというのは、文字の太さや斜体などの違いの種類のことです）
Thin 100
Light 300
DemiLight 350
Regular 400
Medium 500
Bold 700
Black 900
上記のように８種類あるので、本文・見出し・メニューなどで細かく使い分けることができます。
やったこと② サイドバーの移動（途中でやっぱりやめた）
サイドバーが右にほしかったので、サイドバーを移動させようとしました。
ここのサイトが、内容そのまま使えたので分かりやすかったです。
この通りに子テーマのstyle.cssに加筆すれば、問題なく右カラムで表示されるようにはなったのですがモバイル版の表示が壊れていたことに気づいたので、これはやめてしまいました。
やったこと③ Google Analyticsの再設置
テーマのアップデートにより、headder.phpに加筆していたGoogle Analytics（アクセス解析みたいなもの）のスクリプトが消え去りました。
そのため、子テーマを使用しての設置を行いました。
functions.phpに少しだけ加筆する
子テーマのfunctions.phpに以下を書き加えてください。
なお、Analyticsでアカウント毎に番号みたいなやつが発行されるので、以下のUA-XXXXXXXX-Xのところはご自身の番号に変更してください。
番号の確認は、Google Analyticsのここにあります。
Google Analytics → 管理 → トラッキング情報 → トラッキングコード で表示される「トラッキングID」です。
[php]
/*Google Analyticsの設置*/
function set_gac() { ?>
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’https://www.google-analytics.com/analytics.js’,’ga’);
ga(‘create’, ‘UA-XXXXXXXX-X’, ‘auto’);
ga(‘send’, ‘pageview’);
</script>
<?php }
add_action(‘wp_head’, ‘set_gac’);
[/php]
きちんと設置されたかどうかは、
Google Analytics → 管理 → トラッキング情報 → トラッキングコード
で「テストトラフィックを送信」を押すと分かります。
設置がうまくいっていると、「テストトラフィックを送信」を押した直後に「リアルタイム」の「概要」を見ると参照元が「analytics_test」と表示されたアクセスが１件あると表示されます。
参考：http://wordpress.bia.jp/?p=657
やったこと④ 文字サイズ・行間・文字間の設定
記事の基本文字サイズの指定
参考：http://wpcustom.net/archives/55
見出しの文字サイズの設定
参考：https://saruwakakun.com/html-css/reference/h-design
やったこと⑤ メニューバーの余白指定
参考：http://wpcustom.net/archives/100
やったこと⑥ トップページ・アーカイブページの記事表示形式指定
参考：http://hublog.biz/bwpb/how-to-switch-from-the_content-to-the_excerpt/#2015
やったこと⑦ テーブルのスマホ表示を修正
スマートフォン版サイトでテーブルを使っているところの、文字の折り返しを指示しました。
別の記事で詳しく紹介しています。
コメント