拡張クラスシェアする24311LINE!226108Simplicityの拡張クラスを使って、本文記事にLINEぽい会話文を表示する方法を紹介します。この機能はSimplicity1.3.8からの実装ですので、これよりもバージョンが低い場合は、アップデートする必要があります。スポンサーリンクLINE風会話文の書式Simplicityでは、本文を彩るために、いくつか拡張クラスを用意しています。class="clear_balloon"></div>以下のように表示されます。class=”clear_balloon”></div>のような、clear_balloonクラスを利用して、回り込みのリセットを行う必要があります。これを行わないと、その後の文章表示が崩れます。class=”line_back”></div>タグでラップしてやることで、背景も設定できます。class="right_balloon">いかにも人間らしい手前勝手な考えだな。class="right_balloon">サンは我が一族の娘だ。class="right_balloon">森と生き、森が死ぬ時は共に滅びる。class="clear_balloon"></div></div>以下のように表示されます。サンをどうする気だ?あの子も道連れにするつもりか?いかにも人間らしい手前勝手な考えだな。サンは我が一族の娘だ。森と生き、森が死ぬ時は共に滅びる。あの子を解き放て!あの子は人間だぞ!黙れ小僧!まとめこの拡張クラスを使うことで、「会話文をわかりやすく表示」や「LINEでの会話の再現」などに利用できます。LINEの再現の場合は、キャプチャ画像でもよいかもしれませんが、この方法だと、検索エンジンにも内容を理解してもらえるという利点があります。詳しい実装は以下を参照してください。WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法Simplicityの拡張クラスは、その他にも以下のようなものがあります。SimplicityにBootstrap風の案内メッセージを表示する方法Simplicity20140828より、Simplicityに、Bootstrap風の案内を表示するためのCSSクラスを追加しました。補足情報を表示させるための拡張クラスの使い方|SimplicitySimplicityの基本的な文章装飾スタイルを使う方法まとめSimplicity文字装飾のボタン拡張クラスの使い方スポンサーリンクアドセンス(大)Simplicity1.3.8公開。コメント欄の伸縮、LINE拡張クラス追加など。Simplicity1.3.9公開。PM名シーンを台無しにしてみました。Simplicity後継テーマ現在Simplicityの後継テーマであるCocoonが公開されています。これからサイト始めるのであれば、Cocoonの利用をおすすめします。Googleサイト内検索Simplicityのダウンロードダウンロードはこちらから。子テーマスキンのダウンロード新着記事Simplicity2.8.6公開。ボックスメニューショートコード追加。Simplicity2で投稿・固定ページの本文中広告の数を制御する方法Simplicity2.8.5公開。本文中広告の数制御フック追加。パンくずリストの不具合修正。Simplicity2.8.4公開。レビュー構造化データのエラー対応。Postsの仕様変更対応。Simplicity2.8.2公開。レビュー構造化データの仕様変更対応。スポンサーリンクよく問い合わせがある症状テーマアップデートで表示が崩れた場合は、ブラウザのリロードボタンを押すか、動作不良時のガイドラインにあるキャッシュの削除を行ってください。使用サンプル作者@MrYhiraのサイト寝ログでもSimplicityを使用しています。ブログをメールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。1日前cocoonに移行中の出来事です。1日前simplicity2のアップロードミス後、ログイン出来ません。最近のコメントわいひら2020/1/31Simplicity2.8.5公開。本文中広告の数制御フック追加。パンくずリストの不具合修正。自動アップデートは行いません。以下の方法で自前でアップデートしていただく必要があります。https://wp-simplicity.com/simplicity-update/村林2020/1/31Simplicity2.8.5公開。本文中広告の数制御フック追加。パンくずリストの不具合修正。パンくずリストで警告が出ていました。「Simplicityを2.8.5にバージョンアップしました。ご返信ありがとうございます。ご回答の内容でやってみようと思います。フォーラムの方への書き込みの件も承知しました。今後はフォーラムの方へ書き込むようにします。AdSense広告を貼り付ける方法おそらくサーバーのファイアウォール機能によってブロックされているんだと思います。AdSense広告を貼り付ける方法そういうわけではありませんが、コメント欄の案内に、以下のように書かれているように、基本的にフォーラムしかチェックしていませんでした。