AFFINGER6

アフィンガー6のトップページカスタマイズ方法を紹介【michi風】

 

悩んでいる人

  • アフィンガー6を利用している。シンプルなmichiブログ風のトップページにしたい。

 

さるくん

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

 

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

michi

 

本記事の内容

  • アフィンガー6でのトップページカスタマイズ①
  • アフィンガー6でのトップページカスタマイズ②

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

購入前の方はAFFINGER6のメリット、デメリットを利用中の私が解説しますをご覧ください。

 

筆者紹介

記事の信頼性

私はブログ歴1年以上でして、開始当初からAFFINGERを使い続けています。

 

今回はアフィンガー6でのトップページカスタマイズ方法を紹介いたします。

 

記事をそのままやっていただければ誰でもmichi風に作れますよ!

 

注意

今回はブロックエディタを使用しません。

『AFFINGER管理』内でトップページを作るので、プラグインでクラシックエディタを使えるようにする必要もありません(使えたほうがラクではあります)

※ブロックエディタ用の記事は現在作成中です。

 

 

今回はトップページのカスタマイズを2パターンご用意しましたので、よかったら両方ともご覧ください!

 

トップページ①

AFFINGER6のトップページカスタマイズ①

 

 

トップページ②

AFFINGER6のトップページカスタマイズ②

 

追加情報

現在私が利用しているトップページのカスタマイズ方法も執筆中です。もう少々お待ちください。

 

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

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

 

まずは準備と下記3項目をやっていきましょう。

 

カスタマイズでやるべきこと

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

 

完成図

アフィンガー6トップページ

 

それでは見ていきましょう。

 

準備

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

 

具体的には下記3つをまずはやっておきましょう。

 

必要な3つの準備

  1. 表示設定を確認
  2. トップページ用の固定ページ作成
  3. 追加CSSを入力

 

順に説明しますね。

 

1.表示設定を確認

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

ホームページの表示設定

 

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

 

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

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

 

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

新規追加をクリック

 

step
1
固定ページを新規追加

固定ページを新規追加

  1. タイトルを入力→『トップページ』とかでオッケーです。
  2. 1度下書き保存(パーマリンクを入力するため)
  3. パーマリンクを変更→『top-page』などアルファベットに直します。
  4. 完了したら『公開』します。

 

step
2
固定ページIDを控える

画像赤枠内の固定ページをメモりましょう。

固定ページIDをメモ

 

step
3
トップページの設定

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

トップページの設定

  1. 『トップページに固定記事を挿入』に前項でメモった固定ページIDを入力してください。

 

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

 

3.追加CSSを入力

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

 

step
1
ダッシュボード内

ダッシュボードに戻り『外観』→『カスタマイズ』をクリックしてください。

ダッシュボード内

 

step
2
カスタマイズ

『追加CSS』をクリックしてください。

追加CSSをクリック

 

step
3
追加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;
}

 

これで準備はオッケーです。

 

①『おすすめ記事』の設置

ではトップページをカスタマイズしていきましょう。

 

まずは『おすすめ記事』と書いてある部分の設置ですね(グローバルメニュー下)

おすすめ記事の作り方

 

作り方のステップは2つです。

 

記事の作り方2ステップ

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

 

この部分はグローバルメニューなどと並んで最初に目につく場所です。

 

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

 

  • 収益につながる記事
  • 被リンクにつながる記事

などがおすすめです。

 

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

ポイント

今回は『AFFINGER管理』内でカスタマイズするのでブロックエディタは使いません。

ただしこの『AFFINGER管理』内での作業が結構やりづらいので『Classic Editor』や『Disable Gutenberg』でクラシックエディタを使えるようにして、例えば適当な固定ページを作りそこに下書きした後でコピペしたほうがラクに作れます。

 

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

 

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

挿入コンテンツ

 

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

 

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

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

 

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

<p>&nbsp;</p>
<div class="title-border"><strong><span style="font-size: 120%; color: #494d6d;"> おすすめ記事</span></strong></div>

 

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

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

 

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

おすすめ記事の表示

 

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

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

 

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

トップページのアイキャッチ

 

①ビジュアルモードで『タグ』→『レイアウト』→『全サイズ』→『50%』をクリックします。

枠を作る

 

