※「Blogger」使用者に向けた記事です
今回は、私のブログでも使っており、そのままBloggerの記事作成画面の「HTMLビュー」にコピペすれば使える、CSSを使用したデザインをまとめます。
ちょっとだけ解説すると、Google社が提供している「Blogger」というブログサービスでは、「HTMLビュー」を使うとHTML編集をしてブログを作成することができるのですが、これがまあ癖が強いんですね。。
そもそも、近年あまりやらないであろう、styleを用いてCSSをHTMLの中に直接書き込む方式のうえに、表記方法の癖が強めだったり、「一般的なCSSデザインをコピペ→styleを用いた書き換えをする」だけではデザイン崩れしたりする印象。
ネットで少し調べた感じ、ブログ全体に適用するCSSは外部から持ってこれるようですが、1つ1つの記事に外部CSSを適用する方法がわからず。。
ということで、Bloggerで記事を書くときに色々なデザインを入れたい方のために、私自身が使っている＆これから使おうと思っている、Blogger仕様のデザインのコードを載せてみます。
そのままコピペOKです！
なお、フォントは基本的にBloggerの作成ビューでも選べる「Verdana」を使用しておりますので、変更したい場合は自由に変更してください。
まずは、見出しです。
こちらは、HTMLとCSSがよくわかっていない頃に適当に作り、ずっとめちゃくちゃなコードのまま使用してきたのですが、今回なんとか人様に見せられる(?)コードに整えました。
コード↓
<div id="title" style="border-bottom: 0.2em solid rgb(250, 200, 200); border-left: 0.5em solid rgb(254, 200, 155); box-sizing: border-box; color: orange; font-family: verdana; margin: 2em 0em; padding-bottom: 0.1em; padding-left: 0.4em;">
<span style="color: #666666; font-family: verdana; font-size: 26px;">見出し</span>
</div>
私のブログで最もよく使っている、さりげないドットの小見出しです。
というか、この記事でも他の箇所で使ってしまっているのでわかりにくいですね笑
こちらも、長年めちゃくちゃなコードだったのを整えてみました。
コード↓
<div id="title2" style="border-bottom: 0.2em dotted rgb(250, 200, 200); box-sizing: boder-box; margin: 1.5em 0em; padding-bottom: 0.1em;">
<span style="color: #666666; font-family: verdana; font-size: 20px;">小見出し</span>
</div>
実物はこんな感じ↓
あいうえおかきくけこあいうえおかきくけこ
コード(下線を引きたい場所に挿入)↓
<span style="background: linear-gradient(transparent 70%, rgb(248, 220, 220) 30%);">下線を引きたい箇所の文章やワード</span>
割と基本そのままといった感じです。下線の太さや色は自由に変えてみてください。
また、1行まるまる線を引く場合など、すでに<span>タグで囲ってある場合は、""内にbackground: linear-gradient(transparent 70%, rgb(248, 220, 220) 30%);だけ付け足すようにしてください。
こちらの記事で悪戦苦闘しながら作り上げた代物です。
有名なサルワカくんのデザイン＆CSSを参考にしつつ、魔改造しました。
前回の記事からさらに、背景色に影をつけています↓
“
CSS Block Quotation Example
ここに引用する文を書きます。
引用元
コード↓
<blockquote style="-webkit-text-size-adjust: 100%; background: 0% 0% repeat rgb(240, 249, 255); border-left: 8px solid lightblue; box-shadow: rgb(200, 200, 200) 4px 4px 4px; box-sizing: border-box; font-style: italic; margin: 0px auto; overflow-wrap: anywhere; padding: 10px 3%; text-align: left; text-size-adjust: 100%; width: 97%;">
<div style="align-items: flex-start; display: flex; gap: 6%;">
<div><h2><span face="sans-serif" style="box-sizing: border-box; color: lightblue; display: inline-block; font-size: 90px; line-height: 1; margin-left: -1%; margin-right: 1%; margin-top: -5px; padding-left: 0px; padding-right: 1%;">“</span></h2></div>
<div style="color: #555555; font-family: verdana; margin-top: 10px; padding-right: 2%; position: relative;">
<p><span style="line-height: 1.7; margin: 10px 0px;">
CSS Block Quotation Example</span></p>
<p><span style="line-height: 1.7; margin: 10px 0px;">
ここに引用する文を書きます。</span></p></div>
</div>
<cite style="color: #666666; display: block; font-family: verdana; font-size: 0.9em; line-height: 1.4; margin: 10px; padding: 0px 5%; text-align: right;">
<p>引用元</p>
</cite>
</blockquote>
見ての通り、Blogger特有の癖の強い書き方に仕上がったかなと思います笑
VSCodeなどで作成する場合と違って、コードのレイアウトが見づらくてすみません。
まだまだ改善点はあると思うのですが、ひとまず見れるレベルには仕上がったかなと思ってます。
オリジナルでは::beforeを用いて引用マークを表現していましたが、こちらでは<h2>タグで代用しました。
また、スマホで見ている方がもしいらっしゃったら、左側はスペースが空いているのに右が詰まっているのが気になったかもしれません。
これは、私のブログ全体で左のみにスペースが設定されてしまっているためです。。
皆様がコピペして使う分には問題ないはず。
私自身は自分で使うときはmarginを調整します。
0 件のコメント:
コメントを投稿