【STORK】カスタマイズ！画像付きコメントを作る方法！

ここあです。

私が以前使っていたWordPressテーマ「STORK」は

最低限必要な機能が全て揃っており、

ある意味初心者には非常に扱いやすいテーマです。

※現在、私のテーマは「THE THOR」です。

だから、個人的にはすごくオススメなテーマですが

「STORK」は2016年5月30日にリリースされてから

間もなく3年になるテーマになります。

なので、

今でも十分使えるかなり優秀なテーマではありますが

それだけ月日が流れてしまうと、

どうしても新しくリリースされた他のテーマよりも

機能が足りないと感じてしまいます。

しかし、時間が経てば、時代に合うテーマが

どんどんリリースされるので

そうなってしまうのはある意味仕方のないこと。

それでもいいテーマであればこうして長く使えるので

私は愛着を持ってこのサイトを我が子のように育てました。

※流石に限界を感じて2019年11月に変更しましたけどね＾＾；

ということで、

「ないものは作ればいい！」と試行錯誤作った

今回のアイテムはコレ！

「画像付きコメント！」をご紹介致します。

↓これです

↓アコーディオンボタンのついた画像付きコメント

相変わらずマニアックなカスタマイズですが

カスタマイズは私の趣味なので

需要はなくても全然OK！（笑）

それでも「使いたい！」と思ってくれる人がいれば嬉しいし

今回のカスタマイズデータはHTMLとCSSだけで組んでいるので

「STORK」じゃない人でも使えます。

なので、

• 「画像付きコメント」を使いたいという方
• そう言えば「うちのテーマにもそんな表示機能ないわ」という方

は「Let’s コピペ！」（笑）

ということで、紹介コードをコピペして

あなたのサイトをより読者に伝わりやすい

魅力的なサイトへとぜひ変えてくださいね。

STORKをカスタマイズする前に

カスタマイズに慣れっ子の方には

改めて言うまでもありませんが、念のため

STORKをカスタマイズする時の注意点を書いておきます。

STORKをカスタマイズする時は

必ずバックアップを取りましょう。

万が一何かあっても私は保証できませんよ。

また、STORKのカスタマイズは

必ず「子テーマ」で行ってください。

じゃないとテーマアップデートで

せっかくカスタマイズしたデータが

全て消える可能性があります。

そして、この記事で紹介するCSSコードは…

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

外観 → カスタマイズをクリック

以下「追加CSS」の部分に

CSSコードを記述してください。

なぜ追加CSSに書く方がいいかと言うと…

ライブビューで直接カスタマイズ部分を

確認しながら作業できるので

すごく分かりやすくて便利からです。

なので、私はいつもCSSコードを

「追加CSSに書いてね」とすすめています。

ということで…

「画像付きコメント」の作り方をご紹介していきます。

STORKで画像付きコメントを表示させる方法

まずは通常の画像付きコメント

を表示させるためのHTMLコードです。

HTMLコード

<div class="combox">
<div class="comment-text">
<p><img src="画像のURL" /></p>
<p><strong>タイトル<br />
</strong><span style="font-size: 12px;">○代○性 <span class="star" style="font-size: 10px;">★★★★★</span></span></p>
</div>
<div class="comment-text2">
<p><span style="font-size: 14px;">説明のテキストをここに</span></p>
</div>
</div>

CSSコードはこちらです。

CSSコード

.combox img{
width:40px;
border-radius:50%;
margin:5px 10px 10px 0px;
}.combox{
border:solid 3px #a7cff3;
border-radius:5px;
}.comment-text{
display: flex;
align-items: center;
border-bottom: 1px dotted #ccc;
padding-bottom: 1px;
margin:10px 20px 5px;
}.combox p{
margin-bottom:0;
line-height:18px;
}.combox .star{
color:#FFB400;
}.comment-text2{
margin: 0px 20px 10px;
text-align:justify;
}.comment-text2 p{
line-height:26px;
}

続いて、アコーディオンボタンの付いた

画像付きコメントのHTMLコードです。

HTMLコード

<div class="combox">
<div class="comment-text">
<p><img src="画像のURL" /></p>
<p><strong>タイトル<br />
</strong><span style="font-size: 12px;">○代○性 <span class="star" style="font-size: 10px;">★★★★★</span></span></p>
</div>
<div class="comment-text2">
<div class="cp_actab2"><input id="tab-1" name="tabs" type="checkbox" /><label for="tab-1">＋ クリックしてください</label>
<div class="cp_actab-content">
<p>説明のテキストをここに</p>
</div>
</div>
</div>
</div>

CSSコードはこちらです。

CSSコード

.combox img{
width:40px;
border-radius:50%;
margin:5px 10px 10px 0px;
}.combox{
border:solid 3px #a7cff3;
border-radius:5px;
}.comment-text{
display: flex;
align-items: center;
border-bottom: 1px dotted #ccc;
padding-bottom: 1px;
margin:10px 20px 5px;
}.combox p{
margin-bottom:0;
line-height:18px;
}.combox .star{
color:#FFB400;
}.comment-text2{
margin: 0px 20px 10px;
text-align:justify;
}.comment-text2 p{
line-height:26px;
}
.cp_actab2 {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
color: #555;
}.cp_actab2 input {
position: absolute;
z-index: -1;
opacity: 0;
}.cp_actab2 label {
font-weight: bold;
line-height: 3;
position: relative;
display: block;
cursor: pointer;
margin: 0 0 1px 0;
background: #fff;
border-bottom:solid 1px #fff;
}

