WordPress

アフィンガー6(ACTION)をSWELLのトップページっぽくするカスタマイズ【ワードプレス】

2022年4月10日

収益化するブログに欠かせないワードプレステーマがAFFINGER6(ACTION)です。

稼いでいるブロガーはみんな使っているといっても過言ではありませんが、当ブログは最初SWELLで作っていました。

なぜなら、SWELLは手をかけずにおしゃれなブログに仕上がるからw

やっぱりブログはおしゃれな方がテンション上がりますし、AFFINGERは初期設定のままほぼ弄らずだと正直言って少しダサいのです…。

ですが、少し手を加えてあげればアフィンガーもおしゃれなデザインにできます!

今回は、アフィンガーをSWELLっぽくおしゃれなブログにするカスタマイズをご紹介します。

アフィンガーをSWELLっぽくカスタマイズ①:トップページカード型にする

SWELLのデフォルトのトップページは記事がカード型になっています。

アフィンガーをカード型にする一番手っ取り早い方法が、アフィンガー6の専用子テーマ「JET2」もしくは「ACTION EX」を購入すること。

サンプルサイトB(2カラム)(アフィンガー公式サイトより)

JETは、元々インフィード広告が馴染むように開発された子テーマであるため、ブログをきれいなカード型にしてくれます。

ちなみにJET2の価格は4,980円。ACTION EXは12,000円です。もちろん何サイトも使いまわせますのでコスパは◎。

JETを適用させたら、自動的にトップページがカード型になります。ただ、そのままだと最新の記事が大きく表示されるので調整します。

ワードプレスのダッシュボードに「JET管理」で「トップ及びアーカイブページの第一投稿を大きくしない」にチェックを入れましょう。

アフィンガーをSWELLっぽくカスタマイズ②:スライドショーを設定する

次に、アフィンガーのトップページにスライドショーを設定します。

SWELLのようなスライドショーを作るにはAFFINGER管理>ヘッダー下/おすすめ>サムネイルスライドショーを設定します。

サムネイルスライドショーのフロントぺージをチェックします。

あとは細かいところはお好みで。私はほぼデフォルト設定です。

これで簡単にSWELLっぽいスライドショーができます。

ちなみに、AFFINGER管理>ヘッダーのところにも記事スライドショー設定がありますが、そちらを設定するとSWELLとは違ったスライドショーになります。

こちらのスライドショーだと少しSWELLとのイメージとは違った雰囲気ですね。

アフィンガーをSWELLっぽくカスタマイズ③:インフォメーションバーを設定する

当ブログも、目立たせたい記事はインフォメーションバーを設置していますが、アフィンガーでもSWELLのようなインフォメーションバーを設置することができます。

ワードプレス管理画面からウィジェットの画面にいきます。

「ヘッダー画像エリア上のウィジェット」にカスタムHTMLを入れます。

カスタムHTMLに下記のコードを入れます。

<a href="URL"><strong>クリック部分の文字</strong><i class="fa fa-angle-double-right"></i></a>

私はこんな感じで入れました。

これだとただリンクが入った状態なので、背景を入れていきます。

外観>カスタマイズ>追加CSSをクリックします。

CSSに下記コードを追加します。

/*TOPページインフォメーション*/
#st-header-top-widgets-box {
background-color: #464646;
}
#st-header-top-widgets-box .st-content-width a {
color: #ffffff;
text-decoration: none;
}
/*TOPページインフォメーション*/

追加したらひとまず背景グレーのインフォメーションバーが完成します。

私は、薄いピンクの背景に斜めの線のストライプを入れたかったのでこういうCSSの記述にしました。

/*TOPページインフォメーション*/
#st-header-top-widgets-box {
background-color: #EF8AA1;
background-image:
	 repeating-linear-gradient(-45deg,#EA6F91, #EA6F91 7px,transparent 0, transparent 14px);
}
#st-header-top-widgets-box .st-content-width a {
color: #ffffff;
text-decoration: none;
}
/*TOPページインフォメーション*

background-colorのところに、自分の好きな背景色を入れます。色のイメージCSS STRIPE GENERATORを参考にしました。

次に、background-image: repeating-linear-gradient(-45deg,#EA6F91, #EA6F91 7px,transparent 0, transparent 14px); }ですが、#EA6F91, #EA6F91がストライプの色になるので、ここだけお好みで変えましょう。

文字の色は#st-header-top-widgets-box .st-content-width a { color:のあとを変えればOK。

これでSWELLっぽいカスタムが完成します!

アフィンガーぽく見えないのでお気に入りです。

皆さんも気に入ったらぜひ真似してみてくださいね!

-WordPress
-, ,