CSS編集 yozoの気が向いたと記2.0

CSS編集の記事一覧

2007/01/07 リンク文字の色の設定（CSS編集）
2006/12/06 ブロックレベル要素のセンタリング（CSS編集）
2006/11/24 枠線（border）の上にボックスを配置しましょう。（CSS編集）
2006/11/22 ブロック要素に枠線を設定しましょう（CSS編集）
2006/11/15 画像にポラロイド風の飾り枠を設定しましょう（CSS編集）

2007年01月07日

リンク文字の色の設定（CSS編集）

　ブログの壁紙やタイトルの画像などを変更したときに、それにあわせて、リンク文字の色を変更したいものです。そんなときには、次のようにリンク文字の色の設定を変更してみましょう。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。

基本（ページ全体のリンク文字の設定）

　リンク部分のCSSを編集するときには、下の擬似クラスとよばれるものを変更します。CSS編集の画面で、検索して色のコードを変更するだけです。４つ全てが指定されていないこともあります。そのときは追加して、好みの色を設定しましょう。なお、この４つは必ずこの順番で指定されているはずです。この順番でないと正しく反映されないことがあるようですので、ご注意ください。

CSS編集で修正するコード

/*リンク文字の設定*/
a:link/*まだ見ていない状態*/
{
color:#ff3300;
}
a:visited/*すでに見た状態*/
{
color:#cd5c5c;
}
a:hover/*カーソルが上にある状態*/
{
color:#ffa500;
}
a:active/*クリックをしている状態*/
{
color:#a2cf03;
}

yozoの気が向いたと記2.0

クラスを指定したリンク文字だけ設定した色にする方法

　特別にリンク文字の色を指定するクラスを自分で決めてください。ここでは、specialとしてみました。

CSS編集で追加するコード

/*リンク文字の設定*/
a.special:link/*まだ見ていない状態*/
{
color:#339900;
}
a.special:visited/*すでに見た状態*/
{
color:#999999;
}
a.special:hover/*カーソルが上にある状態*/
{
color:#ff6600;
}
a.special:active/*クリックをしている状態*/
{
color:#660033;
}

ソースコードの例

(特別にリンク文字の色を指定する場合は下の例のように入力します。)

<a href="http://yozoblog2.blog63.fc2.com/" class="special">yozoの気が向いたと記2.0</a>

yozoの気が向いたと記2.0

特定の範囲のリンク文字だけ設定した色にする方法

　特別にリンク文字の色を指定する範囲のクラスを自分で決めてください。ここでは、samplelinkとしてみました。

CSS編集で追加するコード

/*リンク文字の設定*/
.samplelink a:link/*まだ見ていない状態*/
{
color:#ff3300;
}
.samplelink a:visited/*すでに見た状態*/
{
color:#cd5c5c;
}
.samplelink a:hover/*カーソルが上にある状態*/
{
color:#ffa500;
}
.samplelink a:active/*クリックをしている状態*/
{
color:#a2cf03;
}

ソースコードの例

(特別にリンク文字の色を指定する範囲は下の例のように入力します。)

<div class="samplelink">　ここに書かれた文章中のリンク文字の色が特別に指定できます。<a href="http://yozoblog2.blog63.fc2.com/">yozoの気が向いたと記2.0</a>や<a href="http://usamo.seesaa.net/">うさもの気が向いたと記</a>、<a href="http://blog.livedoor.jp/yozoblog/">yozoのおすすめ本</a>、<a href="http://yozoblog.blog48.fc2.com/">yozoのシスアドへの道</a>などのリンク文字の色の設定に利用しました。</div>

　ここに書かれた文章中のリンク文字の色が特別に指定できます。yozoの気が向いたと記2.0やうさもの気が向いたと記、yozoのおすすめ本、yozoのシスアドへの道などのリンク文字の色の設定に利用しました。

yozoからのお願い

　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取るようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m

↓yozoの気が向いたと記2.0の関連記事紹介

【リンク文字の色の設定（CSS編集）の続きを開く】

スポンサーサイト

スレッドテーマ:みんなに紹介したいこと:ブログ

2006年12月06日

ブロックレベル要素のセンタリング（CSS編集）

