雪ん子’s report

スマホ1つでブログは書けるか⁉ スマホの使い方(初級編)と日々のことをお伝えします。

ブログタイトル

スマホだけでブログに挑戦!

はてなブログ カスタマイズまとめ




こんにちは。雪ん子です。

ここまで、線の書き方や余白の取り方等を紹介してきましたので、一回まとめておきます。
 


  

記事の締めくくりを考えてみた

 
ここ数日。
記事の「締めくくり」を作っていました。(現在は変わっています。)
 
コレです。

f:id:snow0303:20170217084732j:plain
 
一応コードを。
行の高さや、画像脇の余白等も関係してくると思うので合わせて載せておきます。
 

デザイン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の前後には「 " 」がついています。
 

赤文字

 
ダッシュボード→設定→詳細設定にある「読者になるボタン」の欄をコピーして貼り付けます。