はてなブロガーさんから「吹き出し」のテクを学んだ！でも、使えない話
こんにちは、太太です。
吹き出し付きのブログって見やすいですよねえ。「やりたい」と前々から思っていたので、この度チャレンジしてみました。コードがわからぬ素人でもなんとかできましたよ♪
今日の話題は「吹き出しテク」のお話です。
はてなブロガーさんのやり方を忠実に実行してみました
じゃじゃじゃじゃーん。吹き出し！ 吹き出しだよ！
ついに太太ブログも吹き出しデビューです。「吹き出し」のテクニックは、じょーじさんのやり方を参考にさせていただきました。
「吹き出しやってみたいわあ」と思っても、機械に弱い女子だと尻込みしてしまいますよね。じょーじさんのCSSはとっても簡単。シンプルイズベストでした。
吹き出しを作成するには3つの手順のみでした！
1つ目：CSSを貼ってみるよ
ブログデザインをいじる場合、じょーじさんが作成したCSSを大枠に貼り付けます。CSSはじょーじさんのページに設置してありますよ。コピペしてくださいませ。
記事作成画面
↓
デザイン
↓
スパナマーク
↓
デザインCSS
デザインCSSの項目にじょーじCSSをペタッ。ほんと、ただ貼り付けるだけです。
2つ目：記事内には吹き出しコードを貼ってみるよ
ブログ表記モードをhtml編集にし、吹き出しのコードをControl＋Vでペタりんこします。プレビュー画面で確認してみるとこんな感じになります。
会話内容をここに記述してください！
会話内容をここに記述してください！
はい、これが貼っただけのもの。
でっきたー。でっきーた！
意外と簡単よ。
3つ目：◯の中にはどうやって画像を入れるの？
今度は画像を◯の中に入れてみます。太太のシンボルマーク・多肉植物を入れてみませう。
使いたい画像の上にマウスを合わせ右クリックしてみてー。
「画像のアドレスをコピー」を選ぶと
https:/cdn-ak.f.st-hatena.com〜.jpg
こんな感じのアドレスがコピーされます。https://からはじまり、jpgで締めている文字列ならコピペできてますよ。
このアドレスを
ここに左側の人の画像のURLを貼って下さい！
にペーストします。
会話内容をここに記述してください！
会話内容をここに記述してください！
ちゃんとコピペできてますね。
順序どおりやれば難しくない！
右側の吹き出しにも画像を入れてみるよ
今度は右側の吹き出しにも画像を入れてみますね。吹き出し同士の隙間、会話文もいじってみます。
你好！我是太太。欢迎来我的博客。（こんにちは、太太です。私のブログへようこそ〜）
我想去台湾〜！（私は台湾へ行きたいの〜！）
きゃー、かわきゅん。かわきゅん。ダイヤブロックのお人形がきちんと円の中に入っています。特に画像操作せずとも、きれいに収まっているのがすごいよね。
ただ、落とし穴があった
このブログを読んで「？」に思った方がいるかもしれません。
「なんも見えませんが？」
はい、そうなのです。吹き出しテクニックははてなプロじゃないと適用されないそうです。PCではOKでも、スマホでは設定ができないのだって。
PCでみるとかわいいダイヤブロック吹き出しなのに、スマホだとわけのわからぬ雰囲気です。
うーむ、はてなプロにすべきか。
今悩み中です。
