「[Simplicity] キャラ画像付きふきだしで会話風にするカスタマイズ。(CSS修正しました)

シェアする

今週の人気記事
今週の人気記事
今週の人気記事ベスト5

2017年7月19日にCSSの一部を修正しました。

Simplicityにはバージョン1.3.8 からの標準機能として、LINE会話風吹き出しが実装されています。

拡張クラスが設定されていますので、簡単に設定できます。

例えば、LINE風の吹き出し

2017y02m02d_091732221

背景をつけて、よりLINE風にしたものだと

2017y02m02d_091845925

こんな感じです。

あっという間にできてしまいます。やはりSimplicityは高機能で素敵です(^_^)

スポンサーリンク

画像付きの吹き出しにしてみよう

LINE風の吹き出しは、いまどきのデザインでいいんですがブログでそのまま使うには殺風景な感じもしてしまいます。

今回は、コピペで使える画像付き吹き出しのカスタマイズを紹介します。

完成品はこんな感じです。

2017y02m02d_092407556
NO TITLE様の記事を参考にさせていただいています。

キャラ画像の準備

吹き出しのキャラ画像を準備します。

ダッシュボード→メディア→新規追加→ファイル選択で使いたい画像を選びます。

次に編集で画像サイズを小さくします。100px×100px位で十分です。

編集→画像を編集

(又はメディア→ライブラリ→画像選択→画像を編集)

2017y02m02d_101932310

2017y02m02d_101938387で縮尺変更

2017y02m02d_183623078

100×100にして縮尺変更

2017y02m02d_183655337

保存したら、ファイルのURLをコピーしてメモ帳などに貼り付けておきます。

CSSカスタマイズ

カスタマイズといっても、貼り付けてから数箇所変更するだけです。

Simplicityのレスポンシブ設定を使っている場合

responsive

responsive.cssを編集します。

CSS

/*ここにレスポンシブのスタイルを書く*/ の下に以下のコードコピペします。

 /* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
 position: relative;
 width: 80%;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 padding: 11px;
 border-radius: 6px;
 border: 2px solid #999;
 box-shadow: 1px 1px 5px #aaa;
 background-color: #fff;
 z-index: 1;
}
.entry-content .l-fuki {
 margin: 40px 20px 40px 10%;
}
.entry-content .r-fuki {
 margin: 40px 20px 40px 10%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
 position: absolute;
 content: "";
 top: 16px;
 width: 10px;
 height: 10px;
 border-right: 2px solid #999;
 border-bottom: 2px solid #999;
 background-color: #fff;
 z-index: 2;
}
.entry-content .l-fuki::before {
 right: -7px;
 transform: rotate(-45deg);
 -webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
 left: -7px;
 transform: rotate(135deg);
 -webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
 position: absolute;
 content: "";
 width: 70px;
 height: 70px;
 top: -10px;
 border-radius: 40px;
 border: 3px solid #fff;
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat;
 box-shadow: 0px 0px 0px #aaa;
}
.entry-content .l-fuki::after {
 right: -85px;
}
.entry-content .r-fuki::after {
 left: -85px;
}

@media screen and (max-width: 620px) {
 .entry-content .l-fuki,
 .entry-content .r-fuki {
 width: 75%
 }
 .entry-content .l-fuki {
 margin-right: 30%;
 }
 .entry-content .r-fuki {
 margin-left: 20%;
 }
.entry-content .l-fuki {
 margin: 20px 20% 40px 3%;
}
}
@media screen and (max-width: 478px) {
 .entry-content .l-fuki::after,
 .entry-content .r-fuki::after {
 width: 60px;
 height: 60px;
 border-radius: 30px;
 }
 .entry-content .l-fuki::after {
 right: -82px;
 }
 .entry-content .r-fuki::after {
 left: -75px;
 }
}
.キャラ名::after {background-image:url(http://○○○○○○○○○○○○.jpg);}
.キャラ名::after {background-image:url(http://○○○○○○○○○○○○.jpg);}

/* 吹き出しのCSS終わり */

キャラ名は英字で好きな名前をつけます。ex) .tarou
http://○○○○○○○○○の部分は、先ほどメモ帳に貼り付けた、キャラの画像のURLをいれます。

保存します。

Simplicityでレスポンシブ設定を使っていない場合

mobile

レスポンシブを使っていない場合は、PCのスタイルをスタイルシート
モバイル(スマホ)のスタイルをmobile.cssに貼り付けます。

PCスタイル

スタイルシート部分の/* Simplicity子テーマ用のスタイルを書く */ の下に以下のCSSを貼り付けます。

2017y02m02d_192654912

/* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
	position: relative;
	width: 80%;  /* 全体(キャラ画像と吹き出し)の横幅*/
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 11px;
	border-radius: 6px;
	border: 2px solid #999;
	box-shadow: 1px 1px 5px #aaa;
	background-color: #fff;
	z-index: 1;
}
.entry-content .l-fuki {
	margin: 20px 20% 40px 10%;  /* 吹き出しとまわりとの間隔 10%を変えると全体の位置調節*/
}
.entry-content .r-fuki {
	margin: 20px 0 40px 10%;  /* 吹き出しとまわりとの間隔 10%を変えると全体の位置調節*/
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
	position: absolute;
	content: "";
	top: 16px;
	width: 10px;
	height: 10px;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	background-color: #fff;
	z-index: 2;
}
.entry-content .l-fuki::before {
	right: -7px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
	position: absolute;
	content: "";
	width: 70px;  /* キャラ画像の幅*/
	height: 70px;  /* キャラ画像の高さ*/
	top: -10px;  /* キャラ画像の位置:上下方向*/
	border-radius: 40px;
	border: 3px solid #fff;  /* キャラ画像の白枠の色と幅*/
	background-size: cover;  /* キャラ画像の白枠の調整*/
	background-position: center center;
	background-repeat: no-repeat;
	box-shadow: 0px 0px 0px #aaa;  /* キャラ画像の白枠につける影*/
}
.entry-content .l-fuki::after {
	right: -85px;
}
.entry-content .r-fuki::after {
	left: -85px;
}

