研Q116.タイトルつき枠囲いの枠線色や背景色をネライ通りに設定する方法。 - ネットビジネス研Q室(新館)

このエントリーをはてなブックマークに追加

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
このエントリーをはてなブックマークに追加

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

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

江戸東京たてもの園part2-004 - 無料写真検索fotoq
photo by nakimusi

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

<fieldset>による枠囲い: こんなタイトルがついた枠囲いを表示することができます。


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


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

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

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

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

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


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

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

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


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

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

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

Seesaaブログでのタイトルつきの枠囲い表示

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

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

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

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

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


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

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


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


 クリエイティブ・コモンズ 表示 - 継承 2.1
表示 - 継承 2.1

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

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

RSSリーダーとは?⇒ RSSってなんなの

  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾200posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

トラックバック

http://aminamura.blog.fc2.com/tb.php/116-f48bbd1c

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。