Luxeritasの引用部分を見やすくしようとstyle.cssにblockquoteを設定してみた

引用ってこれです

ここには引用元がはいります

この引用はblockquoteタグで作られています。なのでCSSを設定してやれば色々な表示が可能になります。

あちこちのブログを見ていてわかりやすい引用があってうらやましかったのですが、Luxeritasでも子テーマのstyle.cssに記述すれば可能な事が分かったのでCSSの記述でいいのないか調べてみました。

今回はこちらで紹介されているもののうち、15番目を設定しています。

https://saruwakakun.com/html-css/reference/blockquote

設定は「外観」-「テーマエディター」のstyle.cssに以下のコードを貼り付けています。

blockquote {
    position: relative;
    padding: 10px 12px;
    box-sizing: border-box;
    font-style: italic;
    color: #464646;
    border-left: solid 40px #c4c4c4;
    background: #f3f3f3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19);
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: -48px;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    vertical-align: middle;
    content: "“";
    color: #FFF;
    font-size: 80px;
    line-height: 1;
}

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

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

元々はこちらの「引用部に色を付けて引用符は白抜き」が好みだったのですが、どうにも引用の枠内で「”」の位置が上手く取れなかった事で諦めました。今後変更する可能性はありますがはてさて。

http://www.02320.net/tech/blockquote-css-design/

こうやって気になった所から少しずつ手を入れて行けるのはいいですね。ただバックアップとリカバリを考えると気が重いなー。