ふきだしを使って会話形式のブログを書こう！WordPressのショートコードも使って便利に。

こんにちは。でんすけ（@notgeek_densuke）です。

ブログをやっていると、こんな感じで、ふきだしを使って会話形式にして、親近感がわかせたい！という時、ありますよね。

ですよね！

ということで、今回は、WordPressブログで、ふきだし形式を使ってみようの回です。

さっそく、HTML、CSSでふきだしを作るソース

ソースコードはこんな感じ。
まずはHTMLのコード。
これを編集画面に書けばいいんですな。

<div class="fukidashi right">
    <img>
    <p>こんにちは。でんすけです。</p>
</div>

<div class="fukidashi left">
    <img>
    <p>ブログをやっていると、・・・うんぬん</p>
</div>

会話内容は適当に書き換えてくださいまし。

で、これに対するCSSの定義はこんな感じ。

div.fukidashi{
    padding-top: 15px;
    padding-bottom: 15px;
	height:auto;
	overflow:hidden;
	clear:both;
}

div.fukidashi img{
	width: 75px;
	height:75px;
	background-size: cover;
}
div.fukidashi.right img{
	background-image:url("画像のURL");
	float:left;
}
div.fukidashi.left img{
	background-image:url("画像のURL");
	float:right;
}

div.fukidashi p{
    padding: 10px;
    position: relative;
	border:solid 1px #000;
	border-radius:5px;
	width:calc(100% - 100px);
	box-sizing: border-box;
}
div.fukidashi.left p{
	float:left;
}
div.fukidashi.right p{
	float:right;
}

div.fukidashi p:before,
div.fukidashi p:after
{
    content: '';
    border: 10px solid transparent;
    position: absolute;
	top:13px;
}
div.fukidashi.left p:before {
    border-left: 15px solid black;
    left: 100%;
}
div.fukidashi.left p:after {
    border-left: 15px solid white;
    left: calc(100% - 1px);
}
div.fukidashi.right p:before {
    border-right: 15px solid black;
    right: 100%;
}
div.fukidashi.right p:after {
    border-right: 15px solid white;
    right: calc(100% - 1px);
}

「画像のURL」のところは各自変更してください。

ふきだしが右側に来るパターンを「fukidashi right」
逆に、ふきだしが左側に来るパターンを「fukidashi left」
としています。

WordPress用にふきだしショートコードを作る

さて。
毎回HTMLのコードを書くの、めんどいやん！
という場合のために、ショートコードを作ってしまいましょう。

ショートコードってなんじゃい？
という方はこちら。

[WordPress]ショートコードを活用しよう！ブログでよく使う定型文や広告コードを短いコードでまとめる方法

functions.phpに、こんな感じのコードを追加すればOK。

function fukidashiFunc($attr, $content , $direction){
	//投稿編集内で改行すると自動で付与される<p>タグをここで削除
	$content = preg_replace('/\<p\>|\<\/p\>/', '', $content);

	//左、右に応じたHTMLタグを生成
	return '<div class="fukidashi ' . $direction . '">
            <img>
            <p>' . $content . '</p>
            </div>';
}

//左ふきだしのショートコード

            
            

            
を作成
function fukidashiLeftFunc($attr, $content = null){
	return fukidashiFunc($attr, $content ,"left");
}
add_shortcode('fukidashi-l' , 'fukidashiLeftFunc');

//右ふきだしのショートコード

            
            

            
を作成
function fukidashiRightFunc($attr, $content = null){
	return fukidashiFunc($attr, $content ,"right");
}
add_shortcode('fukidashi-r' , 'fukidashiRightFunc');

すると、わざわざHTMLコードを書かなくても
こんな感じで書けば、ふきだしにできちゃいます。

[fukidashi-r]こんにちは。でんすけです。[/fuki dashi-r]
[fukidashi-l]ブログをやっていると・・・[fukidashi-l]

作るのめんどくさい人へ！プラグインあります

ふきだしを作れるプラグインをリリースしてみました。

こちらをどうぞ

あるいは、WordPress の管理画面からプラグインの検索で
「speech balloon maker」と検索してみてください。
densukeが作ったプラグインが見つかるはず。

まとめ

ということで、ふきだしで記事を書く方法と、
それをWordPressのショートコードにしちゃう技、でした。

ただただ文章を書くだけ、よりも、
少し親近感のわく記事にできるかと思います。
お試しあれ。

それではまたー。

エンジニアのためのWordPress開発入門 (Engineer’s Library)

posted with カエレバ

野島 祐慈,菱川 拓郎,杉田 知至,細谷 崇,枢木 くっくる 技術評論社 2017-01-26

Amazon

楽天市場

7net

HTML&CSSとWebデザインが 1冊できちんと身につく本

posted with カエレバ

服部 雄樹 技術評論社 2017-07-21

Amazon

楽天市場

7net