MovelogMovelogBloggerで記事内に吹き出しを作り会話形式で書く方法4/28/2018Blogger魔改造こんにちは。最近よくブログでこんなの見かけませんか?どーも、こんにちは!そう、会話形式で表示される、フキダシのやつです。これ文章のいいアクセントになるし面白いんですが、「どうせはてなブログやワードプレスだけの機能なんだろうなー。」なんて思っていました。Bloggerでもできたよ!なんと、Bloggerでもあこがれのフキダシを実装することができました。今回はフキダシのやつをBloggerでも実装する方法について書いていきたいと思います。Bloggerで記事内にフキダシを作ろう!今回はこちらのページを参考にしましたが、Bloggerだといくつか異なる部分があるのでそこらへんも説明していきます。TITLEまず、こちらのページにあるCSSのコード(長いやつ)をコピーします。このコードを貼り付けるために、Bloggerの編集画面から「テーマ」→「HTMLの編集」を開きます。したら、ブログのhtmlコード内を検索して、</b:skin>というところを探しましょう。コード内検索の方法はこちらの記事へ。Bloggerでテーマをいじるならhtml上でコード部分を検索しよう</b:skin>の直前にコピーしたコードを貼り付けましょう。貼り付けたら、フキダシの名前と画像を設定していきます。http://www.notitle-weblog.com/entry/fukidashiコード一番下、この部分がフキダシのキャラクターごとの設定です。クラス名はあとでわかりやすい名前にしておきましょう。画像のURLはBloggerの場合、適当な記事の編集画面から「画像を挿入(写真のアイコンのところ)」を選択し、「このブログから」を選択します。したらあとは「画像のURLをコピー」して、さっきテーマのhtmlにコピペしたコードの(画像のURL)部分に貼り付ければOKです。使いたい写真をアップロードしていない場合は、Bloggerの編集画面から「ページ」で新しくページを作り、写真を貼り付けましょう。ページ名はわかりやすく「フキダシ素材」とかで大丈夫です。ここで作ったページは写真をアップロードする用なので、写真を貼り付けて保存したら公開しなくてもOKです。クラス名と画像が設定できたら、あとは上のリンクの記事通りに使うだけ。一応ここでも使い方の例を上げておきます。クラス名">ここの文章がフキダシに表示されるよ!</p>これを記事編集画面のhtmlに直接貼り付けるとこんな感じになります。(クラス名は各自で設定したもの)ここの文章がフキダシに表示されるよ!「r-fuki」のところを「l-fuki」にすると、フキダシの画像が左に表示されるので、これを組み合わせれば会話形式でかけます。このフキダシのやつ、ふつうに面白い。ブログ書いてても面白いし、ブログの流れやデザイン的にもいい感じですね。これからどんどん使って行きたいと思います。気軽なアウトプットを心がけます。Bloggerテーマ【ZELOシリーズ】【veta(仮)】制作者。お仕事、依頼などはTwitter(@hiro_hb)へご連絡ください。人気の投稿Bloggerの新・日本語対応テーマ【ZELO】作成しました【特徴紹介】6/23/2018Bloggerの日本向けテーマ「ZELO」使用上の注意・ダウンロード6/24/2018Bloggerでスマホから投稿したい!スマホからの方法を2つ試してみた4/08/2018ZELOを導入したら初めにやること【レイアウトの設定】6/24/2018ZELOの導入方法6/24/2018ホームプライバシーポリシ。