今回は、「画像で作成した枠で囲む（CSSヴァージョン）」方法について説明します。

画像を利用すると、下の完成サンプルのように、角が丸い枠で囲むことができます。今回は、CSSを利用して作成する方法を説明します。

■ 完成サンプル

	ブログカスタマイズ講座～デザイン編 ・画像を利用した枠を作成するには ・画像を利用した枠の作成（テーブルヴァージョン） ・画像を利用した枠の作成（CSSヴァージョン） 　MTカスタマイズ講座～デザイン編 ・画像で作成した枠で囲む（テーブルヴァージョン） ・画像で作成した枠で囲む（CSSヴァージョン）

カスタマイズ方法（MovableType編）

では、エントリー部分を画像で作成した枠で囲む方法を例にして説明します。

1. 画像枠を作成する
まず、画像を使用して枠を作成します。
作成方法は、画像を利用した枠の作成（CSSヴァージョン）を参考にしてください。

２. 画像をアップロードする
作成した画像をサーバーにアップロードします。
画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。

３. CSS（スタイルシート）を編集する
次に、「スタイルシート」を編集します。下記の記述を追加します。

＜スタイルシート＞

.Box{ width:xxpx; background:url(画像（中央）URL) #ffffff repeat-y; } .BoxTop{ background:url(画像（上辺）URL) top left no-repeat; margin-top:0px; height:xxpx; } .BoxBottom{ background:url(画像（下辺）URL) bottom left no-repeat; margin-bottom:0px; height:xxpx; }

横幅、画像ＵＲＬ、画像の高さは、使用する画像にあわせて、記入してください。

4. HTMLを編集する
次に、「メインページ」「カテゴリー・アーカイブ」「個別エントリーアーカイブ」「日付アーカイブ」を編集します。

編集方法は、各テンプレートの　<MTEntries>～</MTEntries>で囲まれた部分（省略部分）を、挟むように記述します。
赤い文字が追加する記述です。

＜メインページ、カテゴリ、個別エントリー、日付アーカイブ＞

<MTEntries> <div class="Box"> <div class="BoxTop"></div> 　（省略） <div class="BoxBottom"></div> </div> <br> </MTEntries>

編集後は保存して再構築すると完了です。

テーブルヴァージョンと比べると、かなり記述が少なくて、すっきりしていますね。

ブログランキングに参加中です。応援お願いします。

今回は、「画像で作成した枠で囲む（テーブルヴァージョン）」方法について説明します。

画像を利用すると、下の完成サンプルのように、角が丸い枠で囲むことができます。今回は、テーブルを利用して作成する方法を説明します。

■ 完成サンプル

	ブログカスタマイズ講座～デザイン編 ・画像を利用した枠を作成するには ・画像を利用した枠の作成（テーブルヴァージョン） ・画像を利用した枠の作成（CSSヴァージョン） 　MTカスタマイズ講座～デザイン編 ・画像で作成した枠で囲む（テーブルヴァージョン） ・画像で作成した枠で囲む（CSSヴァージョン）

カスタマイズ方法（MovableType編）

では、エントリー部分を画像で作成した枠で囲む方法を例にして説明します。

1. 画像枠を作成する
まず、画像を使用して枠をテーブルで作成します。
作成方法は、画像を利用した枠の作成（テーブルヴァージョン）を参考にしてください。

２. 画像をアップロードする
作成した画像をサーバーにアップロードします。
画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。

３. HTMLを編集する
次に、「メインページ」「カテゴリー・アーカイブ」「個別エントリーアーカイブ」「日付アーカイブ」を編集します。

編集方法は、9分割したテーブルの中央セルの部分に、エントリーを書き込むようにします。また、エントリーごとに画像枠で囲むようにします。

具体的には、テーブルの中央セルの部分に、各テンプレートの　<MTEntries>～</MTEntries>で挟まれた部分を書き込むようにします。

＜メインページ、カテゴリ、個別エントリー、日付アーカイブ＞

<MTEntries> <table width="163" cellpadding="0" cellspacing="0"> <tbody> <tr> <td width="8" bgcolor="#ffffff"><img src="hidariue.gif" width="8" height="15" border="0" alt=""></td> <td width="100%" background="ue.gif" bgcolor="#ffffff"></td> <td width="8" bgcolor="#ffffff"><img src="migiue.gif" width="8" height="15" border="0" alt=""></td> </tr> <tr> <td width="8" background="hidari.gif" bgcolor="#ffffff"></td> <td bgcolor="#ffffff" valign="top"> 　（省略） </td> <td width="8" background="migi.gif" bgcolor="#ffffff"></td> </tr> <tr> <td height="13" bgcolor="#ffffff"><img src="hidarisita.gif" width="8" height="13" border="0" alt=""></td> <td height="13" background="sita.gif" bgcolor="#ffffff"></td> <td height="13" bgcolor="#ffffff"><img src="migisita.gif" width="8" height="13" border="0" alt=""></td> </tr> </tbody> </table> </MTEntries>

赤文字が追加した記述です。
なお、表の横幅、セルの横幅・高さ、画像の横幅・高さ、ファイル名は、使用する画像に応じて、書き換えてください。

編集後は保存して再構築すると完了です。

ブログランキングに参加中です。応援お願いします。

今回は、枠線で囲む方法について説明します。
枠線は色や太さ、形状などを指定することができますので、自分好みの枠線にアレンジして、エントリー部分やサイドバーなどを囲んでみてください。

エントリー部分を枠線で囲むには

枠線で囲む方法として、まず、エントリー部分を枠線で囲む方法を例にして説明します。

■ CSS（スタイルシート）の編集
スタイルシートの「.content」内に、下記の記述（赤色の部分）を追加します。

＜スタイルシート　（使用テンプレート：デフォルトテンプレート）＞

.content { border: solid 2px #ff0000; }

＜表示例＞

サンプル

初期設定では、枠線で囲まれていませんが、「border」プロパティを追加することで、枠線で囲むことができます。

編集後は保存して再構築すると完了です。

枠線の指定 ： border

枠線を指定するには、border プロパティを使用します。ここでは、枠線の指定方法について、もう少し詳しく説明します。

■ ４辺まとめて【指定する
枠の「形状、太さ、色」を４辺まとめて指定することができます。

＜記述例＞

border: solid 2px #ff0000;

■ 各辺ごとに指定する
枠の 「形状、太さ、色」を各辺ごとに指定することができます。

＜記述例＞

border-top: solid 1px #ff0000; border-bottom: solid 2px #ff0000; border-left: solid 1px blue; border-right: solid 2px blue;

枠の形状の指定

枠の形状は、下記のキーワードを指定することができます。

キーワード	意味
none	なし
hidden	なし
solid	実線
double	二重線
groove	へこんだ感じの立体枠
ridge	とがった感じの立体枠
inset	内容が沈んだ感じになる立体枠
outset	内容が浮き出た感じになる立体枠
dotted	丸い点線
dashed	四角い点線

他の部分を枠で囲むには

枠で囲むについて、エントリー部分を例として説明しましたが、バナー部分やサイドバー部分などを枠で囲む場合は、その該当クラスで、border プロパティを追加します。

MovableTypeで使用されているクラス、セレクタはMovableTyoeのスタイルシート解析を参考にして、枠で囲みたいクラスを編集してください。

以上、枠線で囲む方法について説明しました。

ブログランキングに参加中です。応援お願いします。

今回は、背景色の変更方法について説明します。簡単にカスタマイズすることができますので、是非、チャレンジしてくださいね。

ページ全体の背景色を変更するには

背景色の変更方法として、まず、ページ全体の背景色を変更する方法を例にして説明します。

■ CSS（スタイルシート）の編集
デフォルトテンプレートのスタイルシートを見ていただくと、下記のような記述があります。

＜スタイルシート＞

body { background-color:#8FABBE; }

初期設定のページ背景色は、「#8FABBE」と指定されています。
この「#8FABBE」という数値を変更することで、ページ全体の背景色を変更することができます。

編集後は保存して再構築すると完了です。

色の指定は、16進数の数値、あるいは、カラーネームで指定できますので、下記のカラーチャート表を参考にして、いろいろ試してくださいね。

■ カラーチャート表（標準カラー16色）

Aqua #00FFFF	Yellow #FFFF00	Fuchsia #FF00FF	White #FFFFFF
Teal #008080	Olive #808000	Purple #800080	Gray #808080
Blue #0000FF	Lime #00FF00	Red #FF0000	Silver #C0C0C0
Navy #000080	Green #008000	Maroon #800000	Black #000000

■ カラーチャート表（Webセーフカラー216色）
Webセーフカラーとは、8ビットディスプレイでも正しく再現できる色のことです。しかし、現在のディスプレイは16ビット（65,536色）～32ビット（1677万7216色）などが標準ですので、目安程度に捉えてもらって結構です。

000000	ffffcc	99ff99	66ffff	3333ff	ff00ff
333333	ffff99	66ff66	33ffff	0000ff	ff00cc
666666	ffff66	33ff33	00ffff	3300ff	cc0099
999999	ffff33	00ff00	00ccff	3300cc	ff33cc
cccccc	ffff00	00ff33	0099cc	6633ff	990066
ffffff	ccff00	00cc33	33ccff	330099	cc3399
ff3300	99cc00	33ff66	006699	6633cc	ff66cc
cc3300	ccff33	009933	3399cc	9966ff	ff0099
ff6633	669900	33cc66	66ccff	6600ff	660033
993300	99cc33	66ff99	0099ff	330066	993366
cc6633	ccff66	00ff66	003366	663399	cc6699
ff9966	99ff00	006633	336699	9966cc	cc0066
ff6600	336600	339966	6699cc	6600cc	ff99cc
663300	669933	66cc99	0066cc	cc99ff	ff3399
996633	99cc66	00cc66	99ccff	9933ff	ff0066
cc9966	66cc00	99ffcc	3399ff	9900ff	990033
cc6600	ccff99	33ff99	0066ff	660099	cc3366
ffcc99	99ff33	00ff99	003399	9933cc	ff6699
ff9933	66ff00	009966	3366cc	cc66ff	cc0033
ff9900	339900	33cc99	6699ff	9900cc	ff3366
996600	66cc33	66ffcc	0033cc	cc33ff	ff0033
cc9933	99ff66	00cc99	3366ff	cc00ff	330000
ffcc66	33cc00	33ffcc	0033ff	330033	663333
cc9900	66ff33	00ffcc	000033	663366	660000
ffcc33	33ff00	003333	333366	660066	996666
ffcc00	003300	336666	000066	996699	993333
333300	336633	006666	666699	993399	990000
666633	006600	669999	333399	990099	cc9999
666600	669966	339999	000099	cc99cc	cc6666
999966	339933	009999	9999cc	cc66cc	cc3333
999933	009900	99cccc	6666cc	cc33cc	cc0000
999900	99cc99	66cccc	3333cc	cc00cc	ffcccc
cccc99	66cc66	33cccc	0000cc	ffccff	ff9999
cccc66	33cc33	00cccc	ccccff	ff99ff	ff6666
cccc33	00cc00	ccffff	9999ff	ff66ff	ff3333
cccc00	ccffcc	99ffff	6666ff	ff33ff	ff0000

背景色の指定 ： background-color

背景色を指定するには、background-color プロパティを使用します。ここでは、色の指定方法について、もう少し詳しく説明します。

■ カラーコード指定（#+3桁のカラーコード）

＜記述例＞

background-color : #FFF;

左から「赤、緑、青」という順番で光の3原色の値を指定します。値は、0からFまでの16進数で0に近いほど暗く、Ｆに近いほど明るくなります。

■ カラーコード指定（#+6桁のカラーコード）

＜記述例＞

background-color : #8FABBE;

左から「赤赤、緑緑、青青」という順番で光の3原色の値を指定します。上の指定では8ビット（1桁）で各色の濃さを指定していましたが、この指定では、2桁で指定します。

■ カラーネーム指定

＜記述例＞

background-color : blue;

定められたカラーネームで指定することができます。

他の部分の背景色を変更するには

背景色の変更方法について、ページ全体の背景色の変更方法を例として説明しましたが、バナー部分やサイドバー部分などの背景色を変更する場合は、その該当クラスで、background-color プロパティを追加します。

MovableTypeで使用されているクラス、セレクタはMovableTyoeのスタイルシート解析を参考にして、背景色を変更させたいクラスを編集してください。

以上、背景色の変更方法について説明しました。

ブログランキングに参加中です。応援お願いします。

今回は、リストマークを画像化する方法について説明します。

リストマークは種類が限られていますが、画像を利用すると自由にデザインできます。

カスタマイズ方法（MovableType編）

では、サイドバーのリストマークを画像に変更してみましょう。カスタマイズ方法は、下記の手順で進めてください。

1. リストマークに使用する画像の用意
まず、リストマークに使用する画像を用意します。

画像は、「0円のWEB素材屋さん」や「1キロバイトの素材屋さん」などのHP素材サイトで無料配布されていますので、利用規約をお読みの上ダウンロードしてください。

自分で画像を作成する場合は、「PhotoShop（有料）」や「Pict Bear（無料）」などのソフトを使用すると便利です。

２. 画像ファイルのアップロード
用意した画像をサーバーにアップロードします。画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。

３. CSS（スタイルシート）の編集
次に、「スタイルシート」を編集します。
デフォルト・テンプレートの場合、下記の部分を編集します。

＜スタイルシート＞

.sidebar li { list-style-type: none; }

下記のように編集します。

＜スタイルシート＞

.sidebar li { list-style-image: url(画像URL); }

画像URLは、アップロードした画像URLを記入してください。

編集後は保存して再構築すると完了です。
これで、リストマークが画像に変更されました。

しかし、リスト画像が微妙にずれていて、気になるという方は、下記を参考にして修正してくださいね。

[関連記事] → リスト画像のずれを修正するには

ブログランキングに参加中です。応援お願いします。

今回は、MovableTypeのブログタイトルにロゴ画像を使用するカスタマイズ方法について説明します。

ブログのタイトルは、デフォルトではテキストで表示されますが、指定できるフォントやデザインに制限がありますね。しかし、タイトル部分に画像を使用することで、自由なカスタマイズが可能になります。


タイトルにロゴ画像を使用するには、下記の手順で進めてくださいね。

1. ロゴ画像の作成
まず、タイトル部分に使用するロゴ画像を作成します。
ロゴ画像の作成は、「PhotoShop（有料）」や「Pict Bear（無料）」などの描画ソフトや、「logo!」や「LogoShader」などのロゴ作成ソフトを使用したり、「Auto logo」などのロゴ自動作成サイトを利用すると便利です。

２. 画像ファイルのアップロード
作成したロゴ画像をサーバーにアップロードします。画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。

３. メインページ、カテゴリー・個別・日付アーカイブの編集
次に、「メインページ」などのHTMLファイルを編集します。
MovableTypeのデフォルトテンプレートの場合、下記の箇所を編集します。

＜メインページ、カテゴリー・個別・日付アーカイブ＞

<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>

これを下記のように書き換えます。（赤色=追加部分）

<h1><a href="<$MTBlogURL$>" accesskey="1" title="<$MTBlogName encode_html="1"$>"><span><$MTBlogName encode_html="1"$></span></a></h1>

４. 検索結果ページの編集
次に、ブログ内に設置されている検索ボックスで検索した際に表示される「検索結果ページ」を編集します。検索結果ページのタイトル文字とロゴ画像が重なって表示されている場合は、この項目を参考にしてください。

検索結果ページをカスタマイズするには、
サーバーの cgi/mt/serch_templatesフォルダ内のdefault.tmplを編集します。

編集内容は、３. メインページ、カテゴリー・個別・日付アーカイブの編集と同じですので、上記のように書き換えて保存してください。

５. CSS（スタイルシート）の編集
次に、「スタイルシート」を編集します。
デフォルト・テンプレートの場合、下記の記述を追加します。

＜スタイルシート＞

h1 a { display: block; background: url(画像URL); background-repeat: no-repeat; height: xxpx; width: xxpx; margin: 0px; } h1 span { display: none; }

画像URL、height（画像の高さ）、width（横幅）は、アップロードした画像の内容に変更してくださいね。

編集後は保存して再構築すると完了です。
これで、ブログタイトルが見映えよくなくなりましたね。



今回のカスタマイズ内容について説明します。

まず、ブログのタイトルにロゴ画像を使用する方法はいくつか考えられます。
1．タイトルを削除して、ロゴ画像を貼り付ける方法
2．テキスト（タイトル）を画像に置き換える方法
3．タイトルを残して、背景画像としてロゴ画像を指定する方法


1．のタイトルを削除して、ロゴ画像を貼り付ける方法とは、元々あるブログタイトルをばっさり削除して、ロゴ画像を貼り付けて、そこからトップページへのリンクを貼る方法です。具体的なカスタマイズ方法は下記のようになります。

＜メインページ、カテゴリー・個別・日付アーカイブ＞

<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>

これを下記のように書き換えます。

<a href="トップページ"><img src="画像ＵＲＬ" border="0" alt="ブログタイトル" /></a>

ただし、この方法だと、h1タグを削除することになり、記述的に問題がありますね。（ただし、h2タグが出現する前に、h1タグを追加すればOKです）

2．のテキストを画像で置き換える方法は、残念ながらスタイルシートには用意されていません。

しかし、置き換えたように見せかける方法はあります。
それが、今回説明したカスタマイズ方法です。
つまり、３．のタイトルを残して、背景画像としてロゴ画像を指定する方法です。

ただし、そのまんま、ブログのタイトルの背景にロゴ画像を指定しても、ブログタイトルとロゴ画像が重なってしまいますね。そこで、span要素の登場です＾＾
スタイルシートで

h1 span {　display: none;　}

と指定し、テキストを非表示にして、画像のみを表示することで、置き換えたように見えるというわけです。

以上、タイトルにロゴ画像を使用する方法（MT編）について説明しました。不明点やうまくいかなかった場合はコメントか掲示板で質問してくださいね。もちろんうまくいった場合でもコメントＯＫです＾＾

参考になりましたら、1クリックの応援お願いします。

今回は、MovableTypeの投稿者表示をユーザ名からニックネームに変更するカスタマイズ方法について説明します。

MovableTypeのデフォルトでは、なぜか投稿者がユーザ名で表示されています。初期設定の際に、ニックネームの登録もしていますので、是非、ユーザ名からニックネームに変更しておきましょう。カスタマイズ方法は非常に簡単で、各テンプレートの1行を編集するだけです。

カスタマイズ方法

投稿者をユーザ名からニックネームに変更するには、「メインページ」「カテゴリーアーカイブ」「個別エントリー・アーカイブ」「日付アーカイブ」を編集します。

■ メインページ、カテゴリー・個別・日付アーカイブの編集

MovableTypeのデフォルトテンプレートでは、下記のような記述があります。

＜メインページ、カテゴリー・個別・日付アーカイブ＞

<$MTEntryAuthor$>

これを下記のように書き換えるだけでＯＫです。

<$MTEntryAuthorNickname$>

編集後は保存して再構築すると完了です。
これで、味気のない投稿者表示が親しみやすくなりましたね。

以上、投稿者をユーザ名からニックネームに変更（MT編）する方法について説明しました。非常に簡単なカスタマイズですので、是非、とり入れてくださいね。

ブログランキングに参加中です。応援お願いします。

今回は、背景に画像を表示する方法について説明します。手順通りにすれば簡単にカスタマイズすることができますので、是非、チャレンジしてくださいね。

ページ全体の背景に画像を表示するには

背景画像のカスタマイズ方法として、ページ全体の背景に画像を表示する方法を例にして説明します。

1. 画像ファイルのアップロード
背景画像（gifやjpegファイルなど）をサーバーにアップロードします。
画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。

2. CSS（スタイルシート）の編集
次に、「スタイルシート」を編集します。
デフォルト・テンプレートの場合、下記ように編集すると、ページ全体の背景に画像を表示することができます。

＜スタイルシート＞

body { background-color: #8FABBE; }

下記のように修正します。

body { background-color: #8FABBE;　←削除 background-image : url("画像のパス");　←追加 }

背景画像の指定 ： background-image

背景画像を指定するには、background-image というプロパティを使用します。値には、背景画像で使用するURLを指定します。

＜スタイルシート＞

body { background-image : url("画像のパス"); }

背景画像関連の指定

下記のプロパティを使用すると、画像の並べ方や表示位置なども指定できます。

■ 背景画像の並び方を指定

<記述例>

background-repeat : repeat-y;

値	意味
repeat	背景画像は縦横タイル状に並べられます。
repeat-x	背景画像は横方向のみに繰り返して並べられます。
repeat-y	背景画像は縦方向のみに繰り返して並べられます。
no-repeat	背景画像は繰り返されずにひとつだけ表示されます。

■ 背景画像の表示位置を指定

<記述例>

background-position : left top;

値	意味
実数値＋単位 （100px 50px）	横方向と縦方向の開始位置を順にスペースで区切って数値で指定します。 単位にはpx・em・ex・in・cm・mm・pt・pcなどがあります。
％値 (20% 30%)	横方向と縦方向の開始位置を順にスペースで区切って割合で指定します。
左右の配置 （left | center | right） 上下の配置 （top | center | bottom）	横方向と縦方向の開始位置を順にスペースで区切ってキーワードで指定します。指定する順序は問いません。

■ 背景画像の固定配置を指定

<記述例>

background-attachment: fixed;

値	意味
fixed	背景画像の位置を固定します。
scroll	背景画像を他の内容と共にスクロールします。

他の部分で背景画像を表示するには

背景画像の表示方法について、ページ全体の背景画像を表示方法を例として説明しましたが、バナー部分やサイドバー部分などで背景画像を表示する場合は、その該当クラスで、background-image プロパティを追加します。

MovableTypeで使用されているクラス、セレクタはMovableTyoeのスタイルシート解析を参考にして、背景画像を表示させたいクラスを編集してください。

以上、背景画像を表示する方法について説明しました。
ブログランキングに参加中です。応援お願いします。

今回は、「リンク文字の下線を表示、あるいは、非表示にする」カスタマイズ方法について説明します。

ページ全体のリンク文字の下線を表示・非表示するには

リンク文字の下線をカスタマイズする方法として、ページ全体のリンク文字の下線を変更する方法を例にして説明します。

■ CSS（スタイルシート）の編集
リンク文字の下線を変更するには、スタイルシートを編集します。
デフォルト・テンプレートの場合は、下記の部分を編集することで、ページ全体のリンク文字の下線を表示したり、非表示にしたりできます。

＜スタイルシート＞

a { text-decoration: underline; }

文字の装飾を指定 ： text-decoration

リンクの文字に下線を表示させたり、非表示にするには、文字を装飾する「text-decoration」プロパティを使用します。

■ リンク文字の下線を消すには
リンク文字の下線を消すには、「none」と指定します。

< 記述例 >

a. {text-decoration: none;}

< 表示例 >

あいうえお

■ リンク文字の下線を表示するには
リンク文字の下線を表示するには、「underline」と指定します。

< 記述例 >

a. {text-decoration: underline;}

< 表示例 >

あいうえお

部分的にリンク文字の下線を表示・非表示するには

リンク文字の装飾について、ページ全体のリンク文字を例として説明しましたが、部分的にリンク文字を変更したい場合は、その該当箇所で

.○○○ a { text-decoration: underline; }

というように追記・編集することで変更できます。

例えば、ブログタイトルのリンク文字に下線を表示する場合は、下記のソースのように編集します。

＜スタイルシート＞

#banner a { text-decoration: underline; }

MovableType3.17の主なクラス・セレクタは、下記の通りですので、参考にしてください。

＜MovableType3.17 デフォルト・テンプレート＞

クラス・セレクタ	該当箇所
#banner h1	ブログのタイトル
#banner h2	ブログの説明
.content	エントリー全体
.content h2	エントリーの日付
.content h3	エントリーのタイトル
.content p	エントリーの本文
.content p.posted	投稿者・投稿時間・コメントなど
#right	サイドメニュー全体（右側）
.sidebar	サイドメニュー
.sidebar h2	サイドメニューの見出し
.link-note	RSSへのリンクや検索ボックス
#calendar	カレンダー
#powered	powered　by の部分

リンクの状態によって下線を表示・非表示するには

リンク文字の下線は、「未訪問のとき」や「訪問済みのとき」、「カーソルが重なったとき」、「クリックしたとき」など、リンクの状態ごとに指定することもできます。

例えば、「ブログタイトルのリンク文字を、カーソルが重なったときだけ下線を表示」する場合は、下記のように編集します。

＜スタイルシート＞

#banner a { text-decoration: none; } #banner a:link { text-decoration: none; } #banner a:visited { text-decoration: none; } #banner a:hover { text-decoration: underline; }

擬似クラス	意味
a:link	未訪問のリンク
a:visited	訪問済みのリンク
a:hover	カーソルが重なったときのリンク
a:active	クリックしたときのリンク

以上、リンク文字の下線のカスタマイズ方法について説明しました。

ブログランキングに参加中です。応援お願いします。

今回は、「リンク文字色」のカスタマイズ方法について説明します。

ページ全体のリンク文字色を変更するには

まず、リンク文字色をカスタマイズする方法として、ページ全体のリンク文字色を変更する方法を例にして説明します。

■ CSS（スタイルシート）の編集方法
リンク文字色を変更するには、スタイルシートを編集します。デフォルト・テンプレートの場合は、下記の部分を編集することで、ページ全体のリンク文字色を変更することができます。

＜スタイルシート＞

a { text-decoration: underline; } a:link { color: #8FABBE; } a:visited { color: #8FABBE; } a:active { color: #8FABBE; } a:hover { color: #006699; }

リンク文字色を指定するには、「未訪問のとき」や「訪問済みのとき」、「カーソルが重なったとき」、「クリックしたとき」など、リンクの状態ごとに指定することができます。

初期設定のリンク文字色は、「 color: #8FABBE;」などと指定されています。この「#8FABBE」という記述を編集することで、リンク文字色を変更することができます。

しかし、スタイルシートを見ていただくと、「a:link」や「a:visited」などに分かれていますね。それらがどういう機能をしているのか、それぞれ説明していきます。

リンクの状態

■ a
リンクの状態に関係なくスタイルを指定できます。ただし、下記の擬似クラスでスタイルが指定されている場合は、その指定が優先されます。

擬似クラス	意味
a:link	未訪問のリンク
a:visited	訪問済みのリンク
a:hover	カーソルが重なったときのリンク
a:active	クリックしたときのリンク

擬似クラスとは、下記のようにHTMLなどでは表記できない状態をクラスセレクタに見立てたものです。

■ a:link
リンク先が未表示の状態です。
文字色が未指定の場合は、青色で表示されます。

■ a:visited
リンク先が表示済みの状態です。
文字色が未指定の場合は、紫色で表示されます。

■ a:hover
リンクにマウスカーソルが重なったときの状態です。

■ a:active
リンクをクリックしたときの状態です。
文字色が未指定の場合は、赤色で表示されます。

文字色の指定方法

文字色の指定方法には、「#666666」のように16進表記で指定する方法と、 「blue」のようにカラーネームで指定する方法があります。

■ 16進表記で指定

color: #666666;

16進表記で指定する場合、できる限り、WEBセーフカラーを使用してください。
WEBセーフカラーとは、8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色のWEBカラーのことです。WEBセーフカラーを使用すれば、表示の際に色が変換されてしまうことが少なくなり、 より多くの環境で意図通りの色で表示させることができます。

■ カラーネームで指定

color: blue;

16進表記の他にカラーネームで色を指定することができます。
カラーネームによる指定の場合、色名によっては使用OSやブラウザのバージョンなどの環境により、 正しく表示できないことがあるので注意してください。

HTML4.01とXHTML1.0、CSS2で共通して正式に使用できるカラーネームは、下記の16色です。

■ カラーチャート表（標準カラー16色）

Aqua #00FFFF	Yellow #FFFF00	Fuchsia #FF00FF	White #FFFFFF
Teal #008080	Olive #808000	Purple #800080	Gray #808080
Blue #0000FF	Lime #00FF00	Red #FF0000	Silver #C0C0C0
Navy #000080	Green #008000	Maroon #800000	Black #000000

部分的にリンク文字色を変更するには

リンク文字色の変更について、ページ全体の文字を例として説明しましたが、部分的にリンク文字色を変更したい場合は、その該当箇所で

.○○○ a:link { color: #8FABBE; }

というように追記することで変更できます。

例えば、ブログタイトルのリンク文字色を変更したい場合は、下記のソースを追加します。

＜スタイルシート＞

#banner a { text-decoration: none; } #banner a:link { color: #8FABBE; } #banner a:visited { color: #8FABBE; } #banner a:active { color: #8FABBE; } #banner a:hover { color: #006699; }

MovableType3.17の主なクラス・セレクタは、下記の通りですので、参考にしてください。

＜MovableType3.17 デフォルト・テンプレート＞

クラス・セレクタ	該当箇所
#banner h1	ブログのタイトル
#banner h2	ブログの説明
.content	エントリー全体
.content h2	エントリーの日付
.content h3	エントリーのタイトル
.content p	エントリーの本文
.content p.posted	投稿者・投稿時間・コメントなど
#right	サイドメニュー全体（右側）
.sidebar	サイドメニュー
.sidebar h2	サイドメニューの見出し
.link-note	RSSへのリンクや検索ボックス
#calendar	カレンダー
#powered	powered　by の部分

以上、リンク文字色のカスタマイズ方法について説明しました。
是非、活用して、好みの文字色にカスタマイズしてください。

[次の講義へ] → リンク文字の下線を表示・非表示

ブログランキングに参加中です。応援お願いします。