サブカルとか色々。: ブログ作成術-HTML&CSS

何年間もBloggerを使ってブログを書いているのですが、いまだにBloggerのhtmlビューのみを使用し、別のcssファイルを使用せずに色々なデザインを変更する方法がいまいちわかっていません。

(簡単に言うと {} が使えない縛りのイメージです、、)

…ただ、最近html & cssを勉強する中で、もしかしたらこんな感じにしたらいいんじゃない？？というのが徐々にわかってきたので、

今回は

Bloggerだけで引用デザインを作る

ということをやってみたいと思います。

Bloggerを使っている方のみに向けた記事です。

サルワカくんという方のこちらのサイトに載っているCSSデザインを参考にします。

ブログをやっている人はご利用くださいと書いてあるのでありがたく使わせていただきます。

さて、今回は、1個目のデザインである、最もシンプルな 薄いグレーの背景の左上あたりに引用マーク、真ん中に本文を表示する形式 を参考にしてみます。

最初に、サイトに載っている以下のhtml、CSSをコピペしてみます↓(そのままコピペしてしまってすみません)

🔹html

<blockquote>
        <p>CSS Block Quotation Examples</p>
        <p>ここに引用する文を書きます。</p>
</blockquote>

🔹css

blockquote { position: relative; padding: 30px 15px 8px 15px; box-sizing: border-box; font-style: italic; background: #efefef; color: #555; } blockquote:before{ display: inline-block; position: absolute; top: 5px; left: 3px; content: "“"; font-family: sans-serif; color: #cfcfcf; font-size: 90px; line-height: 1; } blockquote p { padding: 0; margin: 10px 0; line-height: 1.7; } blockquote cite { display: block; text-align: right; color: #888888; font-size: 0.9em; }

これらをBloggerの「HTMLビュー」を開いた状態でコピペし、見ながら改変していくことでBloggerバージョンの引用マークを作っていきました。

一旦、完成版をお見せしますね↓

“

CSS Block Quotation Example

ここに引用する文を書きます。

引用元

PCでもスマホでもそれなりの見え方にはなっているんじゃないでしょうか。

コードはこんな感じ↓コピペOK！

VSCodeとかと違って綺麗にコーディングするのが難しいのであまり整ってないかもです。

CSS Block Quotation Example</span></p>

<p>

ここに引用する文を書きます。</span></p></div>

</div>

</cite>

</blockquote>

ちょっと色々あり、完成形の見た目もコードも原型がかなりなくなってしまいました笑

特に大幅な変更点としては、引用マークを上部に表示すると下の要素との間隔調整が難しいので、引用マークを左に寄せてしまいました。

(それに伴い、paddingとかmarginをパーセンテージとかピクセルで超細かく設定してるのは適当に消していただいても)

他に、背景色、左側の線も勝手に変えました。。

参考元のCSSの通り「背景色グレー、左側の線なし」にしたい方はそこだけ編集して使ってみてください。

この2点は割とコード編集しやすいかと思います。

ここからは、どういう過程で作っていったか少し語ってみます。

まず、過去の自分のBloggerの記事とかを見ていて気づいたこととして、Bloggerでは

<タグ名 style=“cssの内容”>

みたいな書き方をしておけばCSSが使えるっぽいんですよね。

そして、めちゃくちゃ<span>タグを使いがち。

ということで、<blockquote style=“”></blockquote>という形で大まかな設定をしました。

本文部分は<p><span style=“”></span></p>が基本ですね。

なお、背景色が"background: 0% 0% repeat rgb(240, 249, 255);"になっているのは、自動でBlogger仕様に表記が変更されてしまうためです。

唯一パッと見でやり方がわからなかったのが一番重要な引用マークの入れ方。

blockquote:beforeの部分をどう再現するのかよくわからなかったので、

ひとまず、<h2>タグを使って代用しました。

ということで、最初に完成したコードはこんな感じでした↓

“

</span></span></span></span></span></span></span></h2>

<br />

CSS Block Quotation Examples

</span></span></span></p>

ここに引用する文を書きます。

</span></span></span></p>

<cite>

</cite></cite></cite></cite><cite>

</cite></cite>

</blockquote></blockquote></blockquote></blockquote></blockquote>

</blockquote>

元々のコードをBlogger仕様にしただけといった感じです。

これ、Bloggerを使用している方はよければコピペして作ってみた上でスマホで確認してください。

PCだとそれっぽいはずなのにスマホでまともに見えない！！

どうも、このままだと横幅がめちゃくちゃ狭く設定されてしまうんですね。

ということで、親要素のところに色々追加しまくり、ついでにサイズや色も変更し、最初に載せたようなコードにしました。

あと、ワンポイントとしては、overflow-wrap: anywhere; を設定したことです。

改行を制御するCSSですね。

変なところで改行されてしまうパターンも生じるかとは思いますが、それよりも改行がしっかりできた方が見やすいかと思いこうしました。

もし気になるようでしたら改行ルールを加えてみてください。

何はともあれ、これで安心してブログで引用ができるようになった気がします。

サブカルとか色々。

2026年6月15日月曜日

【研究】Bloggerで引用デザインCSSを無理やり作る方法【コピペOK】

“

新着記事

すみすみステージ240 攻略 (エリア12) すごい旗を立ててクリア

Topics

2026年6月15日月曜日

【研究】Bloggerで引用デザインCSSを無理やり作る方法【コピペOK】

“

新着記事

すみすみ ステージ240 攻略 (エリア12) すごい旗を立ててクリア

Topics

すみすみステージ240 攻略 (エリア12) すごい旗を立ててクリア