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

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

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

WEBド素人のわたしが、執念で

WordPressに今日の一言メモを作り上げました!


導入方法

参考サイト

  1. Simple Custom CSSをインストール。
  2. 外観のなかに新しく出来た、custom cssを開く。
  3. 空欄に下記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;
}

4. 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をインストールして、直打ち込みの苦心の一作です。

The following two tabs change content below.

シエリ

東京でバリキャリのキャリアコンサルタントから一転、田舎に移住して1年半生活。その後、再び東京にて、ゆるキャリとしてゆるやかにON/OFFのメリハリをつけて働いて、休みは好きなことをして暮らす人生を選ぶ。ハンドメイド作家としてもゆるやかに活動中です。

最新記事 by シエリ (全て見る)



関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本ブログ村

Archive

最近のコメント

ページ上部へ戻る