なんとなく記事の最後に編集後記みたいな、
ちょっとしたメダカの変化についてとか書いてみたいなーと思い立ちまして、
WEBド素人のわたしが、執念で
WordPressに今日の一言メモを作り上げました！
導入方法
- Simple Custom CSSをインストール。
- 外観のなかに新しく出来た、custom cssを開く。
- 空欄に下記CSSを貼付ける。
/*============================================================
フキダシデザイン
============================================================*/
.arrow_answer,
.arrow_question {
position: relative;
background: #fff;
border: 1px solid #c8c8c8;
padding: 30px 25px;
border-radius: 10px;
width: 70%;
font-size: 13px;
}
.arrow_question {
float: right;
margin-right: 20px;
}
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_question:after,
.arrow_question:before { right: 100%; }
.arrow_answer:after,
.arrow_answer:before { left: 100%; }
.arrow_answer:after,
.arrow_question:after {
border-color: rgba(255, 255, 255, 0);
border-width: 15px;
margin-top: -15px;
}
.arrow_answer:after { border-left-color: #fff ; }
.arrow_question:after { border-right-color: #fff ; }
.arrow_answer:before,
.arrow_question:before {
border-color: rgba(200, 200, 200, 0);
border-width: 16px;
margin-top: -16px;
}
.arrow_answer:before { border-left-color: #c8c8c8; }
.arrow_question:before { border-right-color: #c8c8c8; }
.question_image { float: left; }
.answer_image {
float: right;
margin-right: 20px;
}
.answer_image img,
.question_image img { border-radius: 50px; }
.question_Box {
margin-bottom: 25px;
overflow: hidden;
}
|
４. post(各記事）の本文（ビジュアルではなくテキスト）の欄に下記を貼付ける。
| <div class=“question_Box”><div class=“question_image”><img src=“画像のURL” alt=“質問者の写真” width=“90” height=“90”/></div> <div class=“arrow_question”> ここに会話内容 </div> <!– /.arrow_question –></div><!– /.question_Box –> |
- 画像のURLを変更すれば、好きな写真を入れる事が出来ます。
- ”ここに会話内容”を編集すれば、好きな文章が打ち込めます。
わたしが完成させたものが、この記事の最後の今日の一言になります・・・！照
（なんも分からないので、ブラウザによっては変になってるかもしれません。）
そして、記事の最後に定型文を入れるプラグインとか組み合わせたら、
毎回HTMLを打つ手間が省けたりするのかしら・・・。
プログラミングの有識者ならばもっとスマートに実装できる、ひとことコメントをつける方法を
実行できると思います。
Speech Bubbleとかadvanced custom fieldsを使う方法を見かけましたが、
わたしには無理でした。
何も分からないけど、導入したい・・！そんな方はチャレンジしてみてください。
どうでもいいですが、ひとことコメント機能をつけました。
Simple Custom CSSをインストールして、直打ち込みの苦心の一作です。
コメント