キャラ画像付きのふきだしで会話風にするカスタマイズ。キャラ画像付きのふきだしで会話風にするカスタマイズ。7分ツイートシェアはてブPocketLINEキャラにふきだしをつけて会話しているように見せるカスタマイズを紹介します。2017年8月24日にCSSの一部を修正しました。標準機能として、LINE会話風吹き出しが実装されています。拡張クラスが設定されていますので、簡単に設定できます。参考SimplicityでLINE風の会話文を表示する方法Simplicity例えば、LINE風の吹き出し背景をつけて、よりLINE風にしたものだとこんな感じです。あっという間にできてしまいます。Simplicityは高機能で素敵です(^_^)画像付きの吹き出しにしてみようLINE風の吹き出しは、いまどきのデザインでいいんですがブログでそのまま使うには殺風景な感じもしてしまいます。そこで今回は、コピペで使える画像付き吹きだしのカスタマイズを紹介します。完成品はこんな感じです。TITLE様の記事を参考にさせていただいています。画像があるだけで、本当に会話しているようです。吹き出しのキャラ画像を準備します。ダッシュボード→メディア→新規追加→ファイル選択で使いたい画像を選びます。次に編集で画像サイズを小さくします。100px×100px位で十分です。保存したら、ファイルのURLをコピーしてメモ帳などに貼り付けておきます。CSSカスタマイズカスタマイズといっても、コピペで貼り付けてから数箇所変更するだけです。Simplicityのレスポンシブ設定を使っている場合responsive.cssを編集します。下に以下のコードコピペします。*/キャラ名は英字で好きな名前をつけます。部分は、先ほどメモ帳に貼り付けた、キャラの画像のURLをいれます。Simplicityでレスポンシブ設定を使っていない場合レスポンシブを使っていない場合は、PCのスタイルをスタイルシートモバイル(スマホ)のスタイルをmobile.cssに貼り付けます。下に以下のCSSを貼り付けます。.jpg);}キャラ名は英字で好きな名前をつけます。部分は、先ほどメモ帳に貼り付けた、キャラの画像のURLをいれます。下に以下のCSSを貼り付けます。}これでCSSのカスタマイズは終了です。次に、毎回簡単にふきだしを使う方法を紹介します。tagを設定するここまでに設定したキャラ画像付きふきだしを使うには、文字列に上記のスタイルを適用させる必要があります。Tagを利用しましょう。使ったことのない人はこちらの記事を参考にしてみてください。吹き出しは、キャラ画像が左側にあって吹き出しが右にあるものキャラ画像が右側にあって吹き出しが左にあるものの二つのケースが想定されます。左右を使い分けることでより会話調に見せることができます。これまでの作業でCSSに設定したキャラ画像(仮にtarouとしてみます)を使って、右側吹き出しと左側吹き出しのタグを登録してみます。会話内容ここでの、r-fukiは、右側に吹き出しです。キャラ画像が左で吹き出しが右です。会話内容とすると、l-fukiなので、左側に吹き出しです。キャラ画像が右で吹き出しが左です。Tagには、と登録しておきます。これで、カスタマイズ終了です。次は、CSSの調整の仕方を解説します。今回紹介したカスタマイズCSSは、PCではSimplicityの通常幅に、スマホはiPhone6に合うように調整しています。※スマホはiPhone6しか所有していないので、他の機種ではどうなるのか確認できていません。所有しているスマホでずれて表示されている場合は、少し調整が必要です。調整すればSimplicity以外にも使えます。これまでに紹介したCSSには、わかりやすいように右側に何を調整する項目かを記載しています。あとは値を変えて、調整してみてください。Chromeの検証機能を使うと簡単です。使ったことのない人はこちらの記事を参考にしてみてください。画像の大きさ画像は自動で丸く切り抜きされます。大きさを変えたい場合は、この部分を変更します。WidthとHeightは同じ数値にしないと、画像の端が欠けるので注意が必要です。topの値を調整すると、画像の上下の位置が変わります。吹き出しの調整これまでに紹介したCSSでは、読みやすいように吹き出しの位置を揃えています。幅がほしいというときはこの部分で調整できます。全体(キャラ画像と吹き出し)の横幅*/で吹き出しの幅を変更できます。10%を変えると全体の位置調節*/の10%の部分で全体(キャラ画像と吹き出し)の位置が調整できます。これで横方向の吹き出しスペースが広がりました。表示している記事を新着記事一覧に表示しないカスタマイズ「Simplicity」画面サイズで見出しデザインを変えるカスタマイズ【Simplicty】コピペで簡単!トップページの記事一覧を揃ったタイル表示に変えるカスタマイズ。吹き出しが出るところまでは出来るのですが、画像が表示されません。2017年2月21日ご質問ありがとうございます。画像ファイルのURLはあっていますか?もし、Chromeをお使いであれば、設定キャッシュされた画像とファイルをクリアしてみてください。その他キャッシュ系のプラグインをお使いであればキャッシュをクリアしてみてください。私も吹き出しは出るのですが、画像が表示されません。画像ファイルのURLはあってます。設定のキャッシュされた画像とファイルをクリアしてみましたが、やはり画像が表示されないままでした。ほかに何か原因で考えられることはありますでしょうか?参考になるかわかりませんが、吹き出しを入れた記事をウェブサイト記載欄に入れておきます。2017年4月27日コメントありがとうございます。ソースを見させていただきました。.r-fuki::afterのところでheightが指定されていないだからと思います。heightを指定していただいて、あとは微調整していただけたらと思います。ご不明な点がございましたらいつでもコメントください。ご返信いただきありがとうございます。2017年4月29日やってみたのですが、私も画像だけが表示されません。heightタグも入っているようですが・・・アドバイス頂けると助かります。2017年5月1日まるお様コメントありがとうございます。Chromeのキャッシュクリアは試しました。Chromeのシークレットモードで見てみましたが、それでも結果は画像が表示されない状態です。なんども送信してしまいスミマセン。送信できていない可能性があるので3回目の送信です。重複していたらスミマセン。———————-お世話になります。本日より、吹き出しを利用させていただいています。CSSをまるまるコピペで使えるので非常に助かっています。ありがとうございます!!ただ、現在トラブってまして...。肝心の画像が表示されない状態です。解決しましたので報告します。連休中外出していたためお返事できなくて申し訳ありませんでした。解決したとのことでよかったです。2017年7月17日あと、コメント送信のときに、『あたなのコメントは承認待ちです』と出るときとでない時があります。コメントが送信できているのか出来ていないのかわからない時が多々あります。重複送信してしまっている時があります。2017年7月17日コメントありがとうございます。制限はかけていません。コメントされるかたの名前とメールアドレスが入力されていれば承認待ちに移行すると思います。今回のような指摘は初めてですので原因がわかりません・・・。同じような現象があれば教えてください。2017年7月17日>>特に制限はかけていません。コメントされるかたの名前とメールアドレスが入力されていれば承認待ちに移行すると思います。→特に制限は無いということで了解しました!ちなみに現在は、▼のサイトのやり方を一時的に採用しているところです。きもおた・わーどぷれす。2017年7月17日ちなみに、CSSはgomaさんのレスポンシブをコピペしただけなので、編集等は一切していません。等が消えてしまいます。付けても消えてしまいます。_)mお手数ですが、よろしくお願いします。入れて試してみましたが、それも意味はなかったです。_)m今回は、吹き出しに関することでは無いのですが報告的な内容です。ありますでしょうか?>>コメントにURLを入力していると、NGになったりしますか?と、伺いました。さんからは、>>特に制限はかけていません。やり取りで知ったことなのですが、わいひらさんから↓の事を教えてもらいました。----------------『フォーラムの書き込みにソースコードを含めていませんでしたか?ソースコードを含んでいる場合は、エックスサーバーの仕様で、ファイヤーウォールに引っ掛かる可能性があります。以前ボクが、コチラのコメント欄に書き込んでもウマく反映されなかったコメントには、実は「CSSのソースコード」を書き込んであったんです。CSSを書き込んでもコメント出来ているものもあるので明確なことはわかりませんが、エックスサーバーのセキュリティに弾かれてコメントがうまく書き込めなかったのかもしれません。>>今回のような指摘は初めてですので原因がわかりません・・・。同じような現象があれば教えてください。●サーバー、ドメイン、テンプレートはどれがいい?ブログをはじめるなら、この組み合わせで間違いなし!http://www.globalcontent-collabo.net/post-2748/gomaさんがエックスサーバーを使っているというのを把握できたので、報告がてらコメントさせて頂きました。2017年8月6日ポポまるさまありがとうございます。今後の参考にさせていただきます。2017年9月29日コメントありがとうございます。AMPには対応しておりません、申し訳ありません。コメントをキャンセルメールアドレスが公開されることはありません。手のひらや足にできたほくろに要注意。悪性化させないために気をつ...プロフィール東北地方に住む「ごまっちょ」です。生活に役立つ「ライフレシピ」をお届けします。キャラ画像付きのふきだしで会話風にするカスタマイズ。(CSS修正しました)「Simplicity」記事ごとにナビやヘッダー、サイドバーなどを非表示にするカスタマイズ【Simplicty】コピペで簡単!トップページの記事一覧を揃ったタイル表示に変えるカスタマイズ。【今週のおすすめ記事】どんなほくろが危険なの?しっかり観察してみよう...手のひらや足にできたほくろに要注意。悪性化させない...たったこれだけ!PhotoShop7をWindow...ほくろの毛は抜いても大丈夫?抜く前に知っておくこと...ほくろが多いと癌(メラノーマ)になりやすい?気にな...寝る時にでる咳を止める方法。トイレがつまった時ときの対処...残留農薬を落とすベジセーフの効果を検証。定番の重曹...肺血流シンチの仕組みと検査でわかること...乳酸菌で口臭を治そう!プロデンティスで口内環境を改...手のひらのほくろ。寝る時にでる咳を止める方法。咳が出にくい寝方を紹介。アフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。