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

投稿日:2018年4月12日
更新日:

affingerからwingへの画像

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

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

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

書き残します。

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

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

  1. 文字サイズ周り
  2. メニュー周り
  3. 余白間隔

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

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

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

公式:デフォルトの文字(フォントサイズ)の変更

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

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

もともとの指定こそ最適化された数値だと思われます。

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

当サイトは、文字サイズを大きくしたため、文章幅も 550px ⇒ 580px へ  620px(600に変更するかもしれない)

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

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

メニュー中央の画像

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

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

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

コピペでOK!AFFINGER4のメニューにアイコンをつけるカスタマイズ

AFFINGERのメニューをカスタマイズしたのでサクッと方法をご紹介。各項目にアイコンをつけて、文字サイズやスペースなどを調節しました。 より見やすくしたつもりですが、こればかりは好みの話になるので、 ...

続きを見る

メニュー中央寄せ機能が追加されました!

ver20180913アップデートでメニュー中央寄せ機能追加!

カスタマイザー > メニューのカラー設定 > ヘッダーメニュー > メニューをセンター寄せにする

余白 感覚(間隔)

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

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

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

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

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

意識してこだわった所

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

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

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

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

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

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

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

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

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

affingerからwingへの画像

WING(AFFINGER)

2018/4/12

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

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

続きを読む

clipmemo-eye

WING(AFFINGER)

2018/4/20

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

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

続きを読む

WINGタグ機能一覧の画像

WING(AFFINGER)

2018/4/13

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

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

続きを読む

すごい目次のアイキャッチ画像

WING(AFFINGER) WordPress

2018/4/26

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

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

続きを読む

設定はWINGのタグ機能から

トップページをサイト設計風にした

流行りの「サイト設計風」をトップで意識してみた。

サイト設計した画像

WINGの機能 + CSS書いてます

これやるとこのサイトには必要なコンテンツが無さすぎてダメですね。参照のリンクたくさんかき集めて発リンク祭りにしようと思います。

今後やること、本当はやりたいこと

「やる予定・やりたい」けれど、自分の技術的に実現ができていヵ所もメモします。

  1. 完全1カラム化
  2. 画像に対しての文字間隔を狭める調節(ギズモード風)
  3. 文章下の余白を、リズム自動で作れるようにCSS細かくする
  4. アイキャッチ画像とタイトルなど重ねて表示
  5. カテゴリーページの調節(済)
  6. TOC+からすごい目次への切り替え(済)

一つずつ潰していきます。

画像にたいして文字間隔を狭める調節

20180823のアップデートで、写真をワイドにする機能が追加されました。

これによって、実現したかった事も再現できるようになりました。このようにトレンド次第でいずれ対応されるWING素晴らしす!

幅を狭める以外にも視線操作っていろいろできるわけで、「画像を広くして、文章幅を狭い風に魅せる」のも読みやすくなるテクニックかなと思います。

すごい目次は「凄い」けど、尻込み中

sugoi-mokuji-tokuten

今AFFINGER5(WING)を購入すると、特典で「凄い目次」というプラグインが付属しています(現在は配布終了)

公式:【限定特典5/15まで】SUGOIMOKUJI(すごいもくじ)について

これから新規サイト作る方は必ず導入した方がいいです。

僕が導入を懸念しているのが、URLが変わる所。

具体的にはTOC+で見出しへ付与されている半角英数字を基本としたURLが、凄い目次だとst-のidに変更しなければならない。

これによる懸念ポイントが2つ

  1. 記事内にTOCタグ使ったスクロールヵ所がある為、すべて変更しなければならない
  2. Google検索結果で、現在関連リンクされてる小見出し群がどうなるか分からない

弱小サイトなので後者はまぁいいとして、修正はめんどくさいです。いい方法ないだろうか。

AFFINGER4からWINGに変わって、良かった所はまだよくわかっていません。

たぶんアフィリエイトサイトを複数持っている人ほどいいんじゃないかなぁと思います。

補足:言葉足らずですが、AFFINGERの時点ですでに"完成されていた"という意味ですよ!

そんな感じで終わります。

WINGの購入はこちら

-WING(AFFINGER)

関連記事とスポンサーリンク

Copyright© 前略、ヨッタさんへ , 2018 All Rights Reserved.