2009年06月07日
サイドバー（項目内）にタイトルバーを入れてみよう！ ： table 編
新しく作った項目内に、サイトデザインと一緒のタイトルバーを入れてみましょう。
このお話は前回の サイドバーの色（カラーコード）の見つけ方 で説明したときと同じですが、あくまでも私の使用していますシンプル系スキンを前提にしております。
今回の方法は <table> タグというものを使うのですが、説明するのが大変になってしまうのと、皆さんにもっと楽に + ぷちカスタマイズ + していただければと思い、作成したものをご用意しました。よろしかったらお持ち帰りください。
2009年07月06日 ： 追記
あまりに稚拙なタグだったんで、style に統一したタグに書き換えました。
お持ち帰りのコメントはいただいてませんので、この場での報告だけでご容赦ください。
▼ 今日のおみやげ ▼
ここにタイトル
上の ボックス内にマウスを置くだけ でボックス内のタグが 全て選択 されますので、
右ボタン⇒コピー でお持ち帰りください。
お持ち帰りいただいた「タグ」をバナータグの感覚で、目的の項目内の一番上に貼り付けて、 ここにタイトル の文節をお好みのタイトルに変更してください。
私と同じスキン色（sandyBrown）をご利用の方はそのままお使いになれます。（＾＾）
見た目の変更の仕方は以下に記しますので、ご参考にしてください。
背景色を変える <table> タグ内の background: の次のカラーコードを変更する。
文字色を変える <span> タグ内の color: の次のカラーコードを変更する。
文字を太くする <span> タグ内の font-weight: normal ; の normal ; を bold ; にする。
枠線を表示する <table> タグ内の "border: 0 px の 0 に数字を入力。1〜2 くらい。
枠線色を変える <table> タグ内の solid の次のカラーコードを変更する。
枠幅は全てのサイドバーに適応できる様にしてありますので、変更せずにそのままお使いになれますが、幅を狭くしたい場合は width: 100% ; の 100% ; を 150px ; などと入力し、お好きな幅に調節してください。高さは height: 27 px; の数字で調節できます。
項目内のタグの変更は、失敗してもすぐやり直せますから気楽に楽しんでみてくださいね。
こんな方法もあるよ ≫・CSSを指定してサイドバー（項目内）にタイトルバーを表示させる方法
※ 2012年07月09日： font-weight の指定値に誤りがございました。
font-weight: none ; （誤）を font-weight: normal ; （正）に修正し、変更しました。
※ 上記Htmlタグはコピー＆ペーストでそのままご利用になれます。
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
【カスタマイズ：サイドバー編の最新記事】
この記事へのコメント