2019年10月21日このブログでは、WordPressテーマ「WING(AFFINGER)」を使っています。私の運営するフリー素材サイト「イラストの里」でもAffinger5を使っています。実際にカスタマイズしてみて思うのは、めっちゃ細かく色々カスタマイズできる!ていうか、細かすぎて伝わらないかもしれないところまでめっちゃカスタマイズできすぎ!る!...ということです。いうわけで、この記事では、Affinger5の細かなカスタマイズについてご紹介していこうと思います。正直なところ、細かすぎるのでカスタマイズしても読者の方には分からないかもしれません。分からないかもしれませんが、細部にこだわりたいのがアルチザンの心(職人魂)というもの。Affinger5を使っていて、こんな風にカスタマイズしたいんだけど、どうすれば分からないー!という方も、良かったら読んでください。この先からは当ブログとイラストの里で、実際にカスタマイズを行ってみた画像を使って解説していきます!見やすく案内できる!メニューのカスタマイズブログの回遊率をUPさせるためにメニューをカスタマイズするのが効果的。PCのグローバルメニューとスマートフォンのメニューは目につきやすい場所にあるので、見てもらいたい重要なページをさくっと設定してみよう。【PC】グローバルメニューのカスタマイズ1グローバルメニューに階層をつけるパソコンでカーソルを合わせると、下に「ベロ~ッ」と出てくるのが、グローバルメニューの階層。イラストの里は、親カテゴリが15項目ほどあるので、15項目がベロ~ッと出てくるように設定しています。設定は、外観>メニューでグローバルメニュー(ヘッダーメニュー)を選択。メニューを作成していない場合、案内したい項目を追加していきます。「カテゴリ一覧」という親項目の下に入れたい副項目(ここでは季節の行事・イベント以下の項目)を、親項目の中にちょっとだけドラック&ドロップさせると段落ができます。これで、ベロ~ッメニューの完成。2グローバルメニューをセンター寄せにするグローバルメニューに表示する項目が少ないと、すごく左に寄ってしまって気になるわ!という方はグローバルメニューをボタン一つでセンタリング(中央寄せ)にすることが可能です。外観>カスタマイズ>メニューのカラー設定>ヘッダーメニュー>メニューをセンター寄せにするにチェックを入れる。真ん中に寄りました!【スマホ】メニューのカスタマイズ3ミドルメニュー(ロゴの下に表示)こちらはスマートフォンでヘッダー付近に表示されるメニュー。↓このメニューがあると見やすいよ。設定は、おおまかに3段階必要です。-その1-はじめにAffinger5管理>メニュー>スマホ用スライドメニューの項目の中の「スマホ用ミドルメニューを表示する」にチェックを入れる。-その2-外観>メニューからメニューを新規作成する。追加したい項目(カテゴリーやカスタムリンクなど)を入れていく。-その3-外観>カスタマイズ>メニューのカラー設定で思い通りの色合いにできます。4フッターメニュー(画面の下に固定表示)スマートフォン用のフッターメニューとは、画面の一番下に固定される帯状のメニューのこと。↑水色の部分がメニューです(イラストの里・スマホ)こちらのメニュー、実はデフォルトだとアイコンが表示されないのです。当ブログのスマホフッターメニュー。アイコンがなく、帯の部分が狭い。アイコンがないと、ボタン部分が薄いのでタッチしにくいのです。(私の指が太いだけか?)なので、アイコンつきで設定するのがおすすめ。アイコン付きのカスタマイズについては、スマホ用フッターメニューの追加。こちらの記事が詳しいので、是非参考にしてみてください。(外部リンク)5スライドメニューこちらのスマホ用スライドメニューは、スマホ画面の右か左上に表示される“三”みたいなマークのメニューのことです。イラストの里のスライドメニューを開いたところ。イラストの里では、PCのグローバルメニューと同じ内容で設定している。メニューの作り方は外観>メニュー>スマホ用スライドメニューor新しいメニューを作成しましょうを選択。>メニューの位置で、スマートフォン用スライドメニューを選択。スライドメニューへ表示したい項目を選択していく。PCのグローバルメニュー同様、親項目の下に副項目をドラック&ドロップすることで、ベローッと出てくるタイプにもできます。完成!!6フッターを二列、もしくは三列にするはじめにイラストの里のフッターをご覧いただきたい。画面向かって左にサイトロゴ。真ん中はサイト内検索。右には2019年8月現在、ブログランキングに参加しているので、ぽちっとボタンを設置しています。記事内やサイドバーには、ランキングボタンを設置する場所がなかったので、フッダーに置いてみた。ランキングクリックされているかはさて置き。参加することが重要なのだ。設定は、カスタマイズ>ウィジェット>フッター右側ウィジェット(2列目)・(3列目)の項目があるので、該当のコンテンツを入れるだけ。7SNSボタンを優しく、そして丸くするシェアしてもらうためのSNSボタンは、デフォルトでは四角だが、設定ボタン一つで優しい色合いに、そして丸くできる。設定は、Affinger5管理>SNS>SNS設定の項目の中の・SNSボタンのカラーを優しい色にする・SNSボタンをシンプルにする・SNSボタンを丸くするこの3か所へチェックを入れると丸くて優しい色のSNSシェアボタンが完成。当ブログでも、優しい色合いを採用しています。(でも違いはあまり分からない)全然関係ない話ですけど、関西の方ではお正月に丸い餅を食べるんだそうですね。私は東北の出身なので、いつも長方形の切り餅でした。丸い餅にする理由は諸説あるそうだけど「角がたたないようにという意味合いがあるんだよ。SNSボタンも丸く収まるよう丸い形にしてみてはいかがだろうか。スポンサーリンクサムネイル画像の設定8アイキャッチ画像をすこし大きく表示イラストの里では、コンテンツがイラストなので、アイキャッチのサムネイル画像が大きくなるように設定している。Affinger5管理>デザイン>サムネイル画像の設定>サムネイル画像を大きく表示にチェックを入れる。PCでは、大きくなったことがあまり分からないですが←タブレットだと1.5倍くらい大きくなるそうなので、必要に応じてやってみてください。ほかにも、サムネイル画像をポラロイド風にしたり、セロテープでとめるデザインにしたり、絶妙なカスタマイズもチェックボックスにチェックするだけで完了します。9アイキャッチ画像を設定しなかったときのデフォルト画像サムネイル関連の設定ついでに、アイキャッチ画像を設定しなかった場合、勝手に表示されるデフォルトの画像も登録しておける。10スマホでヘッダー画像を表示しないスマートフォン、タブレットのみでヘッダー画像を表示しないことも可能。イラストの里では設定している。スマホで見る時なんとなく軽いほうがいいかと思っているからである。Affinger5管理>ヘッダー>ヘッダー画像表示設定>スマホ・タブレット閲覧時は非表示にするにチェックを入れるだけ。11ロゴ&ヘッダー画像をセンター寄せにするAffinger5管理>ヘッダー>ヘッダー設定>ヘッダーを分割しない・ヘッダーをセンタリングする>両方にチェック。この設定でサイトロゴも真ん中にくるよ。12見出しデザイン無限に出来すぎ問題もはや私の中で問題になるほど、見出しデザインのカスタマイズが無限にできますwもちろん、カスタマイズが面倒な人はAffinger5>デザイン>カラーパターン・デザインパターンで好きなものを選択択すればこれだけでキレイな見出しやカラーが完成します。(グラデーション上部)、ボーダー色、ボーダー色(サブ)とカラー設定を行うと、11個もの基本スタイルの中からデザインを選べます。(吹き出しデザインや、囲みデザイン、ストライプデザインなどなど。左ラインデザイン吹き出しデザイン囲みドットデザインストライプデザイン他にも、見出しの角を丸くしたり(上の画像は角丸にしている)、テキストを中央寄せにしたり、まぁ本当にすごく細かくカスタマイズできます。13見出しのデザイン同様サイドバーもカスタマイズできるちなみに、各テキストとhタグ(見出し)のページを下へスクロールして行くと、サイドバーの見出しもデザインできます。ウィジェットタイトルから好きな色・デザインにできる。記事と記事の間にある線のことのようです。この区切り線をふつうの線から破線(画像のような点々の線)にすることができる。外観>カスタマイズ>基本エリア設定>記事一覧の区切りボーダー、ここで色を指定し、破線にしたい場合は>破線にするにチェックを入れるだけ。イラストの里では、破線にしています...なんとなく。15ファビコンを設定するファビコンとは、タブに出てくるサイトのマークみたいなものだ。2019年5月から、Googleの検索結果ではファビコンが表示されるようになったので、設定しとくとよいと思います。ファビコンの推奨サイズは16×16px、もしくは32×32pxの正方形。画像を準備したらAffinger5管理>会話・ファビコン等からファビコン画像をアップロードできる。その下にはapple-touch-icon画像を設定できる項目があり、こちらはブログをホーム画面に追加したときに表示されるアイコンです。推奨サイズはpng形式の152px以上。ホーム画面に追加したとき画像がないのも味気ないし、ファビコンを設定したついでにアップロードしてはどうだろうか。ホーム画面に追加してもらえるブログになるように頑張ろう!私も頑張ります。いかがだったでしょうか。意外と重要な部分のカスタマイズもあったと思います。Affinger5の細かすぎて伝わらないカスタマイズを発見したら、随時追加していきますね。青石ぽろみイラストレーターです。最近の投稿2019年もお世話になりました!HIPHOPダンスを習い始めた。ザ・ファブルの最終話はどうなるのか──ザ・ファブルがおもしろい!いい夢をみた。姉妹サイト商用利用ができる可愛い手書きイラストのフリー素材サイトを運営しています。