WPテーマ「STORK」カスタマイズ！「こんな方におすすめ」リストを作る方法！

ここあです。

久しぶりにワードプレステーマ

STORKのカスタマイズ記事をご紹介します。

他のテーマを使い出すと、やっぱり

「これいいなぁ」というのが出てくるんですよね。

なので最近、AFFINGER5も使っている私は

「あ〜、これ、STORKにもあればいいのに…」

なんて思ったわけです＾＾；

なんか他のテーマにあって

STORKにないって嫌じゃないですか（笑）

だから、がんばって作りましたよ＾＾

ということで、今回は…

AFFINGER5で使える機能

こんな方におすすめのリスト表示を

STORKでも使えるようにするカスタマイズです。

具体的にどんなものかと言うと…

↓ これです！

めっちゃ使えそうでしょ？

え？そうでもない？（笑）

まぁ、無理に使ってもらわなくていいけど…

これを見て「おぉ〜、使いたい！」と思った方だけ

読み進めてくださいね＾＾

例によってコピペだけで使えるコードをご紹介しますので

CSSの知識がないあなたでも大丈夫！

STORKユーザーにはめっぽう優しい私です（笑）

それでは設定方法を順番にご説明致します。

「こんな方におすすめリスト」を表示させる手順

ストークのカスタマイズに慣れている人には

説明するまでもないコードの記述先からご紹介します。

分かっている方は飛ばしてください！

「こんな方におすすめリスト」コードの記述先

コードの記述先はこちら…

ダッシュボードメニューから外観 → カスタマイズをクリック

追加CSSの部分に

以下、ご紹介するコードをコピペしてください。

「こんな方におすすめリスト」の記述コード

それでは、まず最初に以下のCSSコードを

追加CSSの部分にコピペしましょう。

CSSコード

.entry-content .setlist{
border-bottom:solid 2px #000;
font-weight:bold;
padding-bottom:8px;
}.entry-content .setlist:before{
content: "\f0f6";
font-family: FontAwesome;
padding-right:5px;
}.entry-content .setlist2{
border:solid 2px #000;
padding:20px 50px 15px;
text-align:center;
}.entry-content .setlist2 ul li{
text-align:left;
border-bottom:dotted 1px #000;
padding-bottom:5px;
padding-left:1.2em;
font-size:90%;
}.entry-content .setlist2 ul li:before{
width: 0;
height: 0;
font-family: fontawesome;
content:"\f058";
position: absolute;
font-size: 1em;
left: 0em;
line-height:12px;
color: #5ab9ff;
}.entry-content .setlist2 ul{
margin-top:2em;
}

コピペできましたか？＾＾

コピペが出来たら後は使うだけ！

「こんな方におすすめリスト」の使い方

CSSコードがコピペ出来たら

記事に反映するためにHTMLコードの記述が必要になります。

ご使用時には以下のHTMLコードを

テキスト編集モードで記述してください。

HTMLコード

<div class="setlist2"><span class="setlist">こんな方におすすめ</span>
<ul>
<li>これはダミーのテキストです。</li>
<li>これはダミーのテキストです。</li>
<li>これはダミーのテキストです。</li>
</ul>
</div>

CSSとHTMLコードが正しく読み込まれていたら

このように表示されます。

あとは、こんな方におすすめのタイトルを打ち変えたり

これはダミーのテキストです。の部分を打ち変えればすぐに使えます＾＾

これはダミーのテキストです。の部分は

HTMLコードをリストにしてあるので

簡単に増やしたり減らしたりもできます。

「こんな方におすすめリスト」を使いやすくするには

表示がうまくいったら

ワードプレスプラグインAddQuicktagに

登録してしまいましょう！

そうすれば、1発でコードが表示できるので

更に便利に使えます＾＾

AddQuicktagに登録するには…

ダッシュボードメニューから

設定 → AddQuicktagをクリックし、まずは設定画面を開きます。

※AddQuicktag未使用の方はプラグインをインストールしてくださいね。

設定画面を開いたら以下のように登録しましょう。

左側の表示タイトルやアイコンはあなたのお好みで設定してください。

AddQuicktagを使う時に、あなたが分かりやすい名前で

大丈夫です。

また、上記Aの部分には以下のコード

Bの部分には、以下のコードを入力しましょう。

全て登録ができたら、最後に変更を保存ボタンをクリックすれば

登録完了です。

あとは実際にAddQuicktagを使ってみて

コードが表示されるかテストしてみましょう。

「こんな方におすすめリスト」のカスタマイズ方法

こんな方におすすめリストも

自分用にアレンジしたい方もいると思います。

なので、簡単にカスタマイズ方法も説明しておきますね＾＾

「こんな方におすすめリスト」のアイコンの色を変える方法

私がご紹介したデフォルトのリストは

アイコンの色が水色になっています。

これを他の色に変える場合は

CSSコードの以下の部分…

と書かれた部分のカラーコードを変更することで

お好みの色に変更できます。

「こんな方におすすめリスト」のアイコンを変える方法

さらに、アイコンフォントの

アイコンを変えたいという場合は…

Font Awesomeの以下のページから

Font Awesome

あなたの好きなアイコンを選び

以下、サンプルの場所に記述してあるユニコード

上記画像ならf0f6の部分をコピーして

以下のCSSコードの場所にペーストしましょう。

私のコードでf058となっている部分を差し替えることで

あなたのオリジナルリストにも仕上げることができます。

その辺はお好みでご調整ください＾＾

さらに、タイトル左のアイコンフォントも

同様に変えることができます。

以下のコード

content: "\f0f6";部分、f0f6の

ユニコードを変えれば、こちらもあなたの好きな

アイコンにカスタマイズすることができます。

「こんな方におすすめリスト」の罫線の色を変える方法

こんな方におすすめリストを囲う罫線や

タイトル下の罫線の色を変える場合は…

以下のコードを変更しましょう。

外回りの罫線はここ…

上記コードのborder:solid 2px #000;の部分で

左から順番に、罫線の種類・太さ・色を変えることができます。

罫線を点線にしたい場合はsolidをdottedに。

破線にしたい場合はsolidをdashedに変更しましょう。

太さは数字を変えるだけ。

罫線の色は＃から始まる6ケタのカラーコードを

入力して変更してください。

タイトル下の罫線を変更したい場合はここ…

border-bottom:solid 2px #000;で左から

種類・太さ・色を変えることができます。

またfont-weight:bold;をboldからnormalに変更すれば

タイトルは細くなるし、padding-bottom:8px;の数字を小さくすれば

罫線とタイトルの距離を近づけたりすることもできます。

AFFINGER5のおすすめリストを作ってみた：まとめ

今回はAFFINGER5で使える

こんな方におすすめリストを表示させるための

HTMLとCSSコードをご紹介しました。

今回は「自分で作れるかな？」と思って

試しに作ってみたら上手く行ったのでご紹介しましたが

基本的にはSTORKもAFFINGER5も

Webサイトという意味では、HTMLのコードを書いて

表示させていることに変わりはありません。

なので、簡単なものであれば

自分で作ってしまえばいいわけです＾＾

もちろん、そんな簡単にいかないものもあるし

私も開発者側の立場ではないので限界はありますが

コードにしてもアフィリエイトにしても

まずは自分でやってみようという姿勢や

研究することが大事だと思います。

今回は本当に「何でも自分でやってみるもんだな」と

改めて感じたカスタマイズでした＾＾

また、こうして他のテーマを研究しながら

「これ便利だし、使えそう！」というのがあれば

STORK用にアレンジしてご紹介したいと思います＾＾

最後までお読みいただきありがとうございました！