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

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

どうもー!やーさん(@ohokamudumi)です!

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

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

 

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

 

Advertisement

 

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

 

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

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

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

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

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

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

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

 

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

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

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

2、プラグインを使う

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

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

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

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

 

CSSコードを直接書き込む

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

WordPressで会話風の画像とテキストをコピペで簡単表示!  MORIAWASE(モリアワセ)

https://moriawase.net/kaiwa-text-template

を参考にしました。

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

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

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

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

たったこれだけ!!

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

 

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

さぁ実践です!

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

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

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

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

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

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

 

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

 

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

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

 

dummy
名前

吹き出しテキスト

 

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

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

 

やーさん

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

 

やーさん

おぉぉぉぉぉ!出来た!!!!出来たでーーーーーーー!!!!

 

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

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

 

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

 

やーさん

こんにちは、赤ちゃん

 

赤ちゃん

ばぶばぶぶぶ

 

こりゃ、いいや!!

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

 

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

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

 

やーさん

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