【コピペ用】引用表示のデザインをカスタマイズする方法

たまにしか引用をすることはないのですが、はてなブログの引用機能を使う場合、デフォルトのデザインだとなんだかイケてないので、カスタマイズしています。

ブログ全体の色合いと調和させています。

引用箇所の設定の仕方

引用箇所の設定の仕方は、引用している箇所をドラッグで選んでおいて以下の写真の記号を押すだけです。

引用箇所の設定方法

すると引用箇所が設定されます。

完成イメージ

PC版

完成イメ―ジ(PC画面)

スマホ版

完成イメ―ジ(スマホ画面)

このようなイメージにするためには、以下のコードを挿入してください。

色合いや配置については、適宜プレビューを見ながら調整してみてください。

コピペ用コード

PC版

/* 引用ボックスデザイン */

.entry-content blockquote {

    padding: 20px 55px;

    background: #fcf8fa;

    color: #190710;

    position: relative;

    border: solid 1px #b87295;

    margin: 0.8em 0;

}

 

/* 始まりの引用符のデザイン */

.entry-content blockquote:before {

color: rgba(200, 200, 200, 1);

content: "“";

font-family: serif;

font-size: 600%;

top: 0;

left: 0;

line-height: 1em;

position: absolute;

}

/* 終わりの引用符のデザイン */

.entry-content blockquote:after {

color: rgba(200,200,200,1);

content: "”";

font-family: serif;

font-size: 600%;

bottom: 0;

right: 0;

line-height: 0;

position: absolute;

}

スマホ版

スマホ版では画面の都合から、引用符が引用箇所の上に来るようにしています。赤字の箇所がそのための変更です。

これをタイトル下に入れます。

<style type="text/css">

/* 引用ボックスデザイン */

.entry-content blockquote {

    padding: 40px 20px;

    background: #fcf8fa;

    color: #190710;

    position: relative;

    border: solid 1px #b87295;

    margin: 0.8em 0;

}

/* 始まりの引用符のデザイン */

.entry-content blockquote:before {

color: rgba(200, 200, 200, 1);

content: "“";

font-family: serif;

font-size: 600%;

top: 0;

left: 0;

line-height: 1em;

position: absolute;

}

/* 終わりの引用符のデザイン */

.entry-content blockquote:after {

color: rgba(200,200,200,1);

content: "”";

font-family: serif;

font-size: 600%;

bottom: 0;

right: 0;

line-height: 0;

position: absolute;

}

</style>

<免責事項>

当サイトのすべてのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、必ずしも正確性・信頼性等を保証するものではありません。 当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねます。 本免責事項、および、当サイトに掲載しているコンテンツ・情報は、予告なしに変更・削除されることがあります。 また、当サイトに掲載されるリンク先に関して一切の責任を負いかねます。 予めご了承下さい。

 

<当サイトのプライバシーポリシー>

当サイトでは、第三者配信による広告サービスを利用しています。このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報 (氏名、住所、メール アドレス、電話番号は含まれません) を使用することがあります。このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、ここをクリックしてください。

・Google は第三者配信事業者として、Cookie を使用してサイトに広告を配信します。

・Google 広告 Cookie を使用することにより、お客様のサイトや他のサイトへのアクセス情報に基づいて、Google や Google のパートナーのユーザーに適切な広告を表示できます。

・ユーザーは Google の広告とコンテンツ ネットワークに関するプライバシー ポリシーにアクセスし、Google 広告 Cookie を使用しないよう設定できます。

 

Copyright © 2016 Blog Customize All Rights Reserved.