自分方位研究所

日々の活動記録

記事下の「読者になる」の表示まわりを変えてみる。

記事下シリーズ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のセンタリングが上手くいかないので、左側の余白調整で右方向へ少し移動させています。

色付きの枠線で囲ったので、少しは目立つようになりました。
ただ、これで読者が増えるかどうかは別問題で、内容が無いとどうにもなりません。