ここまで、線の書き方や余白の取り方等を紹介してきましたので、一回まとめておきます。
はてなブログ カスタマイズまとめ
文字サイズと行の高さを変更
画像の大きさ・上下の余白を変更
border（枠線）の例
見出しをカスタマイズ
見出し以外の強調方法
記事の締めくくりを考えてみた
ここ数日。
記事の「締めくくり」を作っていました。（現在は変わっています。）
コレです。
一応コードを。
行の高さや、画像脇の余白等も関係してくると思うので合わせて載せておきます。
デザインCSS
/* 画像枠*/
.entry-content img {
border : 1px solid #DADADA ;
border-bottom : 1px solid #757575 ;
box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
margin: 3px 13px 20px 0;
}
/* 文字サイズ行の高さ*/
.entry-content {
font-size:16px;
line-height:1.6em;
}
/*締めくくり付箋デザイン*/
.accent-boxc{
color: #444444;
background: #CEECF5;
border-left: 10px solid #2E9AFE;
padding: 8px 10px;
box-shadow:5px 5px #D2D2D2;
margin: 50px 0 20px 0;
}
スマホ記事下
<style type="text/css">
/* 画像枠*/
.entry-content img {
border : 1px solid #DADADA ;
border-bottom : 1px solid #757575 ;
box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
margin: 3px 13px 20px 0;
}
/* 文字サイズ行の高さ*/
.entry-content {
font-size:16px;
line-height:1.6em;
}
/*締めくくり付箋デザイン*/
.accent-boxc{
color: #444444;
background: #CEECF5;
border-left: 10px solid #2E9AFE;
padding: 8px 10px;
box-shadow:5px 5px #D2D2D2;
margin: 50px 5px 20px 0;
}
</style>
文中には
<div class="accent-boxc">最後まで読んでいただき、ありがとうございます！！！</div>
<img src="http://○○○○○○.jpg" width="100" align="left" />読者登録していただけると励みになります。
お気軽にどうぞ
<iframe src="https:/blog.hatena.ne.jp/～～～～～～～～～～～ width="150" height="28"></iframe><br clear="all" />
青文字の部分
CSSと文中の名前（青文字）が一致して緑の付箋が出るようにしています。
名前は任意で変えてください。
"http://○○○○○○.jpg"
画像のURLを入れます。
見えづらいですが、URLの前後には「 " 」がついています。
