豆知識

細かすぎて伝わらない!Affinger5カスタマイズ15選

投稿日:2019年8月1日 更新日:

このブログでは、WordPressテーマ「WING(AFFINGER)」を使っています。
また、私の運営するフリー素材サイト「イラストの里」でもAffinger5を使っています。

巷では、SEOに強いテーマだとか、カスタマイズが自由自在だとか、高性能!だとか噂されていますが、

実際にカスタマイズしてみて思うのは、

めっちゃ細かく色々カスタマイズできる!

ていうか、細かすぎて伝わらないかもしれないところまでめっちゃカスタマイズできすぎ!る!

…ということです。

というわけで、この記事では、Affinger5の細かなカスタマイズについてご紹介していこうと思います。

正直なところ、細かすぎるのでカスタマイズしても読者の方には分からないかもしれません。
分からないかもしれませんが、細部にこだわりたいのがアルチザンの心(職人魂)というもの。

Affinger5を使っていて、こんな風にカスタマイズしたいんだけど、どうすれば分からないー!という方も、良かったら読んでください。

この先からは当ブログとイラストの里で、実際にカスタマイズを行ってみた画像を使って解説していきます!



見やすく案内できる!メニューのカスタマイズ

ブログの回遊率をUPさせるためにメニューをカスタマイズするのが効果的。
特にPCのグローバルメニューとスマートフォンのメニューは目につきやすい場所にあるので、見てもらいたい重要なページをさくっと設定してみよう。

【PC】グローバルメニューのカスタマイズ

①グローバルメニューに階層をつける

パソコンでカーソルを合わせると、下に「ベロ~ッ」と出てくるのが、グローバルメニューの階層。

ベローっと下に出てくるグローバルメニュー

イラストの里は、親カテゴリが15項目ほどあるので、15項目がベロ~ッと出てくるように設定しています。

設定は、外観>メニューでグローバルメニュー(ヘッダーメニュー)を選択。
メニューを作成していない場合、案内したい項目を追加していきます。

グローバルメニューに項目を追加

「カテゴリ一覧」という親項目の下に入れたい副項目(ここでは季節の行事・イベント以下の項目)を、親項目の中にちょっとだけドラック&ドロップさせると段落ができます。

これで、ベロ~ッメニューの完成。簡単。

②グローバルメニューをセンター寄せにする

グローバルメニューに表示する項目が少ないと、すごく左に寄ってしまって気になるわ!という方は

グローバルメニューをボタン一つでセンタリング(中央寄せ)にすることが可能です。

グローバルメニューが左に寄ってしまっている図

外観>カスタマイズ>メニューのカラー設定>ヘッダーメニュー>メニューをセンター寄せにするにチェックを入れる。

グローバルメニューがセンターに寄った図
真ん中に寄りました!

【スマホ】メニューのカスタマイズ

③ミドルメニュー(ロゴの下に表示)

こちらはスマートフォンでヘッダー付近に表示されるメニュー。↓

スマホ用ヘッダーメニュー

このメニューがあると見やすいよ。

設定は、おおまかに3段階必要です。順を追ってみていく。

-その1-
はじめにAffinger5管理>メニュー>スマホ用スライドメニューの項目の中の「スマホ用ミドルメニューを表示する」にチェックを入れる。

-その2-
外観>メニューからメニューを新規作成する。追加したい項目(カテゴリーやカスタムリンクなど)を入れていく。

-その3-
外観>カスタマイズ>メニューのカラー設定で思い通りの色合いにできます。

④フッターメニュー(画面の下に固定表示)

スマートフォン用のフッターメニューとは、画面の一番下に固定される帯状のメニューのこと。

スマートフォン用フッターメニュー↑水色の部分がメニューです
(イラストの里・スマホ)

こちらのメニュー、実はデフォルトだとアイコンが表示されないのです。

アイコンの無いスマホフッターメニュー当ブログのスマホフッターメニュー。
アイコンがなく、帯の部分が狭い。

アイコンがないと、ボタン部分が薄いのでタッチしにくいのです。(私の指が太いだけか?)

なので、アイコンつきで設定するのがおすすめ。

アイコン付きのカスタマイズについては、スマホ用フッターメニューの追加。こちらの記事が詳しいので、是非参考にしてみてください。(外部リンク)

⑤スライドメニュー

こちらのスマホ用スライドメニューは、スマホ画面の右か左上に表示される“三”みたいなマークのメニューのことです。

スマホ用スライドメニュー

イラストの里のスライドメニューを開いたところ。
イラストの里では、PCのグローバルメニューと同じ内容で設定している。

メニューの作り方は
外観>メニュー>スマホ用スライドメニューor新しいメニューを作成しましょうを選択。

>メニューの位置で、スマートフォン用スライドメニューを選択。

スマホスライドメニューの設定画面

スライドメニューへ表示したい項目を選択していく。
PCのグローバルメニュー同様、親項目の下に副項目をドラック&ドロップすることで、ベローッと出てくるタイプにもできます。

スマホ用スライドメニュー

完成!!

⑥フッターを二列、もしくは三列にする

はじめにイラストの里のフッターをご覧いただきたい。

フッターを三列にカスタマイズしている図

画面向かって左にサイトロゴ。真ん中はサイト内検索。
右には2019年8月現在、ブログランキングに参加しているので、ぽちっとボタンを設置しています。

記事内やサイドバーには、ランキングボタンを設置する場所がなかったので、フッダーに置いてみた。
ランキングクリックされているかはさて置き。参加することが重要なのだ

設定は、カスタマイズ>ウィジェット>フッター右側ウィジェット(2列目)・(3列目)の項目があるので、該当のコンテンツを入れるだけ。簡単。

⑦SNSボタンを優しく、そして丸くする

