更新情報などないかなぁと思ってWordPressのテーマ「Simplicity2」のサイトを訪問し、過去の情報などいろいろ見ていたら、なんとLINEのタイムライン風表示（左右からのバルーン表示）できる機能があることが分かりました。
私が「Simplicity2」を使い始めたのは1.8あたりからで、こんな機能が備わっているとは思いませんでした。
WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法
上の「Simplicity2」本家サイトから表示を引用すると
今、時間ある？
ちょっと手伝って欲しいんだけど、いいかな？
なに？
近くのコンビニでiTuneカードを何枚か買ってきて欲しいんだけどいいかな？
そんなことより、CSSの話をしようぜ。
という感じの表示ができます。まさにLINEのタイムラインって感じですね。この機能は1.3.8から実装されており、今このサイトで使っている2.3.0でも拡張クラスがそのまま継承されていました（要するに下のコードを使うとそのままLINE風の表示ができるということです）。
基本的なバルーン表示の記述方法
<p class="left_balloon">今、時間ある？</p>
<p class="left_balloon">ちょっと手伝って欲しいんだけど、いいかな？</p>
<p class="right_balloon">なに？</p>
<p class="left_balloon">近くのコンビニでiTuneカードを何枚か買ってきて欲しいんだけどいいかな？</p>
<p class="right_balloon">そんなことより、CSSの話をしようぜ。</p>
<br class="clear_balloon"/>といった感じ。基本的には
<p class="left_balloon">左側吹き出しの文字列</p><p class="right_balloon">右側吹き出しの文字列</p>これを必要に応じて繰り返し、
<br class="clear_balloon"/>というタグを最後に挿入することでバルーン表示が解除され、通常の文章になります。
割り当てられているCSS
以下のCSSが割り当てられているので、これを子テーマのCSSに追記して編集すれば、左右のバルーンデザインをカスタマイズできます。
/*******************************
* 左からの吹き出し
********************************/
.left_balloon {
position: relative;
background: #fff;
border: 1px solid #777;
margin: 10px;
padding: 10px;
border-radius: 15px;
margin-right: 20%;
clear: both;
max-width: 500px;
float: left;
}
.left_balloon:after,
.left_balloon:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.left_balloon:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 7px;
margin-top: -7px;
}
.left_balloon:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000;
border-width: 8px;
margin-top: -8px;
}
/*******************************
* 右からの吹き出し
********************************/
.right_balloon {
position: relative;
background: #85e249;
border: 1px solid #777;
margin: 10px;
padding: 10px;
border-radius: 15px;
margin-left: 20%;
clear: both;
max-width: 500px;
float: right;
}
.right_balloon:after,
.right_balloon:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.right_balloon:after {
border-color: rgba(133, 226, 73, 0);
border-left-color: #85e249;
border-width: 7px;
margin-top: -7px;
}
.right_balloon:before {
border-color: rgba(119, 119, 119, 0);
border-left-color: #777;
border-width: 8px;
margin-top: -8px;
}
/*******************************
* 割り込みを解除
********************************/
.clear_balloon{
clear: both;
}拡張クラスというのが「Simplicity2」に搭載されていることが分かったのは、バージョン2.3にアップしたとき。テキストエディタにいろいろボタンが表示されるようになり、「太字の赤字」「黄色マーカー」「アンダーライン」などが簡単に挿入できるようになっていたことで初めて気づきました。
これらを拡張クラスというらしいですが、私はてっきり新しい機能だと思っていました。以前からいろいろあったんですね。今回紹介したバルーン表示はそのうちの１つのようです。
また、公式サイト内の過去記事で「これは！！」と思うものがあれば随時紹介したいと思います。勝手に古い記事の掘り起こしをさせていただいていますが、いわゆる「キュレーション」ではありませんのであしからず・・・（そもそも「まとめ」ではないのでキュレーションとは言わないですね）。
あくまで個人的に思う事ですが、シンプルさがすごくいいなぁと思って使い始めたこのテーマ。今後も大事に使わせていただきたいとは思っています。でも最近は結構細かいアップデートがあり、機能の追加が進んでいますね。シンプルではなくなっていくのか？そのうち有料化してしまうのでは？なんて勘ぐってしまう今日この頃です。
ポチップ
ポチップ