.キャラ名::after {background-image:url(http://○○○○○○○○○○○○.jpg);}
.キャラ名::after {background-image:url(http://○○○○○○○○○○○○.jpg);}

キャラ名は英字で好きな名前をつけます。ex) .tarou
http://○○○○○○○○○の部分は、先ほどメモ帳に貼り付けた、キャラの画像のURLをいれます。

モバイル(スマホ)スタイル

mobile.cssの/*ここにモバイルのスタイルを書く*/ の下に以下のCSSを貼り付けます。

2017y02m02d_192354953

@media screen and (max-width: 620px) {  /* 画面サイズ620pxまで適用する*/
	.entry-content .l-fuki,
	.entry-content .r-fuki {
		width: 75%
	}
	.entry-content .l-fuki {
		margin-right: 30%;
	}
	.entry-content .r-fuki {
		margin-left: 20%;
	}
.entry-content .l-fuki {
    margin: 20px 20% 40px 3%;
}
}
@media screen and (max-width: 478px) {  /* 画面サイズ478pxまで適用する*/
	.entry-content .l-fuki::after,
	.entry-content .r-fuki::after {
		width: 60px;  /* キャラ画像の幅*/
		height: 60px;  /* キャラ画像の高さ*/
		border-radius: 30px;
	}
	.entry-content .l-fuki::after {
		right: -82px;  /* キャラ画像と吹き出しの間隔*/
	}
	.entry-content .r-fuki::after { 
		left: -75px;  /* キャラ画像と吹き出しの間隔*/
	}
}

これでCSSのカスタマイズは終了です。

Add Quick tagを設定する

ここまでに設定した画像つき吹き出しを使うには、文字列に上記のスタイルを適用させる必要があります。

毎回手で直接入力すると大変なので、Add Quick Tagを利用しましょう。

使ったことのない人はこちらの記事を参考にしてみてください。

【WordPress】面倒なタグや定型文を簡単挿入!AddQuicktag
WordPressプラグインAddQuicktagのインストールと使い方 photo by John Fisch...

Add Quick Tagへの登録

吹き出しは、

  • キャラ画像が左側にあって吹き出しが右にあるもの
  • キャラ画像が右側にあって吹き出しが左にあるもの

の二つのケースが想定されます。左右を使い分けることでより会話調に見せることができます。

これまでの作業でCSSに設定したキャラ画像(仮にtarouとしてみます)を使って、右側吹き出しと左側吹き出しのタグを登録してみます。

<p class="r-fuki tarou">会話内容</p>

2017y02m03d_112053452
ここでの、r-fukiは、右側に吹き出しです。つまり、キャラ画像が左で吹き出しが右です。

<p class="l-fuki tarou">会話内容</p>

2017y02m03d_112047699

とすると、l-fukiなので、左側に吹き出しです。つまり、キャラ画像が右で吹き出しが左です。

Add Quick Tagへの設定

Add Quick Tagには、

2017y02m03d_114705592

と登録しておきます。

これで、カスタマイズ終了です。

お疲れ様でした。

次は、CSSの調整の仕方を解説するよ!

CSSの調整方法

今回紹介したカスタマイズCSSは、PCでは

Simplicityの通常幅

に、スマホは

iPhone6

に合うように調整しています。
※スマホはiPhone6しか所有していないので、他の機種ではどうなるのか確認できていません。

  • Simplicityを使っているけど、幅をカスタマイズしている場合
  • Sinplicit以外のテーマを使っている場合
  • 所有しているスマホでずれて表示されている場合

は、少し調整が必要です。

調整すればSimplicity以外にも使えるよ!

これまでに紹介したCSSには、わかりやすいように右側に何を調整する項目かを記載しています。

例えば
2017y02m04d_090845831

といった感じです。

あとは値を変えて、調整してみてください。Chromeの検証機能を使うと簡単です。

使ったことのない人はこちらの記事を参考にしてみてください。

【Stinger5】カスタマイズが2倍楽になる!Chromeを使ったデザインカスタマイズ術
Google Chromeを使ってブログデザインのカスタマイズを楽に行う方法を紹介します。この方法であれば気になる...
画像の大きさ

2017y02m04d_091606604
画像は自動で丸く切り抜きされます。大きさを変えたい場合は、この部分を変更します。

WidthとHeightは同じ数値にしないと、画像の端が欠けるので注意が必要です。topの値を調整すると、画像の上下の位置が変わります。

吹き出しの調整

これまでに紹介したCSSでは、読みやすいように吹き出しの位置を揃えています。
2017y02m04d_091728133

もっと幅がほしいというときはこの部分で調整できます。

吹き出し3

width: 80%;  /* 全体(キャラ画像と吹き出し)の横幅*/

で吹き出しの幅を変更できます。

そして、

.entry-content .r-fuki {
    margin: 20px 0 40px 10%;  /* 吹き出しとまわりとの間隔 10%を変えると全体の位置調節*/

の10%の部分で全体(キャラ画像と吹き出し)の位置が調整できます。

2017y02m04d_092127696

これで横方向の吹き出しスペースが広がりました。

まとめだよ!

いかがでしたでしょうか?

記事の途中で話題を変えたいときや記事の冒頭の導入部分などいろいろな場面で活躍します(^_^)

ぜひお試しください!

スポンサーリンク

シェアする

フォローする

コメント

  1. より:

    吹き出しが出るところまでは出来るのですが、画像が表示されません。
    何が原因なのでしょうか?

    • goma より:

      ご質問ありがとうございます。画像ファイルのURLはあっていますか?
      もし、Chromeをお使いであれば、設定キャッシュされた画像とファイルをクリアしてみてください。その他キャッシュ系のプラグインをお使いであればキャッシュをクリアしてみてください
      。もしうまくいかないときはまたコメントください(^_^)

  2. 奥戸 より:

    私も吹き出しは出るのですが、画像が表示されません。
    画像ファイルのURLはあってます。
    設定のキャッシュされた画像とファイルをクリアしてみましたが、やはり画像が表示されないままでした。
    ほかに何か原因で考えられることはありますでしょうか?
    参考になるかわかりませんが、吹き出しを入れた記事をウェブサイト記載欄に入れておきます。

    • goma より:

      コメントありがとうございます。
      ソースを見させていただきました。とりあえず画像がでていないのは
      .entry-content .l-fuki::after, .entry-content .r-fuki::after
      のところでheightが指定されていないだからと思います。
      heightを指定していただいて、あとは微調整していただけたらと思います。
      もしまたご不明な点がございましたらいつでもコメントください。

      • 奥戸 より:

        早速ご返信いただきありがとうございます。
        CSSそのままコピペで貼り付けたつもりでしたが、抜けてしまっていたんですかね(^^;
        微調整、がんばってやってみます!
        丁寧にメールまでいただきありがとうございました(*^^*)

  3. まるお より:

    やってみたのですが、私も画像だけが表示されません。
    heightタグも入っているようですが・・・
    アドバイス頂けると助かります。

  4. ポポまる より:

    情報の追加です。

    Chromeのキャッシュクリアは試しました。→ ダメでした。
    Chromeのシークレットモードで見てみましたが、それでも結果は画像が表示されない状態です。

    なんども送信してしまいスミマセン。

  5. ポポまる より:

    送信できていない可能性があるので3回目の送信です。
    重複していたらスミマセン。
    ———————-
    お世話になります。
    本日より、吹き出しを利用させていただいています。
    CSSをまるまるコピペで使えるので非常に助かっています。
    ありがとうございます!!

    ただ、現在トラブってまして…。
    肝心の画像が表示されない状態です。

  6. ポポまる より:

    度々コメントすみません。
    解決しましたので報告します。
    お手数おかけしましたm(_ _)m

    • goma より:

      連休中外出していたためお返事できなくて申し訳ありませんでした。解決したとのことでよかったです。

  7. ポポまる より:

    あと、コメント送信のときに、『あたなのコメントは承認待ちです』と出るときとでない時があります。
    なのでコメントが送信できているのか出来ていないのかわからない時が多々あります。
    重複送信してしまっている時があります。

    コメントに文字数制限、指定文字拒否などはありますでしょうか?

    • ポポまる より:

      追記
      コメントにURLを入力していると、NGになったりしますか?

      • goma より:

        コメントありがとうございます。特に制限はかけていません。コメントされるかたの名前とメールアドレスが入力されていれば承認待ちに移行すると思います。
        今回のような指摘は初めてですので原因がわかりません・・・。また同じような現象があれば教えてください。

        • ポポまる より:

          >>特に制限はかけていません。コメントされるかたの名前とメールアドレスが入力されていれば承認待ちに移行すると思います。

          →特に制限は無いということで了解しました!

          ちなみに現在は、▼のサイトのやり方を一時的に採用しているところです。
          プラグイン無しで画像つきの「LINE風会話入力」を設置してみる【WordPress】 | きもおた・わーどぷれす。

          ボクとしてはgomaさんのやり方を使いたいのですが、画像が消えてしまう原因はわかりますか?

          • ポポまる より:

            ちなみに、CSSはgomaさんのレスポンシブをコピペしただけなので、編集等は一切していません。

            ただ、ChromeでCSSの確認をすると、▼以下のようになっています。
            ————————————
            .entry-content .l-fuki::after, .entry-content .r-fuki::after {
            position: absolute;
            content: “”;
            width: 70px;
            border: 3px solid #fff;
            background-repeat: no-repeat;
            box-shadow: 0px 0px 0px #aaa;
            }
            ————————————
            なぜか、height や、top、border-radius 等が消えてしまいます。
            消えてしまう部分に !important などを付けても消えてしまいます。
            疑似要素でこれらが消えてしまう原因、また解決策などご存知であれば教えていただけると助かりますm(_ _)m

            お手数ですが、よろしくお願いします。

  8. ポポまる より:

    一応、display:block or inline-block を入れて試してみましたが、それも意味はなかったです。

  9. ポポまる より:

    goma さんメールありがとうございますm(_ _)m

    画像非表示の確認用テストページ作りました!!
    吹き出しテストページ【解決したら削除するページ】

  10. ポポまる より:

    わざわざメールまで頂きありがとうございました!!
    goma さんのおかげで無事、画像が表示されるようになりました(^o^)/

    本当にアリガトウございま~す(^o^)b

  11. ポポまる より:

    goma さんこんにちは。以前はお世話になりましたm(_ _)m

    今回は、吹き出しに関することでは無いのですが報告的な内容です。

    以前、コメント欄で、

    >>コメントに文字数制限、指定文字拒否などはありますでしょうか?
    >>コメントにURLを入力していると、NGになったりしますか?

    と、伺いました。

    で、goma さんからは、

    >>特に制限はかけていません。

    との回答でした。

    実は、先日 Simplicity の作者 わいひらさん とのやり取りで知ったことなのですが、

    わいひらさんから↓の事を教えてもらいました。
    ----------------
    『フォーラムの書き込みにソースコードを含めていませんでしたか?
    ソースコードを含んでいる場合は、エックスサーバーの仕様で、ファイヤーウォールに引っ掛かる可能性があります。』
    ----------------
    との事で、

    以前ボクが、コチラのコメント欄に書き込んでもウマく反映されなかったコメントには、実は「CSSのソースコード」を書き込んであったんです。

    ただ、CSSを書き込んでもコメント出来ているものもあるので明確なことはわかりませんが、エックスサーバーのセキュリティに弾かれてコメントがうまく書き込めなかったのかもしれません。

    >>今回のような指摘は初めてですので原因がわかりません・・・。また同じような現象があれば教えてください。

    との記述があったのと、↓の記事で、

    ●サーバー、ドメイン、テンプレートはどれがいい?ブログをはじめるなら、この組み合わせで間違いなし!
    http://www.globalcontent-collabo.net/post-2748/

    gomaさんがエックスサーバーを使っているというのを把握できたので、報告がてらコメントさせて頂きました。

    既に、gomaさん がご存知の内容でしたら、大変失礼いたしましたm(_ _)m

    • goma より:

      ポポまるさま

      ありがとうございます。今後の参考にさせていただきます。

      goma