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

 

 

 

 

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

購入前の方は【購入特典付き】AFFINGER6のメリット、デメリットをレビューをご覧ください。

 

 

 

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

 

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

 

 

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

 

トップページ①

 

 

トップページ②

 

 

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

 

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

 

 

完成図

 

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

 

準備

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

 

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

 

 

順に説明しますね。

 

1.表示設定を確認

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

 

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

 

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

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

 

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

 

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

 

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

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

 

step
3トップページの設定

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

 

 

3.追加CSSを入力

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

 

step
1ダッシュボード内

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

 

step
2カスタマイズ

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

 

step
3追加CSS

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

 

 

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

 

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

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

 

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

 

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

 

 

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

 

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

 

などがおすすめです。

 

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

 

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

 

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

 

 

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

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

 

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

 

 

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

 

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

 

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

 

③新着記事の設置

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

 

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

 

順に見ていきましょう。

 

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

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

 

 

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

 

記事一覧の設置

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

 

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

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

 

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

 

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

 

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

 

④サイドバーの設置

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

私の順番は下記です。

 

順に見ていきましょう。

 

ステップ1:検索

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

 

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

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

 

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

 

こちらも作り方は簡単。

 

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

 

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

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

 

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

 

 

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

 

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

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

 

やるべきことは下記。

 

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

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

 

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

 

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

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

 

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

 

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

 

これで完成です。

 

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

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

 

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

 

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

 

最後にSaveを忘れずに！

 

 

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

 

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

 

 

完成図

 

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

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

 

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

 

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

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

 

完成形は下記です。

 

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

 

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

 

メニューを作る

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

 

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

 

AFFINGER管理の設定を変更

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

 

やることは2つです。

 

順に見ていきましょう。

 

step
1ヘッダーの設定変更

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

 

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

 

step
2メニューの設定変更

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

 

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

 

左側にロゴを設置

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

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

 

step
1WordPress内の変更場所

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

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

 

step
2ロゴ画像の設置

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

 

 

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

 

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

 

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

 

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

 

以上です。

 

②タイトルの設置

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

 

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

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

 

 

③記事部分の設置

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

 

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

 

順に説明します。

 

ステップ1:タブを利用

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

 

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

 

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

 

タブ(切替ボタン)

 

タブ

 

 

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

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

 

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

 

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

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

 

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

 

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

 

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

 

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

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

 

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

 

 

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

 

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

 

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

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

 

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

 

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

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

 

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

 

以上です。

 

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

 

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

 

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

 

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

 

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

 

今回は以上です。

関連記事

【購入特典付き】AFFINGER6のメリット、デメリットをレビュー

関連記事

アフィンガーを3倍パワーアップさせる使い方を利用歴1年の私が紹介