[phoe-icon name="fa-quote-left fa-lg"]　引用文をおしゃれに装飾　[phoe-icon name="fa-quote-right fa-lg"]

ブログも通常の文章と同じように、文章作法を守らなければなりません。そのためには、引用文の場合は、どこからどこまでが引用であることを明記する必要があります。Wordpressブログでは、HTMLとCSSを使って、さまざまなデザインの引用ボックスをつくることができます。

以下では、Fontawesomeアイコンを使った、おしゃれなデザインの引用ボックスを紹介します。

引用文1

まだあげ初めし前髪の
林檎のもとに見えしとき
前にさしたる花櫛の
花ある君と思ひけり
やさしく白き手をのべて
林檎をわれにあたへしは
薄紅の秋の実に
人こひ初めしはじめなり

わがこゝろなきためいきの
その髪の毛にかゝるとき
たのしき恋の盃を
君が情けに酌みしかな

林檎畑の樹の下に
おのづからなる細道は
誰が踏みそめしかたみぞと
問ひたまふこそこひしけれ
（島崎藤村『若菜集』より）

思わずため息の出るような、美しい詩ですね。

CSS

/*  水色の引用文  */

.quote1 {
    position: relative;
    padding: 5px 12px 5px 56px;
    box-sizing: border-box;
    font-style: regular;
    color: #464646;
    background: #f0f7ff;
    box-shadow: 0 3px 4px  rgba(0, 0, 0, 0.15);
}

.quote1:before{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 10px;
    width: 36px;
    height: 36px;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    vertical-align: middle;
    text-align: center;
    content: "\f10d";
    font-family: FontAwesome;
    color: #FFF;
    font-size: 20px;
    line-height: 36px;
    background: #a5d7ff;
    border-radius: 50%;
   box-shadow: 0 2px 2px rgba(26, 26, 26, 0.14);
}

.quote1 p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}

.quote1 cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

引用文2

とうかいの小島の磯の白砂に
われ泣なきぬれて
蟹とたはむる

頬につたふ
なみだのごはず
一握の砂を示しし人を忘れず

たはむれに母を背負ひて
そのあまり軽きに泣きて
三歩あゆまず

はたらけど
はたらけど猶わがくらし楽にならざり
ぢっと手を見る

ふるさとの訛なつかし
停車場の人ごみの中に
そを聴きにゆく

やはらかに柳あをめる
北上の岸辺目に見ゆ
泣けとごとくに

ふるさとの山に向ひて
言ふことなし
ふるさとの山はありがたきかな
（石川啄木『一握の砂』より）

一つの詩集に、これだけの名作が収められていたとは驚きです。

CSS

/*  左に立体的な引用符　*/
.quote2 {
    position: relative;
    margin-left: ５px;
    padding: 5px 10px 5px 32px;
    box-sizing: border-box;
    font-style: italic;
    background: #f3f3f3;
    box-shadow: 0 3px 4px  rgba(0, 0, 0, 0.15);
}

.quote2 :before{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: -16px;
    width: 40px;
    height: 30px;
    vertical-align: middle;
    text-align: center;
    content: "\f10d";
    font-family: FontAwesome;
    color: #FFF;
    font-size: 18px;
    line-height: 30px;
    background: #74DF00;
    box-shadow: 0 2px 2px rgba(26, 26, 26, 0.14);
}

.quote2 :after{
    position: absolute;
    content: '';
    top: 40px;
    left: -16px;
    border: none;
    border-bottom: solid 8px transparent;
    border-right: solid 15px #3cb371;
}

.quote2 cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

引用文3

　山路を登りながら、こう考えた。

　智に働けば角かどが立つ。情に棹させば流される。意地を通とおせば窮屈だ。とかくに人の世は住みにくい。

　住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

　人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣にちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。
（夏目漱石『草枕』より）

これも有名な冒頭の一節です。名調子で人の世の住みにくさを吟じています。

CSS

/* 引用３  左に縦線入り　*/

.quote3 {
    position: relative;
    padding: 35px 15px 10px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #f5f5f5;
    color: #777777;
    border-left: 4px solid #9dd4ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

.quote3:before{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 15px;
    vertical-align: middle;
    content: "\f10d";
    font-family: FontAwesome;
    color: #9dd4ff;
    font-size: 28px;
    line-height: 1;
}

.quote3 p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

.quote3 cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

引用文4

　吾輩は猫である。名前はまだ無い。

　どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕つかまえて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるでやかんだ。その後猫にもだいぶ逢ったがこんな片輪には一度も出くわした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。
（夏目漱石『吾輩は猫である』より）

この小説は、若い頃何度も読み返しては、爆笑したことを覚えています。今読むと、どこがそんなに面白かったのかと不思議になります。北杜夫の『どくとるまんぼう』シリーズもそうですが、、、

CSS

/*  引用４ 枠線入り */

.quote4 {
    position: relative;
    padding: 7px 16px;
    box-sizing: border-box;
    font-style: italic;
    color: #464646;
    border: solid 3px #72ccf4;
}

.quote4:before{
    display: inline-block;
    position: absolute;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    content: "\f10d";
    font-family: FontAwesome;
    background: #72ccf4;
    color: #FFF;
    font-size: 22px;
}

.quote4:after{
    display: inline-block;
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    content: "\f10e";
    font-family: FontAwesome;
    background: #72ccf4;
    color: #FFF;
    font-size: 22px;
}

.quote4 p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

.quote4 cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

以上、4種類の引用デザインを、本ブログに採用したいと思っています。いずれもFontawsomeアイコンを使っています。

このデザインは、いつものように、サルワカさんのサイトからお借りしてきました。ありがとうございます。