ブログ PR

【ブログ】ブログ内容にメリハリを付けテンポよく!!【吹き出し】

記事内に商品プロモーションを含む場合があります

こんにちはー!!くまでーす!!

現在ワードプレステーマ「JIN」をお使いの方で

  • 吹き出しを自由自在に扱いたい
  • コクーンのときは手軽に作れたけどJINはどーやるの?
  • 注意点とかってある?

とお考えの皆さん、安心してください。

今回の記事は主に「コクーンからJINに移した」方に向けて発信していきます。

そして、今回からお供するのが

くまっぴー
くまっぴー
やっほー!!くまっぴーだよ〜。
くま
くま
こんにちは、くまです。

私くまと相方のくまっぴーがナビゲートしていきます。

それでは早速言ってみましょう。

JINでの吹き出しの付け方

まず、JINでの吹き出しの作り方の結論からいえば、プラグイン「AddQuicktag」を導入し、ショートコードを一つ一つ作る必要があります。

手順として

  • プラグインインストール
  • 画像アップロード
  • 吹き出しの作り方

という手順で解説していきます。

くまっぴー
くまっぴー
このように僕たちが会話するところを教えるってことでしょ?くまさん
くま
くま
ま〜・・・そうなるね。くまっぴー

 

プラグインをインストール

私はかつて、ワードプレステーマ「コクーン」を使用していましたが、コクーンの時は、画像をアップロードして、内蔵されてる吹き出し作成ツールがあったので手軽に作れたのですが、JINにはその機能がないため、プラグインAddQuicktag」を導入する必要があります。

手順としては、ワードプレス画面左のツールボックスにある「プラグイン」を選択します。

くまっぴー
くまっぴー
左にあるコンセントみたいなやつだね。
くま
くま
そうそう!!それそれ!!それをクリックして!!

そして、プラグイン画面に移ったら、新規追加を選択し、クリックをします。

くまっぴー
くまっぴー
な〜んかちっちゃくて見づらいなぁ・・・
くま
くま
そんな時は画像クリックして拡大してみるといいよー。

その後、プラグイン追加画面に移ったら、検索ボックスにAddQuicktag」を入力またはコピペして検索をかけます。

くまっぴー
くまっぴー
検索ボックスに入力・・・と。あれ?スペル間違えたからでない!!
くま
くま
そんなときは、途中まで入力して、「これかな〜」と思うプラグイン名が予測変換の形で出るからそこから選ぶといいよ〜。
くまっぴー
くまっぴー
本当にできるのかなぁ・・・どれどれ・・・あ!!できた!!
くま
くま
でしょでしょ〜。これも覚えておくといいよ〜。
くまっぴー
くまっぴー
わかった、ありがとー!!くまさん!!

検索をかけた後、プラグイン画面でAddQuicktag」が出ますので、それをインストールして有効化します。

これでプラグインの導入説明を終了します。

くまっぴー
くまっぴー
ふぅ・・・プラグインも導入したしこれで吹き出しつけられるぞ〜
くま
くま
あいやまった!!ちょまった!!プラグイン入れただけで吹き出しはまだ作れないよ。
くまっぴー
くまっぴー
え、えぇー!!まだあるのー!!

続いては画像となります。

画像アップロード

続いては画像アップロードですが、普段から常日頃画像をアップロードしてる方にとって「何を今更・・・」な気がしますが、あえて説明します。

くまっぴー
くまっぴー
ホントに何を今更だよ〜、もぅ。
くま
くま
気持ちは分かるよ、けど、あえて言わせて。

まず、画像を含めたデータには全て「拡張子」が存在します。

例えば、私のアイコンとなってる画像の赤い熊のファイル名が「赤熊.jpg」とあるように。

くまっぴー
くまっぴー
ほぇ〜・・・そんなのがあったんだぁ・・・そんな事も知らないで僕使ってたよ〜
くま
くま
まぁ〜・・・普通は拡張子なんて表記させるもんじゃないからなぁ・・・ちなみに拡張子の書き換えは自由自在に行えるけど、データ開かなくなる可能性あるからそこは自己責任でやってね。
くまっぴー
くまっぴー
え・・・マジで・・・?くまさんはやったことあるの?
くま
くま
あ〜・・・やったことあるなぁ・・・それでデータが開かなくなった時があったなぁ・・・(遠い目)

基本、ワードプレスにアップされた際、大体の画像は「jpg」表記になりますが、たまに「png」表記で保存されることがあります。

そのため、大本のファイルの拡張子と食い違うことが多々あります。

また、同じjpgでも大文字か小文字により全く別のデータにもなります。

