やり方を忘れない為の備忘録なのでちゃっちゃといきまーす。
もし他にも参考になる方がいればどうぞ！（全くの素人がグーグル先生に頼りながらやってますので参考する場合はバックアップを取り考慮して試してください。）
これを見るとどういう事が知れるかというと？
ワードプレスの投稿の記事内にプラグイン無しで吹き出しを入れる事が出来る様になります。
実際に出来ること
こういう事が出来る様になるんだよー！凄くない？
えっ！？何何？どういう事？全然わかんない？
何でやねん！！今うちらがこうやって話をしてる様な事が分かるって言ってるの！
えっ…ふーーーん。。
塩対応すぎる。。。。
って感じの事が出来る様になります！
※参考サイトはこちら
実際にやったこと！
- cssにコピペ
- 画像を作って登録
- 投稿記事にコピー
cssにコピペ
何も考えずに下記をコピーしてcssに追加してね！
/* 全体のスタイル */
.voice {
margin-bottom: 40px;
}
/* 左画像 */
.voice-img-left {
margin-left: 4px;
margin-top: -1px;
float: left;
width: 60px;
height: 60px;
}
/* 右画像 */
.voice-img-right {
margin-right: 4px;
margin-top: -1px;
float: right;
width: 60px;
height: 60px;
}
.voice figure img {
width: 100%;
height: 100%;
border: 2px solid #eee;
border-radius: 50%;
margin: 0;
}
/* 画像の下のテキスト */
.voice-img-description {
padding: 5px 0 0;
font-size: 10px;
text-align: center;
}
/* 左からの吹き出しテキスト */
.voice-text-right {
color: #444;
position: relative;
margin-left: 100px;
padding: 1.2em;
border: 3px solid #eee;
background-color: #fff;
border-radius: 5px;
}
/* 右からの吹き出しテキスト */
.voice-text-left {
position: relative;
margin-right: 100px;
padding: 1.2em;
border: 3px solid #eee;
background-color: #fff;
border-radius: 5px;
}
p.voice-text {
margin: 0 0 8px;
}
p.voice-text:last-child {
margin-bottom: 0px;
}
/* 左の三角形を作る */
.voice-text-right:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #eee;
top: 15px;
left: -20px;
}
.voice-text-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 15px;
left: -16px;
}
/* 右の三角形を作る */
.voice-text-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #eee;
top: 15px;
right: -23px;
}
.voice-text-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #fff;
top: 15px;
right: -19px;
}
/* 回り込み解除 */
.voice:after,.voice:before {
clear: both;
content: "";
display: block;
}
画像を作って登録
キャラ画像は好きに作って、ワードプレスのメディアに登録してURLだけ覚えておいて。
投稿記事にコピペ
下記の要領で、入れ込んで！
左からの吹き出しの場合
<div class="voice"> <figure class="voice-img-left"><img src="ここに画像のURLを入れるんだ" alt="画像名" /><figcaption class="voice-img-description">表示してるキャラ名</figcaption></figure> <div class="voice-text-right"> <p class="voice-text">ここに吹き出しにいれたいセリフを入力</p> </div> </div>
右からの吹き出しの場合
<div class="voice"> <figure class="voice-img-right"><img src="ここに画像のURLを入れるんだ" alt="画像名" /><figcaption class="voice-img-description">表示してるキャラ名</figcaption></figure> <div class="voice-text-left"> <p class="voice-text">ここに吹き出しにいれたいセリフを入力</p> </div></div>
コピペするだけだから簡単に出来るね！
忘れない様に…メモメモ。。。