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

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

 

ここあです。

 

私が使っているWordPressテーマ「STORK」は

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

初心者でも非常に扱いやすいテーマです。

 

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

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

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

 

なので、

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

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

 

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

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

 

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

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

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

 

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

私は愛着を持ってこのサイトを我が子のように

育てています(笑)

 

ということで、

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

今回のアイテムはコレ!

 

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

↓これです

STORKすごい
30代女性 ★★★★★

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

 

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

こんなテーマを待っていました!
30代男性 ★★★★★

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

 

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

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

需要はなくても全然OK!(笑)

 

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

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

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

 

なので、

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

は「Let’s コピペ!」(笑)

 

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

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

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

 

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

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

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

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

 

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

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

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

 

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

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

 

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

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

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

 

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

 

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

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

ダッシュボードメニュー

 

 

以下「追加CSS」の部分に

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

追加CSS編集画面

 

 

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

 

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

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

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

 

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

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

 

ということで…

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

 

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

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

STORKすごい
30代女性 ★★★★★

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

を表示させるための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コードはこちらです。

/*コメントBOX*/
.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;
}

 

 

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

こんなテーマを待っていました!
30代男性 ★★★★★

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

画像付きコメントの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コードはこちらです。

/*コメントBOX*/
.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;
}

/* アコーディオン2 */
.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;
}

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

 

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

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

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

 

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

調整してください。

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

 

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

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

 

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

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

について解説致します。

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

 

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

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

 

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

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

 

.combox{
border:solid 2px #a7cff3;←線種・太さ・色
border-radius:5px;
}

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

 

線種を変える場合はsoliddashesdotted

太さを変える場合は2px1px4px

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

 

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

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

/*コメントBOX*/内にある.combox{のCSSに

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

 

/*コメントBOX*/
.combox{
border:solid 2px #a7cff3;
background:#fffff0;←これを足す
border-radius:5px;
}

 

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

以下のコードに加えて

/*コメントBOX*/
.combox{
border:solid 2px #a7cff3;
background:#fffff0;←①これを足す
border-radius:5px;
}

 

さらに/* アコーディオン2 */内にある

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

 

.cp_actab2 label {
background: #fff;←変更前
}

.cp_actab2 .cp_actab-content {
background: #fff;←変更前
}

 

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

.cp_actab2 label {
background: #fffff0;←①と色を揃える
}

.cp_actab2 .cp_actab-content {
background: #fffff0;←①と色を揃える
}

 

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

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

ややこしい部分はあえて説明しません^^;

 

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

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

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

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

 

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

以下の数字を2箇所(ピンク文字2の部分)

 

2つ目を使う場合のコード例

<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-2" name="tabs"
type="checkbox" /><label for="tab-2">+ クリックしてください</label>

<div class="cp_actab-content">
<p>説明のテキストをここに</p>
</div>
</div>
</div>
</div>

 

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

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

 

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

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

<input id="tab-3" name="tabs" type="checkbox" /><label for="tab-3">+ クリックしてください</label>

 

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

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

 

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

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

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

 

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

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

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

 

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

1つだけ使うようにしてください(笑)

 

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

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

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

 

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

「AddQuicktag」です。

 

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

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

 

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

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

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

 

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

AddQuicktag

 

 

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

AddQuicktag

 

 

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

ということで、最後までお読みいただき

ありがとうございました!

 

細かいカスタマイズ方法については聞かないでください(笑)

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

 

 

合わせて読みたい!

 

ネットで毎月30万円以上の自動収益を得ながら
「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●「デザインばか」のここあが半年で収益化したネットビジネスのノウハウ
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●ここあが副業にネットビジネスをすすめる理由
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●パソコン音痴でもパソコン一台で年収1000万円稼ぐ手法
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
●副業解禁の時代をナメているとこれからどうなってしまうのか?

などなど、掲載できるものだけをピックアップしてみました。

無料メール講座本編では、もっと秘匿性の高い内容もたくさん出していきます。

また、私がこれまで100万円以上投資して学んだ有料セミナーでしか手に入らない情報もコッソリ無料メール講座でお伝えしていきます。

※この無料メール講座は、有料講座で聞いた内容も多数含まれており、予告なく募集を終了する可能性があります。

ですので、募集している今のうちにプレゼントを受け取ってくださいね。

下記のボタンをクリックして

・「あなたのお名前
・「メールアドレス

を入力してご登録お願いします。

ここあ公式「LIFE DESIGN通信

お名前
メールアドレス

ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年に独立。現在はネットとデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。「一度きりの人生」あなたも私と一緒に謳歌しませんか?