ゆるかんママブログ

1児の看護師ママが妊娠・子育て・日々の事・看護関係についてゆるーくブログをお届け!

【はてなブログ】吹き出しで会話形式にするカスタマイズ|コピペOK|ブログ初心者向けカスタマイズ

ブログのカスタマイズ方法について説明している画像

 

f:id:a-a-chan:20200228172500p:plain
あーちゃんママ

どうも、

あーちゃんママです。

 

ブログのカスタマイズでやりたかった事の1つ、『吹き出しで会話形式』にするカスタマイズ。

 

今回はコピペでOKのカスタマイズ方法について紹介します。

 

※2020/03/10 見出し:1-1を追記

 

私の行ったカスタマイズのまとめはこちら↓

www.yurukanmama.com

 

 

 

 

お世話になったサイト様

はじめに言っておきます。

全て人様頼りです!(笑)

下記サイトを見ればOK!なのですが、私にも説明させて下さいね!(笑)

 

★SIROMAさんが紹介している方法は

『めっちゃ楽』がテーマ。

めっちゃ楽に実装したい方におすすめ!

www.notitle-weblog.com

 

★Komeさんが紹介している方法は

SIROMAさんの方法より少し手間がかかりますがアイコン画像下に『名前』が入力できます。

名前を入力したい方におすすめ!

www.chankome.com

 

www.colordic.org

 

紹介していただきました!

Komeさんのブログ内で私のブログを紹介していただきました…!!!

嬉しすぎる!!!

ブログ紹介をしている画面

 

吹き出しで会話形式の実装方法①

まずはじめに私が試したのはSIROMAさんの方法。 

www.notitle-weblog.com

 

Google Chromeの拡張機能をインストールする方法としない方法2つが書かれています。

私はiPadでブログ運営しているので拡張機能をインストールできず…。

 

CSSをコピペ。

拡張機能を使わず

いざ、実装!

 

……!

とってもおしゃれ!!

これ使うの楽しみ!!! 

と思ったのですが。

 

f:id:a-a-chan:20200229173542p:plain
あーちゃんママ

名前を入力したい…!

 

SIROMAさんのをベースにカスタマイズ 出来ないかな!?

と思ったのですが、初心者&素人には難しく…_| ̄|○

 

f:id:a-a-chan:20200229173546p:plain
あーちゃんママ

違う方法探そう…(涙)

 

 

吹き出しで会話形式の実装方法②

名前の入力出来る方法あったー!!

www.chankome.com

 

  1. 名前の入力が出来る
  2. コピペでOK
  3. 吹き出しが4種類もある
  4. レスポンシブ対応

 

f:id:a-a-chan:20200229173542p:plain
あーちゃんママ

な、なんて魅力的なのかしら!!

 

手順 

①サイトに書かれているCSSをコピペ!

②編集する時にサイトに書かれている吹き出しのHTMLを入力。 

 

基本手順はこの2つ!

 

自身のサイトにCSSを貼る前に色々カスタマイズ

Komeさんのサイトに書いてありますが、吹き出しの色や形、影の有無などもカスタマイズできます。

詳しく書いてあるのでそれを自分の好きなように変更。

 

私は色だけ変更しました。

www.colordic.org

 

4種類の吹き出しのHTML

上記サイトでは4種類の吹き出しのHTMLが紹介されています。

POINT

テキストエディタやメモ帳に、それぞれどの吹き出しか分かるように保存しておくと編集時にスムーズです。

 

 

実際にやってみるとこうなる

①使いたい画像・名前・文章を『編集見たまま』に貼る

f:id:a-a-chan:20200308005023j:plain

 

②吹き出しのHTMLを貼る

f:id:a-a-chan:20200308013332j:plain

 

③画像、名前、文章をそれぞれカット&ペースト

f:id:a-a-chan:20200308013343j:plain
f:id:a-a-chan:20200308013416j:plain

 

以上です!

実装後↓

f:id:a-a-chan:20200308013455j:plain
f:id:a-a-chan:20200308014624j:plain

 

 設定しちゃえば、簡単に会話形式が出来ます。

あとは慣れですね^ ^

 

吹き出しの種類

4種類あります。 

 

f:id:a-a-chan:20200228172500p:plain
あーちゃんママ

左からの会話風吹き出し

 

f:id:a-a-chan:20200228172500p:plain
あーちゃんママ

左からの考えてる風吹き出し

 

f:id:a-a-chan:20200228172450j:plain
娘ちゃん

右からの会話風吹き出し

 

f:id:a-a-chan:20200228172450j:plain
娘ちゃん

右からの考えてる風吹き出し

 

吹き出しの背景色

私は吹き出しの背景を塗りつぶしています。

なぜか。

 

私が生来の目立ちたがり屋だから。

 

っていうのは半分冗談で、

背景塗りつぶしてると

なんか可愛いからです。

 

本音は背景色なし・背景色ありで使い分けたいんですけど、今の私には多分大変なので塗りつぶし一択で(^^;; 

 

まとめ

今回のカスタマイズで「私のブログはなんか味気ないな」が解消出来ました!

また、私のブログの雰囲気にも会話形式って合っているな、と。

 

吹き出しを使うことでブログのアクセントにもなるし、読み進めやすくなった気がします!

 

f:id:a-a-chan:20200229173542p:plain
あーちゃんママ

まだ実装されていない方は、これを機にいかがですか?

 

www.yurukanmama.com

www.yurukanmama.com

www.yurukanmama.com