Bonjour!

« [ココログ] 「コメント欄の設定を明示する」JavaScriptを更新しました | トップページ | ココログ過去記事編集用Bookmarklet 4 (全プラン対応版) »

2007-04-28

[ココログ] サイドバー折り返し2

ずっと前に「サイドバーを折り返す」ってのをやったんですが、takoさんちが右サイドバー2列にデザイン変更したのを見て、そういえばココログのHTML構造が新しくなってからは試してなかったな、と思い、ちょっとやってみました。

現状、IEだと何故か右肩下がりになってしまう不具合があって解消できてないのですが、そのまま公開。(^^;

手法としては、HTMLを誤魔化してCSSで2列にしているわけですけど、テンプレによってはデザインの調整が難しいので、お薦めというわけではありません。物好きな人は参考にしてください、という程度で。

また、勢い余って右サイドバー3列 &上下アリとかいう状態になってますけど(笑)、
以下、右サイドバーを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;
}

« [ココログ] 「コメント欄の設定を明示する」JavaScriptを更新しました | トップページ | ココログ過去記事編集用Bookmarklet 4 (全プラン対応版) »

ウェブログ・ココログ関連」カテゴリの記事

コメント

facet さん、どうもです。
IEで右肩下がりになるのは、
#right .sidebar-top

#right .sidebar-bottom

line-height: 0px;
font-size: 0px;
を入れれば改善されそうです。お試しください。
#0のときはpxとか付けなくてよいのでしたっけ?
#蛇足ですが、ところどころborderがbordreになってますね(^^;

風柳さん、毎度ありがとうございます。

IEでは、中身がなくても line-height や font-size まで効いちゃうんですね……。
# なんちゅう仕様だ(^^;

あと、単位ですけど、0の時に限っては書かなくてもよいというのをどこかで読んだ記憶があるんですが、未確認でした。
今、確認したところ、
“After the '0' length, the unit identifier is optional.”
- http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
とのことなので、やはり付けなくていいようですね。

それから、border。クイーンズイングリッシュでスミマセン。(笑)
お知らせどうもでした。

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/1941/14874445

この記事へのトラックバック一覧です: [ココログ] サイドバー折り返し2:

« [ココログ] 「コメント欄の設定を明示する」JavaScriptを更新しました | トップページ | ココログ過去記事編集用Bookmarklet 4 (全プラン対応版) »

contact

検索

無料ブログはココログ
2017年4月
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

BANNERS