WING（AFFINGER5）にテーマ変更したついでにカスタマイズしたところ

サイトのテーマをWING（AFFINGER5）に切り替えました。ワードプレステーマ AFFINGER4 からの移行です。

とり急ぎ備忘録を兼ねまして

カスタマイズした所
こだわった所
今後変更する所

書き残します。

通常状態からカスタマイズしたところ

通常からカスタムしたヵ所は大きく３つ

文字サイズ周り
メニュー周り
余白間隔

文字サイズ周りのカスタマイズ

文字サイズ（PC 16px へ）
文字間隔（letter-spacing : .2px）
文章幅 (max-width: 580px)
文位置 (右寄り）

いま読んでいただいている文字部分の数字調節です。文字周りを一番こだわりました。とにかく自分が読みやすい感じへ

公式：デフォルトの文字（フォントサイズ）の変更

追記WING最新バージョンでフォントサイズ指定も簡単に！

フォントサイズの変更が基本機能からできるようになりました（WING バージョン 20180521 から）

文字を増やしたくないので書いていませんでしたが、もともとの指定こそ作者ENJIさんが最適化しての結果だと思われます。

今までなかった事が物語っている通り、幅広いサイトにテーマが適するよう変わった分、各々のサイトに必要なサイズも異なるようになったため、機能が新たに備わったと解釈してます

yotta

当サイトは、文字サイズを大きくしたため、文章幅も 550px ⇒ 580px へ

【ベストよこ幅】ブログの記事エリア幅は550pxがおすすめ！答えは人間の目線に

AFFINGERの記事エリア幅を変更する色々なパターンをまとめました

前に文字サイズを大きくした時は、55歳以上方々を除いて全体の数字が落ちてしまいました。なので今回リベンジです。

メニューの中央ぞろえ (for PC)

コンテンツが少ない為、類似メニューはまとめてさらに中央に寄せました。中央ぞろえの方法は公式サイトコピペで完成。

公式：PC観覧時のヘッダーメニューをセンター寄せ

細かいCSSや、メニューにアイコンを付けたのは次の記事で書いた通りです。

余白感覚（間隔）

AFFINGER シリーズで僕が残念に思うところが「余白」です。

例えば、デフォルトのfont周りは「詰まりすぎ」な気がして読みづらいです。  を使った空白改行を入れなければならなくなります。

空白の改行が気持ち悪くてダメなタイプなので、全体的な余白を意識して調節しました。

デフォルトからあえて変更したところは以上

補足：上記変更は、あくまで「自分にとっての最適化」です。訪問者にとっての最適化ではないのでオススメしません。乖離は数字みつつ埋めます。

意識してこだわった所

いかにAFFINGER5(WING)を触らないか

ココめっちゃ意識しました。

小手先の知識を使って自分が書いたCSSが後から邪魔して困ることが多かったので、いかに備わっている機能を邪魔しないか、AFFINGERだけで完結させるかを頑張りました。今後もっと減らします。

新着一覧と、カテゴリーごとの新着をやめた

各カテゴリーで新着順表示を行っていましたが、やめました。なぜなら新しい記事がなかなか増えないから（書かないから）

追記WINGの新しい機能：カテゴリーごとの新着を表示できる

カテゴリ別の表示をデフォ機能で設定できるようになりました（ショートコード呼び出し）

ランダム表示や横スライダー表示もできるので、僕のサイトのように新しい記事が増えない場合にも対応できますね 😀

こんな感じで表示できるよ！

WING（AFFINGER) WordPress

2018/6/16

TOC+から切り替え！もくじプラグイン SUGOI MOKUJI (すごい目次）のメリット・デメリット

ワードプレスの目次プラグイン「SUGOI MOKUJI（すごいもくじ）」が凄かったのでメリット・デメリットをレビューします。「ただの目次」を「意味がある目次」に昇華させるようなプラグインで、すごいです。多くの方は目次プラグインで「TOC+（Table of Contents Plus）」を使用されているかと思いますので、「SUGOI MOKUJI」との比較や切り替えで注意する点なども一緒に！この目次が作れるプラグイン！ SUGOI MOKUJI（すごいもくじ）と TOC+ (Table of Con ...

WING（AFFINGER)

2018/4/23

コピペOK！WINGのクリップメモをSNSやウェブサービス用にカスタマイズ【AFFINGER5】

WING（AFFINGER5）で「クリップメモ」という機能を発見しました。こんなやつです。初心者向け記事カスタマイズも可能！ 2行でも大丈夫！使い方タグ＞デザイン＞クリップメモルートをたどると９パターンのショートコードが用意されているショートコード [st-cmemo fontawesome="fa-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"][/st-cmemo] ...

WING（AFFINGER)

2018/6/15

WINGのタグ機能をまとめた一覧ページ【AFFINGER5】

WINGの記事内で使えるタグ機能を一覧ですべてまとめています。

WING（AFFINGER)

2018/6/6

WING（AFFINGER5）にテーマ変更したついでにカスタマイズしたところ

サイトのテーマをWING（AFFINGER5）に切り替えました。ワードプレステーマ AFFINGER4 からの移行です。とり急ぎ備忘録を兼ねましてカスタマイズした所こだわった所今後変更する所書き残します。通常状態からカスタマイズしたところ通常からカスタムしたヵ所は大きく３つ文字サイズ周りメニュー周り余白間隔文字サイズ周りのカスタマイズ文字サイズ（PC 16px へ）文字間隔（letter-spacing : .2px）文章幅 (max-width: 580px) 文位置 (右 ...

設定はWINGのタグ機能から