【報告】吹き出しを作れるようになりました

どうもー！やーさん（@ohokamudumi)です！

今日は代休日で久々に朝からゆっくりしています。

ゆっくりできる休日って最高ですね！

さて今回は、以前からずっとやってみたかった「吹き出し」に挑戦です！！

吹き出しに挑戦してみる！！

みかこさんに感謝！！吹き出しの作り方を学ぶ

常々ブログを書いてると基本的に文字ばかりになってしまって、ちょっと単調で物足りないなぁと感じていました。

みんなのブログを見に行くと、吹き出しを使って会話調のテンポのある記事をよく見かけて、「これ使いたい！！」と思っているまさにそのとき、

ミカコさん（@mikakolife）がこんなにもぴったりな記事を書いてくれました。

【２３記事目・更新！】
ブログ内に登場する吹き出しについて、超絶初心者目線の記事を書きました。
憧れだったんですよね、吹き出しが…！ご協力頂きました先輩方、ありがとうございます！全員分のブログを掲載できず申し訳ありません！https://t.co/TPHTpocbXV

— ミカコ＠開設47日ブロガー (@mikakolife) 2018年8月20日

ほんといつも有益で分かりやすい記事を書いて発信してくれるミカコさん！！

Twitterでもその人柄の良さが溢れていて、いつも癒されてます。ありがとうございます！！

さっそくミカコさんの記事を参考に吹き出しを作っていきます。

LION BLOGには実装されていない。。

吹き出しを作るには以下の３つの方法があるとのこと。

１、テーマに実装されている

２、プラグインを使う

３、CSSコードを直接書き込む

ぼくはWordPressの「LION BLOG」というテーマを使っていますが、残念ながらこのテーマに吹き出しは実装されていませんでした。。

プラグインも「Speech Bubble」を試したのですが、うまくいかず。。

最終的にCSSコードを直接書き込むという方法になりました。

CSSコードを直接書き込む

ミカコさんの記事にも参考として貼られていた

を参考にしました。

手順としては、上記のページを参照しながら

①「TinyMCE Templates」というプラグインをDLして有効化。

②テンプレートに吹き出し用のコードを登録。（コピペするだけ！楽ちん！！）

③テーマの編集からスタイルシートとフッターにコードを登録。（こちらもコピペするだけ！）

たったこれだけ！！

説明を読む限り、これで吹き出しが出来るはず。

やってみよう！吹き出し作り！①準備

さぁ実践です！

・「TinyMCE Templates」というプラグインを有効化

それにより、ダッシュボード左側にテンプレート作成メニューと、投稿の編集ページに「テンプレートを挿入」という項目が出来ました。

テンプレートメニューが表示される場所が説明と違ってたので、ちょっと迷いましたが無事発見し、新規テンプレートに指定されたコードをコピペして登録。

（テキストモードで貼り付けしなきゃいけないのに、ビジュアルモードで作業していた愚か者はぼくです。）

・外観→テーマの編集→子テーマのスタイルシートに指定されたコードをコピペ。

・外観→テーマの編集→親テーマのフッターの〈/body〉前に指定されたコードをコピペ。

あとは適当な画像を用意（ぼくはCHARAT　FACEでキャラ画像を作りました）して、、、これで準備は整いました。

やってみよう！吹き出し作り！②実践

まずはテンプレートの挿入をしてみると

吹き出しテキスト

上記のような表示になりました。

dummyを消して画像を追加して、名前とテキストに適当な文字を入れてみます。

吹き出しが使いたいんやー！！

おぉぉぉぉぉ！出来た！！！！出来たでーーーーーーー！！！！

良い感じに吹き出しが作れました！！

画像サイズなどは勝手に調整されるようです。

左吹き出しと右吹き出しを組み合わせて、会話してるように表現もできますね。

こんにちは、赤ちゃん

ばぶばぶぶぶ

こりゃ、いいや！！

これで、ブログ書くときに吹き出しを使ってテンポ良く記事が書けそうです！

みなさんも吹き出しを使って、楽しんでみられてはいかがでしょうか。

最後までお読みいただき、ありがとうございました！

ありがとうございました！また遊びに来てくださいね！

 

ブログ村に参加しています！

↓をポチッとしていただけるとうれしいです！！

にほんブログ村