ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

preタグ自動改行とBlogn+チョイ改造

November 03 2008

今までpreタグなんて使ったことなくて(汗)
「ちょいとネタ残すために使ってみるかー」とがんばってみたら
CSSで幅を設定してると、書くコードの長さによっては思いっきりはみ出よるんですね。

自動改行させるべく色々と調べてみたら

pre {
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7 */
white-space: pre-wrap;      /* CSS3 */
word-wrap: break-word;      /* IE 5.5+ */
}

こう書けば設定した幅で折り返してくれるみたい。
元ネタはこちら。
http://d.hatena.ne.jp/cocelo/20070217/1171716615

で、いつもお世話になってるBlogn+でpreタグ使って書いてみると
preタグの中のコードの改行がそのまま記事を書くときにbrタグが入ってしまって
コピペしてみるといらん改行は入ってしまうし、見た目も縦にズラーっと長くなってしまい
なんかもう、めんどくさい。

で、index.phpの中の(Ver.2.56)324行目の

// brタグの後ろに改行コードを入れる
$blogn_skin = eregi_replace("<br>", "<br />\n", $blogn_skin);

こいつをコメントアウトしたら希望通りの表示になりました。
brタグでの改行の後に、改行コードを追加しているみたいですね。

あと「HTMLタグ直後の改行を禁止したい」も施しておきました。
http://i-njoy.net/blognplus/index.php?e=174

これでちょいと便利になりました。

フッターを常に下に置いておく

November 01 2008

コーディングしてるとページの原稿によっては高さが全然足りずに
フッターがエーライ上の方に来てしまう時があります。
そんな時に、フッターを常にブラウザ下部に固定しておく方法。
ウィンドウサイズ可変させても、下にペッタリと固定してくれるので便利といえば便利。
(空のタグ一つ入ってまうけど・・)

ソースはこんな感じ。

<div id="Wrapper">
***********************
<ul id="Navi">
<li id="Navi01"><a href="#" title="*******">Page1</a></li>
<li id="Navi01"><a href="#" title="*******">Page1</a></li>
<li id="Navi01"><a href="#" title="*******">Page1</a></li>
<li id="Navi01"><a href="#" title="*******">Page1</a></li>
</ul>
コンテンツ~~~~~~~~~

<div class="push"></div>

</div>
<div id="Footer">Copyrights</div>

固定させるフッターのすぐ上のボックスに空Divを入れてしまいます。

CSSは

body {
height: 100%;
line-height: 150%;
}

body > #Wrapper {
height: auto;
}

#Wrapper {
width: 800px;
margin: 0 auto -70px;
text-align: left;
min-height: 100%;
height: auto !important;
}

#Footer {
width: 100%;
height:70px;
text-align: left;
background-image: url(../../img/loop/footer.png);
background-repeat: no-repeat;
}

.push {
height:70px;
}

と、コンテンツ部分にマイナスのマージンを置くことがミソ。
もちろんpushの中身になにかいれてもよいです。

737 / 737« 先頭...102030...733734735736737

« Mar 2017 April 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