KatsuhiroBlogPROFILEBLOGITINVESTLIFEENJOYKatsuhiroBlog妻と娘が大好きな現役エンジニア。IT、ブログ、投資を中心に発信します。2019年5月4日WordPressで無料テーマを使っている人「WordPressでブログをやっている。吹き出しを使ってみたいが、やり方がわからない。吹き出しを使える有料テーマには手が出ないから無料でやる方法はないかな?」こういった疑問にお答えします。「こんにちは、かつひろです。前々から↑のような吹き出しを使いたかったのですが、ブロガー界隈では有名な有料テーマである「JIN」「SANGO」は値段が高くて手が出なかったので、自分で作ってみました。ブログで吹き出しを使ってみたい人は多いと思いますが、有料テーマにはなかなか手が出ないですよね。そんな悩みを一瞬で解決するために、今回はコピペするだけでブログで吹き出しを使えるようにするcssを無料で公開します。下記のサイトを参考にしました。画像の下に名前を付けたかったので自分でカスタマイズしました。吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】それでは以下の3つのステップで進めていきます。吹き出しで使う人物の画像を用意しよう吹き出しを使ってみようスポンサードサーチcssに吹き出しのソースコード追加しよう【コピペでOK】まずは、事前準備として吹き出し用のソースコードをWordPressのcssに追記しましょう。サンプル"}上記、吹き出し用のソースコードをコピーしてください。WordPressの管理画面から「外観」→「テーマエディタ」を選択しましょう。「style.css」の一番後ろに先ほどコピーした吹き出し用のソースコードを貼り付けてください。貼り付けができたら「ファイルを更新」を押してください。以上で、吹き出し用のソースコードの追記は一旦おしまいです。上記の部分はあとで修正します。吹き出しで使う人物の画像を用意しよう吹き出しで使う人物の画像を用意してください。使いやすいのは、やはり「いらすとや」ですね。具体例として上記のメガネを探す人の画像を使ってみましょう。WordPressの管理画面から「メディア」→「新規追加」を選択しましょう。先ほどの画像をアップロードします。WordPressの管理画面から「メディア」→「ライブラリ」→「先ほどの画像」を選択しましょう。ここのURLをコピーしてメモ帳などに貼っておいてください。※今回例だとURLは「https://katsuhiroblog.com/wp-content/uploads/2019/04/meganemegane.jpg」です。以上で、吹き出しに使う画像の準備が完了です。吹き出しを使ってみようお待たせしました。それでは実際に吹き出しを使ってみましょう。WordPressの管理画面から「外観」→「テーマエディタ」を選択しましょう。上記の「吹き出しの名前」「画像のURL」「画像の名前」の3つを書き換えます。上記のように置き換えました。置き換えたら「ファイルを更新」を押してください。メガネを探す人"}念のため、メガネを探す人のソースコードも置いておきますね。左側からの吹き出しを使うあとは吹き出しを実際に使うために記事の投稿画面に移動してください。meganemegane">「あれ、メガネはどこだ?メガネ、メガネ・・・」</p>逆側からの吹き出しにしたい場合は、上記のように「r-fuki」を「l-fuki」に変更してください。右側から吹き出しが出ました!会話形式で吹き出しを使ってみたそれでは最後に左右から出る吹き出しで会話形式をやってみました。「って、ハゲとるやないか!」しょうもないですね。ソースコードは下記です。良かったら使って下さい。メガネの人"}最後に今回はブログで吹き出しを使ってみたい人向けに、コピペするだけでブログで吹き出しを使えるようにするcssを無料で紹介しました。これであなたも好きに吹き出しを使うことができるようになりますね!ぜひ使ってください!こんな感じでたまにWordPressで使えるcssを無料で公開しているので、良かったら、ツイッターのフォローをお願いします。記事を投稿したらツイッターでつぶやいています。Katsuhiro_blog以上です。安い手数料で買う方法かつひろ妻と娘が大好きな30代のシステムエンジニアです。家族と一緒に自由な暮らしを得るために、毎日ブログをコツコツ更新中。Amazonギフト合計7,500円分が無料でもらえる!【詳細はこちら】PROFILEBLOGITINVESTLIFEENJOYKatsuhiroBlog妻と娘が大好きな現役エンジニア。IT、ブログ、投資を中心に発信します。