はじめに

　画像や表などを記事の真ん中に配置する（センタリングする）とき、以前では、<center>や<div align="center">を使用するのが当たり前でした。これらの方法は簡単で便利だったのですが、HTML4.01では非推奨、XHTMLでは使用できません。『センタリングはCSSでする』というのが正しい方法になっているようです。

センタリングの方法（インライン要素）

　画像や表などを記事の真ん中に配置する方法は大きくわけて２つあります。文字や画像（img）などの※インライン要素は、text-align:center;でセンタリングします。
※インライン要素について詳しくはコチラ→CSS編集をしましょう

CSS編集で追加するコード

/*センタリング（インライン要素）*/
.textcenter
{
text-align:center;
}

センタリングのソースコード

(センタリングするときは下の通りに入力します。)

<div class="textcenter">センタリングしたい文字や画像</div>

「それぞれは　カワイイされる　画像かな」

センタリングの方法（ブロックレベル要素）

　ポラロイド風の枠など装飾した画像や表などの※ブロックレベル要素は、ブロックレベル要素の幅を決めて、左右のmarginをautoしてセンタリングします。
※ブロックレベル要素について詳しくはコチラ→CSS編集をしましょう

CSS編集で追加するコード

/*width:150px;のセンタリング*/
.photocenter
{
margin-left: auto;
margin-right: auto;
width:150px;
}

※ここでは画像の幅130pxの左右にそれぞれ10pxのpaddingを設定
していますから、10+130+10＝150pxをwidthとして設定しました。

センタリングのソースコード

(センタリングするときは下の通りに入力します。)

<div class="photocenter">センタリングしたいポラロイド風の枠など装飾した画像や表</div>

「あの記事で　準拠するのは　飾りなり」

IE6.0でもセンタリングを有効にする方法

　この記事をIE6.0でご覧になっている方は、上の画像がセンタリングされていないと思います。これはIE6.0のバグなのだそうです。それでもIE6.0を使用される方が圧倒的に多いですので、IE6.0でもそれ以外のブラウザでも、センタリングできるようにしましょう。上記の設定に加えて、text-align:center;をさらに設定すればＯＫです。特に追加するCSSコードはありません。次のように入力してください。かなり面倒ですが、これでどんなブラウザでもブロックレベル要素のセンタリングが可能となります。yozoもこの方法を使用しています。

センタリングのソースコード

(センタリングするときは下の通りに入力します。)

<div class="textcenter"><div class="photocenter">センタリングしたいポラロイド風の枠など装飾した画像や表</div></div>

「この自分　注意したれば　画像かな」

参考にした記事の紹介

　いつもお世話になっている小粋空間のyujiroさんの記事CSSでブロックレベル要素をセンタリングするを見て、はじめて、ブロックレベル要素の正しいセンタリングの方法が理解できました。このyujiroさんの記事と、紹介されている、Web標準普及プロジェクト様の記事ブロックレベル要素をセンタリングする方法を参考にさせていただきました。m(_ _)m

yozoからのお願い

↓　ぽちっと応援お願いします♪ m(_ _)m

↓yozoの気が向いたと記2.0の関連記事紹介

【ブロックレベル要素のセンタリング（CSS編集）の続きを開く】

スレッドテーマ:カスタマイズ:ブログ

2006年11月24日

枠線（border）の上にボックスを配置しましょう。（CSS編集）

　ここの記事ブロック要素に枠線を設定しましょう（CSS編集）や引用に枠線を設定しましょう（CSS編集）では、記事の中でアピールしたい文章を枠線（border）で囲んでみました。
　この記事では、お友達の果報は寝て待て(-_☆)のPavlobaさんの記事引用の表示をさらにカスタムしてみる？を参考にさせていただいて、枠線囲みになっている枠線（border）の上に、ボックスを配置してタイトルを入力できるようにしましょう。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。

枠線（border）の上にボックスを配置しましょう。（CSS編集）

　記事の中のある部分を枠線で囲みます。その枠線上にボックスを配置したいので、枠線で囲んだ部分を基準にしてボックスを配置することになります。（これを相対配置といいます。）そのために、positionプロパティをrelativeに設定するのがコツです。
ここで作成したクラス名はyozoが勝手に名付けたものです。もちろん同じものを使用されても構いませんし、ご自分でわかりやすい名称にしても構いません。（半角英数文字で小文字を使用しましょう。）

