AFFINGER(アフィンガー )

【初心者でも簡単】AFFINGER5(アフィンガー 5)カスタマイズ方法

affingerカスタマイズ方法
悩む人

AFFINGER5(アフィンガー5)をおしゃれにカスタマイズしたいけど難しそうだなぁ。
どうやっておしゃれなデザインにするの?何から手を付ければ良いの?
マニュアル見てもいまいちよくわからないし、わかりやすく解説してほしいな。

こんな悩みに答えます。

本記事の内容

  • AFFINGER5(アフィンガー 5)カスタマイズ前にやるべきこと
  • トップページ(ヘッダー・メニューバー)のカスタマイズ方法
  • トップページ(サイドバー)のカスタマイズ方法
  • 見出しデザインのカスタマイズ方法
  • トップページをサイト型にする方法
  • まとめ:AFFINGER5(アフィンガー 5)は初心者でも簡単にカスタマイズが可能!

この記事を書いている僕は、AFIFINGER5(アフィンガー 5)を使用したブログを3つ運営しています。

HTMLやCSSの知識は皆無のため、導入した当初はどうやってカスタマイズすればいいのか全くわからず、
いろいろなサイトを調べまくり、あれこれ悩みながら20時間以上かけてやっと当サイトのデザインができました。

AFFINGER5(アフィンガー 5)は、細かいところまでカスタマイズできてしまうため、逆に不便だと言われることもります。それほどカスタマイズのレパートリーが豊富で、最初はめちゃくちゃ悩むと思います。

とはいえ、一度カスタマイズを経験すると、誰でも簡単に自分の好きなようにカスタマイズできるようになります。僕も最初は20時間かかりましたが、2つめ3つめのサイトは、初期の状態から3時間ほどでカスタマイズが終わりました。

カスタマイズの情報は、ネットで調べれば出てきますが、断片的であり、初期の状態からカスタマイズの手順を紹介したブログはどこにもありません。

そこで、僕の3つ目のブログをカスタマイズする時に、初期の状態からデザインが完成するまで、すべての手順をスクショで記録に残しました。

この記事では、そのスクショを使用して、カスタマイズ方法を紹介します。

ちなみにどんなカスタマイズを行ったかと言うと、こんな感じです↓
(※初期状態のスクショ画面が、僕のミスでモバイル仕様となっています。)

また、トップページを当ブログ↓のような『サイト型』とよばれている、「新着記事のスライド」や「カテゴリー別に記事を配置」する方法も紹介します。

これらのデザインは、AFFINGER5(アフィンガー 5)の中で最も一般的なデザインであり、この記事を読んでいるあなたも、見たことのあるデザインだと思います。

本記事では、AFFINGER5(アフィンガー5)をインストールした直後の初期状態から、完成形にするまでのカスタマイズ方法を、100枚近くの画像を使用して紹介しています。
この記事の内容を理解すれば、さきほど紹介したブログデザインと同じものが作れるようになり、さらに適宜自分の好みで調整していくことも可能になります。

かなりボリュームが多いので、
『ヘッダー』や『サイドバー』など、一部のカスタマイズ方法だけが知りたい!という方は、目次より欲しい情報だけつまみ食いしてください。

それではカスタマイズしていきましょう!

AFFINGER5(アフィンガー 5)カスタマイズ前にやるべきこと

カスタマイズに入る前に、やるべきことを紹介しておきます。
やっていない項目があれば、先にやっておきましょう。

最低限の初期設定

  • パーマリンクの設定
  • Googleアナリティクス・サーチコンソールとの連携
  • 最低限のプラグインの導入(特にclassic editor)

これらの設定が終わっていないor何それ?と言う方は、先に済ましておきましょう。
別記事にて紹介していますので参考にしてみてください。

関連記事
AFFINGER5 初期設定
【初心者でも簡単】AFFINGER5(アフィンガー 5)の初期設定

続きを見る

デザインの初期設定

デザインの初期値の設定方法を紹介します。

『AFFINGER5管理』▶︎『AFFINGER5管理』

『はじめに』▶︎『保存』を1回クリック

以上で完了です!(初期状態のグレー基調から、水色基調に変わったはずです)

