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

 

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

 

 

 

 

 

 

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

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

 

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

 

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

 

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

 

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

 

準備

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

 

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

 

順に説明しますね。

 

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

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

 

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

 

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

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

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

 

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

 

具体的には

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

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

 

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

 

以上でOKです。

 

ステップ3:FontAwesomeを導入

次はFontAwesomeを入れましょう。

 

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

 

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

 

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

 

 

 

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

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

 

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

 

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

 

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

 

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

 

 

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

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

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

 

消す場合は

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

 

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

 

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

 

以上でOKです。

 

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

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

 

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

 

②追加CSSをクリック。

 

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

 

 

これでオッケーです。

 

 

①ヘッダーカードの設置

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

具体的にはココですね。

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

 

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

 

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

 

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

 

 

②おすすめ記事の設置

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

 

ココです。

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

 

ステップは2つ。

 

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

 

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

 

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

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

 

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

 

 

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

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

 

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

Fontawesome5以上のバージョン

 

FontAwesome4.7.0

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

 

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

 

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

 

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

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

 

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

 

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

 

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

それぞれ

に直してください。

 

自力で作る場合

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

 

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

 

③不要な部分を消去。

 

完成図が下記です。

 

 

ステップ3:記事を表示

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

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

 

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

 

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

 

これでOKです。

 

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

最後は微調整です。

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

 

変える項目は2つ。

 

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

 

①サムネイル画像設定

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

 

 

②抜粋設定

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

 

 

③新着記事の設置

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

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

 

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

 

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

 

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

 

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

 

FontAwesome5以上のバージョン

 

FontAwesome4.7.0

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

 

 

④サイドバーの設置

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

 

私の順番は下記です。

 

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

 

ステップ1:検索

検索は簡単です。

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

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

 

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

 

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

 

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

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

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

 

こちらも作り方は簡単。

 

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

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

 

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

 

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

 

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

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

 

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

 

 

まとめ

 

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

 

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

 

今回は以上です。

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

関連記事

AFFINGER5と無料テーマの違いを1年使用している私が解説！