position: relative;→相対配置にします。
top: -1.3em;
→枠線上端からの位置を-1.3em（上端から外へ1.3文字分の高さ）にします。
width:15em→ボックスの幅を15em（15文字分の幅）にします。
margin: 0px auto;
→ボックス全体の余白を上下は0pxとし、左右はautoにしてセンタリングします。ただし、IE6.0ではセンタリングされません。
padding: 0.1em;→枠線と枠内の文章との余白を0.1文字分とします。
text-align:center;→ボックス内の文字のセンタリング。
color: #ffffff;→枠内の文字色を#ffffff(白色)にします。
background: #ff9900;→枠内の文字色を#ffffff(白色)にします。
border: #666666 1px solid;→枠線の設定内の文字色を#ffffff(白色)にします。
color: #ffffff;→枠内の文字色を#ffffff(白色)にします。
background: #ff9900;→背景色を#ff9900にします。
border: #666666 1px solid;→枠線の種類・太さ･色を設定します。

CSS編集で追加するコード

/*全角15字boxtitle*/
.boxtitle15
{
position: relative; /*相対配置*/
top: -1.3em; /* ボックスの高さ調節 */
width:15em; /* ボックスのサイズ*/
margin: 0px auto; /* センタリング*/
padding: 0.1em; /* テキストと枠線の間の余白 */
font-size: 12px; /* 文字サイズ */
text-align:center; /* ボックス内の文字のセンタリング*/
color: #ffffff; /* 文字色*/
background: #ff9900; /* 背景色 */
border: #666666 1px solid; /* 枠線のスタイル */
}

このボックスのソースコード

(この画像を文字を記事に入れるとき、下の通りに入力します。)

<div class="textfrm"><div class="boxtitle15">ボックスの中の文字</div>枠線内の文章はここに入力します。</div>

上の例の通りに記事に入力すると、このようになります。

ボックスの中の文字

枠線内の文章はここに入力します。

yozoからのお願い

　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m

↓yozoの気が向いたと記2.0の関連記事紹介

【枠線（border）の上にボックスを配置しましょう。（CSS編集）の続きを開く】

スレッドテーマ:カスタマイズ:ブログ

2006年11月22日

ブロック要素に枠線を設定しましょう（CSS編集）

　記事の中でアピールしたい文章を枠線（border）で囲むと効果的ですね。
記事はコチラ→引用に枠線を設定しましょう（CSS編集）
　blockquote、divなどのブロック要素に、枠線を設定してみようと思います。
ブロック要素について詳しくはコチラ→CSS編集をしましょう
　なお、blockquoteは、他のWebサイトやブログからの引用を表すためのものです。自分の記事ではdivを使うといいでしょう。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。

ブロック要素に枠線を設定しましょう

下の解説を参考にしてCSSのコードを追加しましょう。なお、クラス名はご自分でわかりやすい名称にしてください。（半角英数文字で小文字を使用しましょう。）

margin→枠全体の余白を設定します。
padding→枠線と枠内の文章や画像との余白は設定します。
background-color→背景色を設定します。
border-style→枠線の種類を設定します。
border-width→枠線の太さを設定します。
border-color→枠線の色を設定します。

CSS編集で追加するコード

/*写真の枠線で文章を囲む*/
.textfrm
{
margin : 15px 20px 15px;
padding: 5px;
background-color:#ffffff;
border-style: solid;
border-width: 2px;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
}

このブロックのソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)

divの場合

<div class="textfrm">強調したい文章はここに入れます。</div>

引用（blockquote）の場合

<blockquote class="textfrm" cite="引用したサイトのURI">強調したい引用した文章はここに入れます。</blockquote>

divの場合

強調したい文章はここに入れます。

引用（blockquote）の場合

h1?h6(見出し)、div（範囲）、ｐ（段落）、blockquote（引用）、table（テーブル）、ol（番号付きリスト）、ul(番号なしリスト)、form（フォーム）など一つのまとまった単位になっている要素のことです。
yozoの気が向いたと記2.0の記事CSS編集をしましょうより引用しました。

