はてなブログからWordPressに移行しました。旧URLにアクセスした場合、新URLへリダイレクトされます。

ふきだしを実装したよ。HTMLとCSSだけでふきだしを作る方法を紹介。

ふきだしを実装したよ。HTMLとCSSだけでふきだしを作る方法を紹介。
こんばんは、アリエです。

いまさらながらふきだしを実装してみたわ。


まぁ、他の方のブログをみてコピペしただけなんだけど…

ということで当ブログにもふきだしを導入してみました。

他の方のブログを見ているとかなり多くの人がふきだしを使っていて、「ふきだしがあるとすごく分かりやすいなぁ」とずっと思っていたんですが、今回ようやく実装することができました。

参考にさせていただいたサイト様方、ありがとうございますm(_ _)m

WordPressにふきだしを実装する方法

まずWordPressにふきだしを実装するためにはいくつか方法があるみたいです。

まず一つが、ふきだし用プラグイン「Speech Bubble」を使用する方法。

もう一つがHTMLCSSPHPをいじってふきだしを作る方法です。

今回紹介するのは後者、コードで作るタイプのやつですね。

プラグイン使った方が簡単じゃないの?


そう思った方もいらっしゃると思います。

確かにSpeechBubbleは多機能でよくできたプラグインなのですが、ふきだしのアイコン画像をわざわざサーバーにアップロードしなければ使えないのです。

サーバーなどに詳しい人ならなんてことは無いのでしょうが、僕は知識も乏しく、下手にサーバーをいじってブログがおかしくなるのが怖かったのでSpeechBubbleを使うのは断念しました。

ということで今回はHTMLとCSSだけでできる方法を紹介していこうと思います。

(PHPもいじりたくなかったので、そこでは別のプラグインを使ってます)

いざ実装

参考にさせていただいたのがこちらのサイト様。yuzuyu3.com

HTMLとCSSのコードはこちらサイトからコピペさせていただきました。

本当にありがとうございますm(_ _)m

基本的にはこちらに書かれているとおりです。

まず、CSSのコードをコピペして貼ってください。

HTMLに関してはちょっと待って。

TinyMCE Templatesを使う

毎回ふきだしを出すためにコピペしてたら面倒ですよね。

なので、ショートカットボタンを作りましょう。

この「TinyMCE Templates」というプラグインを使います。

早速、テンプレートを作っていきましょう。

先ほどのブログからHTMLコードをコピペ、画像URLの設定などを済ませましょう。

すると、記事作成画面の上部に「テンプレートを挿入」というのが新しくできていると思います。

自分の使いたいふきだしを選択するだけで、簡単にふきだしを作ることができるようになりました!

使う用途に合わせて、画像違いバージョンや向き違いバージョンなど、色々なテンプレートを作っておけば、簡単に会話調の記事を書くことができるようになります!

画像などを簡単に変えることができるのがこの方法の強みですね。

まとめ

今回はWordPressでふきだしを実装する方法を書いてきました。

こんなに簡単にふきだしが作れるなんてびっくりだわ。

ふきだしがついつい楽しくて使い過ぎてしまいました笑

不自然に使い過ぎると見にくくなってしまうので、用法用量を守って使っていきたいと思います笑

皆さんもぜひふきだしを作ってみてくださいね。