アフィンガー5半年使ってみたレビュー感想【詳細カスタマイズ方法】

本日は、タイトル通り人気のWordPressテーマの「アフィンガー」を半年使用しカスタマイズした感想を書きます。

感想です

この記事を読んでいただくと：

ここでサイトの全体を4つの画像を添付しますのでご覧ください。

サイトの全体像を4つの画像で

とこんな感じが全体像です！

1つ目のサイト画像から

赤印3つのカスタマイズについてご説明します。

おすすめヘッダーカードの作成

これはテーマの管理画面の「AFFINGER5 管理」を使います。

AFFINGER5 管理に入り、おすすめ記事一覧をクリックして、おすすめヘッダーカードに行きます。

3つの矢印の部分「画像のURL：」「テキスト：」「リンク先URL：」を入力しましょう。

おすすめヘッダーカード下自己紹介の作成

これは、テーマの外観のウィジェットを使います。

番号順に進んで、③の中に新規に「カスタムHTML」を入れます。

わたしのコードを添付しておきますので、自由に使ってください。

 

	

		
スズヒロ
	
	

		
こんにちは！　鈴江です！
	

【プロフィールの目次】




・自己紹介

・行動と失敗・挫折の繰り返しの人生

・就活全敗

・パワハラ全開

・起業失敗

・行動すること

・新たな目標
	
 
詳細プロフィール
 

自己紹介下新着記事の表示方法

AFFINGER5 管理に入り、トップページをクリックして、NEWS（お知らせ）の表示に行きます。

3つの矢印「お知らせをトップページの一番上に表示する」にチェックを入れます。「お知らせタイトルバーに表示する文字」に好きな文字を入れます。そして「お知らせに表示する件数」に表示したい件数を入れれば終了です。

2つ目のサイト画像から

ここでは、「固定ページ」を利用してカスタマイズしました。カテゴリーカードを6つ作成。タイトルにもリンクを作成。各カードに3つの記事を表示しています。

カテゴリーカード型挿入

流れは「固定ページ」「新規追加」と行きます。タイトルは入れても入れなくてもOKです。

作成手順は以下の通りになります。

タグ・レイアウト・PCとTab（959px以上）・基本とクリックします。

すると、赤い矢印が指したところに黄色と水色の枠が表示されます。

次に黄色い枠内の「このテキストは最後に消してください」の後ろにカーソルを置きます。

そしてタグ・ボックスデザイン・バナー風ボックス・左右50%とクリックします。赤い矢印のコードが挿入されます。

コードは：

]

管理画面の設定

最後に、設定から表示設定をクリックします。

固定ページ (以下で選択)を選択して、以下のプルダウンメニューから先ほどの固定ページを選んでください。

これで完了です。

3つ目のサイト画像から

トップページ下にランキング風デザイン設定

ランキング風のデザインを設定する方法をご紹介します。

トップページ下に設定しました。

手順は以下になります。

※わたしは「テキスト入力」を使いっていますので、その前提で解説を進めさせていただきます。

入力画面の画像です！

記事投稿エディターを開く

まず最初に投稿画面を開いて準備します。ちなみに「AFFINGER管理」のトップページの「挿入コンテンツ」を使っても構いません。どちらでもOKです。

グレーボックスをリクックする

ここで「グレーボックス」をクリックします。

<div class="graybox"></div>

上記入力画面画像の赤枠一番上と一番下コードがあります。

画像を準備してメディアを追加する

次に画像になりますが、「メディア追加」から追加してください。今回は「330 x 220」の小さめの記事を選択しました。ここはバランスを考えながらお好みでいいと思います。

わたしは左寄りのままにしています。

タイトルと文章を入力する

タイトルはこれです「WordPress有料テーマならAFFINGER」。そして文章ですが、ここは注目してもらいたいのでアピールする文章を書きましょう。

リックボタンを作成する

こちらがリンクボックスのコードになります。

＼人気No.1テーマ！／
AFFINGERはこちらから

アフィリエイトコードを入力する

上記のリンクボックスの"〇〇△△◇◇"のところに、アフィエイトのリンクコードを入力してださい。

AFFINGERのASPは「infotop」になります。

＞＞infotopはこちらから

ウィジェットを開いて「カスタムHTML」を選択

管理画面の外観のウィジェットをクリック。そして「カスタムHTML」をクリックして移動します。

投稿記事の下に一括表示の中にいれる

「カスタムHTML」の移動先は「投稿記事の下に一括表示」になります。ここのドロップします。

そして「カスタムHTML」の中に、先ほど作成したコードをドンとコピーしましょう。

出来上がりです。

タイトル文字前のアイコンについて

この王冠マークは「Font Awesome」の中から選んで5回挿入したものです。

アイコンを表示するためには、テーマエディターの「テーマフッター」を開いて、最下部にある「/body」直前に以下のコードをコピペしてください。

<script type="text/javascript">
var mycss=function(){// mycss関数を定義。{}内の処理を実行。
  var l=document.createElement("link");// link要素をlに代入。
  l.rel="stylesheet";// lにrel="stylesheet"属性を付与。
  l.href="https://use.fontawesome.com/releases/v5.8.1/css/all.css";// lにhref属性を付与。
  var s=document.getElementsByTagName("link")[0];// HTML内の最初のlink要素名をsへ代入
  s.parentNode.insertBefore(l,s);// sの直前にlを出力
};
window.addEventListener("DOMContentLoaded",mycss);// DOMの構築が終わったらmycss関数を実行
</script>

ウィジェットに入れた実際のコードはこんな感じです：

　WordPress有料テーマならAFFINGER







きっと友達に自慢したくなります。
このブログも使っています。
ここにはアフィリエイトコードがはいります！
AFFINGERのメリット・デメリット！