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

WPテーマ「STORK」カスタマイズ!AFFINGER5のおすすめリストを作ってみた!

ここあです。

 

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

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

 

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

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

 

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

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

なんて思ったわけです^^;

 

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

STORK」にないって嫌じゃないですか(笑)

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

 

ということで、今回は…

 

AFFINGER5」で使える機能

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

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

 

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

↓ これです!

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

 

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

え?そうでもない?(笑)

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

 

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

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

 

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

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

STORK」ユーザーにはめっぽう優しい私です(笑)

 

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

 

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

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

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

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

 

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

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

 

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

外観」→「カスタマイズ

ダッシュボードメニュー

 

 

追加CSS」の部分に

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

dropshadow

 

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

それでは、まず最初に以下の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コード」を

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

 

<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登録

 

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

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

大丈夫です。

 

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

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

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

</div>

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

登録完了です。

 

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

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

AddQuicktag確認

 

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

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

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

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

 

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

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

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

 

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

CSSコード」の以下の部分…

.entry-content .setlist2 ul li:before{
color: #5ab9ff; /*アイコンの色*/
}

/*アイコンの色*/と書かれた部分のカラーコードを変更することで

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

 

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

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

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

 

Font Awesome」の以下のページから

Font Awesome

 

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

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

FontAwesome

 

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

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

 

.entry-content .setlist2 ul li:before{
font-family: fontawesome;
content:"\f058"; /*アイコンの種類*/
}

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

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

 

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

 

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

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

 

以下のコード

.entry-content .setlist:before{
content: "\f0f6";/*アイコンの種類*/
font-family: FontAwesome;
padding-right:5px;
}

content: "\f0f6";部分の「f0f6」の

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

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

 

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

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

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

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

 

外回りの罫線はここ…

.entry-content .setlist2{
border:solid 2px #000;
padding:20px 50px 15px;
text-align:center;
}

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

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

 

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

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

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

 

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

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

 

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

/*こんな方におすすめリスト*/
.entry-content .setlist{
border-bottom:solid 2px #000;
font-weight:bold;/*文字の太さ*/
padding-bottom:8px;
}

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

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

 

またfont-weight:bold;を「bold」から「normal」に変えれば

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

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

 

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

今回は「AFFINGER5」で使える

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

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

 

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

試しに作ってみたら上手く行ったので

ご紹介しましたが

 

基本的には「STORK」も「AFFINGER5」も

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

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

 

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

自分で作ってしまえばいいわけです(笑)

 

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

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

 

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

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

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

 

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

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

 

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

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

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

 

もしも設定でよく分からないことがあれば

いつでも気軽にご相談ください!

「ここあ」に問い合わせをする

 

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

 

合わせて読みたい!

 

WPテーマ「STORK」カスタマイズ!AFFINGER5のおすすめリストを作ってみた!

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。