記事下シリーズ3日目です。
「読者になる」ボタンが ◆~~~◆ 印から少し左に寄っているのでこれを修正して、全体を緑色の枠で囲んでみたいと思います。
以下は変更前の図。
変更後。
htmlの記述。
ブログのダッシュボード(管理ページ)のメニューから、
デザイン > カスタマイズ(スパナマーク) > 記事 > 記事下HTML
<div class="wakuwaku220521">
<div class="centering220521">
<p>◆~~~~~~~◆</p>
<iframe class="iframe_move"
src="https://blog.hatena.ne.jp/~~~/iframe"
allowtransparency="true" frameborder="0"
scrolling="no" width="150" height="28">
</iframe>
<p>◆~~~~~~~◆</p>
</div>
</div>
iframeの位置調整用に class="iframe_move" を設定しています。
CSSの記述。
ブログのダッシュボード(管理ページ)のメニューから、
デザイン > カスタマイズ(スパナマーク) > デザインCSS
div.wakuwaku220521 {
border-style: solid;
width: 150px;
padding: 10px;
border-width: medium;
border-color: #339933;
}
div.centering220521 {
text-align: center;
}
.iframe_move {
display: block;
margin-left: 22px;
margin-bottom: 3px;
}
iframeのセンタリングが上手くいかないので、左側の余白調整で右方向へ少し移動させています。
色付きの枠線で囲ったので、少しは目立つようになりました。
ただ、これで読者が増えるかどうかは別問題で、内容が無いとどうにもなりません。