なんちゃって、IT生活。: カッコいい <blockquote> ～ </blockquote> を使ってみたくて、CSSのカスタマイズに挑戦！

私にとっては、とてもハードルの高い挑戦だったのですが…。なんとなく望んでいた通りの表示ができるようになりました！(2019-10-13：モバイルページにも適用した場合を追記しています)

本題に入る前に…、実は、この記事のタイトルを書くのも、一苦労ありました…。タイトル部分、htmlタグはそのままhtmlタグと理解してしまうみたいで、エスケープしてやらないとダメなようです。参考にしたページ『HTMLのタグソースコードをそのままブラウザに表示』では、3通りの方法が書かれていたのですが、その1つ目の方法で、この記事のタイトルを書いてみました。

１．エスケイプする

<tag名> ～ </tag名>

タグの"<"を"&lt"として、タグを無効化(エスケイプ)します。
">" は、それの前に"<"がないと無視されるため、
"&gt"としてエスケイプしても、 ">"のままでもどちらを用いてもかまいません。
HTMLのタグソースコードをそのままブラウザに表示

さらに…、実はこの引用部分を記述するのもちょっと苦労しました。参考ページのソースを表示させて、拝借させていただきました…。htmlは、私にとっては、覚えることがいっぱいで、ちょっと大変です…。

さて、本題のCSSのカスタマイズの件ですが、カスタマイズしたいと思ったきっかけは、『CSSで作る！魅力的な引用デザインのサンプル30（blockquote）』というページを見たからでした。こんなカッコいいblockquoteを使ってみたい！って思いました。あんまりすんなりとはいかなかったのですが、なんとかカスタマイズができたようで、実際にこの記事で使っています(ちょっと上とか、ちょっと下とかに出てきます)。

『CSSで作る！魅力的な引用デザインのサンプル30（blockquote）』では、引用デザインのCSSが公開されているので、この部分をBloggerのCSSが書かれているところに、追加／修正をすればできるんじゃないかな～、と考えました。『【ブログカスタマイズ】BloggerでCSSを編集してデザインを変更する手順。2通りの方法を解説します。』に、そのやり方が紹介されています。

①HTML内にあるCSSを書き換える。

②テーマデザイナーでCSSを追加する。
【ブログカスタマイズ】BloggerでCSSを編集してデザインを変更する手順。2通りの方法を解説します。

私が採用したのは、②のテーマデザイナーを使うほうではなく、①のHTMLの編集のほうです。

上の図の赤丸のところのように、[テーマ]＞[HTMLの編集]で、html編集画面にいきます。

私が使っているテーマだと、CSSは、上の図の赤矢印のあたりから記述されているようなので、ここの最後部分に、『CSSで作る！魅力的な引用デザインのサンプル30（blockquote）』で公開されていたCSSをまるっとコピペしました。公開されているCSSは、Font Awesomeを用いる場合と用いない場合の2通りでしたが、Font Awesomeはユーザー登録など事前準備が必要そうなので(参考：『Font Awesomeのユーザー登録を行いCDNの読み込みコードを取得する方法』)、今回は用いない場合のほうをコピペしました。

すると、こんな風に、ダブルクォーテーション「“」のところが、文字化けで「“」と表示されてしまいました。どうも文字エンコードが合ってない様子です。

外部CSSの文字コード指定のやり方をやってみたり(参考：『charset 文字コードの種類【CSSリファレンス】』)(Bloggerでは、CSSをhtmlに埋め込んでいるようなので、外部CSSの文字コード指定のやり方では上手くいかないようでした…)、「content: "“";」と指定されているところを、「content: "\"";」に変更してみたりと、いろいろやってみたのですが、なかなか上手くいきません…。

もう無理かなあ…、と、少し諦めかけていました。別で、Bloggerのテーマ(テンプレート)をいろいろ眺めていたところ、似たようなblockquoteのCSSデザインを採用しているものがありました。くうく堂さんの『QooQ』です。blockquoteが使われているサンプルページはここです。

「“」をどうやって指定しているか、『QooQ』のCSSを覗かせていただきました。…すると、「content: '\201C';」となっていました。さっそく、その記述を採用！…ってやってみたら、以下のような感じに…。これは「content: "\"";」としたときと同様な感じです。文字コードは正しそうなのですが、フォントが良くないような感じです。

…ならば、いっそのことフォントの指定をやめてしまおうと、blockquoteのCSSの「font-family: sans-serif;」のところをコメントアウトして、「//font-family: sans-serif;」と記述してやってみました。これが成功だったようです。私はChromeブラウザを使っているのですが、その見た目はなかなか良い感じです(^^)。

ちなみに、「content: '\201C';」は、どの文字エンコードなのか調べてみました。『複数の文字コード方式に一括変換 | エンコード / デコードツール』で「“」を変換させてみると、「Unicode (UTF-16BE)」となっていました。なぜこの文字コードを使わなければいけないのかは、私はよくわかっていません…。

今回のCSSのカスタマイズで、Bloggerのテーマ(テンプレート)のカスタマイズはかなり奥が深くて、私が思ったより自由度が大きいように思いました。一から自分独自のテンプレートを作ってみるのも、チャレンジとして面白いかもしれません。…って思いました。

【2019-10-13: 追記】
先日、スマホから私のブログを見ると、blockquoteがこの記事に書いてあるstyleに変更されてませんでした。モバイルにもCSSのカスタマイズを反映させるには、少し設定を変更する必要があるようです(参考：『[Blogger] CSSをカスタマイズ・モバイルにも適用 _ あみだがみねのもろもろ備忘録』)。