全体の基本色・基本デザイン

ブログデザインの基本をきめます。

『AFFINGER5管理』▶︎『AFFINGER5管理』

『デザイン』▶︎サイト全体の設定

カラーパターン(ブログの基本色)と、デザインパターン(全体的なデザイン)を選びましょう。といっても、どれを選べば良いのかわからないと思います。

別画面で自分のブログ画面を開き、カラーパターンやデザインパターンを変えながらどれがいいのかを決めましょう。

トップページ(ヘッダー・メニューバー)のカスタマイズ方法

まずはトップページのヘッダーとメニューバーのカスタマイズを行います。

この章の内容

  • ヘッダーのブログタイトルのカスタマイズ
  • ヘッダー画像の挿入方法
  • (応用)ヘッダースライドショーの設定
  • メニューバーの設定・カスタマイズ
  • ブログタイトルとカテゴリーメニューを中央にする方法
  • ヘッダーカードの設定

ヘッダーのブログタイトルのカスタマイズ

青い部分をカスタマイズしていていきます。

『外観』▶︎『カスタマイズ』

『サイト基本情報』をクリック

タイトルとキャッチフレーズを入力

ヘッダー画像の挿入方法

青い部分のヘッダー画像の設定方法を紹介します。
ヘッダー画像は不要と言う方は、この章は飛ばしてください。

『外観』▶︎『カスタマイズ』

『ヘッダー画像』

『新規画像を追加』

画像を選択▶︎選択して切り抜く

好きな高さにトリミング▶︎画像の切り抜き

ヘッダー画像設定完了

(応用)ヘッダースライドショーの設定

ヘッダー画像エリアに、記事のスライドショーを挿入する方法を簡単に紹介します。

『AFFINGER5管理』▶︎『ヘッダー』▶︎『記事スライドショー設定』で「ヘッダーに記事をスライドショーで表示する」にチェックするだけです。

こちらのブログがわかりやすかったので、興味がある方はご覧ください。

メニューバーの設定・カスタマイズ

青い部分のメニューバーにカテゴリーを設置する方法を紹介します。

『投稿』▶︎『カテゴリー』

カテゴリーの追加

カテゴリーを作成します。
カテゴリー名、スラッグを入力すると、右側に反映されます。
必要なカテゴリーをすべて追加しましょう。
(当ブログでいうと、『玩具・ガチャガチャ』『動画配信サービス』など5つ設定しています)

『外観』▶︎『メニュー』

メニューを作成

ここでのメニューとは、カテゴリーグループのことです。
よくわからない方は、とりあえずmenu1として『メニューを作成』をクリックすればOKです。

『カテゴリー』を選択

『カテゴリー』をクリックし、先ほど追加したカテゴリーにすべてチェックを入れて『メニューに追加』をクリック

画像の通りチェックをつけて『メニューを保存』をクリック

ブログタイトルとカテゴリーメニューを中央にする方法

左詰めのままで良いと言う方は次の章へいきましょう。

『AFFINGER5』▶︎『AFFINGER5』

まずはタイトルを中央にしましょう。

『ヘッダー』

Hヘッダー設定

番号の通り、①にチェックを入れてsaveし、その後③にチェックを入れてもう一度saveします。

『外観』▶︎『カスタマイズ』

次にカテゴリーメニューを中央に寄せます

[+]メニューカラーの設定

PCヘッダーメニュー

『メニューをセンター寄せにする』にチェック

保存して終了です。

ヘッダーカードの設定

青色で囲っているヘッダーカードを設定しましょう。AFFINGER5の代名詞的なデザインなので是非活用しましょう。おすすめ記事をここに設定している人が多いです。

『AFFINGER管理』▶︎『AFFINGER管理』

『おすすめ記事一覧』

『おすすめヘッダーカード』

ヘッダーカードは4つまで設定が可能です。背景画像、テキスト、リンク先URLを設定しましょう。

トップページ(サイドバー)のカスタマイズ方法

次にトップページのサイドバーのカスタマイズを行います。
少し難しいかもしれませんが、深く考えずに画像の通り進めればOKです。

この章の内容

  • サイドバーに表示する項目の設定
  • プロフィールを編集

