2018-02-17以前WordPressで吹き出し可能なプラグインを紹介しましたが、無料ブログでも「吹き出し」やりたいですよね。見てたら楽しそうですもんね。CSSとかHTMLとかよくわからない。ネット上で探してきたCSSを貼ってみたものの、吹き出しの色とか画像のサイズとか変えたくてもどこをどう変えればいいのかわからないということが多いかと思います。できるだけ簡単に変更できちゃうようにしてみようということでFC2ブログをベースに考えてみました。僕もCSSできるのかって聞かれると「いや~わかんないっすね」と即答してしまう程度なので、調べに調べまくってコーディングしてみました。ココ変だよってところがあったらコメントいただけると幸いです。ちなみに、今回はいつもの二人はお休みです。おなじ「吹き出し」ではあるんですけど、出処が違う吹き出しなので観てるあなたも僕も混乱しそうなので。ここでもプラグインではなく、新しいオリジナル吹き出しで表示するようにしました。新しいオリジナル吹き出しの記事も参考にしてみてくださいね。ブログで吹き出し会話第3弾!より使いやすくパワーアップ!以前、無料ブログでも吹き出しが使えるようにと以下の記事を書いたことがあります。まとめFC2にこの方法で吹き出しを追加してみるまずはこの方法でFC2に吹き出しを追加するとどんな感じになるのか気になるかと思いますので、画像とリンクを貼っておきますね。実際のページを見るにはココ:FB-800とかりんの日記CSSをFC2テンプレートに適用させる上記のような吹き出しを適用させるためにFC2ブログの「テンプレートの設定」から行っていきます。このとき、万が一間違ってしまっても大丈夫なようにテンプレートの複製をおすすめします。編集したいテンプレートを選んだら、スタイルシート編集でコードを追加します。スタイルシート編集で追加するコードは以下のコードです。以下のコードをすべてコピーして貼り付けてください。これでとりあえず吹き出しで会話をするための準備ができました。*****************************************************************/会話形式の記事を書く次に記事を書く際に以下のHTMLコードを使います。左側に画像が表示される吹き出しの場合はこちらのコードをコピーして画像URL:表示したい画像のURLここは左吹き出し:会話の内容に置き換えてください。-->右側に画像が表示される吹き出しの場合はこちらのコードをコピーして画像URL:表示したい画像のURLここは右吹き出し:会話の内容に置き換えてください。-->どうでしょうか?あなたのブログに吹き出しはでましたか?きっとあなたの感想はかりんも言ってますが、こうだと思います。「吹き出しの色がきもちわるくない?」はい、色変えちゃいましょう。あなた好みの吹き出しにカスタマイズブログのデザインやカラムのサイズによっては吹き出し本体サイズや色、アイコンサイズを少し変えたいなってときがあります。CSS中のいろいろなところを変えないといけなかったり、変え忘れてしまって「アレ?」ってことがあったり。なにより間違って変えてしまった日には戻せなくなって「もう、あ~きらめた!」なんてことも。そんなことがないようにできるだけ簡単に変更できるようにしてみましたので、参考にしてください。吹き出しの色を変えるまずは、あなたが一番気になっているであろう吹き出しの色を変えてみます。いうか簡単なのでいろいろ変えてみてあなたのブログに合った色にしてみてくださいね。先ほどスタイルシートに貼り付けたコードの一番最初の方に以下のような箇所があります。ここの色を好きな色に変えてみてください。カラーコードでOKですよ。white;/*吹き出しフォント色指定*/アイコンサイズを変えるもう少しアイコン大きい方が良かったり、小さい方がいいなってときはここのサイズを変えてみてください。90px;/*アイコンサイズ*/レスポンシブに対応するFC2ブログでレスポンシブに対応する場合は「スマートフォン用」のテンプレートの編集を行う必要があります。一度もスマートフォン用のテンプレートを設定したことがないという場合はテンプレート自体が設定されていませんので、まず好きなテンプレートを追加しましょう。テンプレートを設定したことがある場合は「テンプレート管理」テンプレートの設定をしたことがない場合は「テンプレートの追加」から追加後にテンプレートの管理に進みましょうスマートフォン用テンプレート管理に進んだら先ほどと同様にCSSの貼り付けを行います。その際以下のようにアイコンサイズと吹き出しサイズをスマートフォンに合ったサイズに変更します。ここもあなたのブログに合ったサイズに変更しましょう。160px;/*吹き出しサイズ*/まとめ実は、少しだけ変更を加えてはいますが、ここでも同じようにして吹き出しでの会話を表示させています。吹き出しを使えば、その寂しさも吹っ飛ぶかもしれません!基本的には吹き出し用CSSを貼り付けて、会話を入れたいところに吹き出し用HTMLを入れればよいので簡単にできると思います。活用してみてください。関連記事はこちら2017/7/19ブログの表示改善に行った2つのことある日の午後の出来事。Poorって...今の仕事を始めたばかりの頃に、考え方がPoorだとか設計がPoorだとか言われたのを思い出しました。...2017/5/27記事作成のときのタグ打ちに時間がかかるときには「AddQuicktag」で大幅時間短縮!記事を書くときにぶつかる壁の一つに文字の装飾やリンク、その他にもオリジナルで何かしら表したいものがあるときに、どうしても必要なタグ打ちがありますよね。使っているテンプレートによっては、簡単にタグを呼び出せるように投稿画面の上部に装飾ボタンがありますが、どうしても使いたい装飾が標準ではなかったり、オリジナルで装飾を作成している場合は、毎回タグを打ち込まなければならなかったり、同じタグを使っている別記事からコピーしてきたりと無駄に時間がかかってしまうんですよね。テンプレートを賢威7からAFFINGER4へ変更することにしました。なんでかっていうと、ただ単に見た目です。トップページの記事一覧でもカテゴリー別の記事一覧でもざっと流し見しながら「おっこれ気になるな」って個別記事にはいると思うんですよね。FC2ブログを例に登録方法を説明していきますね。方ははすこし手間どるかもしれませんが、順番通りにゆっくり進めていきましょう。こちらからFC2の登録画面に入ります。するとFC2ブログの初期ページが開きます。画面左上に「ブログをはじめる」とありますので、こちらをクリックします。ものすごく痩せそうなんだけど。フィイスマスクやエクササイズとは違いますよ。「Jetpack(プラグイン)」の「パブリサイズ共有」というブログでの記事投稿情報を各SNSで流してくれる連携機能があるので、今回はその紹介です。Twitterアカウントを新しく取得し、当ブログもこの記事から連携予定になりますが、その過程をメモっておこうと思います。...2017/5/30【エックスサーバー】サブドメインでブログをはじめよう。独自ドメインひとつでも複数のサイトをつくることは可能です。同一のドメインで複数のサイトを運営する場合、サブドメイン型とサブディレクトリ型があるのですが、今回はサブドメインの作り方について説明していきますネ。Bubble」なんかこれいやだなぁ。した吹き出しで話したいよ。HTMLとかCSSとか変えないといけないんだよねぇ。遊び心というかブログを書いているとマンネリ化してモチベーションが↓↓ってことありますよね。楽しく読んでもらうには楽しく書かなきゃって思うんです。それで導入したいと思ったのが吹き出し。う~ん、いろいろネットで調べてみたんだけど「エックスサーバー」が良いっていうのが多かったかな。料金はいろんなサーバー同士で比較しやすいんだけどその他の用語がむずかしくて。用語解説もしながら比較してみましょう。簡単に主要な機能や性能、価格をまとめましたのでそれに沿ってみてみましょう。20:33初めまして。10月にブログを始めたばかりの初心者です。会話形式のブログにしようと思い、こちらのサイトを参考にさせて頂きました。こちらのサイトのおかげで、非常に簡便にブログを始めることができました。ありがとうございました。ぶしつけで失礼ですが、もしも可能でしたら、ご助言を頂きたくご連絡させて頂きました。スマホで自分のブログを確認すると、キャラの画像の上にという文字式が表示されてしまいます。手順の通りにスマホ用のテンプレートにコードを入力したのですが・・・。いえば、の行のときに、画像URLを張り付けると、')"が残ってしまったので、この')"を消しています(消しても、パソコンであれば問題なく表示されました)。消さなければスマホできちんと表示されるかと言いますと、やはり数式が表示されてしまいます・・。18:56音響もぐらさん、はじめまして。コメントありがとうございます。ご質問いただいた件についてです。hrefで始まるリンクタグを記載されていませんでしょうか?「画像url」の記載をhttp://~.pngのみに修正してみてください。これで解決できるかと思いますが、上手くいかないようであれば、またご連絡いただければと思います。それから、スマホで見てみるとサイト下部(フッターより下)に吹き出し用のコードが見えてしまっているようです。よろしければ、お使いのスマホ用テンプレートを教えていただけないでしょうか。これからもよろしくお願いします。21:41お返事を頂き、誠にありがとうございます。教えて頂いた通りに修正しましたところ、スマホでも文字式が出なくなりました。キャラ画像がすべて左側に表示されていた点も修正されました。本当にありがとうございました。前回お送りさせて頂いた文面で文字式が見えなくなっていました。重ねて失礼をお詫び申し上げます。※私の使用しているスマホ用テンプレートは、FC2ブログの共有テンプレートからお借りしたsp34_birdskyというテンプレートです。22:36お役に立ててよかったです。画像urlの修正の数が多くて大変かもしれませんが、「吹き出し」ぜひ活用ください。スマホで見た場合に吹き出し用のコードがサイト下部に表示されてしまっている件ですが、同テンプレートで試しましたところ問題ないことを確認しました。HTML編集の方にもコードを追加されいませんでしょうか?コードの追加はスタイルシート編集の方のみでOKです。間違ってたらすみません。09:04ご助言の通り確認しましたところ、HTML編集の方にも(無自覚のうちに)コードを追加してしまっていたようです。修正しましたら改善されました。こちらのトラブルのポイントをすべてお見通しされ、ロフさんのスキルにひたすら驚愕しております。本当にありがとうございました。10:45解決されましたか。スキルに驚愕なんてとんでもないです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。