くまっぴー
くまっぴー
いやいや、何いってんの、嘘でしょそんなの。
くま
くま
いや〜・・・実は私も「大文字小文字関係ねぇ!!」って感じだったんだけど、改めて気付かされたよ・・・
くまっぴー
くまっぴー
ほぇ〜・・・
くま
くま
実際にやってみるね・・・ドロン、と
くま
くま
ほい、と
くまっぴー
くまっぴー
く、くまさんが消えた!!どこどこ!?
くま
くま
ここだよくまっぴー。
くまっぴー
くまっぴー
あ、いた、よかった〜。

と、このように画像のエラーが起きて、画像を読み込まなくなります。

画像の解説は以上となります。

最後に本丸である「吹き出しの作り方」です。

吹き出しの作り方

最後の解説で、本丸である「吹き出しの作り方」について解説させていただきます。

吹き出しの作り方としては、まずショートコードの用意が必要となります。

くま
くま
ショートコードというのは[chatface=”赤熊.jpg”name=”くま”align=”left”border=”gray”bg=”none”style=”maru”]となるよ
くまっぴー
くまっぴー
僕の場合は[chatface=”黄熊.jpg” name=”くまっぴー”align=”right”border=”gray”bg=”none”style=”maru”]だね

ショートコードを分解して説明しますと、画像に当たる部分が「chat face=”赤熊.jpg”」、名前が「name=”くま”」、左の場合は「align=”left”」、右の場合は「align=”right”」、吹き出し枠が「border=”gray”」、吹き出しの塗りつぶしが「bg=”none”」、アイコンの枠のスタイルが「style=”maru”」となり、最後に「[/chat]」が入る図式となります。

ショートコード自体は、こちらからテンプレートを作成することができます。

テンプレート作成時、画像の名前を入れる枠がありますがテンプレートを作るだけなら適当名前を入れてしまって大丈夫です。

続いて、プラグイン「AddQuicktag」の設定を選択します。

先程作ったショートコードをメモ帳とかにコピーを終了したら、いよいよ吹き出し作成です。

くまっぴー
くまっぴー
やっと僕たちが生まれるってところね。
くま
くま
まぁ〜・・・そうなるね

画像の左側は主に吹き出しの名前を入れる枠となります。

名前は基本的に分かりやすいのがいいでしょう。

例えば右用なら「〇〇右」、左用なら「○○左」と。

そして、画像の真ん中あたりにショートコードを入れて、その後、画像右端のチェックボックスにチェックを入れた後、変更を保存を押します。

うまく行かない場合は、先にショートコードだけ入れて保存するのも手です。

そうした手順を終えれば、晴れて吹き出しボタンが出来上がります。

くまっぴー
くまっぴー
右だと僕が右に来て
くま
くま
左だと私が来る

以上が吹き出しの作り方となります。

続いてが注意点です。

注意点

さて、作り終えた吹き出しですが、使用するときはこちらのビジュアルエディタ


ではなくテキストエディタ

を使用してください。

理由として、ビジュアルエディタには作った吹き出しが出ないに尽きます。

また、画像のアイコンですが、当然ですが著作権を守りましょう。

私が使ってるくまのアイコン自体、私が著作権を有してますが、大本の著作権は作者である

りこ(@Soukoro0405Riko)さんにあります。

ですので、著作権元が分かるものはURLでもいいので貼っておくと良いです。

まとめ

まとめに入りましょう。

JINでの吹き出し自体、コクーンと比較すると外部サイトを使うことが多いですが、一度作ってしまえば手軽に出せることが分かりました。

くまっぴー
くまっぴー
パソコンにわかの僕でもちゃんとできたよ!!
くま
くま
え・・・くまっぴーにわかだったの?私てっきり超初心者かと思ったよ。
くまっぴー
くまっぴー
しょ、初心者じゃないし・・・
くま
くま
別に初心者であること自体恥ずかしくないんだけどなぁ・・・私だってブログに触れたのがだいたい3年前だし。
くまっぴー
くまっぴー
そ、そうなの!?これは意外だ!!

元々このブログはワードプレステーマの「コクーン」を使っていましたが、自己投資の一環として、「JIN」を導入しました。

JIN自体は1年ぐらい触ってますが、吹き出しに関してずっと頭を悩ませていましたが、今回開設した方法で無事使えるようになりました。

今回の記事は以上です。

また、次の記事でお会いしましょう、ではまた!!

くまっぴー
くまっぴー
ここまで記事を読んでくださり
くま
くま
誠にありがとうございます。
くまっぴー
くまっぴー
ところでくまさんさ
くま
くま
ん〜?何?
くまっぴー
くまっぴー
どうして吹き出し作らなかったの?
くま
くま
そ・・・それは・・・なんだろう・・・
くまっぴー
くまっぴー
実はめんどくさかったとか・・・?
くま
くま
ギクッ!!そ、それはどうかなぁ・・・さらば!!
くまっぴー
くまっぴー
あ、逃げたな。まてー!!

 

ABOUT ME
アバター画像
くま
こんにちは。こちらではガンプラや書籍、ガジェット、ゲームの攻略情報を紹介します。
ブログの通知を受け取るならこちら

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA