トップ  >  BCOOL THEME 2ndシリーズにはHTMLコンテンツ制作を支援するためのスタイルについて

エディタのスタイルのプルダウンに設定できればいいのだけれど、書いてあるとおり何度やってもうまくいかないのですが、CSSのスタイルだけは、きちんと適用されるようです。

スタイルの記述を忘れないように、覚書しておこうと思います

 

記述についてはこちらのページから、失敬してきてます

すみません・・・

 

 

HTML記述のヒント

このドキュメントは、スタティックコンテンツやカスタムブロックなどでHTMLコンテンツを記述する際、デザインの手助けとなるスタイルシートの使用方法に関するヒント集です。

ページタイトルの記述(これはh1です)

ページタイトルの記述には通常h1を使います。このタグは1ページの中に1つしか存在してはなりません。検索エンジン対策に最も重要かつ有効なタグです。キーワードをうまく含めるようにタイトルを考えましょう。

 

記述例:<h1>〜〜〜</h1>

 

見出し2(これはh2です)

ページ内容の見出しに使用します。h1はページ内にひとつしか使えませんので、複数の大見出しがある場合はこのh2タグを使用します。

 

記述例:<h2>〜〜〜</h2>

 

見出し3(これはh3です)

ページ内容の小見出しに使用します。

 

記述例:<h3>〜〜〜</h3>

 

スタイルシートに標準で入れてあるスタイルの説明

カスタムブロックやページの記述などを便利にするために、使用頻度の高いスタイルをあらかじめ含めています。

.topicbox トピック枠。

 

記入例:<div class="topicbox">~~~</div>

 

この周りの枠がそうです。
枠を設けたいテキストなどを入れる場合に使ってください。

.box1 トピック枠背景付き。

 

記入例:<div class="box1">~~~</div>

 

コラム
などで、何か注意を引くコメントなどを記入する場合などに使ってください。

.box2 トピック枠背景付き2。

 

記入例:<div class="box2">~~~</div>

 

ワンポイント!
などで、何か注意を引くコメントなどを記入する場合などに使ってください。

.right 右寄せテキストを作りたいときに。

 

記入例:<div class="right">~~~</div>

 

右寄せしたい!

.center センタリングテキストを作りたいときに。

 

記入例:<div class="center">~~~</div>

 

センタリングしたい!

.fl_left 画像など左回り込みなどに。

 

記入例:<img .... class="fl_left" />

 

このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。
画像の回り込みをした後は、回りこみの解除を忘れずに行ってください。画像の下まで回りこめるくらいの文章量がありませんと、レイアウトが崩れる場合があります。(後述:class="clear"参照)

.fl_right 画像など右回り込みなどに。

 

記入例:<img .... class="fl_right" />

 

このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。
画像の回り込みをした後は、回りこみの解除を忘れずに行ってください。画像の下まで回りこめるくらいの文章量がありませんと、レイアウトが崩れる場合があります。(後述:class="clear"参照)

.photo_frame 写真枠っぽく表示します。

 

記入例:<img .... class="photo_frame" />

 


元写真画像

適用後画像

.photo_r 写真枠の右回り込み。

 

記入例:<img .... class="photo_r" />

 

このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。
画像の回り込みをした後は、回りこみの解除を忘れずに行ってください。画像の下まで回りこめるくらいの文章量がありませんと、レイアウトが崩れる場合があります。(後述:class="clear"参照)

.photo_l 写真枠の左回り込み。

 

記入例:<img .... class="photo_l" />

 

このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。 このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。

.clear 回り込みなどを解除するときに使ってください。

 

記入例:<div class="clear"> </div>

 

.noteline ノートの罫線風。

 

記入例:<span class="noteline">~~~</span>

 

このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。 このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。

.notice 注意書き。

 

記入例:<span class="notice">~~~</span>

 

このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。 このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。ここがnoticeで囲まれたところです。このようなカタチで表示されます。このようなカタチで表示されます。

.marker マーカー風。

 

記入例:<span class="marker">~~~</span>

 

このようなカタチで表示されます。このようなカタチで表示されます。ここがマーカーで囲まれたところです。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。 このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。このようなカタチで表示されます。
プリンタ用画面
友達に伝える
投票数:48 平均点:4.38
前
表の記述(サンプル)
カテゴリートップ
Xoops覚書
次
fckeditorのファイルアップロード権限の変更について
ログイン
ユーザー名:

パスワード:


パスワード紛失

新規登録
リンク集

桂川ミニバスケットボールクラブ

桂川ミニバスケットボール

福岡県嘉穂郡桂川町で活動するミニバスケットボールチームです