②『このテキストは最後に消してください(50%)』の下部分にメディアを追加します。

画像を追加

 

③画像の詳細を入力します。

画像詳細を入力

代替えテキスト 記事のタイトルを入力してください。
配置 中央
サイズ 表でカスタムサイズになっていますが、なんでもオッケーです。
幅×高さ よほど小さくなければ特に指定はありません。カスタムサイズの場合私は650×433にしています。
リンク先 カスタムURLを選択してください。
URL 記事のURLを指定してください。

 

特に重要なのがリンク先とURLです。

 

この2つは間違えないようにしてくださいね!

 

④画像の下にタイトルを入力しましょう。

記事タイトルを入力

 

<p><a style="text-decoration: none;" href="https://michi-blog321.com/web-writing/">誰でもできるWebライティングの書き方16個を書評ブロガーが解説</a></p>

ひとことメモ

マウスオーバー時のエフェクト効果を消しています。そのままで良い方は赤字部分を未入力にしてください。

 

リンク先のURLやタイトルをあなたのものに変えてくださいね。

 

タイトルの文字については左配置がオススメです。
michi

 

⑤右側も同じ手順で記事を表示させましょう。

右側も配置

 

⑥不要な部分を消去して完成です。

不要な部分を除去

 

⑦さらにもう一つ下に付け加えるとこんな感じになります。

完成

 

③新着記事の設置

次は新着記事の設置です。

新着記事

 

やるべきことは下記2つ。

新着記事の設置でやるべきこと2つ

  1. 『新着記事』のタイトル表示
  2. 記事一覧を設置

 

順に見ていきましょう。

 

『新着記事』のタイトル表示

新着記事のタイトル表示は前述した『おすすめ記事』のタイトルを変えるだけなのでサクッといきましょう。

 

<div class="title-border"><strong><span style="font-size: 120%; color: #494d6d;"> 新着記事</span></strong></div>

 

上記をコピペすればオッケーです。

 

記事一覧の設置

次は新着記事一覧の設置です。

 

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

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

 

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

 

JET2の設定方法はアフィンガーを3倍パワーアップさせる使い方を利用歴1年の私が紹介をご覧ください。

 

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

JETが無い場合

 

④サイドバーの設置

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

サイドバー部分

私の順番は下記です。

  1. 検索
  2. STINGERプロフィールカード
  3. STINGERサイドバーメニュー
  4. よく読まれている記事

 

順に見ていきましょう。

 

ステップ1:検索

まずは『検索』からです。

 

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

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

 

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

検索を設置

 

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

 

ちなみに『知りたいワードで検索』のようなプレースホルダの文字入力はアフィンガーならサクッとできます。

 

『ダッシュボード』→『カスタマイズ』→『オプション(その他)』→『検索フォーム』をクリックします。

 

下記画面の赤枠内に入力すればオッケーです。

 

プレースホルダの入力

 

ステップ2:STINGERプロフィールカード

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

 

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

 

こちらも作り方は簡単。

  1. 画像
  2. プロフィール情報

 

上記を作った後にウィジェットをドラッグ&ドロップすればオッケーです。

 

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

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

 

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

プロフィール情報

 

 

①②が終わったらウィジェッドをドラッグ&ドロップで完成です!

 

ステップ3:STINGERサイドバーメニュー

次は『STINGERサイドバーメニュー』です。

 

やるべきことは下記。

  1. 表示したいメニューを作成
  2. ウィジェットをドラッグ&ドロップ

 

表示したいメニューを作成

まずは表示したいメニューを作っていきましょう。

 

『ダッシュボード』→『メニュー』をクリックしてください。

サイドバー用のメニュー作成

  1. 『新しいメニューを作成しましょう』をクリック
  2. メニュー名を入力(サイドバーなど)
  3. サイドメニューをチェック
  4. 『メニューを作成』をクリックしてください

 

②ウィジェットをドラッグ&ドロップ

①でできたメニューをサイドバーに組み入れていきましょう。

 

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

 

その後下記のように『STINGERサイドバーメニュー』をドラッグ&ドロップすればオッケーです。

サイドバーを組み入れる

 

これで完成です。

 

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

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

 

ダッシュボードに戻り『AFFINGER管理』→『ヘッダー下/おすすめおすすめ』をクリックしてください。

 

