読者です 読者をやめる 読者になる 読者になる

flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

サイドバー編集機能の安定した使い方

サイドバーの基本的な作り

 
<div class="hatena-module-title">
"タイトル"
</div>

<div class="hatena-module-body">
<ul class="hatena-urllist">
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
</ul>
</div>

モジュールの編集は自由にできるようですが、適当にタイトルを入力していくと

各文字の大きさやインデントがずれてしまうようです。

スタイルシートをまとめて編集するのも含めてこの形が妥当かと

 

既存のモジュールを消す

上記の書き方でなくとも、すでにあるモジュールを消したり、デザイン自体を変えてしまえば

インデントのずれや文字の大きさのずれを解消できます

 

 .hatena-module-title{
display: none;
}
.hatena-urllist{
display: none;
}

これで不要なデフォルトのリンクは消えます

この場合一番初めのモジュールも変わってしまうので

各idを変えておきましょう

またサイドバー自体削除したいのであれば

 #box2-inner{
display: none;
}

こうすると綺麗にサイドバーは消えます

TOPに戻るボタン設置

 
<script type="text/JavaScript">
function Scroll_to_the_top(){
window.scrollTo(0, 0)
}
</script>
<br>
<div onClick="Scroll_to_the_top()" style="background: #777; border: solid 3px #000; width: 100px; height: 30px;">
Scroll to the top
</div>

サイドバーのモジュールにもJavaScriptやstyle指定でのCSS編集が可能のようです

これからの編集機能のバリエーションに期待したいですね