サイドバーに表示する項目の設定

サイドバーは、デフォルトでいろいろな項目が表示されていますが、必要なものだけ取り入れましょう。

『AFFINGER5』管理▶︎『ウィジェット』

『サイドバーウィジェット』をクリック

必要な情報を取り込む

イメージとしては、袋(サイドバーウィジェット)の中に、サイドバーに表示させたい項目(青で囲ったところ)を選んで取り込むというイメージです。

こちらのサイトでわかりやすく説明されていましたので、詳しく知りたいって方はどうぞ。

画像の通り、4つの項目をドラッグアンドドロップで取り込んでください。(あとで増やしたり減らしたりしてOK)

サイドバーを確認

画像の通りなっているかどうか確かめてください。
先ほど取り込んだ4つが表示されています。

しかし、一番上に記事が表示されているかと思います。デフォルトではここに新着記事が並ぶ設定になっていますが、邪魔なので消しましょう。

『AFFINGER5管理』▶︎『AFFINGER5管理』

『トップページ』

『トップページのサイドバー新着記事一覧を非表示にする』にチェックを入れる

以上で消えるはずです。

プロフィールを編集

青枠で囲ったプロフィールを編集しましょう。

『ユーザー』▶︎『あなたのプロフィール』

名前・説明文・アイコン画像を設定

名前・説明文・アイコン画像を設定しましょう。

アイコン画像については、Gravatarにて作成します。詳しい設定方法はこちらをご覧ください。

プロフィールの確認

それっぽくなっていますが、プロフィールカードというデザインに変更しましょう。

『外観』▶︎『カスタマイズ』

[+]オプションカラー

『サイト管理者紹介』

『プロフィールカードに変更』にチェック

ヘッダー画像を追加

プロフィールカードに背景画像を設定できます。

見出しデザインのカスタマイズ方法

記事の見出しデザインをカスタマイズしましょう。

この章の内容

  • H2タグ〜H4タグのデザイン編集
  • おまけ:カテゴリータグのデザイン編集

H2タグ〜H4タグのデザイン編集

H2タグからH4タグのデザインをカスタマイズしていきます。

『外観』▶︎『カスタマイズ』

[+]各テキストとhタグ(見出し)

右側のプレビュー画面は、デフォルトの状態だとトップページになっています。
タグのデザインを確認しながら編集した方がいいので、記事の画面を開いておきます。
※あらかじめダミー記事を作成し、画像のようにH2〜H4タグまで書いておきましょう。

『H2タグ』

色の変更

赤枠内の項目で、タグの文字色や背景色の変更ができます。

h2タグの基本スタイル

ここでタグのデザインが変更できます。
いろいろチェックを入れてみて好みのタグを探しましょう。

この作業を H3タグ、H4タグでも行います。

おまけ:カテゴリータグのデザイン編集

記事の上に表示される、カテゴリー名が書かれたタグマークの編集です。
めちゃくちゃ細かいところですが、おまけとして紹介しておきます。

『カテゴリー』

背景色と文字色、形状を編集

トップページをサイト型にする方法

当ブログのような、『サイト型』のトップページを作成する方法を紹介します。
『サイト型』にするためには、固定ページを作り、その固定ページをトップページに設定します。

この章の内容

  • 記事スライドショーの設定
  • カテゴリー別記事(ブログカードとバナー)を設定
  • 固定ページをトップページに反映

記事スライドショーの設定

まずは、このようなスライドショーから作成していきます。

『固定ページ』▶︎『固定ページ一覧』

右上のメニュー▶︎『旧エディターに切り替え』

デフォルトだとブロックエディターとなっているため、クラシックエディターに変更します。
※『旧エディターに切り替え』という項目がない場合は、 classic editorというプラグインをインストールして有効化しましょう。

クラシックエディターに切り替わります

『タグ』▶︎『記事一覧』▶︎『カテゴリー一覧(スライドショー)』

新着記事とおすすめ記事はH3タグで先に書いておきましょう。
そして、新着記事の下に『カテゴリー一覧(スライドショー)』のコードを挿入します。

コードを編集