yozoからのお願い

　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m

↓yozoの気が向いたと記2.0の関連記事紹介

【ブロック要素に枠線を設定しましょう（CSS編集）の続きを開く】

スレッドテーマ:カスタマイズ:ブログ

2006年11月15日

画像にポラロイド風の飾り枠を設定しましょう（CSS編集）

　せっかくの画像を記事に入れるのなら、ちょっと目立つように周りを飾ってみたくなりますよね♪
それでここの記事画像の枠線を設定しましょう（CSS編集）では、画像の枠線（border）を設定して、画像が引き立つようにしてみました。記事はコチラ→画像の枠線を設定しましょう（CSS編集）
　この記事では、お友達のKOROPPYの本棚のKOROPPYさんの記事CSSでココログの画像をポラロイド風にアレンジを参考にして、記事の画像に縁取りを付けてみました。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。

画像にポラロイド風の飾り枠を設定しましょう

　画像の周りに余白(padding)を入れて、飾り枠のようにします。
padding: 上右下左;を同じ値にしてみました。

CSS編集で追加するコード

/*ポラロイド風の枠の設定*/
.photofrm
{
padding: 10px 10px 10px 10px;
background-color: #FFFFFF;
border-style: solid;
border-width: 2px;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
}

この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)

　いかがでしょうか？左右が同じように、ポラロイド風の枠が見えますか？右側にはちゃんと枠があるけど、左側には枠が見えないのではありませんか？

　KOROPPYさんも記事の追記で案内されていましたが、ここのテンプレートを提供してくださている、小粋空間のyujiroさんの記事標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示するによりますと、ここのブログのようにXHTML1.0準拠のテンプレート使用のブログの記事を、IE6.0かそれに順ずるブラウザで見た場合、imgタグの中のpadding（余白）が効かないそうです。ですから、左の画像のように、imgタグの中にclass="photofrm"を入れても、余白部分が見えないので、ちっともポラロイド風には見えないことになります。

　これを回避する方法としては、XHTML1.0準拠のテンプレートのHTML編集で、1行目の
<?xml version="1.0" encoding="utf-8"?>を削除すると表示されるようになるそうですが、XHTMLの準拠をyozo自らやめるわけにはいきませんので、別の方法で回避しました。

　imgタグの中に入れずに、<div class="photofrm">?</div>で、挟むようにしました。ただし、この場合、ポラロイド風の枠は、画像のサイズごとに設定しなくてはならないようになります。
この記事の場合は、使用する画像のサイズがwidth="130"とheight="170"ですので、同じサイズのwidth:130px;とheight:170px;をphotofrmに追加しました。

CSS編集で追加するコード

/*ポラロイド風の枠の設定*/
.photofrm
{
width:130px;
height:170px;
padding: 10px 10px 10px 10px;
background-color: #FFFFFF;
border-style: solid;
border-width: 2px;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
}

この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)

画像にポラロイド風の飾り枠にワンポイントの画像を設定しましょう

　KOROPPYさんの記事のように、どうせなら、ポラロイド風の飾り枠にワンポイントの画像を設定してみましょう。padding（余白）の下部分を追加して、そこに、画像を配置します。

padding: 10px 10px 35px 10px;
　padding:上右下左;で設定されているので、下部分の10px→35pxとしました。
background: #FFFFFF url(画像URI) no-repeat 90% 97%;
　余白部分の背景色は白色（#FFFFFF）で、右下に画像を設置させたいので、左端から幅の90％で、上から高さの97％の位置と設定しました。（これは設置する画像と好みの位置をご自分で調節してください。）

CSS編集で追加するコード

/*ポラロイド風の枠画像有り*/
.normalphotofrm
{
width:130px;
height:170px;
padding: 10px 10px 35px 10px;
background: #FFFFFF url(画像URI) no-repeat 90% 97%;
border-style: solid;
border-width: 2px;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
}

この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)

なお、今回使用の足跡の画像は、1キロバイトの素材屋さん様からお借りしました。

yozoからのお願い

　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m

↓yozoの気が向いたと記2.0の関連記事紹介