Simplicity2を自分好みに変える

Simplicity2をインストール後、カスタマイズ設定でファビコンやヘッダー画像の設置、グローバルナビの設置と色の変更、本文表示への変更など、かなりの部分ですでに開設済みのホームページに近付けることができた。
それでもサイドバーのはみ出し（①）やサイトタイトル文字の修飾（②）、フッターのライセンス表記（③）など、幾つか気になる部分が残ってしまった。
これらを解決するためにはカスタマイズ設定だけでは不可能で、CSSの追記が必要となる。CSSなんてまったく分らないが、ネットをググって、見様見まねでやってみることにした。

カスタマイズの準備
カスタマイズの事例
カスタマイズの結果

カスタマイズの準備

Simplicity2の子テーマのインストール
まずはSimplicity2の子テーマをインストールし、こちらにCSSを追記して行く。
もちろんSimplicity2本体を編集することは可能だが、バージョンアップしたとき、それらはすべて失われてしまう。それを防ぐため子テーマを編集する。ちなみにテーマの機能はSimplicity2のものを使うため、子テーマのバージョンが上がってもバージョンアップする必要はないとのことだ。
テーマファイルエディターへ移動
①「外観」選択　→　②「テーマエディター」選択　→　③「編集するテーマを選択」で「Simplicity2 child」選択　→　④目的のテーマファイルを選択（下の画像では「スタイルシート」を選択している）

カスタマイズの事例

サイト全体幅、本文幅、サイドバー幅を変更する

サイト幅をホームページと同じにし、かつサイドバーのはみ出しをなくす。さらにサイドバーの幅を狭めたので、文字を小さくしバランスを取る。
スタイルシート（style.css）に下記をコピー＆ペースト

/* サイト全体幅 */
#container {
   padding:0;
   margin: 0 auto;
}

#header-in, #navi-in, #body-in, #footer-in{
   width: 960px;
}

/* 本文幅 */
#main {
   width: 660px;
}

/* サイドバーの幅とフォントサイズ*/
#sidebar {
   width: 270px;
   font-size: 13px;
}

サイドバーの見出しの修飾

文字にアンダーラインを付ける。
スタイルシート（style.css）に下記をコピー＆ペースト

/* サイドバーの見出しの修飾 */
#sidebar h3 {
   font-size:16px;
   color: #999;
   border-bottom:1px solid #999;
   padding: 2px 12px;
}

見出しｈ2〜ｈ4を変更する

ｈ1はそのまま、ｈ5以下は使わないので割愛。本当はせいぜいｈ2とｈ3を使うくらいだと思うけど、ｈ4は念のため設定。
スタイルシート（style.css）に下記をコピー＆ペースト

/* 本文の見出しの修飾 */
.article h2 {
   padding: 0px 0px 0px 15px;/* 縦棒と文字間のサイズ */
   font-size:24px;
   color: #494949;
   border-left: 30px solid #D2F5F0;/* 左の線の太さと色 */
   margin-top:50px;/* 全体の位置上 */
   margin-left:0px;/* 全体の位置左 */
}

.article h3 {
   padding: 0px 0px 0px 15px;/* 縦棒と文字間のサイズ */
   font-size:20px;
   color: #494949;
   border-left: 22px solid #D2F5F0;/* 左の線の太さと色 */
   margin-left:8px;/* 全体の位置左 */
   border-bottom: none;/* 下線を表示しない */
}

.article h4 {
   padding: 0px 0px 0px 15px;/* 縦棒と文字間のサイズ */
   font-size:16px;
   color: #494949;
   border-left: 16px solid #D2F5F0;/* 左の線の太さと色 */
   margin-left:14px;/* 全体の位置左 */
   border-bottom: none;/* 下線を表示しない */
}

こんな感じに変わった。今のところ満足。

カスタマイズ前

カスタマイズ後

今後、気分によっては変えることもありうるが、シンプルさだけは維持するつもり。

サイトタイトルとキャッチフレーズのフォントの修飾

サイトタイトルの文字を太くし、背景に影を付け、キャッチフレーズのフォントを小さくする。
（注意）フォント色だけであれば、両方共カスタマイズ設定の「色」で変更可能。
スタイルシート（style.css）に下記をコピー＆ペースト

/* サイトタイトルのフォント修飾 */
#site-title{
   margin-top:16px;
   margin-bottom:10px;
   font-size: 30px;
   line-height: 100%;
   text-shadow: rgba(0, 204, 204,0.8) 0px 0px 25px;/* 0.8が透過率（0〜1） */
}
#site-title a{
   text-decoration:none;
   color:#505050;
   font-size: 30px;
   font-weight:bold;
}

/* キャッチフーズのフォント色とサイズ */
#site-description {
   color: #D2F5F0;
   font-size: 12px;
}

タグクラウドのデザインを変更する

デフォルトの表示では記事数によって文字の大きさがバラバラだったり、込み合っていて見難い。文字の大きさを同じにし、四角で囲む。
スタイルシート（style.css）に下記をコピー＆ペースト

