ブログ初心者

【猿でも分かる】ブログ(JIN)の吹き出しを簡単に設定する方法

読者
読者
こんな吹き出しを使いたい

 

ぶちょー
ぶちょー
超初心者でも吹き出しを使える方法をお伝えします!

 

今回は、”吹き出しの設置方法”に焦点を当てて記事を書いていきます。

とっても簡単なので、さっと見てさっと吹き出しを作っちゃってください。

 

ジンのブログを使用していて、旧エディターをインストールしている方に向けています。

 

この記事を読むと

  • ジンのブログで吹き出しの作成方法が分かる
  • 作った吹き出しを簡単にブログで使える方法が分かる

 

【馬でもわかる】ブログ(JIN)の吹き出しを簡単に設定する方法

吹き出しの設定準備

 

まず初めに、吹き出しの元となる画像を選びましょう。

好きなものを選んで、保存しといてください。

ぶちょー
ぶちょー
吹き出しのキャラのことね!

 

下記に、イラストサイトおススメをまとめましたのでご覧ください。

 

てがきちゃん

こんな感じの、ゆるめだけどかわいいイラストがたくさんあります!

無料でダウンロードできるので、お好きなものを選んでみては?

 

いらすと屋

一度は見たことのある画像ですよね。

豊富な種類と見やすいアイコンが選べます。

こちらも無料なので、自分の好きなキャラクターや動物などを選んでみて下さい。

 

ココナラ

ネット上のイラストレーターの方に依頼して作ってもらう方法です。

細かな要望や、打ち出したいキャラなど世界であなただけのアイコンを作ることができます

会員登録は無料

ただしアイコンなどの値段は1000円~ですので、

お金に余裕のある方は作ってみてもいいかもしれませんね。

「qbkeyk」←招待コードあり!購入時300円引きになります。

 

吹き出しの素材をメディアに新規追加(画像で解説)

➀吹き出し用の画像を準備したら、ダッシュボード左「メディア」から「新規追加」を選択。

 

 

②「ファイルを選択」をクリック

 

 

➂吹き出しにしたい画像を選択しクリック

 

 

④「ファイルを選択」の横に文字があるか確認し「アップロード」をクリック

 

 

⑤右上の「ファイル名:IMG_2001.ping」の部分をコピーする

 

 

 

⑥左にある「投稿」を押して→「新規追加」をクリック。

 右上の「CHAT」を押す

 

 

ここまでで準備完了です。続いては吹き出しのコードを設置していきます。

吹き出しのコードを設置する

 

チャットを押すと下↓のような文字が出てきます。

 

サイト右上の「プレビュー」を押すとこんな感じ!↓

 

 

” ”の間の部分に文字を入力すると吹き出しのスタイルが変わります。

 

 

ざっと【” ”】について解説すると↓の意味を持っています。

 

主に6つの意味がありますので解説します。

 

先ほどコピーした、ファイル名を貼り付けます。

chat face=”img_2001.png”

プレビューはこんな感じ。

おお!いい感じ

 

キャラの名前を付けます(画像の下の奴)↓

name=”ぶちょー”

ぶちょー
ぶちょー
下に名前がついてる!

 

キャラクターの吹き出し位置を決めます。

align=”left”

初期設定は「left」左になっていますよ。

ぶちょー
ぶちょー
左なら「left」
ぶちょー
ぶちょー
右にしたいなら「rghit」

 

④・⑤吹き出しの枠の色を変える

border=”none” bg=”blue”

ブルー

ぶちょー
ぶちょー
枠なしブルーは④「none」⑤「blue」
ぶちょー
ぶちょー
枠ありブルーは④「blue」⑤「blue」
ぶちょー
ぶちょー
背景なしブルーは④「blue」⑤「none」僕はこれです

 

グレー

ぶちょー
ぶちょー
枠なしグレーは④「none」⑤「gray」
ぶちょー
ぶちょー
枠ありグレーは④「gray」⑤「gray」
ぶちょー
ぶちょー
背景なしグレーは④「gray」⑤「none」

 

イエロー

ぶちょー
ぶちょー
枠なしイエローは④「none」⑤「yellow」
ぶちょー
ぶちょー
枠ありイエローは④「yellow」⑤「yellow」
ぶちょー
ぶちょー
背景なしイエローは④「yellow」⑤「none」

 

レッド

ぶちょー
ぶちょー
枠ありレッドは④「none」⑤「red」
ぶちょー
ぶちょー
枠なしレッドは④「red」⑤「red」
ぶちょー
ぶちょー
背景なしレッドは④「red」⑤「none」

 

グリーン

ぶちょー
ぶちょー
枠なしグリーンは④「none」⑤「green」
ぶちょー
ぶちょー
枠ありグリーンは④「green」⑤「green」
ぶちょー
ぶちょー
背景なしグリーンは④「green」⑤「none」

キャラクターの枠

style=”maru”

ちょっと分かりづらいかもしれないですが、”吹き出しの形”を変えることができます。

 

”maru”と打つと、吹き出しの枠が〇で囲われます。

”    ”入力しないと〇で囲われなくなります。

吹き出し設定の終了!→アドクイックタグ

 

 

ぶちょー
ぶちょー
自分の好みの吹き出しが完了したらOKです!作ったURLをコピーし、下書き保存しといて下さい

僕は「ここに文字を入力してください」を消して作りました。

 

次は作った吹き出しのコードを「AddQuictag」を使って登録しましょう!

簡単です!

むしろこれしないといちいち吹き出しを作らないといけないので、かなりめんどいっすよ・・・

一度登録すれば、好きな時に登録した吹き出しを使うことができますよ!

さくっとやっちゃいましょう。

AddQuictagの追加(画像で解説)

 

➀左の「プラグイン」をクリック

 

②新規追加をクリック

 

➂右のキーワードに「AddQuickTag」と入力

 

④インストール→有効化にする

 

⑤プラグイン→AddQuicktagの設定をクリック

 

⑥下の画面が出るので、

ボタン名」・・・分かりやすいものでおk

開始タグ」・・・先ほど作ってコピーしたURLを”開始タグ”に貼り付け(これね↓)

☑を打つ」・・・一番右端の☑に入力すると全部☑される

 

⑦変更を保存

 

 

⑧先ほど下書き保存した投稿画面に戻り、「Quicktags」が追加されているので登録した名前の奴をクリック

 

⑨このように登録した吹き出しURLが出てこれば完成!

 

 

試しに「完成したぜふーーーー」と文字を入れてみましょう!↓

 

ぶちょー
ぶちょー
完成したぜふーーー

 

こうなっていればおkです!

お疲れ様でした!

 

他にも「AddQuictag」によく使うURLを貼っておけば、すぐに記事に反映できますのでいろいろ試してみて下さい!

ちなみに

読者
読者
こういうのもサイトから引っ張ってきて同じ作業をするだけです。ちょっとずづだけど、頑張っていきましょう!

 

ありがとうございました🐶

 

ブログで息詰まっている方はこちらも是非ご覧ください!

初心者の会社員が、ブログを始めて2週間がたった件【ブロガー必見】※この記事は当時に書き上げたままリライトしていません。 リアルな声を書いていますのでぜひご覧ください。 Twitte...

 

 

ぶちょー(@Bucyosan_)

会社員の背中を押すTwitterやってるんで、フォロー宜しくです!

こちらの記事もおススメ

COMMENT

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください