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

2018年11月22日2020年2月10日ブログ関連Luxeritas,ブログ関連

引用ってこれです
ここには引用元がはいります

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

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

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

設定は「外観」-「テーマエディター」の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;
}

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