ひとつ前の記事で自分ではかなり満足できる見栄えを作ることができました。あともう少しでほんとにやりたい記事が書ける! はず?!
今回遊ぶ頑張るのはこれ。
ではさっそくやっていきましょう。
タイトルを目立たせる
まだタイトルの大きさが小さくって目立ちません。大きくしたいです。調べたらクラス post-title なので、このクラスに対して大きくするCSSを追加します。また個別ページでは黒いので、少し色付けしてみます。
/* Enlarge a post title
----------------------------------------------- */
.post-title {
font-size: 2.8em !important;
margin-top: 10px !important;
margin-bottom: 25px !important;
color: #336699;
border-top: 2px solid;
border-bottom: 2px solid;
border-radius: 5px;
}
[時刻: 17:48] - おいしい晩ごはん - [時刻: 18:59]
見出しの装飾
ここから鬼門です。記事タイトルなどのHnタグを変更し、装飾を変えていく作業です。以前の記事を参考に頑張ります。
h2を削除する
html部分を書き換えます。変更前は以下の5ヶ所にh2タグがあります。これらをspanタグに変更します。ウィジェットのspanにはクラス custom_widget_title を追加します。日付は表示しないので日付にはクラスは追加しないでいいでしょう。
- 投稿日付: 1092行目、1449行目
- ガジェットのラベル: 2186行目、2225行目、2294行目
次にh2のCSSをcustom_widget_titleに書き換えます。
/* Headings
----------------------------------------------- */
.custom_widget_title {
font: $(widget.title.font);
text-transform: $(widget.title.text.transform);
color: $(widget.title.text.color);
margin: .5em 0;
}
.footer-outer .widget .custom_widget_title {
color: $(footer.widget.title.text.color);
}
最後にh2で検索して、ウィジェット用の変数を定義しているところを下記のように書き換えます。
<Group description="Gadgets" selector=".custom_widget_title">
<Variable name="widget.title.font" description="Title Font" type="font"
default="bold normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="bold normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="widget.title.text.color" description="Title Color" type="color" default="#888888" value="#888888"/>
</Group>
記事タイトルをh2にする
次は記事タイトルをh2で囲みます。Bloggerデフォルトでは記事タイトルはh3なので、h3を検索します。すると次の3つがヒットしたので全部h2に書き換えます。
- モバイル用記事タイトル: 1379行目、1469行目
- PC用記事タイトル: 1577行目
記事タイトルをh3からh2にしたのでスタイルが変わります。元のスタイルにするため、以下のCSSを追加します。と、ここでCSSを追加で編集できなくなっているので、HTMLの編集を使っていきます。
h2.post-title {
margin: 0;
font: $(post.title.font);
}
最後にh3で検索して、ウィジェット用の変数を定義しているところを下記のように書き換えます。
<Group description="Post Title" selector="h2.post-title, .comments h4">
<Variable name="post.title.font" description="Title Font" type="font"
default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 24px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
</Group>
できました!
[時刻: 20:25]
見出し1にh3のスタイルを適用する
ここまできたら見出し1はh3としてそのまま使えていますので、スタイル定義するだけで使えます。以下のCSSを追加します。
/* Style for Heading 3 as ### in StackEdit
----------------------------------------------- */
h3 {
color: #404040;
margin-top: 2.5em;
margin-bottom: 0.5em;
margin-left: 0em;
margin-right: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 1.2em;
padding-right: 0.3m;
font-size: 1.3em;
border-top: 1px solid #808080;
border-right: 1px none;
border-bottom: 1px solid #211aeb;
border-left: 5px double #211aeb;
box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}
色合いにかなり時間を使って悩んでいますが、あまり実りがありません。orz
[時刻: 21:05] - 休憩 - [時刻: 21:30]
h4を削除する
今までと同じ手順でh4を検索します。まずはhtmlからです。全部で以下の5ヶ所です。すべてタグをspanとクラス custom_comment_block に置き換えていきます。
- 1161行目、1190行目、1197行目、1245行目、2035行目
次にCSSのh4の部分を custom_comment_block に変更します。
.comments .custom_comment_block {
margin: 1em 0 0;
font: $(post.title.font);
}
最後にh3で検索して、コメント用の変数を定義しているところを下記のように書き換えます。
<Group description="Post Title" selector="h2.post-title, .comments .custom_comment_block">
<Variable name="post.title.font" description="Title Font" type="font"
default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 24px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
</Group>
できました。だいぶ慣れてきたのでさくさく進みます。なお時間がかかっているのはちょくちょく道草してるせい。 (^^ゞ
見出し2~4にh4～h6のスタイルを適用する
ちょっとここにテスト用の見出を書いておきましょう。
見出し3テスト (h5)
見出し3の本文です。
見出し4 テスト(h6)
見出し4の本文です。
以下、追記するCSSです。
h4 {
color: #404040;
margin-top: 2.1em;
margin-bottom: 0.3em;
margin-left: 0em;
margin-right: 0em;
padding-top: 0.4em;
padding-bottom: 0.2em;
padding-left: 2.5em;
padding-right: 0.3m;
font-size: 1.0em;
border-top: 1px solid #808080;
border-right: 1px none;
border-bottom: 1px solid #211aeb;
border-left: 3px solid #211aeb;
border-radius: 5px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}
h5 {
color: #404040;
margin-top: 2.1em;
margin-bottom: 0.3em;
margin-left: 0em;
margin-right: 0em;
padding-top: 0.2em;
padding-bottom: 0.2em;
padding-left: 3em;
padding-right: 0.3m;
font-size: 1.0em;
border-top: 1px solid #808080;
border-right: 1px none;
border-bottom: 1px solid #211aeb;
border-left: 1px solid #211aeb;
border-radius: 5px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}
h6 {
color: #404040;
margin-top: 2.1em;
margin-bottom: 0.3em;
margin-left: 0em;
margin-right: 0em;
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-left: 4em;
padding-right: 0.3m;
font-size: 1.0em;
font-weight: normal;
border-top: 1px solid #808080;
border-right: 1px none;
border-bottom: 1px solid #211aeb;
border-left: 1px solid #808080;
border-radius: 5px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}
頑張ったけど、デザインイマイチな気がします… あとCSSの書き方、もっとスマートな書き方あったら教えてください m(.o .)m
目次の点々を消して右寄りに配置
これも以前の記事をみながらやっていきます。でも前回書いたそのままでは有効にならず、!importantなど追加しています。
/* Style for TOC, delete disc
----------------------------------------------- */
.toc ul {
list-style: none !important;
width: 100%;
}
/* Style for TOC, move to line head
----------------------------------------------- */
.toc > ul > li > ul > li {
position: relative; left: -4em;
}
はい、できました!
バックアップ! バックアップ!
忘れずにバックアップをとっておきます。今度のファイル名は”template-(数字の羅列)-.AfterChangedHeading.xml”という名前に変更しました。
どうだった?
今回は前回に比べ、よりスマートなデザインに仕上がったと思います。Simple is Best! と行きたいですが、ごちゃごちゃしたほうが好きなんですよね…
参考サイト
- CSSで作るdivボックスデザイン (2014-05-?? イメージのパスから推測)
見出しのデザインの参考にさせていただきました。他にも色々と参考になるサイトはあったんですが、こちらは私にはわかりやすくてありがたく使わせていただきました。とはいっても、随分試行錯誤しました… デザイナーさんってすごいですね。参考にしたのは「6.影付きのボックス」です。
