ブログを始めたい

アフィンガー5のトップページをカスタマイズ【michiブログ風】

 

※現行テーマAFFINGER6のトップページをカスタマイズしたい方はアフィンガー6のトップページカスタマイズ方法を紹介【michi風】をご覧ください。

 

 

本記事にピッタリな方

  • AFFINGER5(アフィンガー5)を利用している
  • michiブログ風のトップページにしたい
  • シンプルが好き

 

さるくん

トップページを見やすくしたいです!

 

記事の通りにやっていただければ、誰でもかんたんにできますよ!

michi

 

※有料テーマ『AFFINGER5』でのカスタマイズです。

購入前の方はAFFINGER5と無料テーマの違いを1年使用している私が解説!をご覧ください。

 

アフィンガーのトップページをmichiブログ風にする

アフィンガーのトップページをmichiブログ風にする

 

早速やっていきましょう。

 

項目は準備と下記4項目です。

  • 準備
  1. ヘッダーカードの設置
  2. おすすめ記事の設置
  3. 新着記事の設置
  4. サイドバーの設置

michiブログトップページデザイン

 

順に説明していきますね。

 

準備

まずはアフィンガーをカスタマイズするための準備です。

 

具体的には下記5つです。

  1. 表示設定を確認
  2. プラグイン『Advanced Editor Tools』を導入
  3. FontAwesomeを導入
  4. トップページ用の固定ページ作成
  5. ヘッダー画像を消去
  6. 追加CSSの入力

 

順に説明しますね。

 

ステップ1:表示設定を確認

ダッシュボード→『設定』→『表示設定』内の『ホームページの表示』を最新の投稿にしましょう。

ホームページの表示設定

 

デフォルトなので何もいじっていなければそのままでOKです。

 

ステップ2:プラグイン『Advanced Editor Tools』を入れる。

次はプラグイン『Advanced Editor Tools』を入れましょう。

※すでに入れている方はステップ3に進んでくださいね。

Advanced Editor Toolsをインストール、有効化

 

本プラグインは記事装飾を拡張する機能でして

 

具体的には

  • おすすめ記事のタイトル
  • 新着記事のタイトル

の拡大と装飾に使います。

上記はデフォルトではできません。

 

有効化したら設定で『スタイル』を入れておきましょう。

Advanced Editor Tools設定画面

 

以上でOKです。

 

ステップ3:FontAwesomeを導入

次はFontAwesomeを入れましょう。

 

具体的には下記の部分で使います。

FontAwesomeの導入

 

赤枠内のようなアイコンを入れられますよ。

 

FontAwesomeの設定はWordPressでメニュー中にアイコンを表示させる方法【簡単】をご覧くださいね。

 

ココに注意

最新のFontAwesomeを使うとプラグインの競合等の関係で、アフィンガーデフォルトのアイコンが一部表示されなくなる場合があります。そのときは旧タイプのFontAwesome4.7.0バージョンを使いましょう。

旧タイプはアフィンガーに組み込まれているので、リンク先の記事でFontAwesomeの基本設定をする必要はありません。

そのまま先に進んでくださいね。

 

アイコン不要の方は飛ばしてもOKです。
michi

 

ステップ4:トップページ用の固定ページ作成

次はトップページ用の固定ページを作成しましょう。

 

ダッシュボード内→『固定ページ』をクリックしてくださいね。

 

①固定ページを新規追加。

トップページ用の固定ページを作成

  1. タイトルを入力→『トップページ』とかでOK。
  2. パーマリンクをアルファベットに直します。
  3. 完了したら『公開』します。

 

②固定ページIDをメモりましょう。

固定ページIDをメモ

 

③ダッシュボードに戻り→『AFFINGER5管理』→『トップページ』をクリックしましょう。

固定ページIDを入力

  1. 『トップページに固定記事を挿入』に前項でメモった固定ページIDを入力する。

 

最後に『保存』をクリックしましょう。
michi

 

ステップ5:ヘッダー画像を消去

好みの問題ですが、ヘッダー画像が不要な場合は消去しましょう。

ちなみにデフォルトだと下記です。

アフィンガー5のデフォルトヘッダー画像

 

消す場合は

①ダッシュボードに戻り『外観』→『カスタマイズ』をクリック。

ヘッダー画像カスタマイズ画面移行

 

②『ヘッダー画像』をクリック。

ヘッダー画像をクリック

 

