Blogger関連 コラム

Bloggerの引用(blockquote)って、デフォルトでは装飾されていないんですね。

……ということで、Bloggerで引用を使うようになりまして。
引用文を作成したい場合は上の画像の引用モードを使うんですけど、これをただ使っただけでは装飾が無いため、引用だと分からないんです。

　実際にやったこと。

この問題を解決するために、サイトをググッていると、こんなページが見付かりました。

※該当のサイトはリンク切れになってしまいました。


要はCSSをいじればいいんでしょ。
という事で、Bloggerの.post-body部にblockquoteの新たな記述を試すも、駄目でした。

画像は使いたくないからという事で、今回はcontent部に文字を使ったのですが、それがBloggerだと化けてしまうみたい。

更に検索していると、以下のようなサイトも発見。



そうか、やっぱりエスケープ文字があるんですね。
ということで、content部を変更。

最終的には、以下のようになりました。

.post-body blockquote{
    background-color: #ddd;
    padding: 1.5em 1em 0.5em;
    position: relative;
    border: 3px solid #d7d7d7;
    margin: 0 1em 1.5em;
}

.post-body blockquote:before{
    content: "\201C";
    font-size: 400%;
    line-height: 1em;
    font-family: "ＭＳ Ｐゴシック",sans-serif;
    color: #999;
    position: absolute;
    left: 0;
    top: 0;
}

.post-body blockquote:after{
    content: "\201D";
    font-size: 400%;
    line-height: 0em;
    font-family: "ＭＳ Ｐゴシック",sans-serif;
    color: #999;
    position: absolute;
    right: 0;
    bottom: 0;
}

Bloggerに限らず、やっぱりCSSやテンプレートなんかは常に修正を掛けて行く事になりますよね。
これがもう少し楽になれば良いんだけど、中々そうは行かないんだ……。

スポンサーリンク

スポンサーリンク