シェアしてもらうためのSNSボタンは、デフォルトでは四角だが、設定ボタン一つで優しい色合いに、そして丸くできる。

丸くて優しいSNSシェアボタン

設定は、Affinger5管理>SNS>SNS設定の項目の中の

・SNSボタンのカラーを優しい色にする
・SNSボタンをシンプルにする
・SNSボタンを丸くする

この3か所へチェックを入れると丸くて優しい色のSNSシェアボタンが完成。
当ブログでも、優しい色合いを採用しています。(でも違いはあまり分からない)

全然関係ない話ですけど、関西の方ではお正月に丸い餅を食べるんだそうですね。
私は東北の出身なので、いつも長方形の切り餅でした。

丸い餅にする理由は諸説あるそうだけど「角がたたないようにという意味合いがあるんだよ。」と母から聞いた。

SNSボタンも丸く収まるよう丸い形にしてみてはいかがだろうか。

餅のイラスト

スポンサーリンク


サムネイル画像の設定

⑧アイキャッチ画像をすこし大きく表示

イラストの里では、コンテンツがイラストなので、アイキャッチのサムネイル画像が大きくなるように設定している。

Affinger5管理>デザイン>サムネイル画像の設定>サムネイル画像を大きく表示にチェックを入れる。

PCでは、大きくなったことがあまり分からないですが←
タブレットだと1.5倍くらい大きくなるそうなので、必要に応じてやってみてください。

ほかにも、サムネイル画像をポラロイド風にしたり、セロテープでとめるデザインにしたり、絶妙なカスタマイズもチェックボックスにチェックするだけで完了します。

サムネイル関連の設定画面

⑨アイキャッチ画像を設定しなかったときのデフォルト画像

サムネイル関連の設定ついでに、
アイキャッチ画像を設定しなかった場合、勝手に表示されるデフォルトの画像も登録しておける。

⑩スマホでヘッダー画像を表示しない

スマートフォン、タブレットのみでヘッダー画像を表示しないことも可能。

イラストの里では設定している。スマホで見る時なんとなく軽いほうがいいかと思っているからである。

Affinger5管理>ヘッダー>ヘッダー画像表示設定>スマホ・タブレット閲覧時は非表示にするにチェックを入れるだけ。

⑪ロゴ&ヘッダー画像をセンター寄せにする

Affinger5管理>ヘッダー>ヘッダー設定>ヘッダーを分割しない・ヘッダーをセンタリングする>両方にチェック。

この設定でサイトロゴも真ん中にくるよ。

⑫見出しデザイン無限に出来すぎ問題

もはや私の中で問題になるほど、見出しデザインのカスタマイズが無限にできますw

もちろん、カスタマイズが面倒な人はAffinger5>デザイン>カラーパターン・デザインパターンで好きなものを選択択すればこれだけでキレイな見出しやカラーが完成します。

無限カスタマイズの方法

外観>カスタマイズ>各テキストとhタグ(見出し)を選択すると、記事タイトル、h2、h3、h4...と項目が続く。

文字色、背景色、背景色(グラデーション上部)、ボーダー色、ボーダー色(サブ)とカラー設定を行うと、
11個もの基本スタイルの中からデザインを選べます。
(吹き出しデザインや、囲みデザイン、ストライプデザインなどなど。)

↓こちらが基本スタイルの一例

見出し左ラインデザイン
左ラインデザイン

見出し吹き出しデザイン吹き出しデザイン

囲みドットデザイン囲みドットデザイン

見出しストライプデザインストライプデザイン

他にも、見出しの角を丸くしたり(上の画像は角丸にしている)、テキストを中央寄せにしたり、まぁ本当にすごく細かくカスタマイズできます。

⑬見出しのデザイン同様サイドバーもカスタマイズできる

ちなみに、各テキストとhタグ(見出し)のページを下へスクロールして行くと、サイドバーの見出しもデザインできます。

サイドバーカスタマイズ画面の図

ウィジェットタイトルから好きな色・デザインにできる。

⑭記事一覧の区切りボーダーを破線にする

記事一覧の区切りボーダーとは、コレのこと↓

破線の説明画像

記事と記事の間にある線のことのようです。
この区切り線をふつうの線から破線(画像のような点々の線)にすることができる。

外観>カスタマイズ>基本エリア設定>記事一覧の区切りボーダー、ここで色を指定し、破線にしたい場合は>破線にするにチェックを入れるだけ。

イラストの里では、破線にしています…なんとなく。

⑮ファビコンを設定する

ファビコンとは、タブに出てくるサイトのマークみたいなものだ。
また、2019年5月から、Googleの検索結果ではファビコンが表示されるようになったので、設定しとくとよいと思います。

このブログのファビコンはこちら↓

このブログのファビコン

拡大↓

ファビコン拡大図

顔がつぶれている。

ファビコンの推奨サイズは16×16px、もしくは32×32pxの正方形。
画像を準備したらAffinger5管理>会話・ファビコン等からファビコン画像をアップロードできる。

その下にはapple-touch-icon画像を設定できる項目があり、こちらはブログをホーム画面に追加したときに表示されるアイコンです。

推奨サイズはpng形式の152px以上。
ホーム画面に追加したとき画像がないのも味気ないし、ファビコンを設定したついでにアップロードしてはどうだろうか。そして、ホーム画面に追加してもらえるブログになるように頑張ろう!私も頑張ります。

 

いかがだったでしょうか。

本当に細かすぎて伝わらねーよ!というものから、
意外と重要な部分のカスタマイズもあったと思います。

またAffinger5の細かすぎて伝わらないカスタマイズを発見したら、随時追加していきますね。

スポンサーリンク

-豆知識
-,

Copyright© ぽろみブログ , 2019 All Rights Reserved.