そんなにGeekじゃないエンジニアブログ

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

calendar

reload

ふきだしを使って会話形式のブログを書こう!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のショートコードにしちゃう技、でした。

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

それではまたー。

この記事をシェアする

コメント

コメントはありません。

down コメントを残す




CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください