IDOL×IDOL STORY! 感想レビュー
ナツメグチャンネル
Luxeritas カスタマイズ サムネイル 05
【Luxeritas】記事一覧カスタマイズ【カード型】 サムネイル
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】 サムネイル 02

【Snow Monkey Blocks】ステップのカスタマイズ

2024/06/26Snow Monkey Blocks

【Snow Monkey Blocks】ステップのカスタマイズ サムネイル
ナツメグチャンネル

テーマをAFFINGERにすると
PVが倍になるらしい。

何故AFFINGERにすると
PVが増えるのか
AFFINGERを薦めている人の記事を
読んでみました。

  • 表示が速くSEOに強い
  • 記事ごとにnoindex設定が出来る
  • カスタマイズ性が高い
  • 装飾が多く記事を読みやすく出来る

大体こんな風に言われています。

Luxeritas(ルクセリタス)にも
ほぼ当てはまりますね。

この中でLuxeritsが弱いとしたら
記事の装飾でしょうか?

という訳で
AFFINGERを買うお金もないし
何とかしてAFFINGERに
近付けようというのが今回の記事です。

無料のプラグイン
Snow Monkey Blocksの
ステップをAFFINGER風に
カスタマイズして記事を装飾します。

ステップは
ステップ1、ステップ2、ステップ3と
順番に説明するのに使う
ブロックです。

そのままだとこの見た目。

Snow Monkey Blocks ステップ
ナツメグチャンネル

CSSでカスタマイズして
こんな見た目にしてみました。

Snow Monkey Blocks ステップ カスタマイズ
ナツメグチャンネル

【Snow Monkey Blocks】ステップのカスタマイズ

作業の手順
  • Snow Monkey Blocksをインストール
  • ステップを選択
  • CSSで見た目を整える

早速やってみましょう。

Snow Monkey Blocksをインストール

WordPressの管理画面から
プラグイン>新規追加。

検索窓に「snow monkey」と入力。

snow monkeyと入力 02
ナツメグチャンネル

Snow Monkey Blocksを見付けたら
今すぐインストールをクリック。

Snow Monkey Blocks 今すぐインストール
ナツメグチャンネル

有効化をクリック。

Snow Monkey Blocks 有効化
ナツメグチャンネル

これでSnow Monkey Blocksが
使えるようになりました。

ステップを選択

編集画面の左上のプラスボタンをクリック。

プラスマーク 02
ナツメグチャンネル

SNOW MONKEY BLOCKS [一般]から
ステップを選択。

ステップを選択
ナツメグチャンネル

タイトルを書く欄にはタイトルを書きます。

Snow Monkey Blocks タイトルを書く
ナツメグチャンネル

真ん中のプラスボタンで
段落や画像を追加。

右側のプラスボタンで
stepの数を増やします。

この段階だとこの見た目です。

Snow Monkey Blocks ステップ
ナツメグチャンネル

CSSで見た目を整えます。

CSSで見た目を整える

スタイルシートにCSSを書き込みます。

/*snow monkey blocksステップ*/
.smb-step__item__number{
	--_font-size-level: 3;
	border-radius: 10%;
	padding: 28px 20px 12px;
	color: #333;
	background-color: #f9d423;
}

.smb-step__item__number::after{
	position: absolute;
	bottom: 18px;
	content: "step";
	font-size: 12px;
}

.smb-step__item__title{
	border-bottom: 2px solid #f9d423;
	padding: 6px 10px 0;
}

.smb-step__item__summary{
	padding-left: 10px;
}

このようになりました。

Snow Monkey Blocks ステップ カスタマイズ
ナツメグチャンネル

CSSの解説

.smb-step__item__numberは
数字の部分です。

–_font-size-levelは数字の大きさ3を指定。

border-radiusで角を丸くしました。

paddingで黄色い四角のサイズを
調整しています。

colorは文字の色を黒#333に指定。

background-colorで背景を
黄色#f9d423に指定しました。

.smb-step__item__number::afterは
stepの文字を追加しています。

.smb-step__item__titleは
タイトルの位置の調整をして
下に線を引きました。

.smb-step__item__summaryは
段落を追加したときに
文字の左側がタイトルと
合うように調整。

Snow Monkey Blocksで
記事の装飾を増やせば
AFFINGER並みに
PVが増やせる…はず。

今回は以上です。

Snow Monkey Blocks