AFFINGER6を購入しましたがデザインや装飾のカスタマイズ方法が知りたいです！
AFFINGER6の使用歴が一年以上の僕がこのテーマの見やすいカスタマイズ方法を解説します。
（※購入日2022-07-06）
簡単に解説出来るものはこの記事で解説しますが、細かな設定が必要な部分は別記事にて説明を行ってます。
僕のブログにおける設定を中心に紹介しています。参考にしてみてください。
- AFFINGER6の概要
- 当ブログで採用しているカスタマイズ方法
- AFFINGER6のデザイン設定方法まとめ
ブログや文章は読まれて初めて意味を成します。
読まれない文章や記事をたくさん書いてもユーザーの離脱率が上昇し滞在時間が短くなってしまいます。
SEOの観点からもよろしくない結果を招く為、対策が必要です。
文章が読まれないという悩みは僕も抱えていました…
対策法としてデザインテーマを変更すると一気に解決し、デザインや色使いをブログ記事に取り入れることで読者が必要な情報を見つけやすくなり、結果的にと大きく滞在時間も改善します。
AFFINGER6って何？【WordPressブログのデザインテーマ】
AFFNGER6とはサイト制作・管理ツールのWordPressで使われるデザインテーマでイメージしやすいのは「スキン」や「着せ替え」と呼ばれるものですね。
このブログもAFFNGER6を使っていますよ！
特徴や導入方法について
AFFNGER6の特徴として次があげらます。
- 有料のテーマである
- カスタマイズすることでプロ仕様に出来る
- 拡張プラグインが優秀
- アップデートやサポート体制が整っている
WordPressのデザインテーマには無料と有料の両方があり、中でも有料のものになります。
インストール時も無料とは手順が少し異なり、AFFNGER6公式サイトでファイルをダウンロードしインストールします。
有料だけあってやはりデザイン性やサポート体制は充実している印象でした。
導入方法の詳しいやり方は次の記事をご覧ください。
>>【AFFINGER6】アフィンガー６のダウンロードとインストール方法を紹介
AFFINGER6のカスタマイズはプログラミング必要なし
ブログの更新やデザインの変更のたびにプログラミングを行っていると、コンテンツそのものに割く時間が減ってしまいます。
ですが、デザインの変更はマウスをクリックするだけで可能です。
【AFFINGER6】カスタマイズ：ホーム画面
ブログサイトのメインになる部分「ホーム画面」のデザインになります。
ここで読者がどの記事を選んで読むのかを判断する部分になる為、見やすい色使いや区分けなどが求められます。
ヘッダーエリアのカスタマイズ
ここで表示されている要素は下記の三つですね。
- サイトロゴ/タイトル
- メニュー
- ヘッダーカード
それぞれクリックすることでカテゴリごとの記事を表示したり、特定のページに飛ばすことが出来ます。
次の記事を参考に設定してみてください。ユーザーのサイトの滞在時間がのびるとおもいます。
トップページのカスタマイズ
ホーム画面に訪れた人の殆どがここに表示されている記事をクリックしています
ポイントはジャンルごとにおススメ記事を視覚的にわからりやすく表示してあげることですね。
>>AFFINGER6トップページのデザインカスタマイズ方法
【AFFINGER6】カスタマイズ：サイドバー
ここではメインコンテンツの横に配置されているサイドバーの要素の編集方法について触れていきます。
基本的に常に表示されているコンテンツになる為、サイト運営者情報や検索ボックスなど配置することが多いです。
プロフィールカードのカスタマイズ方法
プロフィールカードはホーム画面だけでなく、記事を読んでいる時も表示されている要素になります。
この記事を書いた人がどういった人なのかは記事の信頼性において非常に重要な要素になります。
その為、編集方法やデザインの方法を知っておきましょう。
サイドバーのおすすめ記事一覧のカスタマイズ方法
ここでは「よく読まれている記事」として表記していますがここの名前は任意で自由にカスタマイズ可能です。
よく読まれている記事というのは客観的な視点での評価になる為、読者にとっては見る記事の指標にしやすいです。
（※自分で選んだ記事を表示する仕組み）
僕の場合は定期的に表示記事を更新しています
プロフィールカードとサイドバーのカスタマイズ方法をまとめた記事を紹介しますね。
【AFFINGER6】カスタマイズ：フォント
記事の滞在時間を伸ばすためには、文章の読みやすさは重要になります。
フォントや文字の行間を設定する前は滞在時間が数秒でしたが、リライトも兼ねて設定を行うことで記事の滞在時間が一気に伸びました
これから紹介する設定は当ブログで採用している設定になります。
フォントサイズと文章の行間
当ブログで設定している細かい数字です。
PCのみの設定で「Pタグ 16px」にしています。Webサイトでは8の倍数を目安にピクセルを調整すると見栄えが良くなります。
文章下の余白の間隔は「80px」で統一しています。
フォントカラーのカスタマイズ
当ブログでは「濃いめのグレー（#515151）」を起用しています。
これはタイトルや、文字すべてに設定しています。
ありがちなのが「黒（#000000）」にしてしまう人がいますが、文字の印象が強くなりすぎてブログ記事向きではありません。
webサイトやデザインでも文字色を黒（#000000）にすることは少ないです
【AFFINGER6】カスタマイズ：その他
また、その他にも後回しになりがちな内容を紹介しています。
- プラグイン
- ファビコン
プラグインは意外とこれだけ入れておけばいいというものが把握できてなかったり、ファビコンは後回しにしがちになります。時間があれば設定しましょう。
AFFINGER6で使用するプラグイン
AFFINGER6でブログを運営する上で必要になってくるプラグインを紹介します。
また、無料テーマにおいてももちろん使用可能なプラグインになっていますのでぜひ参考にしてください。
>>【WordPressプラグイン】初心者でもOKおすすめプラグイン一覧と導入方法
AFFINGER6専用の目次ブラグインに関してはこちら、
ファビコンのカスタマイズ
読者がGoogle検索をしたときや、ブラウザの上部に表示されるアイコン画像の事をファビコン（favicon）と呼びます。
ユーザーがブログ記事をブックマークしたときなどにも表示されるため印象に残りやすい
次の記事で設定方法を紹介しています。
>>AFFINGER6のファビコン設定方法【ブラウザタブアイコン】
まとめ｜AFFINGER6をインストール後はカスタマイズしてプロ仕様に
僕自身有料テーマを導入後は記事の投稿頻度も上がり、ページのアクセス数も伸びる傾向になりました。
初期投資のみでデザインを大きく変更可能だったり、ユーザーが記事を読みやすくなる装飾なども使用可能なので今後もこのテーマを使用していこうと考えています。
もし気になる方は実際に僕が使ったときの感想や価格についてレビューした記事があります。参考にしてみてください。
>>【AFFINGER6】アフィンガー6を実際に使ってみた感想とレビュー
今回は以上です。
