【モブログでも!】Cocoonの吹き出しをテキストエディタで簡単に使えるようにするひと手間

Cocoon

はいどうも!ままん(@maman_selfish)です!

つい最近、新しくブログを立ち上げてちょこちょこ手を入れてるんですけども。

新しいブログでは、ブログテーマに【Cocoon】を採用してみました。

機能も多く、使いこなせるか心配なところはありますが、調べながらアレこれするのも楽しいですね。

Cocoonの目玉機能のひとつに【吹き出し】があります。

そんな機能がついてるなら使いたいですよね。・・・いや、使いまくりたいですよね!!

でもわたし、いつも記事を書く時にはテキストエディタを使っているんですよ。

そうすると、いちいちタグをコピーして貼り付けるか、わざわざビジュアルエディタに切り替える必要があるようで・・・。

めんどくせぇな!!おい!!!

となったわけです。うん、だってめんどくさかったんだもん。

そこで、テキストエディタ使いでも吹き出しを使いまくれるひと手間をご紹介します。

スポンサーリンク

事前準備

ひと手間自体はそんなに難しくないですが、準備しておくことがあるのでまずはそちらから。

Cocoon設定で吹き出しを作る

Cocoonではすでにサンプルの吹き出しを同梱してくれています。

でも、やっぱり自分のアイコンを登場させたいですよね!

ということで、まずは吹き出しに自分のアイコンを登場させておきましょう。

細かな設定は、Cocoonのトリセツを見ながら作業するといいですよ。

わたしは自分のアイコンをアップして・・・

こんな感じで作ってみました。

ままんたぬきが喋っている賢そうなやつは、デフォルトで勝手にこうなるみたいです。知的の極みですね☆

AddQuicktagをインストールして有効化する

今回は、プラグインのお世話になりつつ楽しようという魂胆ですので、【AddQuicktag】というプラグインを有効化するところまで終わらせておいてください。

スポンサーリンク

吹き出しをビジュアルエディタで記事に載せる

さて、ではここからがひと手間。

まずは、自作した吹き出しがどのように表示されるか確認します。

ビジュアルエディタからだとプルダウンで選べばすぐに表示させられるので、1度ビジュアルエディタから表示させます。

ここの吹き出しプルダウンをタップすると

出た!ままんちゃんいた!!

これを選べば・・・

\\ こんにちは! ままんたぬきだよ! //

もしここで、なんかイメージと違うわ・・・となったら、もう一度吹き出しの設定をしてくださいね。

スポンサーリンク

テキストエディタに切り替える

ビジュアルエディタで吹き出しを登場させたら、そのままの状態でテキストエディタに切り替えてみましょう。

どーん!一応画像のURLは隠してありますが、こんな感じのテキストが出てきます。

吹き出しでは、【内容を入力してください】のところに入れた文字をしゃべるようになっています。

ここで出てきたタグを、必ずメモなどにコピーしておいてくださいね。

スポンサーリンク

AddQuicktagでショートカットキーを作る

ここからは、プラグインの力を借ります。

設定メニューから、有効化したAddQuicktagを開きます。

そうするとスマホの場合はこうなります↓↓↓

・・・は?

うんうん。わけわかんないよね。

大丈夫よ!落ち着いて!直ちにプラウザのメニューを開くのよ!

プラウザのメニューは右上にあります。

メニューが出たら、【PC版サイト】をタップ!

そうすると・・・

わーい!なんか、わーい!!

これで作業できます。よかった\(°∀° )/

ここで入力する項目がこちら

  • ボタン名
  • ラベル名
  • 開始タグ
  • 終了タグ

ここだけ入力すればOK!

わたしはいつもボタン名とラベル名は同じにしています。

今回の開始タグは【内容を入力してください】の前終了タグは【内容を入力してください】の後となりますね。

入力したら、1番右のチェックボックスにチェックを入れて(ここにチェックを入れると全部のチェックボックスにチェックが入ります。)変更を保存でOK!

ここのチェックボックスは、どこのテキストエディタにボタンを出すか指定できます。

めんどくさいから全部に出せばいいじゃないの。とも思いますが、細かく指定したい方は1つ1つ選んでチェックしてくださいね。

ままんさんの場合、こんな感じになってます。

このひと手間のおかげで・・・

わーい!出てきたー!!

このひと手間で、テキストエディタからも自由自在に吹き出しを操れますよ。

お試しあれ!

スポンサーリンク

番外編

わたしは画像が左右に出るようにボタンを2つ追加しています。

この設定、いちいち吹き出し設定を作らなくても変えられるってご存知ですか?

こちらはわたしの吹き出しタグ(画像が左にあるパターン)ですが、赤丸の部分がl(L)ですよね。

これをr(R)に変えたら、画像が右になります。

rightとleftって意味だと思うんですけどね。多分。

以上、Cocoon豆知識でしたー。

参考になったよ!のシェア、お待ちしております!!

コメント