③『画像を非表示』をクリック。

ヘッダー画像を非表示

 

以上でOKです。

 

ステップ6:追加CSSの入力

装飾のためにCSSを追加しましょう。

 

①ダッシュボード→外観→カスタマイズをクリック。

 

②追加CSSをクリック。

 

下記のCSSをコピペしてください。

 

.title-border {
display: flex;
align-items: center;
margin-bottom:10px;
}
.title-border:before,
.title-border:after {
border-top: 3px solid #494d6d;
content: "";
flex-grow: 1;
}
.title-border:before {
margin-right: 1rem;
}
.title-border:after {
margin-left: 1rem;
}

 

これでオッケーです。

 

 

①ヘッダーカードの設置

次はヘッダーカードの設置です。

具体的にはココですね。

ヘッダーカードの位置

アフィンガーの設定ですぐにできますよ。

 

ダッシュボード内→『AFFINGER5管理』→『おすすめ記事一覧』をクリックしてください。

ヘッダーカード設定①

ヘッダーカード設定②

  1. 画像のURL
  2. テキスト(推奨は全角11文字、半角22文字以内)
  3. リンク先URL
  4. 表示のOFF(推奨はデフォルト)
  5. デザイン

 

テキストは長すぎると2行になって間延びするので短くまとめましょう。

 

デザインはこだわりが無ければデフォルトでOKです。

 

最後にsaveを忘れないでくださいね。
michi

 

②おすすめ記事の設置

次は『おすすめ記事』と書いてある部分ですね(ヘッダーカード下)

 

ココです。

ヘッダーカード下『おすすめ記事』

※画像のアイコンはFontAwesomeの最新版を設定している必要が有ります。

 

ステップは2つ。

  1. タイトルを表示
  2. 記事一覧を表示

 

この部分はグローバルメニュー、ヘッダーカードと並んで最初に目につく場所です。

 

なので『コレを見て欲しい!という記事を設置してくださいね。

 

ではやり方を説明します。

ダッシュボード内→『AFFINGER5管理』→『トップページ』をクリックしましょう。

 

ちょっと下がると下記画面が現れます。

挿入コンテンツ

 

矢印の部分を下に伸ばせば見やすくなりますよ。
michi

 

ステップ1:タイトルを表示

そのまま先に進みますね。

 

①枠内をコピーしてください。

Fontawesome5以上のバージョン

<div class="title-border"><i class="fas fa-bullhorn" style="color: #7b7b7b;"></i><span style="font-size: 120%; color: #7b7b7b;"> <strong> おすすめ記事</strong></span></div>

 

FontAwesome4.7.0

<div class="title-border"><strong><i class="fa fa-bullhorn fa-lg" style="color: #7b7b7b;" aria-hidden="true"></i><span style="font-size: 120%; color: #7b7b7b;"> おすすめ記事</span></strong></div>

※基本設定しなくても上記コードを入れれば使えるので、こちらがおすすめです。

 

②『テキストモード』に変えてペーストしましょう。

テキストモードでペースト

 

『ビジュアル』モードに戻して下記のようになっていればOKです。

おすすめ記事の表示

 

ステップ2:記事一覧の枠を作成

続いて記事一覧を表示させましょう。

 

具体的には下記の部分ですね。

 

やり方は先ほど作ったタイトルの下に、下記をコピペするのが一番手っ取り早いです。

<div class="clearfix responbox50 smart50">
<div class="lbox">
<p>(st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type="")</p>
</div>
<div class="rbox">
<p>(st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type="")</p>
</div>
</div>

 

※表示の関係上、赤線部分のカッコを変えています。

変更ポイント

それぞれ

①『[』

②『]』

に直してください。

 

自力で作る場合

①『タグ』→『レイアウト』→『全サイズ』→『50%』をクリック。

枠を作る

 

②上記で作った枠内で『カード』をクリック。

枠内で『カード』をクリックする

 

③不要な部分を消去。

不要な部分を消去

  1. このテキストは最後に消して下さい(50%)を消去しましょう。
  2. 『readmore』の『on』を消去しましょう。

 

完成図が下記です。

枠完成図

 

表示する記事数を増やす場合は、上記のコードをコピペしていけばOKですよ。
michi

 

ステップ3:記事を表示

それでは実際に記事を表示させましょう。

前項で作った枠の『id』部分に投稿IDを入力します。

 

①ダッシュボード一覧に戻り投稿IDを把握しましょう。

