うえのブログ

試行錯誤をしながらまともなブログを書けるようになるブログ

うえのブログ

はてなブログで会話風の吹き出しを設定してみた

スポンサーリンク

f:id:uenoyou111:20170929161834j:plain

 

タイトル、はてなブログで~って書いてみたんですけど、これ他のとこじゃ使えないんですかね。無知な上野です。

 

今回他のブログ様やサイト様がやってるような、会話風の吹き出しを作るCSSを導入してみました。

 

実は数日前からやってたんですけど……例によって画像が表示されないとかわけわからない状態に。才能がないのかもしれません。

 

なんとか出来たので、まとめてみます。

 

 

会話風の吹き出し設定方法

 

まず参考にしたブログ様を載せます。

 

www.notitle-weblog.com

 

やり方に関してはもう、この通りになります。きちんとコピペして手順通りにやればしっかり出来ます。

 

のはずが。私は最初、何故か画像が反映されず。何度かやり直したけどダメだったんですよね。

 

 

画像が出てこなかった

 

しばらく諦めてて、また最初からやり直してもダメで。白丸の状態で吹き出しだけあるような感じ。

 

f:id:uenoyou111:20170930002126j:plain

 

なんとか出来てないやつね。うーん。これじゃ吹き出しだけの方がマシだなぁ。画像が出てこないってことは、画像が引っ張れてないってことなのかな?

 

と思い、アップロードサイズとか、圧縮…?画像が大きいと反映されないんじゃないかとか、色々遠回りしてました。

 

ふと上記のブログ様の画像URLをそのまま載せたら成功したので、やはり画像URLの引っ張り方が何か違うんだろうなーと。

 

 

私がつまづいたところ

 

画像をアップロードするときにですね、はてなフォトライフからアップロードしてたんですよ。

 

はてなブログでログインしたら右上のIDが載っている横にあるキューブ状のアイコンから「はてなフォトライフ」を選択。

 

f:id:uenoyou111:20170922232122j:plain

 

そこでこの「アップロード」を選択ですね。どっち選んでも大丈夫です。

 

f:id:uenoyou111:20170922232201j:plain

 

この時、オプションのフォルダ欄が「トップ」になっていたんです。

 

f:id:uenoyou111:20170930002631j:plain

 

うーん、他に変更出来る場所は無いしな…もしかしてアップロード先が間違ってるんじゃないかと検証する為、トップ→Hatena Blogへ変更。

 

そしてアップロードした画像を開き、右クリックで画像URLをコピー。貼り付けしたところ。

 

 

無事成功したんですね。

 

 

とか言っていざ更新したら表示されてませんでした~ってなってたら笑えないですね。チェックはしましたが。

 

なので、私の場合はアップロード先が間違ってました。ここを変えるだけで問題なく表示されるようになりました。

 

 

吹き出し会話の効果

 

このまま終わるのも癪なんで、ついでに会話風デザインを導入するメリットなんて書き連ねていきます。

 

使い方によってはかなり扱いやすいし、表現の仕方が増えます。

 

 

頭に入りやすい

 

ですね。文章よりも会話の方が内容をイメージがしやすいです。あと親しみやすさも出ますし。

 

読者と管理人という立場で会話をするのもいいですね。例えば読者アンケートとか取ったりして、発表する時にも有効です。

 

読者アンケートの結果、管理人が交代となります!

おおっ!そんな簡単に交代してしまうんですね!!

 

文章の途中でアクセントが出来る

 

商品の説明とかでメリットとかつらつら書かれても頭に入りづらい、そんな時にそっと

 

ま、一番使いやすいし毎日使っちゃいますけどね。

 

なんて書かれたら直感的に商品の良さがイメージがしやすいです。

 

 

 

多用してしまうのは要注意です。

かなりウザったらしくなってしまいます。

まぁ、うまく織り交ぜて使うのがいいかと。

うまく使えば抑揚がしっかり出るので、多用しないように。 

 

相当なウザさ。

 

キャラ立てが出来る

 

よく他のサイト様やブログ様で、キャラクターが会話風に話を進めていたりするのを見かけます。

 

キャラを立てることで個性を出すことが出来ますし、管理人として言いにくい言葉を代用してくれたり出来ますね。

 

 

あと何かあったかな。他に利点が思いついたら追記します。

 

こんなところですかね。

 

 

まとめ

 

会話風は導入しておくと、文章を作る側も楽しいです。あ、これメリットの一つじゃん。

 

ほんとブログデザインはCSSを扱うので、私みたいなアホだと扱いに苦労します。

 

導入するたびに、「え、なんで出ないの?」ってことが圧倒的に多いですけどね。