ごきげんいかがですか。
むねやんです。

本日は、ブログのデザイン設定についてのお話です。

「吹き出し」を付けた~~い!

むねやんは以前から渇望していることがありました。

それはブログにて「吹き出し」をつかってみたい!!ということです。

ぱっと思いつくのは、ミスターマーケットさんのような単独ツィートタイプです。
周りのブロガーさんもよく使われておられますが、かっこいいですよね!
(話がそれますが、ミスマさんのブログデザインはビビッドで美しくて憧れますねー。)

僕が高値掴みを防ぐために注意しているたった1つの言葉! – ミスターマーケットの日本株米国株投資ブログ

こちらもいいのですが、私の希望としては、あきんこさんのような対話形式によるかけあいがやってみたいなぁと思ってました。
(ぴよぽんさん、かわいい!)

タワーマンションのモデルルームの見学に行って驚き!見栄で購入したら絶対後悔する! | あきんこの人生を楽しく過ごすためのお金ブログ

弊ブログは基本的に真面目な投資ブログ(?)ですので、文章がけっこう固いといいますか、正直ツマランなぁと思うことがあります。
なので時々、むねやんも無性にボケたいときがあるのですが、いかんせん一人でつぶやいてもパンチが弱いというか、単なるボヤキで終わってしまうんですよね。
うーん、不便だ。なんとかならんもんか、と悩んでいました。

しかし、ネットで検索してみると「はてなブログ」でも吹き出しの使用は可能ということでしたので、さっそく設定してみることにしました。

f:id:munelog2007:20180123001107p:plain

CSSが全然分からない

むねやんが苦手としているものがこの世に2つあります。
ひとつは「植物を育てること。」
そしてもうひとつは「HTMLやCSSなどの設定」です。

ネットでは「HTMLは簡単だ。」とか「コードをコピペすればOK。」とか皆様仰られてますが、マジですか?
むねやんは、比較的簡単だと言われている「はてなブログ」ですら、CSSの設定にめちゃめちゃ手間取ってますけど・・(泣)

ひとまず、下記のブログからCSSコードをコピペして設定してみるも、あえなく失敗。
(お断りしておきますが、問題なのは記事でもコードではなく、むねやんのスキルの低さにあります。)
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 – NO TITLE

次に、下記の記事を参考にCSSコードをコピペして設定してみるもうまくいかず・・。
(繰り返しますが、問題なのはむねやんのスキルの低さです。)
はてなブログで会話形式の吹き出しを実装する方法と効果的な活用法まとめ – ビジログ

デザインCSSに色々なコードを既にいれているのですが、これが邪魔になっているのでしょうかね?
しかし素人が分からん意気にコードを入れまくっているもんですから、これが何のコードで、どこからどこまで対象範囲なのかがさっぱり分からず。

格闘すること2時間(←長っ!)
イライラが頂点に達したむねやんは、既存のコードを全て消去し、一からつくりなおすという暴挙に出ました。
そこから更に格闘すること2時間(←うそやんっ!)
ようやく、それらしいものが出来上がりました。

「吹き出し」完成

ようやく、長き戦いにも終止符をうつことができました。

ふーやれやれ。やっとできたわー。

遅いぞ!

うおっ!!びっくりした!は、はじめまして。

待たせたな!

・・とまあ、こんな感じでうまく設定することができました。

それにしても、突然現れたこの柴犬は何者?

はるやん、見参!

今回から登場します柴犬は「はるやん」と言いまして、むねやんの盟友でもあり、お目付け役でもある賢い犬です。(という設定です。)
はるやんは、自身の声は「大塚明夫」氏にクリソツだと常々吹聴しており、今回の「待たせたな!」もかなり作りこんできたようです。

待たせたな!

 はるやん

(何故、2回言ったし?)

実際の声は、大塚氏よりも「若本規夫」氏に似てますが、本人には内緒です。

総評

以上で、はるやんの紹介を終わります。

皆様、今後ともよろしくお願いいたします。

うおぃ!?声の紹介だけかいッ?

 はるやん

これでいいのだ!

ぶるぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁ!!

 はるやん

追伸

誰か、CSSやHTMLに詳しい人がおられましたら、是非ともご教授お願いいたします。(切実)

Ate breve! Obrigado!

にほんブログ村 株ブログ 米国株へ
↑↑本日も応援のポチ、よろしくお願いいたします☆

スポンサードリンク

よろしければシェアお願いします

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.