プログラミングが分からなくてもWordPressに今日の一言機能をつける方法

なんとなく記事の最後に編集後記みたいな、

ちょっとしたメダカの変化についてとか書いてみたいなーと思い立ちまして、

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を使う方法を見かけましたが、

わたしには無理でした。

何も分からないけど、導入したい・・！そんな方はチャレンジしてみてください。

hitokoto

どうでもいいですが、ひとことコメント機能をつけました。
Simple Custom CSSをインストールして、直打ち込みの苦心の一作です。

この記事を書いた人
最新の記事

shieri

平日サラリーマン、休日はものづくり、イラスト作成をしています。“つくたいものはすぐにつくる”という信念のもと、自由気ままに活動をはじめて早７年。部屋の中は素材と道具でいっぱい。倉庫と化しています(･･;) 近年は、叔母の試合を観戦したことをきっかけにパラスポーツ「ボッチャ」グッズにインスピレーションを得まくっています。