<< 裏技でメモ編集が使えなくなった... イメージファイルのアップの方法 >>
 

スタイルシートを用いた2列段組


スタイルシートを用いた2列段組の作り方です。
この技を応用して目次(お勧め記事)を作ってみました。よろしかったらご利用下さい。

※ある方からリクエストがありました。実はこのような目次を作ろうと思っていたのでグットタイミングでした。もうすこし工夫ができそうですが、みなさん工夫してみて下さいね。




人気のお勧め記事


スタイルシートを用いた2列段組
テーブルを使用しないで、おしゃれに2列段組してみませんか。メニューやお勧め記事などに利用できますよ。


鍵コメントを判りやすくする方法
鍵コメントのアイコンが小さくて鍵コメントと判らないときがありませんか。そのな鍵コメントを判断しやすくするために鍵コメントのアイコンを大きくします。

コメント欄の編集のまとめ
見えないところのおしゃれシリーズです。コメント欄を装飾してみませんか。あなただけのオリジナルなコメント欄を装飾してコメントして頂ける方にも楽しんでもらいましょう^^


コメント拒否の文字の消し方
トラックバックとコメントの拒否の文字を消す方法です。この技を応用すると文字の色を変えることもできます。


3列スキンマニュアル
ブログの3列スキンを作成するためのマニュアルです。初心者向けに書かれていますので、マイスキンを作りたいかたはこのマニュアルからスタートすることをお勧めします。






図1 投稿欄に目次として設置した例



CSS設置

CSS編集(スタイルシート)こ以下のコードを追加して下さい。PADDINGやMARGINなど、設定を変えてご自分のスタイルに合わせて下さいね。




P.left{

FLOAT: left;
MARGIN: 0px 0px 0px 10px;
PADDING: 0px 2px 0px 2px;
WIDTH:40%;

}

P.right{

FLOAT:right;/*文字の回りこみ*/
MARGIN: 0px 10px 0px 5px;/*外側余白*/
PADDING: 0px 2px 0px 2px;/*内側余白*/
WIDTH: 40%;/*幅*/

}


/*追記:2004年10月24日 10時   */
/*リンクの下線を表示するようにしました*/
p.left A:VISITED{text-decoration:underline ;}
p.left A:link{text-decoration:underline ;}
p.left A:ACTIVE{text-decoration:underline ;}

p.right A:VISITED{text-decoration:underline ;}
p.right A:link{text-decoration:underline ;}
p.right A:ACTIVE{text-decoration:underline ;}


HTML設置


投稿欄に入れるタグのリストです。今回は投稿欄に入れましたが、HTML編集部分に入れることも可能です。

<P class="left">この部分に左側の目次となる項目を入力して下さい。
</P><P class="right">この部分に右側の目次となる項目を入力して下さい。
</P><br style="clear: both;">


今日のポイント
  • CSS(スタイルシート)でFLOATを用いています。FLOATは文字などの要素の回り込みを指定します。
    回り込みの指定を終了するために以下のコードを入れています。
    <br style="clear: both;">



難易度:★★

素材はとんとん工房さんからお借りしています。リンクウエアなのでご使用の際には、リンクをお願いします。

ぽっと

CopyRight(C) 2004 All rights reserved by potto37




参考:タグ


参考までに、目次に使用したタグのリストを示します。



<P class="left"><img src="イメージファイル名"><a href="http://potto.exblog.jp/1114211/">鍵コメントを判りやすくする方法</a>
<FONT style="font-size:x-small;">鍵コメントのアイコンが小さくて鍵コメントと判らないときがありませんか。そのな鍵コメントを判断しやすくするために鍵コメントのアイコンを大きくします。</FONT>

<img src="イメージファイル名"><a href="http://potto.exblog.jp/1056451/">コメント欄の編集のまとめ</a>
<FONT style="font-size:x-small;">見えないところのおしゃれシリーズです。コメント欄を装飾してみませんか。あなただけのオリジナルなコメント欄を装飾してコメントして頂ける方にも楽しんでもらいましょう^^</FONT>


</P><P class="right"><img src="イメージファイル名"><a href="http://potto.exblog.jp/1173918/">コメント拒否の文字の消し方</a>
<FONT style="font-size:x-small;">トラックバックとコメントの拒否の文字を消す方法です。この技を応用すると文字の色を変えることもできます。</font>


<img src="イメージファイル名"><a href="http://potto.exblog.jp/648032/">3列スキンマニュアル</a>
<FONT style="font-size:x-small;">ブログの3列スキンを作成するためのマニュアルです。初心者向けに書かれていますので、マイスキンを作りたいかたはこのマニュアルからスタートすることをお勧めします。</font>
</P>
<br style="clear: both;">

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-10-23 23:29 | │├投稿欄
<< 裏技でメモ編集が使えなくなった... イメージファイルのアップの方法 >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。