Bloggerで使える「吹き出し」で会話形式の記事を書く方法|火消しに行って油を注ぐ火消しに行って油を注ぐ私の知りたいを解決するブログ。あとプログラミングのメモなど。他の人のブログで記事内で吹き出しを使っているのを良く見かけていたんですが、あれってはてなブログとかWordPressとかの固有機能だと思っていました。こんな感じのやつです楽しそうで良いなぁと羨ましく思っていたんですが、CSSをコピペするだけでBloggerでも簡単に使えることがわかりましたので、ここにメモしておきます。こちらの記事を参考にさせて頂きました!誰でもコピペで簡単に吹き出しで会話形式のブログが書けるCSS無料ブログじゃ稼げないよ、と言われ続けて一年半。Bloggerを使った副業ブログの作り方。【前準備】CSSを追加するまずは以下のコードをまるっとコピーします。}/*****会話のCSSここまで*****//*--------------------------------------*/コピーしたコードを、BloggerのHTMLに追加します。Bloggerの管理ページから、「テーマ」→「HTMLの編集」と進んでください。私はVaster2というテンプレートを使っているので、の図の位置に追加しました。Vaster2を使っていない人は、「HTMLの編集」で表示されたソースコード内を「</b:skin>」で検索して、見つかった行の直前に追加すればOKです。簡単ですね!会話のやり方Bloggerの記事作成画面の左上に「作成」ボタンと「HTML」ボタンがありますが、「HTML」形式での入力方法を選びます。左側の会話は、以下のコードを記事に貼り付けてください。class="talk-end"></div>私は自分の発言に左側の吹き出しを使用することが多いです。自分のプロフィール画像を利用したい場合は、プロフィール画面から画像のアドレスが取得できます。Chromeで表示して、画像を右クリックで「画像アドレスをコピー」を選択してください。取得した画像のURLを、上記ソースコードの「画像のURL」と書かれた部分と置き換えれば、画像が表示されます。以下のコードを記事に貼り付けてください。class="talk-end"></div>会話に表示する画像を、Googleフォトにアップしている画像にしてみましょう。記事作成画面で「画像を挿入」ボタンを押します。画像一覧が表示されたら、吹き出しに使いたい画像を右クリックして、「画像アドレスをコピー」を選択します。コピーしたアドレスをソースコードの「画像のURL」と書かれた部分と置き換えればOKです。これでBloggerでも吹き出しが使えます!味気ないブログも一気に華やかになります!ちょっとしたアクセントに使えそう!使ってみるととても楽しいです。活用してみてください。12:48めちゃめちゃ参考になりました!ありがとうございます。14:26コメントありがとうございます。15:20教えてください。画像を小さくしてもぼやけてしまいます。180%;を100%に変更したらできました。23:37コメントありがとうございます。解決されたようで良かったです。180%;が原因だったんですね。Next>自己紹介ヤマチヨ時代を逆行するレガシーエンジニア。末端SIerでシステムエンジニア紛いの仕事をしております。年齢を重ねるごとに加速する日々の中で、感じた事、考えた事を記録していきたいと思います。@_yamacho_人気記事ハードオフ・オフハウスで実際に売れたものまとめ。売れるもの・売れないもの。Excelのサイズが肥大化して動作が重い原因はたぶんこれ家族で大阪から福岡に帰省するなら車が楽。ヤマト便がサイズの上限を設定!重量と大きさの制限で送れないものが増えた!料金の値上げも実施!独学で地方公務員試験を受けたので、その振り返りなど(社会人経験者枠)【VB.NET】ネットワーク上のフォルダにアクセスしてユーザー/パスワード認証のダイアログを表示する5年間敷きっぱなしのカーペットをコインランドリーで洗濯しました。どんなことが聞かれるのか。)「プリントラッコ」が激安だったので、iPhoneに溜まった写真を大量現像5年間敷きっぱなしのカーペットをコインランドリーで洗濯しました。