SIM今回は人気WordPressテーマSnowMonkeyのデザインカスタマイズを紹介します。
どの辺りのカスタマイズがオススメかというと、デザインの４原則のうちで近接と整列です。
Snow Monkeyの初期デザインで不満に感じた点
SIMグローバルメニューまで作ってみて、スマートフォン表示まで確認した後の感想です。
具体的にどこら辺に違和感を感じたのか？というと次のとおりです。
- 余白：とくに行間や要素と要素の間隔
- フッターコピーライト：デフォルトではSnowMonkeyになっていて、文字サイズや改行も要修正
- スマートフォンの一覧ページのカラム数：デフォルトでは２列だけど、１列の方がタイトルが読みやすい
- 一覧ページのサムネイルの縦横比：デフォルトで4:3だが、16:9の方が読者も見慣れている
- 一覧ページの投稿日：タイトルと要約は左寄せなのに、なぜか投稿日だけ中央揃え
- フッターナビゲーション：デフォルト設定がいくつか用意されているが、どれも不満
これらは簡単に変更できましたが、一部苦労した点もあったので忘備録として書いておきます。
改良点１：余白と整列
SIM「けっきょく余白」というデザインの参考書があるくらい、余白感は重要なデザイン要素です。
他に整列もデザイン４原則の一つですが、こちらもSnowMonkey初期デザインで違和感を感じたためにカスタマイズしました。
SnowMonkeyの初期デザイン
下のスクリーンショット（スマートフォン表示）がSnowMonkeyの初期デザインですが、「余白」と「整列」に違和感を感じます。
とくに記事一覧ページのタイトル、要約、投稿者、日付の辺り、要するに全部ですね。
SIM行間が広すぎる…
そして、どうして投稿者と投稿日のブロックだけ中央揃えなのか？
日付も日本人には馴染みがない表示法で、違和感を感じざるを得ません。
改善した点
これらの違和感に対して行った改造は次のとおりです。
- 要約部分をカット：要約部分は読まれないことが多く、タイトルのみで十分
- 投稿者をカット：個人ブログでは投稿者は一人のみで、おそらく読者も興味がない
- 投稿日を左寄せ：左寄せに統一した方が美しく見える（デザインの４原則：整列）
- 投稿日の文字色を変更：日付をグレーにして目立たなくした（デザインの４原則：対比）
- タイトルと投稿日の行間を狭くする：これが一番苦労した（デザインの４原則：近接）
- 日付の書式を変更：これは管理画面で簡単にできるので説明は省略
改善方法
SIM修正方法は追加CSSを書くだけです。
CSSセレクタでどのClassを指定するかで少し時間がかかりました。
追加したCSSは下記のとおりです。
追加CSSは編集したいページ上部の管理バーの「カスタマイズ」＞ページ左メニューの「追加CSS」に書くだけでOKですよ。
/* 一覧ページ投稿者名を非表示 */
.c-entry-summary__content,
.c-entry-summary__meta .c-meta__item--author {
display: none;
}
/* 一覧ページの投稿日の書式 ・上部マージンと文字色*/
.c-entry-summary__body .c-entry-summary__meta {
margin-top:1px;
color:gray;
}
/* 一覧ページの投稿日の書式・左寄せ寄せ */
.c-entry-summary__meta {
justify-content: flex-start;
}注）無用なトラブルを避けるためにも、このブログは基本追加CSSで修正できる所までしかカスタマイズしない方針です。
改善後のデザイン
下記に改善後のデザインを載せておきます。初期デザインで感じていた違和感が緩和されたと思います。
追記：テーマをSwellに変更しました
SnowMonkeyはカスタマイズ性に優れたテーマですが、現在はブログ執筆に集中するためにSwellにテーマを変更しました。SnowMonkeyはコーディングによるカスタマイズ前提のテーマですが、逆にSwellはコーディングをしなくてもデザインが完成されているため、カスタマイズよりもブログ執筆に集中したい方にオススメのWordPressテーマだと思います。
改良点２：フッターコピーライト
SIM初期デザインではスノーモンキーのコピーライトが14pxで書かれています。
フッターはウィジェットでもカスタマイズが出来ますが、デフォルトで用意されている要素とデザインが好みではなかったので、フッターコピーライトの部分をベースに改造することにしました。
僕が改造した箇所をリストアップすると下のようになります。
- リンク付きブログタイトルを入れる
- コピーライトを自分用に変更
- コピーライトの文字サイズを10pxに変更して改行を入れる
- フッターコピーライト直上にグローバルメニュー追加
- グローバルメニューのCSSを変更
コピーライトエリアをフッターとして改造
コピーライトエリアの文言は、管理画面にHTMLを書く欄があるので、そこに直接書き込みました。
場所は次のとおり。
外観＞カスタマイズ＞サイト基本情報＞コピーライト
SIM記入欄が狭くて書きにくいので、エディターに書いたものをコピペすることをオススメします。
以下に私が書いたコードを貼っておきます。
<a href="https://shimizu-create.com" target="_blank" rel="noreferrer">SIMS-CODE</a>
<br>
<div class="footer-copyright">Copyright - Shimizu WEB Creation, 2023
<br>All Rights Reserved.</div>ブラウザ上では下のように表示されます。
なお、ブログ名（SIMS-CODE）をクリックすると、トップページへ飛ぶ設定になっています。
フッター直上にグローバルメニューを配置する方法
次にグローバルメニューをフッター直上にも配置しました。
SIMメニューの配置は簡単でしたが、CSSセレクタの選択で少し迷いました。
他人の書いたコードの解読は慣れるまで苦労しますね。
一応、私が書いた追加CSSと完成後の画像も貼っておきます。
/* フッターナビゲーション */
.l-footer .c-navbar__item{
padding:0.2em 1em;
margin-top:0.2em;
margin-bottom:0.2em;
background-color:#333;
color:#fff;
border-radius:2em;
}
/* フッターナビゲーション */
.c-sub-nav .c-navbar {
justify-content: center;
}
改良点３：スマートフォンの一覧ページのカラム数を１列に
SIM初期設定ではスマホの記事一覧ページのカラムは２列になっています。タイトルの読みやすさは断然１列の方が良いと感じたので改善しました。
設定箇所は次のとおりです。
外観＞カスタマイズ＞デザイン＞基本デザイン設定＞モバイル端末時に記事一覧を1列にする
SIM「これで完成！」と思ったら全然ダメで、追加CSSを書くことなりました。
コードはSnow Monkeyのフォーラムでトピックスが上がっていたので、そのコードをコピペしました。
/* 一覧ページのスマホで１カラム */
@media (max-width: 639px) {
.c-entries--rich-media .c-entries__item {
flex-basis: 100%;
max-width: 100%;
}
}さらに記事一覧を表示方法もパネル表示に変更して、記事の境目を分かりやすくしました。
これはコードを書かずに外観＞カスタマイズ＞デザイン＞基本デザイン設定で簡単に変更できます。
ここまで改造して下のようになり、かなり見やすくなりました。
改良点４：一覧ページのサムネイルの縦横比
SIMサムネイルの縦横比はデフォルトでは4:3です。WEB上で使用頻度が高い画像は16:9が多いため変更することにしました。
方法はSnowMonkeyのフォーラムにトピックスが上がっていたので、そこでSnowMonkey作者のキタジマさんが紹介していたコードを追加CSSにコピペしました。
コードは以下のとおりです。
/* 一覧ページのサムネイル縦横比 */
.c-entry-summary .c-entry-summary__figure::before {
padding-top: 56.25%;
}まとめ
以上のように、SnowMonkeyのデフォルトデザインが好みに合いませんでしたのでカスタマイズにより改善しました。
SnowMonkeyは追加CSSだけでもある程度変更が効く、良いWordPressテーマだと思います。
