いろんなブログを見ているとチャット形式で表示されている記事を見かけます。
ただ文字が並んでいるよりはデザイン的に見やすいし、目にとまるなと思い自分のブログにも適用させてみたのでその方法についてまとめようと思います。
WordPressの状態は以下のような感じです。
この記事ではStartMagazineのテーマをベースに紹介していくのでテーマは各自のテーマのpathに読み換えてください。
- WordPressのバージョン5.2.2
- テーマはStartMagazine
参考にしたサイト
左からの吹き出しのHTML
<div class="balloon">
<figure class="balloon-image-left">
<img src="dummy.jpg" alt="dummy">
<figcaption class="balloon-image-description">名前</figcaption>
</figure>
<div class="balloon-text-right">
<p>吹き出しテキスト</p>
</div>
</div>
3行目はアイコン画像を表示しているところになります。dummy.jpgはダミーのため何も表示されません。
ここは各自が任意の画像を設定してください。
例えば、メディアライブラリにある画像のURLにするとその画像が表示されるようになります。
名前のところは表示させたい名前を任意に設定してください。
吹き出しテキストのところは会話の文字のところなので好きな文章を入れてください。
アイコン画像の変更
WordPressの管理画面の左メニューのメディアをクリック。
アップロードされている画像があるのでアイコン画像にしたいものをクリックします。
クリックすると添付ファイルの詳細画面に遷移します。
右下のほうにリンクをコピーという所があるのでそこに記載されているURLをコピーしておきます。
dummy.jpgを以下のように先程コピーしたURLにする
dummy.jpg↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
https://goodnext.me/wp-content/uploads/character_hakase-e1565799165747.png右からの吹き出しのHTML
<div class="balloon">
<figure class="balloon-image-right">
<img src="dummy.jpg" alt="dummy">
<figcaption class="balloon-image-description">名前</figcaption>
</figure>
<div class="balloon-text-left">
<p>吹き出しテキスト</p>
</div>
</div>
アイコンと名前と吹き出しのテキストについては左からの吹き出しのところと同様に任意のものを設定してください。
WordPressでの投稿について
カスタムHTMLを選択肢上のHTMLをコピーし貼り付けます。
左の吹き出しにするのか右の吹き出しにするのは適宜決めて貼り付けてください。
style.cssの修正
# 修正ファイル
wp-content/themes/start-magazine/style.css使用しているテーマによってpathは読み換えてください。
CSSファイルを修正しますので、慣れていない方はバックアップをとっておくことをおすすめします。
style.cssを開き末尾に以下のコードを貼り付けます。
style.cssを保存しWordPressのサーバにアップロードします。
*--------------------
* 吹き出しを作る
*--------------------*/
.balloon {
margin-bottom: 2em;
position: relative;
}
.balloon:before,.balloon:after {
clear: both;
content: "";
display: block;
}
.balloon figure {
width: 75px;
height: 75px;
}
.balloon-image-left {
float: left;
margin-right: 20px;
}
.balloon-image-right {
float: right;
margin-left: 20px;
}
.balloon figure img {
width: 100%;
height: 100%;
border: 1px solid #aaa;
border-radius: 50%;
margin: 0px 0px -10px 0px;
}
.balloon-image-description {
padding: 5px 0 0;
font-size: 15px;
text-align: center;
font-weight: 700;
}
.balloon-text-right,.balloon-text-left {
position: relative;
padding: 10px;
border: 1px solid;
border-radius: 10px;
max-width: -webkit-calc(100% - 120px);
max-width: calc(100% - 120px);
display: inline-block;
}
.balloon-text-right {
border-color: #dad6d6;
background: #dad6d6;
}
.balloon-text-left {
border-color: #8de055;
background: #8de055;
}
.balloon-text-right {
float: left;
}
.balloon-text-left {
float: right;
}
.balloon p {
margin: 0 0 20px;
}
.balloon p:last-child {
margin-bottom: 0;
}
/* 三角部分 */
.balloon-text-right:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #dad6d6;
top: 15px;
left: -20px;
}
.balloon-text-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #dad6d6;
top: 15px;
left: -19px;
}
.balloon-text-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #8de055;
top: 15px;
right: -20px;
}
.balloon-text-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #8de055;
top: 15px;
right: -19px;
}
/* 考え毎 */
.think .balloon-text-right,.think .balloon-text-left {
border-radius: 30px;
}
.think .balloon-text-right:before {
border: 1px solid #aaa;
border-radius: 50%;
width: 8px;
height: 8px;
top: 15px;
left: -12px;
}
.think .balloon-text-right:after {
border: 1px solid #aaa;
border-radius: 50%;
width: 4px;
height: 4px;
top: 20px;
left: -19px;
}
.think .balloon-text-left:before {
border: 1px solid #aaa;
border-radius: 50%;
width: 8px;
height: 8px;
top: 15px;
right: -12px;
}
.think .balloon-text-left:after {
border: 1px solid #aaa;
border-radius: 50%;
width: 4px;
height: 4px;
top: 20px;
right: -19px;
}
まとめ
以上がライン風のチャット形式で表示させる方法です。
参考にしたサイトでほぼコピペでいけました。
デザインはライン風のチャット形式に変更しています。
もしこのデザインが気に入った方は上のコードをまんまコピーすればできると思うので是非試してみてください。