/* タグクラウドのデザイン変更 */
.tagcloud a {
   font-size: 12px !important;
   display: inline-block;
   margin-bottom: 5px;
   padding: 1px 10px;
   text-decoration: none;
   color: #339999;
   border-radius: 2px;
   border: 1px solid #339999;
   background-color: #fff;
}
.tagcloud a:hover {
   color: #cc0033;
   background: #99cccc;
}

SNSシェアバイラルボタンの高さ変更、均等割り、名称非表示、淡色化

見た目の満足。
スタイルシート（style.css）に下記をコピー＆ペースト

/* SNSシェアバイラルボタン高さ */
.sns-group-viral ul.snsb li a{
   height: 32px;
   line-height: 20px;
}

/* SNSシェアバイラルボタン均等割り */
.sns-group-viral ul {
   display: flex;
}

/* SNSシェアバイラルボタン名称部分を非表示 */
.icon-hatena::after, .icon-googleplus::after, .icon-facebook::after, .icon-twitter::after, .icon-pocket::after, .icon-line::after, .icon-feedly::after {
   display: none;
}
ul.snsbs li a{
   padding: 8px 6px 3px 6px;
}
.sns-group-viral ul.snsb li a{
   border-radius: 4px;
   font-size: 19px;
}

/* SNSシェアバイラルボタン色を変更 */
ul.snsbs a.twitter-btn-icon-link{background-color:#74c1f8;}
ul.snsbs a.facebook-btn-icon-link{background-color:#6680d8;}
ul.snsbs a.google-plus-btn-icon-link{background-color:#fd6969;}
ul.snsbs a.hatena-btn-icon-link{background-color:#6eaff3;}
ul.snsbs a.pocket-btn-icon-link{background-color:#ff6d82;}
ul.snsbs a.line-btn-icon-link{background-color:#00c600;}
ul.snsbs a.evernote-btn-icon-link{background-color:#51b125;}
ul.snsbs a.feedly-btn-icon-link{background-color:#9ade79;}
ul.snsbs a.push7-btn-icon-link{background-color:#eeac00;}

SNSフォローボタンを丸くする

見た目の満足。
スタイルシート（style.css）に下記をコピー＆ペースト

/* SNSフォローボタンを丸くする */
ul.snsp li a span{
   border-radius: 17px;
}

SNSシェア＆フォローボタンはこんな風になった。なかなかいい感じ?。

グローバルメニューのホバーの背景と文字色変更

ホームページと同じ動作に変えた。
スタイルシート（style.css）に下記をコピー＆ペースト

/* グローバルメニューホバー文字色変更 */
#navi ul li a:hover{
   color: #8CB4FF !important;
   background: none;
}

グローバルメニューのサブメニュー幅を文字の最大幅、文字サイズも小さくする

記事タイトルの下の「日付」と「カテゴリ」の表示を小さくする。見た目の満足。
スタイルシート（style.css）に下記をコピー＆ペースト

/* グローバルメニューのサブメニュー幅と文字サイズ変更 */
#navi ul.sub-menu, #navi ul.children {
   min-width: 130px;
   text-align: center;
}
ul.sub-menu li a{
   font-size:12px !important;
}

記事タイトル下の「日付」と「カテゴリ」の表示を小さくする

見た目の満足。ついでに文字色も変える。
スタイルシート（style.css）に下記をコピー＆ペースト

/* 記事タイトルの下の「日付」と「カテゴリ」の表示を小さくする */
.post-meta {
   font-size: 12px;
   color: #505050;
   background-color:#D6EAFF;
}

フッターのライセンス表示に年と名前を入れる

今回最もこだわった部分。
最初は訳も分らずjavascript.jsに下記をコピー＆ペースト

/* フッター著作権表記 */
(function($){
   $(function(){
      $(“#footer”).find(“.credit”).html(“Copyright © 2017-2019 Kazu Sasaki. All rights reserved. “);
   });
})(jQuery);

ひょんなことから下記を発見。手入力で年を入れるのは変わらないが、やってることが何となく分るのでこちらに変更。
テーマのための関数（functions.php）に下記をコピー＆ペースト

function get_site_license(){
   return ‘ Copyright © 2017-2019 Kazu Sasaki. All rights reserved.</a>’;
}

カスタマイズの結果

ほぼ満足のいく結果になりましたね?。95点です！でも100%の満足度ではないので、これからも少しずつ変えていくつもり。

カスタマイズ前

カスタマイズ後

カスタマイズを進めるうちに、CSSに対する不安はかなりなくなった。見覚えのある単語が並び、記述の意味もルールも何となく分ってきた。と言っても今更勉強するつもりはないが。。。
とりあえずコピペでやってみて、上手くいかなければ削除するだけ。こんなに手軽にカスタマイズができるなら、やるっきゃない！！これからもネットを参考にカスタマイズを進めるつもりだ。
ただ、フッターのライセンス表示は手子摺った。ほとんどが直接Simplicity2を編集するものばかりで、子テーマへの記述が見つからなかった。
たまたま、Simlicity2のフォーラムの質問の回答がヒットし、CSSではないものの使えそうだった。これこそ見様見まねで記述すると、ほぼ思った通りの表現になってくれた。「ほぼ」と言うのは、最新の年号を自動で取れるようにできず、手入力になってしまったためだ。それでも、感謝！感謝！