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

スタイルシートを用いた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 | │├投稿欄 | Trackback(2) | Comments(11)
トラックバックURL : http://potto.exblog.jp/tb/1217165
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Tracked from 王様の耳は猫の耳 at 2004-10-31 23:18
タイトル : [どうもありがとう]
ぽっとさんの「スタイルシートを用いた2列段組」に トラバさせて頂きましたっ♪ いつもお世話になってます。 「2列段組の作り方」使わせて頂きましたっ。 綺麗に纏まって、見やすいです^▽^ そして、もう一つ↓を追加して2列の下に1列の文章を書きました。 P.center{ FLOAT:left;/*文字の回りこみ*/ MARGIN: 0px 0px 0px 10px;/*外側余白*/ WIDTH: 90%;/*幅*/ } みなさまへ 今回の地震で色々と心配し...... more
Tracked from ミエランダム at 2005-08-31 15:29
タイトル : 2列段組を設定してみました
先の日記のレシピの部分でぽっとの陽だまり研究室を参考に、 2列段組を使ってみました。(いつもお世話になってます。ありがとうございます♪) 左側に材料、右側に作り方・・・という構成にしようと思ってたけど、 リスト(ulやol)を併用するとレイアウトが思うようにいかない・・・。 Wordでの段区切りと同じようなことができないかなぁ。 結局、リストを解除して材料だけを2列段組に。 うーむ。まだまだ、試行錯誤が続きます・・・。 □■□■□■□■□■ 自分の覚書として、設定内容を...... more
Commented by canow at 2004-10-26 11:21
はじめまして。最近ブログを始めた所で、少しずつスキンをイジってるんですけど、こちらのスキン編集の説明はとても分かりやすくて、勉強になりました!アリガトウ。これからもガンバッテください。また勉強しに寄らせていただきます。では。
Commented by potto37 at 2004-10-26 22:18
canowさん、はじめまして^^
できるだけ、分かりやすく書くようにしているので
説明が分かりやすいって、言われると嬉しいです。
こちらこそ、ありがとうございます。
また、よろしかったら遊びに来てくださいね。
Commented by kaursh at 2004-10-27 00:00
2段組の説明アリガトウございます。
どうにか応用して、
トップページの目次にしてみました。

そのためか、ちょっとアクセスアップしました。

多謝多謝。
Commented by potto37 at 2004-10-27 19:49
kaurshさん、こんばんは^^
見ましたよ、分かりやすい目次でいいですね。
私もこの目次のおかげで、昔の記事にコメントをいただけるなど
良いことが続いています。

こちらこそ、コメントありがとうございます^^^
Commented at 2004-10-31 00:02
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-10-31 21:24
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-10-31 21:46
ブログの持ち主だけに見える非公開コメントです。
Commented at 2005-01-16 20:59
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2005-01-16 21:01
鍵さん、コメントはそちらにしますね。
Commented at 2005-07-13 00:34
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2005-07-13 20:24
鍵さん、はじめまして。
コメントありがとうございます。
スキン編集は、楽しいのでいろいろ楽しんで下さいね。
<< 裏技でメモ編集が使えなくなった... イメージファイルのアップの方法 >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。