サイトのテーマをWING（AFFINGER5）に切り替えました。ワードプレステーマ AFFINGER4 からの移行です。
とり急ぎ備忘録を兼ねまして
- カスタマイズした所
- こだわった所
- 今後変更する所
書き残します。
通常状態からカスタマイズしたところ
通常からカスタムしたヵ所は大きく３つ
- 文字サイズ周り
- メニュー周り
- 余白間隔
文字サイズ周りのカスタマイズ
- 文字サイズ（PC 16px へ）
- 文字間隔（letter-spacing : .2px）
- 文章幅
(max-width: 580px)（width 620px) 文 位置 (右寄り）
いま読んでいただいている文字部分の数字調節です。文字周りを一番こだわりました。とにかく自分が読みやすい感じへ
追記WING最新バージョンでフォントサイズ指定も簡単に！
フォントサイズの変更が基本機能からできるようになりました（WING バージョン 20180521 から）
もともとの指定こそ最適化された数値だと思われます。
当サイトは、文字サイズを大きくしたため、文章幅も 550px ⇒ 580px へ 620px（600に変更するかもしれない）
前に文字サイズを大きくした時は、55歳以上方々を除いて全体の数字が落ちてしまいました。なので今回リベンジです。
メニューの中央ぞろえ (for PC)
コンテンツが少ない為、類似メニューはまとめてさらに中央に寄せました。中央ぞろえの方法は公式サイトコピペで完成。
細かいCSSや、メニューにアイコンを付けたのは次の記事で書いた通りです。
-
コピペでOK！AFFINGER4のメニューにアイコンをつけるカスタマイズ
AFFINGERのメニューをカスタマイズしたのでサクッと方法をご紹介。各項目にアイコンをつけて、文字サイズやスペースなどを調節しました。 より見やすくしたつもりですが、こればかりは好みの話になるので、 ...
続きを見る
メニュー中央寄せ機能が追加されました！
ver20180913アップデートでメニュー中央寄せ機能追加！
カスタマイザー ＞ メニューのカラー設定 ＞ ヘッダーメニュー ＞ メニューをセンター寄せにする
余白 感覚（間隔）
AFFINGER シリーズで僕が残念に思うところが「余白」です。
例えば、デフォルトのfont周りは上下間が「詰まりすぎ」な気がして読みづらいです。 を使った空白改行を入れなければならなくなります。
空白の改行が気持ち悪くてダメなタイプなので、全体的な余白を意識して調節しました。
デフォルトからあえて変更したところは以上
補足：上記変更は、あくまで「自分にとっての最適化」です。訪問者にとっての最適化ではないのでオススメしません。乖離は数字みつつ埋めます。
意識してこだわった所
いかにAFFINGER5(WING)を触らないか
ココめっちゃ意識しました。
小手先の知識を使って自分が書いたCSSが後から邪魔して困ることが多かったので、いかに備わっている機能を邪魔しないか、AFFINGERだけで完結させるかを頑張りました。今後もっと減らします。
新着一覧と、カテゴリーごとの新着をやめた
各カテゴリーで新着順表示を行っていましたが、やめました。新しい記事をなかなか書かないから。
追記WINGの新しい機能：カテゴリーごとの新着を表示できる
カテゴリ別の表示をデフォ機能で設定できるようになりました（ショートコード呼び出し）
ランダム表示や横スライダー表示もできるので、僕のサイトのように新しい記事が増えない場合にも対応できますね 😀
こんな感じで表示できるよ！
設定はWINGのタグ機能から
- 参考記事：WINGのタグ機能をまとめた一覧ページ【AFFINGER5】
- 機能使ったページ：10万PVを目指すブログ運営のあれこれ
トップページをサイト設計風にした
流行りの「サイト設計風」をトップで意識してみた。
WINGの機能 ＋ CSS書いてます
これやるとこのサイトには必要なコンテンツが無さすぎてダメですね。参照のリンクたくさんかき集めて発リンク祭りにしようと思います。
今後やること、本当はやりたいこと
「やる予定・やりたい」けれど、自分の技術的に実現ができていヵ所もメモします。
完全1カラム化画像に対しての文字間隔を狭める調節（ギズモード風）- 文章下の余白を、リズム自動で作れるようにCSS細かくする
- アイキャッチ画像とタイトルなど重ねて表示
カテゴリーページの調節（済）TOC＋からすごい目次への切り替え（済）
一つずつ潰していきます。
画像にたいして文字間隔を狭める調節
20180823のアップデートで、写真をワイドにする機能が追加されました。
これによって、実現したかった事も再現できるようになりました。このようにトレンド次第でいずれ対応されるWING素晴らしす！
WINGの写真ワイド機能イイ！！
ずっとやりたかったやつ。スタイル→写真→ワイドで指定できる
記事の幅が広くても文章が読みやすくなるし、最近いろいろな所で取り入れられてたからいずれやってくれると期待してた。最高や～ pic.twitter.com/wCHp1NNL86
— yotta / よった / ヨッタ (@YottaBVBarigato) September 19, 2018
幅を狭める以外にも視線操作っていろいろできるわけで、「画像を広くして、文章幅を狭い風に魅せる」のも読みやすくなるテクニックかなと思います。
すごい目次は「凄い」けど、尻込み中
今AFFINGER5(WING)を購入すると、特典で「凄い目次」というプラグインが付属しています（現在は配布終了）
公式：【限定特典5/15まで】SUGOIMOKUJI（すごいもくじ）について
これから新規サイト作る方は必ず導入した方がいいです。
僕が導入を懸念しているのが、URLが変わる所。
具体的にはTOC＋で見出しへ付与されている半角英数字を基本としたURLが、凄い目次だとst-のidに変更しなければならない。
これによる懸念ポイントが２つ
- 記事内にTOCタグ使ったスクロールヵ所がある為、すべて変更しなければならない
- Google検索結果で、現在関連リンクされてる小見出し群がどうなるか分からない
弱小サイトなので後者はまぁいいとして、修正はめんどくさいです。いい方法ないだろうか。
方法を思いついたので、切り替えました
AFFINGER4からWINGに変わって、良かった所はまだよくわかっていません。
たぶんアフィリエイトサイトを複数持っている人ほどいいんじゃないかなぁと思います。
補足：言葉足らずですが、AFFINGERの時点ですでに"完成されていた"という意味ですよ！
そんな感じで終わります。