そのまま最下部までスクロールすると下記画面が現れます。

おすすめ記事一覧の作成

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

 

最後にSaveを忘れずに!

 

以上で完成です。
michi

 

もう1つのAFFINGER6のトップページカスタマイズ

もう1つのAFFINGER6のトップページカスタマイズ

 

ではもう一つのAFFINGER6でのトップページカスタマイズ方法をご紹介いたしますね。

 

 

完成図

もう1つのAFFINGER6トップページ

 

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

やるべきこと

  • 準備
  1. ヘッダーメニューを横列にする
  2. タイトルの設置
  3. 記事部分の設置

※準備はまったく同じです。アフィンガーをカスタマイズするための準備で済ませておいてください。

 

それでは残りの部分を説明いたします。

 

①ヘッダーメニューを横列にする

まずはヘッダーメニューを横表示に変えましょう。

 

完成形は下記です。

グローバルメニューを横表示にする

 

4つのステップで進めていきますね。

  1. メニューを作る
  2. AFFNIGER管理の設定を変更
  3. 左側にロゴを設置(無くてもオッケーです)
  4. メニューを横表示に変える

 

さっそく見ていきましょう。

 

メニューを作る

まずは横列用のヘッダーメニューを作りましょう。

ヘッダーメニュー(横列)を作成

  1. 『新しいメニューを作成しましょう』をクリック。
  2. メニュー名を入力※ヘッダーメニュー(横列)など。
  3. 『ヘッダーメニュー(横列)』をチェック。
  4. 『メニューを作成』をクリック。

 

その後はあなたの好きなようにメニューを構成してください。

 

AFFINGER管理の設定を変更

次は『AFFINGER管理』の設定を変更しましょう。

 

やることは2つです。

  1. 『ヘッダー』の設定変更
  2. 『メニュー』の設定変更

 

順に見ていきましょう。

 

step
1
ヘッダーの設定変更

ヘッダーの設定変更

『ヘッダー』内の『ヘッダーを分割しない』のチェックを外してください。

 

JET2を利用されている方

JET2を利用されている方は下記の『JETによる親テーマ管理設定の上書きを解除する』にチェックを入れてください。

JET2の設定を変更

デフォルトの状態だとJETの機能が優先されてしまうため、今回の設定を何度変えても強制的に戻されてしまいます。必ずチェックを入れてくださいね。
michi

 

step
2
メニューの設定変更

メニューの設定変更

下記2つをチェックしてください。

  • 『PC用メインメニューを表示しない』をチェック。
  • 『ヘッダーメニュー(横列)を有効化』をチェック。

 

これでヘッダーメニューが横列で表示されました。

 

左側にロゴを設置

次はヘッダーの左側にロゴを設定していきましょう。

ヘッダー左にロゴ画像を設置

※必要ない方は飛ばしていただいてオッケーです。

 

step
1
WordPress内の変更場所

ダッシュボード→『外観』→『カスタマイズ』をクリックしてください。

ロゴ画像/サイトのタイトルをクリック

『ロゴ画像/サイトのタイトル』をクリックしてください。

 

step
2
ロゴ画像の設置

ロゴ画像を設置

赤枠内ロゴ画像にお好きな画像を設置してください。

 

私のロゴはCanva Pro というツールで作りました。
michi

 

以上でロゴを設置できました!

 

メニューの文字色を変えたい時

メニューの文字色を変えたい時

カスタマイズ内『基本エリア設定』→『ヘッダーエリア』の順でクリックしてください。※アルファベットのheaderエリアではないです。

 

メニューの色を変更

『電話番号とヘッダーリンク』でメニューの色の設定が変更できます。

 

ヘッダー(メニュー部分含む)の背景色を変えたい時

ヘッダー(メニュー部分含む)の背景色を変えたい時

カスタマイズ内『基本エリア設定』→『ヘッダーエリア』の『背景色』でヘッダーの背景色の変更ができます。

 

以上です。

 

②タイトルの設置

次はタイトルの設置をしていきましょう。

 

『AFFINGER管理』→『トップページ』をクリックしてください。

タイトル部分の設置

作り方はテキストモードにして下記をコピペすればオッケーです。

<p>&nbsp;</p>
<div class="title-border"><strong><span style="font-size: 120%; color: #494d6d;"> ブログ運営を効率化するツール</span></strong></div>

 

