【ブログカスタマイズ】試行錯誤しながら吹き出しを設定!会話形式にする方法をやってみた

f:id:pikalog:20211020175615p:plain

 

今日はブログ初心者のわたしが「吹き出し」の設定をしてみました!というお話です。

 

 

吹き出し】やってみた結果からどうぞ

 

こんにちは~

 

吹き出し見れてますか~?

 

お~!ちゃんと見れてるよー!

 

うん、こんな感じです

 

Google chrome拡張機能を使用しない方法

 

わたしの使用するPCは、Google chrome拡張機能が入っているPCと入っていないPCがあります。

 

試行錯誤し迷ったのですが、こちらのサイトを参考にGoogle chrome拡張機能を使わない方法で設定してみました。

 

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

 

カスタマイズを載せてくださっているブロガーさんは、他にもよく見させて頂いています。感謝感謝です。

 

定型文機能を使用し更に簡単に

 

SIROMAさんのサイトからコードをCSSにコピペさせて頂き、説明通りに「クラス名」と「画像のURL」を変更します。

 

その後はわたしは定型文機能を使用しています。みなさま定型文機能は使用されてますか?すっごく便利なんです。

 

難しいことが出来ないわたしにはピッタリの機能です。定型文はPC記事作成中画面の右横にあります。

 

 f:id:pikalog:20211020131441j:plain 

 

をクリック

をクリック

のこちらの画面が登場

 

f:id:pikalog:20211020131502j:plain 

 

タイトルは自分がわかるように適当に設定でOKです。

 

吹き出しで使うコードをこちらにコピペ→黄色のラインの部分に吹き出しで表示させたい文章を入れる→保存で作成完了。

 

使いたいときにすぐ呼び出せるので、作成しておくと便利。使うときはその時に合う文章に書き換えるだけです(#^^#)

 

ちなみに「l(エル)」は吹き出しが左になります。ここを「r(アール)」に変更すると、吹き出しが右側に変化します。

 

先ほどの③の写真を、実際に吹き出しに使用してみるとこんな感じ↓(文章は書き替えましたよん)

 

ほんとだ、「r(アール)」なので吹き出しが右側だね!

 

わたしはlとrの意味はアイコンの位置を示すものだと思っていました。

 

吹き出しに対してなので、間違えないように気を付けて下さいね。

 

ちなみにアイコンの絵も仮で自作してみました🐰(←そっちの方が楽しかったわたし)

 

このペンを使ってアイビスペイントで書いてます。

www.pika-log.com

 

吹き出し・会話形式の効果

 

吹き出し・会話形式を導入する事で、わたしが感じるメリット/デメリットはこちらです。

 

メリット

・伝えたい事を強調できる

・長文のワンクッション

・文章のテンポが良く見える

・やわらかい雰囲気になる

多くの方が使用しているLINE吹き出しです。

 

LINEも相手が左、自分が右側なので、自分アイコンは右側に配置した方が自然と馴染み、見やすいようです。

 

今回は練習なので4匹のウサギを登場させましたが、自分のアイコンも作ろうと思います。

 

デメリット

 

使いすぎるとウザい、クドいと言われているようです。確かに。

 

吹き出しを何ターンも使うと、読んでくれている方の目が疲れてしまいますよね。

 

なのでポイントで使う(基本1ターン)が良いのかなと思います!

 

冒頭で吹き出し4連チャンしてごめんなさい…!

 

最近ちょこちょこカスタマイズ

 

カスタマイズより記事を書いた方が良いのですが、ついつい。

 

ブログの重さも気になっているので、画像圧縮していないものを圧縮したり、まだまだ改善しなければです。

 

カスタマイズの時はバックアップを取っておくのも大切ですね!

 

色々カスタマイズが終わったら、カスタマイズのまとめも記事に出来たらなぁと思っています。

 

 

 

 

 

終わりに

今回は、初心者のわたしが挑戦したカスタマイズ「吹き出し」のお話でした。わたし的な難易度は…5段階中4くらいです。

 

ちょっと難しかったです。まだまだ初心者ですが、色んなことに挑戦していきたいと思います。

 

最後までお読みいただき、ありがとうございました🎀