「[Simplicity] キャラ画像付きふきだしで会話風にするカスタマイズ。他のテーマにも使えるよ!

シェアする

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: 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;
}

@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;  /* キャラ画像と吹き出しの間隔*/
	}
	}

.キャラ名::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タグも入っているようですが・・・
    アドバイス頂けると助かります。