.cp_actab2 .cp_actab-content {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 1s;
transition: max-height 0.5s;
color: #555;
background: #fff;
}

.cp_actab2 .cp_actab-content p {
margin: 1em;
font-size: 14px;
}

.cp_actab2 p{
margin-bottom:0px;
}

.cp_actab2 input:checked ~ .cp_actab-content {
max-height: 120em;
}

HTMLコードとCSSコードをコピーして

画像URLの部分にあなたが表示させたい

画像のURLを入力すれば画像付きコメントが完成します。

以下の項目は、HTMLコードの方で入力し

調整してください。

• タイトル
• ○代男性 or ○代女性
• ★★★★★（スターの数）
• ＋クリックしてください（打ち替え可能です）
• コメント

また、画像は正方形のモノを用意すると

綺麗に表示しやすいです。

画像付きコメントをカスタマイズする方法

簡単に画像付きコメントをカスタマイズする方法

について解説致します。

ご自身で触りたい方だけ触ってくださいね。

画像付きコメントの枠線を変える方法

まずは画像付きコメントの枠線（水色の線）を変える方法です。

枠線の色や太さを変える場合は

以下のCSSコードで調整してください。

左から順に、線種・太さ・色の指定コードになりますので

線種を変える場合はsolidをdashesやdottedに

太さを変える場合は2pxを1pxや4pxに

色を変える場合は#a7cff3のカラーコードを変えてください。

画像付きコメントの背景色を変える方法

画像付きコメントの背景色を変える場合は

内にある.combox{のCSSに

以下のコードを追加してください。

さらに「アコーディオンボタン付き」の場合は

以下のコードに加えて

さらに内にある

以下の2箇所のカラーコードを

あなたが設定するカラーコードと統一してください。

さらにカスタマイズしたい場合は

あなたご自身で調べて調整してください。

ややこしい部分はあえて説明しません＾＾；

画像付きコメントを使う時の注意点

今回、あなたに説明した画像付きコメントですが

アコーディオンボタン付きに限り

1つだけ注意点があります。

今回解説している画像付きコメントの

HTMLとCSSコードはそれぞれ1パターンずつなので

複数のHTMLコードを設置してもそれに対応する

CSSコードが1つのため、全てのコードが

同時に反応してしまい機能しなくなります。

なので、それを回避するため

HTMLコードを個別に設定する必要があります。

この説明だけでは非常に分かりにくいと思うので

具体的に書いておきますが

アコーディオンボタン付きの

画像付きコメントを1つだけ使う場合は

コピーしたコードでそのまま使ってください。

そして、2つ目のアコーディオンボタン付きを使用する場合は

以下の数字を2箇所（ピンク文字2の部分）

id="tab-2"と<label for="tab-2">とを

それぞれ１から２へと変更してください。
※初期コードは1になっています。サンプルは変更後のコードです。

3つ目のアコーディオンボタン付きを使用する場合も同様に

以下の２箇所を3に変更してください。

そうすることで、いくつアコーディオン機能付きの

画像付コメントを足しても、きちんと反応するようになります。

もしも分からない場合は、HTMLコードを2つ書いて

片方の数字をid="tab-2"と<label for="tab-2">に

変えてみてください。それだけやれば要領が分かると思います。

とにかく、同じHTMLコードを2つ以上書いても

HTMLコードを触らなければ後から書いた方は

きちんと反応しないということだけ覚えておいてくださいね。

「分からん！」という人は

１つだけ使うようにしてください（笑）

画像付きコメント効果的に使う方法

画像付きコメントのCSSコードさえ書いておけば

後はHTMLコードを呼び出すだけでいつでも使えます。

そんな時に便利なのがWordPressプラグイン

「AddQuicktag」です。

これにHTMLコードを書いておけば

いつでもコードが呼び出しできて非常に便利です。

なので、今後、画像付きコメントを

使いたいという人はHTMLコードを

「AddQuicktag」に登録しておきましょう。

こうして登録さえしておけば

いつでも便利に呼び出すことができます＾＾

これからちょくちょく画像付きコメントを

使いたいという場合は「AddQuicktag」に

登録しておきましょうね＾＾

STORKで画像付きコメントを表示させる方法まとめ

今回はSTORKで画像付きコメントを表示させる方法を

お伝えしてきましたがいかがでしたでしょうか。

少なくとも口コミに関するコメントや

アンケートの回答例など使える部分はあるかと思います。

私の場合はアンケートのコメント例として「使いたい」と

思ったので、この画像付きコメントを作りました。

だから、私と同じように「使いたい！」と

思ってくれる人がいるととても嬉しいです＾＾

また、ある程度応用が効くコードをご紹介致しましたので

カスタマイズのチャレンジャーさんはこれをベースに

ぜひあなただけのスペシャルなコードにアレンジしてみてください。

今回のコードは細かい調整が少し難しいので、HTMLやCSSに

詳しくない人はいきなりコードをアレンジしようとするのではなく

まずはコードをコピーして構造を勉強しましょう。

WordPressで自分のサイトを運営する以上は

多少なりともHTMLやCSSは理解している方が絶対に良いし

私はそんな勉強をするのもすごく大事だと思っています。

なぜなら、自分のサイトはある意味「自分の仕事道具」だし

仕事道具の使い方も理解せずに、お金を稼ごうというのは

あまりに都合が良すぎると思うからです。
※ネットビジネスに活用している場合ですが…

なので、多少のお時間が取れる方であれば

単にコードをコピーして終わりにするのではなく、どういう構造で

それができているのか興味を持ってもらえると嬉しいです＾＾

ということで、

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