ブログ

【ブログ】WordPressテーマ【JIN】の吹き出しの設置方法

こんばんは〜。

ブログを見ていると漫画の吹き出しみたいなのを使っているのがあって、自分も使ってみたいなぁと思って実践してみました。

トオル
トオル
こういうやつw
びんとろんくん
びんとろんくん
そういうやつね

WordPressテーマ「JIN」は使い方を丁寧に説明してくれているサイトがあるのでそれをみれば吹き出しの設置の仕方はわかりますが、自分で吹き出しを作る方法をすぐに思い出せるようにと思って書きました。

WordPressテーマ「JIN」の吹き出しを設置する方法を詳しく知りたい方はリンクからどうぞ〜。

JINの吹き出しの設置の仕方はこちらをどうぞ〜

WordPressテーマ【JIN】の吹き出しの設置方法

1.吹き出しで使いたいキャラの画像をアップロードする。

WordPressの管理画面から「メディア」→「新規追加」で画像をアップロードして、アップロードできたら「編集」をクリックする。

2.キャラの「ファイル名」を控えておく。

「ファイル名」と書かれた項目の文字列をコピーして控えておく。
(下の画像でいうと右の方にあるファイル名:のtohru.jpg)

3.吹き出しのコードを設置

上記の「吹き出しのコード」を投稿画面(テキストエディター)に貼り付けて、吹き出しを設置する。

4.キャラクターの画像情報を入力

先ほど控えた画像ファイル名(例:tohru.jpg)をショートコード内の「”画像情報”」の項目に入力する。

5.キャラクター名を入力

キャラクターの名前を入力する。ショートコード内の「”キャラクター名”」という項目に、自分で決めた名前を入力する。

トオル
トオル
キャラの名前は画像の下に反映されるよ〜

6.表示される場所を「右」か「左」かを決める

キャラクターの配置を決める。ショートコード内の「”配置場所”」という項目に、「left」または「right」と入力する。

トオル
トオル
右に表示するなら”right”
びんとろんくん
びんとろんくん
左に表示するなら”left”

7.吹き出しの色を決める

「枠の色」と「背景色」をそれぞれ入力して、好みの吹き出しにする。
border=「枠の色」、bg=「背景色」です。

グレー

トオル
トオル
枠なしグレーは「none」「gray」
トオル
トオル
背景なしグレーは「gray」「none」
トオル
トオル
枠ありグレーは「gray」「gray」

ブルー

びんとろんくん
びんとろんくん
枠なしブルーは「none」「blue」
びんとろんくん
びんとろんくん
背景なしブルーは「blue」「none」
びんとろんくん
びんとろんくん
枠ありブルーは「blue」「blue」

レッド

トオル
トオル
枠なしレッドは「none」「red」
トオル
トオル
背景なしレッドは「red」「none」
トオル
トオル
枠ありレッドは「red」「red」

グリーン

びんとろんくん
びんとろんくん
枠なしグリーンは「none」「green」
びんとろんくん
びんとろんくん
背景なしグリーンは「green」「none」
びんとろんくん
びんとろんくん
枠ありグリーン「green」「green」

イエロー

トオル
トオル
枠なしレッドは「none」「yellow」
トオル
トオル
背景なしレッドは「yellow」「none」
トオル
トオル
枠ありレッドは「yellow」「yellow」

8.ショートコードを「AddQuickTag」に登録しておく

最後に、吹き出しショートコードはよく使うのでプラグインの「AddQuickTag」に登録しておく。

AddQuickTagに登録しておくと、ワンクリックで好きな吹き出しを設置することができるので超便利です。

新キャラ「びんとろんくん」

WordPressテーマ「JIN」を導入したので吹き出し機能を使いたくて新しいキャラを考えてみることにしました。

動物のキャラクターが良かったのですが、猫や犬やメジャーな動物は他の人と絶対かぶるのでオリジナルでいい感じのキャラクターがつくれないか考えました。

リス、サル、たぬき、キツネ、…などいろいろ思い浮かべましたが、結構既にキャラクターになっているのが思い浮かびます。

それで最近お気に入りの動物はなんだったけなーと考えて遂に思い浮かびました。

それは「ビントロング」です。

ビントロングの詳細はこちら

以前ニュースやバラエティ番組で見てから、動物園で生でも見てその可愛さにすっかりお気に入りになっていました。

というわけでビントロングの「びんとろんくん」をつくってみました。

黒い顔とひげが特徴です。

体は人間ですw

びんとろんくん
びんとろんくん
よろしく〜

JINの吹き出しの設置

JINを導入していろいろできることができて本当に嬉しいです。
「もくじ」も簡単に設定できたし「吹き出し」も使えるようになりました。
これからも徐々にブログを進化させていきたいと思います。

JINの吹き出しの設置の仕方はこちらをどうぞ〜

びんとろんくん
びんとろんくん
簡単に吹き出し設置できたで〜

トオル吹き出しをたくさん作ってみました

トオル
トオル
お辞儀
トオル
トオル
とほ〜
トオル
トオル
OK!
トオル
トオル
グッド!
トオル
トオル
りょ〜かい!
トオル
トオル
座る
トオル
トオル
泣く
トオル
トオル
笑う
トオル
トオル
考える/怒る
トオル
トオル
驚く
トオル
トオル
基本
びんとろんくん
びんとろんくん
ビントロングのびんとろんくんです

まとめ

  • 新キャラ「びんとろんくん」が誕生しました。
  • 吹き出しを設置できるようになりました。

以上「【ブログ】WordPressテーマ【JIN】の吹き出しの設置方法」でした。

最後までお読みくださりありがとうございました。

びんとろんくん
びんとろんくん
ありがと〜
トオル
トオル
ありがとうございます!

ABOUT ME
にわかライフ
自由で幸せな人生を送りたい。 日々の新しく気づいたことや、発見を書いていきます。 イラストも描きます。 お気軽に読んでください。 よろしくお願いします。