Lognote

整体師によるお役立ち情報ブログ

affinger4-hukidashi-thumbnail

WordPressにAFFINGER4のような会話風ふきだしを実装する方法

2017-03-22

AFFINGER4に会話風ふきだし機能が昨年12月に追加されました。

affinger4-hukidashi-01

これ、使い勝手良さそう!

AFFINGER4は購入済みなのですが、このブログのテーマのSTINGER7(現在はSTINGER8)は結構いじってしまっているので、ふきだしのためだけに移行するのはさすがに気が重く躊躇していました。

Speech bubble」というWordPressプラグインもあるのですが、なるべくプラグインは使わずにつけられないかといろいろ調べて、ショードコードを使って呼び出す方法で簡単に実装できるということがわかりました。

そこで、この記事ではWordPressに会話風ふきだしをAFFINGER4もプラグインも使わずに実装するカスタマイズ方法を紹介します。

この方法だと、クイックタグを登録することで記事内に自由に使うこともできるので、わざわざHTMLコードを入力する必要もありません。

最終完成イメージ

この記事で紹介するカスタマイズの完成イメージです。

見た目はほぼAFFINGER4と同じです。

ヤマカワ
このようなふきだしが記事内どこにでも自由に配置できます
AFFINGER4では数に制限がありますが、何人でも好きなだけ登録できます(10人でも100人でもOK!)
CSSでふきだしの色も自由に変更できます

カスタマイズの手順

カスタマイズは以下の手順でおこないます。

  • functions.phpにショートコードを作成
  • デザイン用CSSを記述する

functions.phpにショートコードを作成

それでは、実際にカスタマイズをおこなっていきます。

ますは下記のPHPコードをfunctions.phpに追記してください。

PHP

//会話風ふきだしショートコード
function kaiwasc1Func( $atts, $content = null ) {
    return '<div class="kaiwa-box kaiwaicon1 clearfix"><div class="kaiwa-face"><img src="アイコンURL" width="60px"><div class="kaiwa-face-name">アイコンの名前</div></div><div class="kaiwa-area"><div class="kaiwa-hukidashi">'.$content.'</div></div></div>';
}
add_shortcode('kaiwa1', 'kaiwasc1Func');

アイコンURLに表示したい人物の画像URLを指定します。CSSで60pxの正方形で表示するので、最低でも60px以上の画像を指定してください。

アイコンの名前はアイコンの下に小さく表示される名前です。

会話アイコンを2人、3人と増やしたい場合は、上記コードをそのままコピペすればOKです。

例えば3人分作りたいときは、

//会話風ふきだしショートコード
function kaiwasc1Func( $atts, $content = null ) {
    return '<div class="kaiwa-box kaiwaicon1 clearfix"><div class="kaiwa-face"><img src="アイコンURL" width="60px"><div class="kaiwa-face-name">アイコンの名前</div></div><div class="kaiwa-area"><div class="kaiwa-hukidashi">'.$content.'</div></div></div>';
}
add_shortcode('kaiwa1', 'kaiwasc1Func');

function kaiwasc2Func( $atts, $content = null ) {
    return '<div class="kaiwa-box kaiwaicon2 clearfix"><div class="kaiwa-face"><img src="アイコンURL" width="60px"><div class="kaiwa-face-name">アイコンの名前</div></div><div class="kaiwa-area"><div class="kaiwa-hukidashi">'.$content.'</div></div></div>';
}
add_shortcode('kaiwa2', 'kaiwasc2Func');

function kaiwasc3Func( $atts, $content = null ) {
    return '<div class="kaiwa-box kaiwaicon3 clearfix"><div class="kaiwa-face"><img src="アイコンURL" width="60px"><div class="kaiwa-face-name">アイコンの名前</div></div><div class="kaiwa-area"><div class="kaiwa-hukidashi">'.$content.'</div></div></div>';
}
add_shortcode('kaiwa3', 'kaiwasc3Func');

このように、2行目のkaiwasc1Func、3行目のkaiwaicon1、6行目のkaiwa1kaiwasc1Funcも数字部分をコピーした数に合わせて変更してください。

また、ふきだしの色やデザインは3行目のkaiwaicon1のセレクタで指定します。

デザイン用CSSを記述する

次にデザインを加えます。

メディアクエリは必要ないので、共通部分に下記のCSSを追加してください。

CSS

/*--------------------------------------
会話風ふきだしデザイン
--------------------------------------*/
.kaiwa-box {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	display:table;
}

.kaiwa-face {
	text-align:center;
	display: table-cell;
	width:60px;
	vertical-align:middle;
}

.kaiwa-face img{
	border-radius: 60px;
	border: 1px solid #ccc;
	margin-bottom:5px;
}

.kaiwa-face-name {
	color: #333333;
  	font-size:70%;
	line-height:1.5;
  	max-width:60px;
}

.kaiwa-area {
	display: table-cell;
	margin:0;
	vertical-align:middle;
	text-align:left;
}

.kaiwa-hukidashi {
	display: inline-block;
	padding: 15px 20px;
	margin-left: 20px;
	border-radius: 7px;
	position: relative;
	background-color: #f9f9f9;
}

.post .kaiwa-hukidashi p:last-child {
	 margin-bottom:0px;
}

.kaiwa-hukidashi:after {
	content: "";
	position: absolute;
	top: 50%; left: -10px;
	margin-top: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent #f9f9f9 transparent transparent;
}

.kaiwaicon1 .kaiwa-hukidashi:after { border-color: transparent #ddeeff transparent transparent; }
.kaiwaicon1 .kaiwa-hukidashi { 	color: #333333; background-color: #ddeeff; }

.kaiwaicon2 .kaiwa-hukidashi:after { border-color: transparent #ECF8E0 transparent transparent; }
.kaiwaicon2 .kaiwa-hukidashi { 	color: #333333; background-color: #ECF8E0; }

.kaiwaicon3 .kaiwa-hukidashi:after { border-color: transparent #F8E0E0 transparent transparent; }
.kaiwaicon3 .kaiwa-hukidashi { 	color: #333333; background-color: #F8E0E0; }

複数のふきだしを作る場合は、64行目、65行目の.kaiwaicon1.kaiwaicon2.kaiwaicon3のように増やして背景色や文字色を変更してください。

ここまでできたら、あとは記事編集画面でこのように記述するだけです。

affinger4-hukidashi-02

AddQuicktagを使うともっと便利!

ふきだしをたくさん使う方は、AddQuicktagにショートコードを登録しておくと便利です。

affinger4-hukidashi-03

私は以下のように設定しています。参考にしてください。

affinger4-hukidashi-04

これでワンクリックでふきだしが設置できるようになります。

affinger4-hukidashi-05

横顔シルエットフリー素材ダウンロードリンク

今回使わせていただいたシルエットフリー素材を紹介します。

■男性シルエット

affinger4-hukidashi-06

■女性シルエット

affinger4-hukidashi-07

■子供シルエット

affinger4-hukidashi-08

ふきだしと顔の向きが左右逆なので、画像編集ソフトで反転させて使いましょう。

オススメ商品はこちら!

-WordPress
-

ヤマカワ (@lognotebiz) のヒトコト
記事内のちょっとしたアクセントとしてふきだしは便利ですねー!あとはキャラ付けとかもできると親しみやすさも出るかも。
この記事のタイトルとURLをコピーする
WordPressにAFFINGER4のような会話風ふきだしを実装する方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

mb-substr-wordpress-thumbnail

抜粋を表示してくれるPHP関数「mb_substr」のWordPressでちょっと使いにくい点

最近、SEO的に画像にaltとキャプションを入れるのも無視はできないという記事を読み、わたしも実践するようにな …

thumbnail-blur-improvement-thumbnail

SIMPLESTER Ver6の記事一覧のぼやけたサムネイルをはっきり表示させる方法

SIMPLESTER Ver6で、記事一覧の右に表示されるサムネイルが、ぼやけて表示される方はいませんでしょう …

top-list-ie11-bug-thumbnail

SIMPLESTER Ver6の記事一覧がIEだとセンター寄せではみ出す問題の応急処置法

SIMPLESTER Ver6の記事一覧表示が、IEで見たときだけボックス内のテキストが全てセンター寄せになっ …

ボタンじゃないSNSのシェア数だけを表示する【WordPress】

ブログをやるうえで、記事をバズらせるというのは一つの夢でもあります。 こちらのサイトによると、バズるブログの6 …

iphone-icon-black-thumbnail

WordPressでiPhone用アイコンの透過部分が黒くなる問題を疑似的に解決する方法

WordPressは、カスタマイズからサイトアイコンを簡単に設定できますが、iPhone用アイコンだと透過部分 …


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

lognote
2017/5/09
コメントありがとうございます。 本当にそうですよね。 通販サイトは、相手の顔が見えない分信頼第一で成り立っているので、Amazonにはマーケットプレイスの管理をしっかりやっていただきたいで...
匿名探偵
2017/5/09
ここ最近のamazonはちょっとヤバいですね。 4,5000円が相場で微小の変動しかしていなかった市場に、今年度に入って急に1000円切った値で断続的に出品するなど、異常な出品者が様々な商品に出没し...
Healer

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士