現在サイト移行後の調整中にてお見苦しい点多数あります

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

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

(※現在はWordPressでブログ運営をしており、この記事ははてなブログ時代の記事になっています。)

こんにちは、

あーちゃんママ(@a_a_chanm0m)です。

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

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

その他のカスタマイズのまとめはこちら

お世話になったサイト様

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

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

下記サイトを見れば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をコピペ。

拡張機能を使わず、いざ、実装!

……!

とってもおしゃれ!!

これ使うの楽しみ!!!

と思ったのですが。

私「名前を入力したい…!」

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

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

私「違う方法を探そう…(涙)」

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

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

www.chankome.com

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

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

手順

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

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

基本手順はこの2つ!

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

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

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

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

www.colordic.org

4種類の吹き出しのHTML

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

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

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

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

吹き出しのカスタマイズ方法のHTML画面

②吹き出しのHTMLを貼る

吹き出しのカスタマイズのHTML画面

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

吹き出しのカスタマイズのCSS画面
吹き出しのカスタマイズのCSS画面

以上です!

実装後↓

吹き出しのカスタマイズのHTML画面

吹き出しのカスタマイズのHTML画面

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

あとは慣れですね^ ^

吹き出しの背景色

私は下の画像のように吹き出しの背景をピンクで塗りつぶしていました。

吹き出しのカスタマイズのHTML画面

なぜか。

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

っていうのは半分冗談で、背景塗りつぶしてるとなんか可愛いかったからです。

はてなブログで吹き出しのカスタマイズ:まとめ

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

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

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

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

4 COMMENTS

a-a-chan

luluMama様(id:momolulu)
はてブありがとうございます!
私の拙いブログですが、そう言っていただけて嬉しいですm(_ _)m

返信する
chankome

実装してくださりありがとうございます!お役にたててよかったです^^☆

返信する
a-a-chan

Kome様(id:chankome)
ご本人様…!!!😳✨✨✨
こんな弱小ブログにわざわざコメントをありがとうございます!!!
断りもなく物凄く活用させていただいています🙇‍♀️💦
Komeさんのおかげでブログに対するモチベーションが凄く上がりました!!
ありがとうございました!!!!

返信する
a-a-chan

千鶴様(id:rakuni_kosodate)
はてブありがとうございます!
可愛いですよね!!
可愛いので多様しちゃいますよ〜(笑)

返信する

コメントを残す

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

CAPTCHA