アメブロのblockquoteタグのデザインをCSSで指定する

本日の素材：写真ACさま

【この記事は、パソコンから見ないと違いがわかりませんのでご了承ください】

が、あれはあれで無知丸出し・・・。

書いてある通り、ワードプレスを使う人も増えて、引用符をモチーフにしたデザインをよく目にするようになり、かっこいいので、アメブロでもできないのかな？ということでした。

たとえば、WordPressでのblockquoteタグを使った場合の表示の例

で、アメケアで使える形で提案したかったのですが、<blockquote>のデザインはCSSからしか変更することができず（そしてCSSでの表示をやってみましたが当時はうまくできませんでした）、結局<div>を使った"引用っぽい囲み枠"をいくつか紹介して終わりました。

しかし、これは見た目には「引用」とはわかっても、Googleなどサイトコンテンツの質を見分けるアルゴリズムにとっては全く無意味なものでありました。

blockquoteタグとは、引用・転載文であることをユーザーと検索エンジンに示すタグです。

いずれにしても、「引用してます。転載です。わかってます。」という意思表明ができる<blockquote>というタグがあるのに、使っていないのは、引用元にも失礼ですよね・・・ということで、あの後もしつこく、デザインが崩れずにするのはどうやるのか〜と思い出した時にぶちぶちやってました。

（というか、色んなサイトでその方法を紹介してるんだけど、表示させると崩れてたんです。）

が、やっとこさ、CSSで思ったものが指定することができたので、その方法をお伝えします。

Chrome、Safari、Firefox、IE11での表示は確認できました。

紹介するblockquoteのデザインはこんな感じ。

CSS編集用スキンを使っている方にしかできない設定ですのでご了承ください。

<blockquote>タグのデザインをCSSで変更する

次のコードをコピーして、CSSの最後に貼り付けです。

まずは旧CSS編集用スキン（プロフィール画像が四角のもの）をお使いの方。

/*引用*/
.articleText blockquote{
border-left: none;
background-color:#eeeeee;
border-radius: 10px;
padding:3em 1em;
position:relative;
}
.articleText blockquote:before{
content:"“";
font-size:600%;
line-height:1em;
color:#999999;
position:absolute;
left:0;
top:0;
}
.articleText blockquote:after{
content:"”";
font-size:600%;
line-height:0em;
color:#999999;
position:absolute;
right:0;
bottom:0;
}

上記コードをコピーして、CSS編集の末尾にペースト、保存してください。

こうしてCSSを設定してしまえば、あとは引用部分として紹介したいところを選択して、編集画面のメニューから「“」を選択するだけです。

編集画面ではこんな感じ（↓）でしか見えませんが、「表示を確認する」で見てみてくださいね。

引用符のモチーフを「白」にすることもできます。

その場合はこちら。

/*引用*/
.articleText blockquote{
border-left: none;
background-color:#eeeeee;
border-radius: 10px;
padding:3em 1em;
position:relative;
}
.articleText blockquote:before{
content:"“";
font-size:600%;
line-height:1em;
color:#ffffff;
position:absolute;
left:0;
top:0;
}
.articleText blockquote:after{
content:"”";
font-size:600%;
line-height:0em;
color:#ffffff;
position:absolute;
right:0;
bottom:0;
}

「background-color: #eee;」となっているところは背景色です。濃くするのはおすすめしませんが、お好きな色を配色にしてみてください。

新CSS編集用スキン（プロフィール画像が丸いもの）をお使いの場合はこちら。

/*引用*/
.skin-entryBody blockquote{
border-left: none;
background-color:#eeeeee;
border-radius: 10px;
padding:3em 1em;
position:relative;
}
.skin-entryBody blockquote:before{
content:"“";
font-size:600%;
line-height:1em;
color:#999999;
position:absolute;
left:0;
top:0;
}
.skin-entryBody blockquote:after{
content:"”";
font-size:600%;
line-height:0em;
color:#999999;
position:absolute;
right:0;
bottom:0;
}

これも配色を変えたい場合は、赤字のカラーコード（#（６桁の英数字））を変えてください。

カラーコードについては、Google先生に聞けば色んなサイトを教えてくれますので、自分で使いやすいサイトを見つけるのもいいですね。

参考までに、ウェブセーフカラーといって、端末環境に影響しない色の一覧もあります。

実際に使ってみると

このタグを紹介してくれていたサイトの一文を例にします。

あと、少し本題からはそれますが、「引用」っていうのは色々決まりがあるので、ちゃんと勉強してから行いましょう。この記事ではサンプルを表示していますが、そのサンプルは引用とは言えない使い方です。なので、サンプルコードをコピペしたり真似するのは良いですが、引用の雰囲気は参考にしないでください。引用についてはちゃんと各々でググってください。

引用元：おーとえすとさいと

くどいですが、スマホからはその違いはわかりません。

是非、パソコンから、もしくはパソコン表示で見てくださいね。

最後に

今回、あらためて思ったのは、Webコンテンツとしての文章を考えた時に、「見た目」がよければなんでもいい、という姿勢を見直しました。（当たり前ながら・・・）

特に、アメブロが先日HTML表示の使いやすさの改善として、<div>を<p>と同様に扱うような変更をしたことを受けて、ユーザーに便利で文句が減るなら、それがユーザーにとって不利益でも別にいいんじゃない？というようなこともありましたが（撤回されましたね）

私もWebコンテンツを扱って発信するのであれば、少なくとも「最低限のライン」というものがあるな、と反省しました。

デザインとしても気持ちよく発信できて、Webコンテンツとしても成立するものを意識していきます。

Cocoro+et+Gokoro（こころ・え・ごころ）

北川　直枝

★Cocoro+et+Gokoroからワークショップ開催案内のお知らせがいきます。

Facebookページでも発信しています。