研Q116.タイトルつき枠囲いの枠線色や背景色をネライ通りに設定する方法。

<div>タグを使えば線や背景の色が思い通りになる（ことが多い）。

photo by nakimusi

<fieldset>というHTMLタグを使ってタイトルつきの枠囲いをブログに表示する方法があります。

<fieldset>による枠囲い：

　↑こんなタイトルがついた枠囲いを表示することができます。

追記：とか注記：とかを書くときになかなか便利な方法でけっこう頻繁に使っているのであります。


ところが、僕の別ブログ（Seesaaブログ）では、<fieldset>タグが表示されません。

また、<fieldset>タグでは枠線の色を設定することもできるのですが、当ブログでは、

 枠線の色指定：

枠線の色を「赤」に設定してみた。

ネライ通りの赤色が出ていません。
（中の文字の「赤」が、本来の赤色です。）

おそらくはテンプレートのCSS（スタイルシート）で<fieldset>タグに何か特別な設定がしてあるかなにかが原因ではないかと思いますが、原因を探して解決するよりも、
<div>タグを使ってタイトつき枠囲いができればそのほうがいいです。


<fieldset>タグには特別な目的（意味合い）があるのですが、<div>タグは単にブロック要素であることを示すだけなので、特別な意味づけはありません。

装飾の枠線を表示するなら、<div>タグを使うほうが無難だと申し上げているのはこのような理由によるものです。

だがしかし、<div>タグでタイトルつきにする方法なんてどこにも書いてありません。


そこでご登場願うのが、アメーバブログのカスタマイズにお詳しいわざめーばさんです。

わざめーばさんは、タイトルつきの枠囲いを表示する<div>タグを作ってくれるスーパーお助けツールを開発して公開されています。
⇒ 記事内の目立たせたい部分に囲み枠をつける｜アメブロカスタマイズで成功するブログを作ろう

ブログの名前は、アメブロカスタマイズですが、このスーパーお助けツールに関しては、タグコードを生成してくれるツールなのでアメブロでもFC2でもSeesaaブログでも使うことができます。



↑実際にシーサーブログでタイトルつきの枠囲いを表示することができた画像です。

四角い部分はすべて<div>タグで表現してあって、赤色の設定はネライ通りになっています。

タイトルの部分は枠線の上から背景色を設定した四角形を上書きして表現してあるようです。

実際にこのブログにタグで表現すると
↓この通りです。

注記：

タイトルつき枠囲いの枠線の色と、
背景色を設定しました。

タイトルを表記する方法を分析して理解するよりも、スーパーお助けツールを使わせていただいたほうが簡単そうです。

できあがったタグコードに、上の例では横幅を指定するstyle="width:300px;～を追加するなんていうことはしてあります。


関連記事：（同窓で開きます）
研Q5.文章を枠で囲む方法（HTML<div>タグのstyle属性で色､太さ､線種など自由自在に）

にほんブログ村

表示 - 継承 2.1

初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
　　

ツイッター でも、更新案内を流しています。　　　　　　　　　　　　　　　　　　　　　　　　　　

RSSリーダーとは？⇒ ＲＳＳってなんなの？

　　リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。

▲ネットビジネス研Ｑ室のトップページに戻る▲　　●ネットビジネス研Ｑ室の記事一覧●

記事末尾200posted by +M Inamura (水村亜里)