投稿IDを把握

 

②『id""』""の間に投稿IDを入力してください。

投稿IDを入力

 

これでOKです。

 

ステップ4:アイキャッチの微調整

最後は微調整です。

今のままでは画像がずれたりしているので整えましょう。

 

変える項目は2つ。

  • サムネイル画像設定
  • 抜粋設定

 

ダッシュボードに戻り『AFFINGER5管理』→『デザイン』をクリックしてくださいね。

 

①サムネイル画像設定

『フルサイズにする』をチェック。

サムネイル画像設定

 

ちなみにアイキャッチ画像のサイズをそろえた方が綺麗に見えますよ。

私は650×433で統一していて、かなり大きく表示されるので注目度もアップします。

michi

 

②抜粋設定

『PC閲覧時のブログカードおよび~~~~の抜粋を非表示にする』をチェック。

抜粋設定

 

最後にsaveを忘れないでくださいね。
michi

 

③新着記事の設置

新着記事の設置を自動でカード化するにはアフィンガー専用プラグイン『JET』を使う必要があります。

※厳密に言うと無くてもできますが、めちゃくちゃめんどくさいです。

 

michiブログと完全に同じにする場合は『JET』必須ですよ。

 

JETの設定方法はアフィンガー5おすすめの使い方を3つご紹介!ブログ運営を効率化をご覧ください。

 

『JET使わない』『毎回設定をするのもめんどくさい』場合は下記のような表示になります。

JETが無い場合

 

ちなみに『新着記事』のタイトル部分は下記をコピペすれば表示されますよ。

 

FontAwesome5以上のバージョン

<div class="title-border"><i class="fas fa-book-open" style="color: #7b7b7b;"></i><span style="font-size: 120%; color: #7b7b7b;"> <strong> 新着記事</strong></span></div>

 

FontAwesome4.7.0

<div class="title-border"><strong><i class="fa fa-arrow-up fa-lg" style="color: #7b7b7b;" aria-hidden="true"></i><span style="font-size: 120%; color: #7b7b7b;"> 新着記事</span></strong></div>

※バージョン4.7.0には同じものがないので、こちらは上昇矢印アイコンにしています。

 

テキストモードにして『関連記事』の下に設置してくださいね。
michi

 

④サイドバーの設置

ラストはサイドバーの設置です。

 

私の順番は下記です。

  1. 検索
  2. STINGERサイト管理者紹介
  3. よく読まれている記事
  4. アーカイブ

 

アーカイブはお好みでOKなので、今回は1~3までの設定方法を紹介いたしますね。

 

ステップ1:検索

検索は簡単です。

ダッシュボードに戻り『外観』→『ウィジェット』をクリックしてください。

※不要な物は削除しましょう。

 

『検索』をドラッグして『サイドバートップ』にドロップすればOKです。

検索を設置

 

タイトルは無しでかまいません。

 

ステップ2:STINGERサイト管理者紹介

簡易的なプロフィールですね。

ちなみにGoogleアドセンスの審査要件と言われているので重要です。

 

こちらも作り方は簡単。

 

画像はプラグイン『WP User Avatar』を使いましょう。

設定方法は【1分で出来る】WordPressでプロフィール画像を入れる方法をご覧くださいね。

 

プロフィール情報はダッシュボード内→『ユーザー』のプロフィール情報欄に書いてください。

プロフィール情報

 

そのあとウィジェットで『STINGERサイト管理者紹介』をドラッグアンドドロップでOKです。

 

ステップ3:よく読まれている記事

『よく読まれている記事』の作成は下記です。

 

①ダッシュボードに戻り『AFFINGER5管理』→『おすすめ記事一覧』をクリック。

おすすめ記事一覧の作成

  1. おすすめ記事一覧に表示する文字に『よく読まれている記事』と入力。
  2. 人気記事を指定欄に『投稿ID』を入力。
  3. 『サイドスクロールに表示する』にチェック。
  4. 『保存』をクリックしてください。

 

以上で完成です。
michi

 

まとめ

まとめ

 

以上でmichi風トップページができました。

 

細かい部分のカスタマイズはいろいろ試してみてくださいね。

 

今回は以上です。

※アフィンガー5の購入方法についてはAFFINGER5と無料テーマの違いを1年使用している私が解説!をご覧ください。

関連記事
AFFINGER5と無料テーマの違いを1年使用している私が解説!