タイトル名を変えたい時は『ブログ運営を効率化するツール』の部分を差し替えてください。
michi

 

③記事部分の設置

最後は記事部分の設置をしていきましょう。

記事部分の設置

 

やるべきことは下記3つです。

  1. 『タブ』を利用
  2. 表示したい記事を設置
  3. 『READ MORE』部分を設置

 

順に説明します。

ポイント

今回は『AFFINGER管理』内でカスタマイズするのでブロックエディタは使いません。

ただしこの『AFFINGER管理』内での作業が結構やりづらいので『Classic Editor』や『Disable Gutenberg』でクラシックエディタを使えるようにして、例えば適当な固定ページを作りそこに下書きした後でコピペしたほうがラクに作れます。

 

ステップ1:タブを利用

まずはタブを利用しましょう。

 

タブを利用すると表示の切り替えができるようになります。

 

①『タグ』→『レイアウト』→『タブ』→『2つ』をクリックしてください。

タブを作成

注意

タブは『タブ(切替ボタン)』と『タブ』の2種類あります。

 

タブ(切替ボタン)




タブ1のコンテンツ

タブ2のコンテンツ


 

タブ




タブ1のコンテンツ

タブ2のコンテンツ


 

私は『タブ』の方を利用しています。
michi

 

ステップ2:記事部分の設置

次は記事部分の設置です。

記事を作成

 

この赤と青の部分に記事を入れてください。

参考

『タブ1のコンテンツ』『タブ2のコンテンツ』の文字は削除してオッケーです。

 

完成すると下記のようになります。

完成図

※青側の方は都合で記事が2つしかありません。3つ入れても問題なしです。

 

ではさっそく作成していきましょう。

 

①ビジュアルモードで『タグ』→『レイアウト』→『PCとTab(959px以上)』→『3分割』をクリックします。

3分割を作る

 

②『このテキストは最後に消してください(33%)』の下部分にメディアを追加します。

メディアを挿入

 

③画像の詳細を入力します。

画像の詳細を入力

代替えテキスト 記事のタイトルを入力してください。
配置 中央
サイズ 表でフルサイズになっていますが、なんでもオッケーです。
幅×高さ よほど小さくなければ特に指定はありません。
リンク先 カスタムURLを選択してください。
URL 記事のURLを指定してください。

 

④画像の下にタイトルを入力しましょう。

記事タイトルを入力

<p><a style="text-decoration: none;" href="https://michi-blog321.com/web-writing/">AFFINGER6のメリット、デメリットを利用中の私が解説します</a></p>

ひとことメモ

マウスオーバー時のエフェクト効果を消しています。そのままで良い方は赤字部分を未入力にしてください。

 

リンク先のURLやタイトルをあなたのものに変えてくださいね。
michi

 

⑤真ん中と右側も同じ手順で記事を表示させましょう。

3記事すべて作成

参考

真ん中の下部が仕様の都合で少しへこんで見えますが、じっさいにプレビューを見ると直っているので問題ないです。

 

⑥不要な部分を消去して完成です。

タブ部分完成

 

ステップ3:READ MORE部分の設置

ラストはREAD MORE部分の設置です。

 

①『タグ』→『カスタムボタン』→『ノーマル』→『基本』をクリックしてください。

READ MOREボタン作成

 

②下記のようなショートコードが出るので名前を書き替えましょう。

ボタンのショートコード

url #→リンク先のURLを入力
tltle ボタン→READ MOREに変更

 

③完成すると下記のような感じになります。

もう1つのトップページカスタマイズの完成

 

以上です。

 

あとはタブ2の方も同じようにすれば表示の入れ替えができるようになります。

 

まとめ:AFFINGER6のトップページカスタマイズはバッチリ!さあブログを書こう!

まとめ

 

今回はmichiブログ風トップページカスタマイズ方法を2つ紹介いたしました。

 

もっと細かい部分のカスタマイズについてはこれから記事にしていく予定です。

 

楽しみにしていてくださいね!

 

今回は以上です。

関連記事
AFFINGER6のメリット、デメリットを利用中の私が解説します
関連記事
アフィンガーを3倍パワーアップさせる使い方を利用歴1年の私が紹介

-AFFINGER6