1. フッター内ライン追加
フッターの見栄えを少し改善するために、ライン（点線）を追加した。いろいろな試したが、シンプルに1本だけラインをいれることにした。 今回はセレクタを#footer-menu (デザインHTMLでは#footerの下に#footer-menuを設けている）にしてデザインCSSに以下のコードに追加した。
#footer-menu{ border-bottom: 9px dotted #f45e5e; }
2. HTML編集
少し凝ったデザインやスタイルを１つの記事だけ適用するためにはHTMLコードをブログ編集時(本ブログはMarkdown編集)に直接書き込めばよい。今まで特殊文字はHTMLコードで記述していたが、スタイルについても適用できるようだ。例えば今回のラインを追加するような場合は
下側にラインを引く場合、ボーダーのスタイルをgrooveに設定
<div style="border-bottom: 5px groove red;"></div>
上と左のボーダーを明るく、下と右のボーダーが暗く表示されるoutset(逆はinset)
<p style="border: 5px outset #93FFAB;">Outset</p>
Outset
複数のスタイルを適用する場合は、複数のコードを記述する。
<p style="border-top: 9px dotted #f45e5e;border-bottom: 5px dashed #ffa500; text-align:center;"></p>
Text中央寄せ+Top-bottomのボーダー設定
応用としてデザインCSSで設定している見出しの書式を、この記事に限って変更する場合は、デザインCSSのコードを張り付け、borderのカラーコードだけ変更する。
<p style="padding: 0.25em 0.5em;color: #494949; background: transparent;border-left: solid 5px #99FF00;font-size:130%;font-weight:bold;">0. カスタム見出し</p>
0. カスタム見出し
あとでまとめて<style>～</style>はうまくいかないので、都度スタイルの設定を記述していくことになる。Pro版ではHTML編集モードがあり、機能を詳しく把握していないがもしかしたらもっと楽に記述ができるかもしれない。
はてな上でHTMLやスタイルの表示ができるので、ブログデザインの変更だけでなく今後HTML/CSSのちょっとしたデザイン方法など紹介していきたいと思う。
