こんにちは。gooです。
以前の記事、「BloggerでVaster2適用後のレイアウトを変更（その５）～目次を表示する～（https://sancansion-life.blogspot.com/2018/01/bloggervaster2.html）」で、目次を導入することにしました。
それに伴って、ページの見た目の印象が変わってしまったので、レイアウトも変更することにしました。
レイアウトを変更したところ
レイアウトを変更したところは、記事ページ中の、次のところを変更しました。
- タイトルの見た目
- 見出しの大きさ
- 小見出しの調整
- 準見出しの調整
変更箇所
変更箇所に関係した、編集場所のスクリーンショットを下に貼り付けます。
変更前
変更前の、関係するHTMLコード（記事のフォント）のスクリーンショットです。
変更後
変更後の、関係するHTMLコード（記事のフォント）のスクリーンショットです。
変更箇所の説明
変更した箇所について、説明していきます。
なお、gooが自分で変更したものの、HTMLコード自体は詳しくわかっていないので、説明に間違いがあったら、申し訳ありません。
タイトルの見た目の変更
タイトルの見た目の変更部分は、「.main-outer h1{ }」の部分になります。
次のようなものだったものを、
font-size:30px;
line-height:1.6em;
margin-bottom:30px;
⇩
こちらのようにしました。
font-size:30px;
line-height:1.6em;
border-top: 2px dotted;
border-bottom: 2px dotted;
margin-bottom:30px;
「border-○○」というところで、線の位置が決められます。
つまり、”○○”の部分が、”top”なら”上”、”bottom”なら”下”、”left”なら”左”、”right”なら”右”となります。
また、「○px dotted」で、点線の太さが決められます。
（〇部分の数字の大きさで、線の太さが変わる。）
シンプルな文字だけだったものが、次のような表示となりました。
見出しの大きさの変更
見出しの大きさの変更部分は、「.entry-content h2{ }」の部分になります。
次のようなものだったものを、
padding: .5em .75em;
margin-bottom: 25px;
background:$(entryh2.background);
color:$(entryh2.color);
⇩
こちらにしました。
padding: .5em .75em;
margin-bottom: 26px;
background:$(entryh2.background);
color:$(entryh2.color);
ほとんど変わっていません。
「margin-bottom: 26px;」と、少し大きくしただけです。
”margin-bottom”とは、”margin”が”表示領域間のスペース”で、”bottom”が”下”なので、下部領域を若干、広げた形になります。
まあ、あまり変わっていませんが、自己満足です。
小見出しの調整の変更
小見出しの大きさの変更部分は、「.entry-content h3{ }」の部分になります。
次のようなものだったものを、
font-size:20px;
padding:15px 0 15px 10px;
border-left: 8px solid $(entryh3.border);
color:$(entryh3.color);
⇩
こちらのようにしました。
font-size:22px;
padding:2px 0 2px 10px;
border-left: 6px solid $(entryh3.border);
border-bottom: 1px solid $(entryh3.border);
color:$(entryh3.color);
「font-size:22px;」で、フォントサイズを、少し大きくしました。
「padding:2px 0 2px 10px;」で、領域内のスペースの調整をしました。
数字が4つ並んでいますが、「padding:上 右 下 左」で、領域を指定することができます。
「border-○○: ○px solid $(entryh3.border);」で、線の位置と、太さを決めることができます。
ですので、「left: 6px solid」で、左側の線を少し細くして、「bottom: 1px solid」で、下線を引くことにしました。
以前は、左側しか線がなかったので、見た目の印象が、だいぶ変わりました。
準見出しの調整の変更
準見出しの大きさの変更部分は、「.entry-content h4{ }」の部分になります。
”小見出し”と、ほぼ同じだったものを、
font-size:15px;
padding:15px 0 15px 10px;
border-left: 8px solid #008ec2;
color:#008ec2;
⇩
こちらのようにしました。
font-size:18px;
padding:1px 0 1px 10px;
border-left: 3px solid #008ec2;
border-bottom: 1px dotted;
color:$(entryh4.color);
「font-size:18px;」で、フォントサイズを、少し大きくしました。
「padding:1px 0 1px 10px;」で、領域内のスペースの調整をしました。
ここも、数字が4つ並んでいますが、「padding:上 右 下 左」で、領域を指定しました。
「border-○○: ○px solid」で、線の位置と、太さを決めました。
「left: 3px solid」で、左側の線を少し細くして、「bottom: 1px dotted」で、点線を引くことにしました。
”Vaster2”では、標準で、”準見出し＜h4＞”が指定されていませんでした。
ですので、Vaster2を導入したときに、急きょ指定したので、”小見出し＜h3＞”の設定をそのまま使いました。
今回で、きちんと調整したので、だいぶ変得ることができました。
まとめ
今回の変更は、既に適用済みなので、このページも変わっています。
変更したレイアウトの、見た目だけ抜粋すると、次のようになります。
HTMLのコード変更は、難しいですが、今回は、変更する場所が限られていて、しかも、同じようなことの繰り返しみたいな感じだったので、集中して修正と、調整ができました。
こんな感じで、次々と見た目の変更に手を付けていきたいところですが、やりたいことが実現できるのは、まだまだ遠いです。
これからも、少しずつ手を加えていきたいと思います。
また、手を加えたら、やり方を忘れないように、ブログに残していきます。
今回はこの辺で失礼します。
ありがとうございました。
|
|
|
投稿
0 件のコメント :
コメントを投稿