スライドショーには、任意のカテゴリーだけの新着記事を挿入できます。

  • ①cat=" "にカテゴリーIDを入力
  • ②page=" " にページ数を入力

カテゴリーIDは、『投稿』▶︎『カテゴリー』より確認できます。

カテゴリー別記事(ブログカードとバナー)を設定

画像のように、カテゴリー名のバナーボックスと、その下にブログカードを配置していきます。

『タグ』▶︎『レイアウト』▶︎『PCとTab』▶︎『左右50%』

オススメ記事の下に2カラムの挿入をします。

2カラムボックス

このように黄色と青のボックスが出てきます。

『タグ』▶︎『ボックスデザイン』▶︎『バナー風ボックス』▶︎『基本』

まずはカテゴリー名のバナーボックスを作成します。

コードの編集

黄色と青両方に挿入します。

  • ①title=" "にカテゴリー名を入力
  • ②image=" "にバナーボックス背景画像のURLを挿入

②の画像URLを挿入すると、画像が表示されてしまいますので、control+zを押すと画像が消えてURLだけになります。

画像URLは、『メディア』▶︎『ライブラリ』で画像を選択すると、確認できます。

バナーができました

次はブログカードを挿入します。

『カード』をクリックしてコードを表示させる

表示させたい記事IDの入力

記事IDは、『投稿一覧』から確認できます。

3つずつブログカードを作成し、記事IDの入力が完了

プレビューで確認

ブログカードに『続きを見る』が表示されるとスペースを取るので削除しましょう。
また、ボックスの大きさがばらついているので、ボックスの大きさも揃えます。

画像では表示されてませんが、デフォルト状態だと記事の説明文も表示されていると思います。スペースを取るのでそれも削除します。

『AFFINGER5管理』▶︎『AFFINGER5管理』

次にブログカード内の説明文を削除します。

『デザイン』

PC閲覧時の『ブログカード』及び・・・・非表示にする にチェック

ブログカードの高さを揃える+続きを見る の削除

  • height=" " ブログカードの高さを170にする(デザインをみながら数値は調整)
  • readmore=" " on→offにする

ブログカードの大きさがそろいました

『このテキストは最後に消してください(50%)』と言う文言は不要

これは削除してOKです

(補足)カテゴリー下の『記事一覧』を作成

欲しい方もいるかと思いますので、一応説明しておきます。

固定ページ編集画面にて『タグ』▶︎『カスタムボタン』▶︎『ノーマル』で任意のボタンを選べばOKです。
いろいろなデザインを選べますので、詳しくはこちらを参考にしてみてください。

固定ページをトップページに反映

作成した固定ページをトップページに設定します。

作成した固定ページにタイトルを付けて公開する

先ほど作成した固定ページにタイトルをつけて公開します。
(あとで非表示にできるので、適当でOK)

タイトルを非表示にする

タイトルを表示させたい人は飛ばしてください。

まず、プラグイン Hide Page And Post Title をインストールしておきます。

有効化すると、編集画面に以下のようにHide Page And Post Titleというボックスが出てくるので、チェックを付けるとタイトルを非表示にできます。

『外観』▶︎『カスタマイズ』

『ホームページ設定』

作成した固定ページのタイトルを選択

ここには、作成した固定ページを公開しないと表示されません。
見当たらない場合は公開されているか確認しましょう。

以上で設定は終わりです。

まとめ:AFFINGER5(アフィンガー 5)は初心者でも簡単にカスタマイズが可能!

今回は、AFFINGER5(アフィンガー 5)を0からカスタマイズする方法を紹介しました。

もし、他の人のデザインを参考にしたいなと思った場合でも、本記事の内容通りカスタマイズすれば、それっぽく仕上がるはずです。

まだAFFINGER5(アフィンガー 5)を導入していない方は、別記事にてレビューも紹介していますので是非ご覧下さい。

関連記事
AFFINGER5(アフィンガー5)評判
【初心者でも簡単】お洒落なブログへ大変身!AFFINGER5(アフィンガー5)の評判と体験談を紹介

続きを見る

-AFFINGER(アフィンガー )

Copyright© Cocomaroom , 2020 All Rights Reserved Powered by AFFINGER5.