気まぐれで軟体動物やってます!!

介護士たこにゃんが伝える、ためになる?ブログ

はてなブログで会話風吹き出しの作り方

はてなブログをかっこよくカスタマイズしよう!!

先生!!呼びましたか?

うん、呼んだ

用件は何でしょうか?

管理人が吹き出しのテストをしたいんだとさ
もう済んだから帰っていいよ。

!?

吹き出しをつけよう

はてなブログ吹き出しを作る手順がわからない人のために解説します。

 

と言っても他のサイトで解説してるので、こちらのサイトを読んでください

 

吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 | SHIROMAG

 

サイトを読んでもわからないという人のために写真付きで解説します。

 

HTMLやCSSって何?

HTMLとかCSSとかって何よ?

と思った人がいるかもしれません。

 

HTMLCSSはブログなどのサイトを構築するプログラミング言語です。

ブログを作成するときに知っておくとカスタマイズがしやすくなるので、簡単に勉強しておくことをオススメします。

 

知らなくても、ブログを作成することができますので、心配しなくてもいいですよ。

 

しかし、基礎的なことを知っておくだけでも、便利なのは間違いありません。

勉強するのにオススメのサイトをご紹介します。

 

Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

 

こちらのProgateでは、ゲームをクリアするような感覚で、プログラミングについて学ぶことができます。

 

初級編だけでもやっておくことで、カスタマイズ作業が楽になります。

 

吹き出し導入の流れ

まずは、google chrome拡張機能をインストールします。

拡張機能はなくても大丈夫ですが、編集が少し大変になります。

 

まずは、先ほどのサイトより拡張機能をDLします。

リンクを貼っておきます。

Chrome Add-on for Hatena - Chrome ウェブストア

 

f:id:taconyan:20190826173230p:plain

(DLするとこちらがGoogle chromeの右上に追加されます。)

CSSをコピペする

 

まず、準備としてCSSをコピペします。

先ほどのサイトから、ここを全てコピーしてください。

f:id:taconyan:20190826173410p:plain

 

それを、一旦メモ帳に貼り付けておきましょう

f:id:taconyan:20190826173705p:plain

アイコンを用意する

会話風の文章を書くためには、アイコンを用意する必要があります。

 

著作権的にNGなものは避けたほうがいいと思うので、フリーイラストを利用します。

 

こちらの2つがオススメです。

 

かわいいフリー素材集 いらすとや

無料イラストなら「イラストAC」

 

ちなみに僕のこのキャラクターは友人に書いてもらいました。

オリジナルキャラがいい場合はココナラなどで書いてもらうのも良いでしょう。

 

画像が頻繁に登場するので、サイトが重くなります。

こちらのサイトで、あらかじめ圧縮しておきましょう。

 

TinyJPG – Compress JPEG images intelligently

 

その画像をこちらのフォトライフにUPします。

f:id:taconyan:20190826173804p:plain

(こちらでフォトライフに移動)

 

 

f:id:taconyan:20190826173922p:plain

(アップロードから画像をドラッグ&ドロップ)

CSSを編集する

先ほどメモ帳に保存したCSSを編集します。

こちらのフォトライフから画像のアドレスをコピー

 

f:id:taconyan:20190826174152p:plain

(アップロードした画像をクリックして、画像アドレスをコピー)

 

こちらの「画像のURL」の部分に貼り付けます。

 

f:id:taconyan:20190826174401p:plain

 

クラス名キャラ名」になってますので、短くてわかりやすい名前をつけましょう。

 

4文字ぐらいが編集しやすくてオススメです。

 

キャラ名[taco]

.taco::after {background-image:url(画像URL);}

 

f:id:taconyan:20190826174940p:plain

(デザインをクリック)

 

f:id:taconyan:20190826174958p:plain

(背景画像からデザインCSSへ)

 

f:id:taconyan:20190826175649p:plain

(コピペします。他にもCSSを使っている人は消さないように注意してください。)

 

 

 各キャラの編集例を紹介します。

 

キャラ名[man]

.man::after {background-image:url(画像URL);}

 

キャラ名[girl]

.girl::after {background-image:url(画像URL);}

吹き出しをつけよう

喋らせたいセリフを書きます。

 

斜め七十七度の並びで泣く泣くいななくナナハンななだい難なく並べて長眺め

 f:id:taconyan:20190826172751p:plain

こちらをドラッグして選択

この状態で、右上の先ほどインストールした、拡張機能を使います。

 

ここのclass名に先ほど入れたキャラ名を入れます。

r-fuki キャラ名(今回は[taco])

f:id:taconyan:20190826180047p:plain

 

 

ここに半角を入れるのを忘れないでください。

f:id:taconyan:20190826180216p:plain


 

 

先ほど作った文章をドラッグしてclass名を入れると・・・

 

にゃにゃめにゃにゃじゅうにゃにゃどのにゃらびでにゃくにゃくいにゃにゃくにゃにゃはんにゃにゃだいにゃんにゃくにゃらべてにゃがにゃがめ

 

なぜか猫語になってしまいました😰

  

左→右側に吹き出しは「r-fuki キャラ名」

r-fuki taco

 

左←右側に吹き出しは「l-fuki キャラ名」

l-fuki taco 

 

ここの部分のキャラ名を変えると先ほど設定したキャラ変わります。

r-fuki man

l-fuki girl

 

 

これでブログがかっこよくなりますね。

 

最後にスマホでもちゃんと表示されているか確認しましょう。

 

chromeでない場合

とりあえず、CSSの編集までは行う必要があります。

 

google chromeを使用しない場合はこちらを編集します。

 

f:id:taconyan:20190826180333p:plain

 

試しに次の文を吹き出し風にしてみます。

力こそパワー

 <p class = "r-fuki キャラ名">セリフ</p>と入力します。

 

f:id:taconyan:20190826180619p:plain

 

 <p class="r-fuki taco">「力こそパワー」</p>

「力こそパワー」

 

他の例もつけておきます。

 

 <p class="r-fuki man">二次元の女の子は僕らを裏切らない</p>

二次元の女の子は僕らを裏切らない

 

 <p class="l-fuki man">世の中ね、顔かお金かなのよ!</p>

世の中ね、顔かお金かなのよ!

 

まとめ

ちなみに僕が使用しているテーマ「Silence」の作者様ですので、足を向けて眠ることができません。

 

silenceはオススメのテーマですので興味のある人は使ってみてください。

 

 

www.kimagure-taco.com

 

www.kimagure-taco.com

 

 

読者登録お願いします!!