[ココログ] サイドバー折り返し２
ずっと前に「サイドバーを折り返す」ってのをやったんですが、takoさんちが右サイドバー２列にデザイン変更したのを見て、そういえばココログのHTML構造が新しくなってからは試してなかったな、と思い、ちょっとやってみました。
現状、IEだと何故か右肩下がりになってしまう不具合があって解消できてないのですが、そのまま公開。(^^;
手法としては、HTMLを誤魔化してCSSで2列にしているわけですけど、テンプレによってはデザインの調整が難しいので、お薦めというわけではありません。物好きな人は参考にしてください、という程度で。
また、勢い余って右サイドバー３列 ＆上下アリとかいう状態になってますけど(笑)、
以下、右サイドバーを２列にする手順です。
▼手順
◆1. メモタイプのマイリストを新しく作ります。
マイリストの名前は「<!--ここで折り返し-->」などとコメントアウトすればよいでしょう。
ただし、ココログフリーの場合はマイリストの名前部分でコメントアウトが効かないので、「NAVI」等、適当なリスト名を付けてください（「ページトップに戻る▲」というリンクを出すようにしたので）。
◆2. 項目を追加します。
メモ欄に以下のようなコードを書いて保存します。（項目タイトルは、あってもなくても）
<div class="navi" style="width: 90%; text-align: right;"> <a href="#container" onclick="window.scrollTo(0,0);return false;">ページトップに戻る▲</a> </div>
</div><!-- /.typelist-note --> </li><!-- /.module-list-item --> </ul><!-- /.module-list --> </div><!-- /.module-content module-body typelist-plain --> <div class="module-bottom"></div> </div><!-- /.module-typelist module list --> </div><!-- /.sidebar --> <div class="sidebar-bottom"></div>
<div class="sidebar-top"></div> <div class="sidebar"> <div class="module-typelist module list" style="display: none;"> <div class="module-top"></div> <!-- <h2 class="module-header"></h2> --> <div class="module-content module-body typelist-plain"> <ul class="module-list"> <li class="module-list-item"> <div class="typelist-note">
# 以前に比べて随分長くなりましたねえ…(^^;
なお、上記のコードではサイドバー下部に「ページトップに戻る▲」というリンクを出すようにしてますので、不要な方は最初の三行を飛ばしてコピペしてください。
◆3. ブログ > デザイン を弄ります。
「並べ方を編集」 にて、サイドバーコンテンツを全て右に移し、折り返したい場所に上記で作成したマイリストを配置し、保存します。
※マイリストを作成した時にブログに表示させるように設定していなかった場合は、まず「表示項目を選択」して保存してください。
◆4. （もしくは 0.） CSSでスタイルを調整します。
今回の場合、以下のような感じのCSSを書きました。（Typepadテンプレの例です）
#container {
width: 800px;
margin: 0;
border: 0;
padding: 0;
}
#left {
display: none;
}
#center {
width: 400px;
float: left;
}
#right {
width: 400px;
margin: 0;
border: 0;
padding: 0;
float: left;
}
#right .sidebar {
width: 170px;
padding: 14px;
border: 0;
margin: 0;
float: left;
}
# Typepadテンプレートの .sidebar の padding は元々 15px なんですけど、うまく float してくれないので 1px 減らしたら収まりました。
▲以上でお終いです。
昔と違ってテンプレが多様になっているのであまり参考にならないかもしれませんが、やってしまったので(^^;、情報をシェア、ということで。
◆左サイドを上部ヘッダーみたいにして簡易お知らせコーナーにする
#left {
width: 100%;
}
#left * {
display: inline;
}
最近のコメント