2007年7月17日
Web2.0風ロゴ画像の作成
今回は、簡単に「Web2.0風ロゴ画像」を作成する方法を紹介します。
Photoshopなどの画像編集ソフトを使用して作成することも可能ですが、「ロゴ作成ジェネレーター」を利用すれば、あっという間に作成することができます。
「Web2.0」のデザインの特徴は、「グラデーション」「反射効果」「角が丸い」「BETAバッジ」などが挙げられます。実際に、サンプル画像を見て頂ければイメージしやすいと思いますが、数多くのサイトで見かけるデザインですね。
「Web2.0」風のロゴを作成する際には、是非、試してみてください。
■ サンプル（Web2.0風ロゴ画像）
1. Web2.0 Logo Creator by Alex P
テキスト（半角英数字）を入力するだけで、Web2.0風のロゴを作成することができます。また、色・グラデーションの指定や、「反射効果」「BATAバッジ」の表示の有無が設定できます。
使用方法
「Text to make Web2.0」に表示させたい文字（半角英数字）を入力し、「Generate」ボタンをクリックすれば、ロゴ画像が作成されます。
また、「Add to Reflection?」で、「反射」効果の有無、
「Add BETA tag?」で、「BETAバッジ」の表示の有無が設定できます。
色の指定方法は、下記のように、[c=カラーコード]と[/c]で挟み、16進数のカラーコードで指定します。
＜色の指定＞
■色の指定（例）
＜色の指定例＞
■グラデーションの指定（例）
＜色の指定例＞
2. Web2.0 - Logo Creatr
Web2.0風のロゴや、google風、yahoo風のロゴが作成することができます。また、文字色、グラデーション、文字サイズの指定や、「反射効果」「BETAバッジ」の表示の有無などが設定できます。
使用方法
「Logo Text」に表示させたい文字（半角英数字）を入力し、「Create Logo」ボタンをクリックすれば、ロゴ画像が作成されます。
色の指定方法は、下記のように、[col=カラーコード]と[/col]で挟み、16進数のカラーコードで指定します。
＜色の指定＞
3. Logo Maker : Web 2.0 Stylr
Web2.0風のロゴを作成することができます。文字色や背景色、グラデーション、フォントなどが設定できます。
使用方法
「Logo Text」に表示させたい文字（半角英数字）を入力し、
「Web2.0 Styl It!」ボタンをクリックすれば、ロゴ画像が作成されます。
以上、Web2.0風ロゴ画像の作成方法を説明しました。
参考になりましたら、応援お願いします。
Photoshopなどの画像編集ソフトを使用して作成することも可能ですが、「ロゴ作成ジェネレーター」を利用すれば、あっという間に作成することができます。
「Web2.0」のデザインの特徴は、「グラデーション」「反射効果」「角が丸い」「BETAバッジ」などが挙げられます。実際に、サンプル画像を見て頂ければイメージしやすいと思いますが、数多くのサイトで見かけるデザインですね。
「Web2.0」風のロゴを作成する際には、是非、試してみてください。
■ サンプル（Web2.0風ロゴ画像）
Web2.0風ロゴ生成ジェネレーター
1. Web2.0 Logo Creator by Alex P
テキスト（半角英数字）を入力するだけで、Web2.0風のロゴを作成することができます。また、色・グラデーションの指定や、「反射効果」「BATAバッジ」の表示の有無が設定できます。
使用方法
「Text to make Web2.0」に表示させたい文字（半角英数字）を入力し、「Generate」ボタンをクリックすれば、ロゴ画像が作成されます。
また、「Add to Reflection?」で、「反射」効果の有無、
「Add BETA tag?」で、「BETAバッジ」の表示の有無が設定できます。
色の指定方法は、下記のように、[c=カラーコード]と[/c]で挟み、16進数のカラーコードで指定します。
＜色の指定＞
[c=カラーコード]表示文字[/c]
■色の指定（例）
＜色の指定例＞
[c=FF00FF]B[/c][c=0099FF]logDesign[/c]
■グラデーションの指定（例）
＜色の指定例＞
[c=0099FF]BlogDesign[/c=FF00FF]
2. Web2.0 - Logo Creatr
Web2.0風のロゴや、google風、yahoo風のロゴが作成することができます。また、文字色、グラデーション、文字サイズの指定や、「反射効果」「BETAバッジ」の表示の有無などが設定できます。
使用方法
「Logo Text」に表示させたい文字（半角英数字）を入力し、「Create Logo」ボタンをクリックすれば、ロゴ画像が作成されます。
色の指定方法は、下記のように、[col=カラーコード]と[/col]で挟み、16進数のカラーコードで指定します。
＜色の指定＞
[col=3399cc]Web[/col][col=fc0082]2.0[/col]
3. Logo Maker : Web 2.0 Stylr
Web2.0風のロゴを作成することができます。文字色や背景色、グラデーション、フォントなどが設定できます。
使用方法
「Logo Text」に表示させたい文字（半角英数字）を入力し、
「Web2.0 Styl It!」ボタンをクリックすれば、ロゴ画像が作成されます。
以上、Web2.0風ロゴ画像の作成方法を説明しました。
参考になりましたら、応援お願いします。
パーマリンク
| コメント (3)
| トラックバック (1)
はてなブックマークに追加
| 
2007年6月27日
ストライプ背景画像の作成
今回は、簡単に「ストライプ画像」を作成する方法を紹介します。
Photoshopなどの画像編集ソフトを使用して作成することも可能ですが、ストライプ画像作成ジェネレーターを利用すれば、もっと簡単に作成できます。
ストライプ画像を背景画像として使用すると、単色でベタ塗りした背景よりも、洗練された感じがしますので、是非、試してみてくださいね。
■ サンプル（ストライプ画像）
1. background image maker
「斜め線」や「平行線」、「ドット」、「グラデーション」の４パターンを簡単に作成することができます。また、線の間隔や、線の色、背景色、透過、サイズなども指定することができますので、かなり自由度が高いです。
使用方法
値を指定してから「Make」をクリックすると、右側にサンプルが表示されます。
「image」の下にある画像、あるいは、「URL」に表示されているアドレス先の画像をダウンロードすれば、画像の作成は完了です。
2. Stripe Generator 2.0
ストライプの太さや、間隔、色、背景色、方向などを指定するだけで、簡単に作成することができます。ストライプに影もつけることもできます。
使用方法
値を指定してから、右側のpreveiwの下の「ストライプ画像」をクリックすると、サンプルが表示されます。
「download」ボタンをクリックすると、生成した画像をダウンロードすることができます。
3. Stripe Designer
様々なストライプが多数用意されています。さらに、画像とストライプを合成したり、ストライプの編集も可能ですが、ストライプの色は変更できないみたいです。
画像を作成してダウンロード（保存）しましたら、あとは、画像をサーバーにアップロードして、スタイルシートで画像のURLを指定すれば完成です。
＜CSS の記述例＞
以上、ストライプ背景画像の作成方法を説明しました。
参考になりましたら、応援お願いします。
Photoshopなどの画像編集ソフトを使用して作成することも可能ですが、ストライプ画像作成ジェネレーターを利用すれば、もっと簡単に作成できます。
ストライプ画像を背景画像として使用すると、単色でベタ塗りした背景よりも、洗練された感じがしますので、是非、試してみてくださいね。
■ サンプル（ストライプ画像）
ストライプ画像作成ジェネレーター
1. background image maker
「斜め線」や「平行線」、「ドット」、「グラデーション」の４パターンを簡単に作成することができます。また、線の間隔や、線の色、背景色、透過、サイズなども指定することができますので、かなり自由度が高いです。
使用方法
値を指定してから「Make」をクリックすると、右側にサンプルが表示されます。
「image」の下にある画像、あるいは、「URL」に表示されているアドレス先の画像をダウンロードすれば、画像の作成は完了です。
2. Stripe Generator 2.0
ストライプの太さや、間隔、色、背景色、方向などを指定するだけで、簡単に作成することができます。ストライプに影もつけることもできます。
使用方法
値を指定してから、右側のpreveiwの下の「ストライプ画像」をクリックすると、サンプルが表示されます。
「download」ボタンをクリックすると、生成した画像をダウンロードすることができます。
3. Stripe Designer
様々なストライプが多数用意されています。さらに、画像とストライプを合成したり、ストライプの編集も可能ですが、ストライプの色は変更できないみたいです。
画像をダウンロードしたら
画像を作成してダウンロード（保存）しましたら、あとは、画像をサーバーにアップロードして、スタイルシートで画像のURLを指定すれば完成です。
＜CSS の記述例＞
body {
background-image: url(画像URL);
}
background-image: url(画像URL);
}
以上、ストライプ背景画像の作成方法を説明しました。
参考になりましたら、応援お願いします。
パーマリンク
| コメント (0)
| トラックバック (0)
はてなブックマークに追加
|
2007年4月16日
ウェブサイトのサムネイル作成
サイトやブログを紹介する際に、そのサイトのサムネイル画像を表示させると、非常に分かりやすくなります。しかし、サイトのトップページをキャプチャしたり、サムネイル化したりする作業って、何気に面倒くさいかもしれません＾＾
そこで、今回は、ウェブサイトのサムネイルを簡単に作成する方法を紹介します。
■ カスタマイズ例
まずは、SimpleAPIさんで公開されているウェブサイト・サムネイル化ツール（ウェブサイトサムネイル作成API β版）を使用して作成する方法を紹介します。
サムネイルを作成したいサイトのURLを指定すると、サムネイル画像とコードが自動生成されますので、そのコードをコピーして貼り付けるだけです。非常に簡単ですね。
1. サムネイル化したいサイトのURLを入力する
SimpleAPIさんのウェブサイト・サムネイル化ツールのページで、サムネイル化したいサイトのURLを入力します。
2. HTMLタグを貼り付ける
「サムネイルを生成」ボタンをクリックすると、htmlタグが生成されますので、altやalignなどを適宜編集して、ブログに貼り付ければ完成です。
＜HTML の記述例＞
※サムネイル画像が、すぐに生成されない場合、実際にウェブサイトに貼ってから２時間ほどで表示されるようになります。
また、乾坤一擲 さんで公開されている IgWebCap（自動更新サムネイル生成サービス）やWebToJpeg（リアルタイムウェブページサムネイラ）を使用すると、幅や高さ、影、待機時間、透明度などの指定もすることができます。
さらに、htmlコードは、iframe型やscript型、img型の3種類が生成されますので、それぞれのメリット・デメリットを考慮して、利用してくださいね。
以上、ウェブサイトのサムネイル画像の作成方法を説明しました。
参考になりましたら、応援お願いします。
そこで、今回は、ウェブサイトのサムネイルを簡単に作成する方法を紹介します。
■ カスタマイズ例
ウェブサイトのサムネイル化（SimpleAPI）
まずは、SimpleAPIさんで公開されているウェブサイト・サムネイル化ツール（ウェブサイトサムネイル作成API β版）を使用して作成する方法を紹介します。
サムネイルを作成したいサイトのURLを指定すると、サムネイル画像とコードが自動生成されますので、そのコードをコピーして貼り付けるだけです。非常に簡単ですね。
1. サムネイル化したいサイトのURLを入力する
SimpleAPIさんのウェブサイト・サムネイル化ツールのページで、サムネイル化したいサイトのURLを入力します。
2. HTMLタグを貼り付ける
「サムネイルを生成」ボタンをクリックすると、htmlタグが生成されますので、altやalignなどを適宜編集して、ブログに貼り付ければ完成です。
＜HTML の記述例＞
<a href="http://blog.info-rich.jp/"><img src="http://img.simpleapi.net/small/http://blog.info-rich.jp/"
alt="ブログ別作成カスタマイズ講座" width="128" height="128"
hspace="4" vspace="4" align="left" border="0"
/></a>
※サムネイル画像が、すぐに生成されない場合、実際にウェブサイトに貼ってから２時間ほどで表示されるようになります。
ウェブサイトのサムネイル化（IgWebCap）（WebToJpeg）
また、乾坤一擲 さんで公開されている IgWebCap（自動更新サムネイル生成サービス）やWebToJpeg（リアルタイムウェブページサムネイラ）を使用すると、幅や高さ、影、待機時間、透明度などの指定もすることができます。
さらに、htmlコードは、iframe型やscript型、img型の3種類が生成されますので、それぞれのメリット・デメリットを考慮して、利用してくださいね。
以上、ウェブサイトのサムネイル画像の作成方法を説明しました。
参考になりましたら、応援お願いします。
パーマリンク
| コメント (0)
| トラックバック (0)
はてなブックマークに追加
|
2007年4月 1日
CSSで画像に枠や影をつける
今回は、CSSで「画像に枠や影（ドロップシャドウ）を付ける方法」を説明します。
デジカメや携帯カメラで撮った写真を、そのまま貼り付けただけでは、デザイン的に何となく寂しく感じることはありませんか？ そのような場合には、是非、お試しください。
■ カスタマイズ例
CSSで画像に影（ドロップシャドウ）を付けるには、
1.画像と影画像を用意します。
2.画像の後ろに、影画像を背景画像として重ねます。
3.そして、前の画像を左上の方向にずらすことで、ドロップシャドウの効果を実現することができます
では、具体的に、画像に影（ドロップシャドウ）を付けるカスタマイズ方法を説明します。
1. 影の画像を作成する
まず、photoshop
などの画像処理ソフトを使って影画像を作成します。
Photoshopの場合でしたら、長方形ツールで、長方形を作成し、レイヤー効果の「ドロップシャドウ」を利用すると、思い通りの影画像が簡単に作成できます。
■ サンプル素材
下記のリンクを右クリックして[対象をファイルに保存]を選択するとサンプル画像がダウンロードできます。
影画像を用意しましたら、サーバーにアップロードします。
2. HTMLテンプレートの編集
img要素を、影用のspan要素「<span class="shadow"></span>」で括ります。
span要素は、divでもpでも問題ありません。（テンプレートの記述に適合する要素をお使いください）
＜HTML の記述例＞
なお、画像の横にテキストが回り込んで表示されるのを解除するには、
「br clear="all" /」を追加します。
3. CSSの編集
スタイルシートで、画像の位置や枠の色等を調整します。
＜CSS の記述例＞
以上で、枠と影（ドロップシャドウ）がついた画像が完成です。
白い縁（ふち）や外枠を消して、影のみにするには、スタイルシートの「.shadow img」の「padding」「background」「border」等を削除するだけでOKです。
■ カスタマイズ例
＜CSS の記述例＞
以上で、影（ドロップシャドウ）がついた画像が完成です。
参考になりましたら、応援お願いします。
デジカメや携帯カメラで撮った写真を、そのまま貼り付けただけでは、デザイン的に何となく寂しく感じることはありませんか？ そのような場合には、是非、お試しください。
■ カスタマイズ例
画像に影をつけるには
CSSで画像に影（ドロップシャドウ）を付けるには、
1.画像と影画像を用意します。
2.画像の後ろに、影画像を背景画像として重ねます。
3.そして、前の画像を左上の方向にずらすことで、ドロップシャドウの効果を実現することができます
画像に枠や影をつける
では、具体的に、画像に影（ドロップシャドウ）を付けるカスタマイズ方法を説明します。
1. 影の画像を作成する
まず、photoshop
などの画像処理ソフトを使って影画像を作成します。Photoshopの場合でしたら、長方形ツールで、長方形を作成し、レイヤー効果の「ドロップシャドウ」を利用すると、思い通りの影画像が簡単に作成できます。
■ サンプル素材
下記のリンクを右クリックして[対象をファイルに保存]を選択するとサンプル画像がダウンロードできます。
- 影画像（画像背景用）
影画像を用意しましたら、サーバーにアップロードします。
2. HTMLテンプレートの編集
img要素を、影用のspan要素「<span class="shadow"></span>」で括ります。
span要素は、divでもpでも問題ありません。（テンプレートの記述に適合する要素をお使いください）
＜HTML の記述例＞
<span class="shadow"><img src="画像URL" alt="代替テキスト" /></span><br clear="all" />
なお、画像の横にテキストが回り込んで表示されるのを解除するには、
「br clear="all" /」を追加します。
3. CSSの編集
スタイルシートで、画像の位置や枠の色等を調整します。
＜CSS の記述例＞
.shadow {
margin: 0 0 0 5px;
background: url(影画像URL) right bottom;
float: left;
}
.shadow img {
position: relative;
left: -5px;
top: -5px;
padding: 5px;
background: #ffffff;
border: 1px solid #999999;
}
margin: 0 0 0 5px;
background: url(影画像URL) right bottom;
float: left;
}
.shadow img {
position: relative;
left: -5px;
top: -5px;
padding: 5px;
background: #ffffff;
border: 1px solid #999999;
}
以上で、枠と影（ドロップシャドウ）がついた画像が完成です。
画像に影をつける
白い縁（ふち）や外枠を消して、影のみにするには、スタイルシートの「.shadow img」の「padding」「background」「border」等を削除するだけでOKです。
■ カスタマイズ例
＜CSS の記述例＞
.shadow img {
position: relative;
left: -5px;
top: -5px;
}
position: relative;
left: -5px;
top: -5px;
}
以上で、影（ドロップシャドウ）がついた画像が完成です。
参考になりましたら、応援お願いします。
パーマリンク
| コメント (0)
| トラックバック (0)
はてなブックマークに追加
|
2007年3月25日
レイアウトの外枠に影をつける
今回は、「当ブログのように、レイアウトの外枠（両端）に影をつけたい」というご質問が、掲示板に寄せられましたので、説明します。
■ カスタマイズ例
まず、どのようにして、ブログの外枠に影（ドロップシャドウ）をつけているのか説明します。とはいっても、下のような影画像を作成して、単に背景画像にしているだけです＾＾
ブログ全体のレイアウト枠の横幅800px に、左右の影部分の15pxずつを追加した、横幅830pxの画像を、背景画像として、縦方向に繰り返し表示しています。
当ブログでは、ブログ全体のレイアウト枠（div id="container"）を囲むように、影背景用のdiv要素（div id="outer"）を追加して、そこにスタイルシートで影画像を指定しています。
では、具体的に、ブログの外枠に影（ドロップシャドウ）を付けるカスタマイズ方法を説明します。
1. 影の画像を作成する
まず、photoshopなどの画像処理ソフトを使って影画像を作成します。
Photoshopの場合でしたら、長方形ツールで、長方形（横：ブログ全体の横幅、縦：1px）を作成し、レイヤー効果の「光彩（外側）」でグラデーションやサイズを調整すると、思い通りの影画像が簡単に作成できます。
■ サンプル素材
下記のリンクを右クリックして[対象をファイルに保存]を選択するとサンプル画像がダウンロードできます。
横：830px [ブログ全体幅：800px、影（左）：15px、影（右）：15px]
縦：1px
2. HTMLテンプレートの編集
影画像を配置するdiv要素「<div id="outer"> </div>」を追加します。
例えば、当ブログのような固定幅レイアウトの場合でしたら、
ブログ全体のレイアウト枠「<div id="container"> </div>」を囲むように追加します。
＜HTML の記述例＞
3. CSSの編集
あとは、スタイルシートで、影画像の位置を調整すれば完成です。
＜CSS の記述例＞
参考になりましたら、応援お願いします。
■ カスタマイズ例
レイアウト枠に影をつけるには
まず、どのようにして、ブログの外枠に影（ドロップシャドウ）をつけているのか説明します。とはいっても、下のような影画像を作成して、単に背景画像にしているだけです＾＾
 |
ブログ全体のレイアウト枠の横幅800px に、左右の影部分の15pxずつを追加した、横幅830pxの画像を、背景画像として、縦方向に繰り返し表示しています。
当ブログでは、ブログ全体のレイアウト枠（div id="container"）を囲むように、影背景用のdiv要素（div id="outer"）を追加して、そこにスタイルシートで影画像を指定しています。
レイアウト枠に影をつける（固定レイアウト）
では、具体的に、ブログの外枠に影（ドロップシャドウ）を付けるカスタマイズ方法を説明します。
1. 影の画像を作成する
まず、photoshop
などの画像処理ソフトを使って影画像を作成します。Photoshopの場合でしたら、長方形ツールで、長方形（横：ブログ全体の横幅、縦：1px）を作成し、レイヤー効果の「光彩（外側）」でグラデーションやサイズを調整すると、思い通りの影画像が簡単に作成できます。
■ サンプル素材
下記のリンクを右クリックして[対象をファイルに保存]を選択するとサンプル画像がダウンロードできます。
横：830px [ブログ全体幅：800px、影（左）：15px、影（右）：15px]
縦：1px
2. HTMLテンプレートの編集
影画像を配置するdiv要素「<div id="outer"> </div>」を追加します。
例えば、当ブログのような固定幅レイアウトの場合でしたら、
ブログ全体のレイアウト枠「<div id="container"> </div>」を囲むように追加します。
＜HTML の記述例＞
<div id="outer">
<div id="container">
（中略）
</div>
</div>
<div id="container">
（中略）
</div>
</div>
3. CSSの編集
あとは、スタイルシートで、影画像の位置を調整すれば完成です。
＜CSS の記述例＞
#outer {
margin: 0 auto;
width: 830px;
background: url(画像URL) repeat-y center top;
}
margin: 0 auto;
width: 830px;
background: url(画像URL) repeat-y center top;
}
参考になりましたら、応援お願いします。
パーマリンク
| コメント (3)
| トラックバック (1)
はてなブックマークに追加
|
2005年9月 9日
画像を利用した枠の作成（CSSヴァージョン）
今回は、「画像を利用した枠の作成方法（CSSヴァージョン）」について説明します。
画像を利用すると、下の完成サンプルのように、角が丸い枠で囲むことができます。今回は、CSSを利用して作成する方法を説明します。
■ 完成サンプル
1．枠の画像を作成する
まず、描画ソフトなどを使って枠を作成します。
2．画像を分割する
作成した画像枠を下記のように3分割します。
3．CSSを編集する
スタイルシートで、上記で作成した画像を背景に指定します。
＜記述例＞
画像URL、横幅、高さは、使用する画像に応じて、書き換えてください。
4．HTMLを編集する
HTMLファイルに、下記のような記述を追加します。
＜記述例＞
中央部分にテキスト等を書き込むと完成です。
以上、画像を利用した枠の作成方法（CSS ヴァージョン）を説明しました。
参考になりましたら、1クリックの応援お願いします。
画像を利用すると、下の完成サンプルのように、角が丸い枠で囲むことができます。今回は、CSSを利用して作成する方法を説明します。
■ 完成サンプル
 |
 |
|||||
|
||||||
 |
 |
| 画像を利用した枠の作成方法（CSS ver.） |
1．枠の画像を作成する
まず、描画ソフトなどを使って枠を作成します。
|
|
|
|
|
2．画像を分割する
作成した画像枠を下記のように3分割します。
|
|||||
|
|
|||||
|
|||||
3．CSSを編集する
スタイルシートで、上記で作成した画像を背景に指定します。
＜記述例＞
| .boxtop{ background:url(画像URL) top left no-repeat; margin-top:0px; height:xxpx; } .boxmiddle{ width:xxxpx; background:url(画像URL) #ffcc99 repeat-y; } .boxbottom{ background:url(画像URL) bottom left no-repeat; margin-bottom:0px; height:xxpx; } |
画像URL、横幅、高さは、使用する画像に応じて、書き換えてください。
4．HTMLを編集する
HTMLファイルに、下記のような記述を追加します。
＜記述例＞
| <div class="boxtop"> </div> <div class="boxmiddle">テキスト</div> <div class="boxbottom"> </div> |
中央部分にテキスト等を書き込むと完成です。
|
|
|
| テキスト |
||
|
|
以上、画像を利用した枠の作成方法（CSS ヴァージョン）を説明しました。
参考になりましたら、1クリックの応援お願いします。
パーマリンク
| コメント (1)
| トラックバック (0)
はてなブックマークに追加
|
2005年9月 8日
画像を利用した枠の作成（テーブルヴァージョン）
今回は、「画像を利用した枠の作成方法（テーブルヴァージョン）」について説明します。
画像を利用すると、下の完成サンプルのように、角が丸い枠で囲むことができます。今回は、テーブルを利用して作成する方法を説明します。
■ 完成サンプル
1．枠の画像を作成する
まず、描画ソフトなどを使って枠を作成します。
2．画像を分割する
作成した画像枠を下記のように分割します。
3．テーブルを作成する
3行×3列のテーブルを作成し、横幅等を設定します。
★テーブルの設定
・横幅（width）は、任意のサイズを指定してください。
・罫線の幅（cellspacing）は、「0」にします。
・セル内の余白（cellpadding）は、「0」にします。
・枠の幅（border）は、「0」にします。
・各角（1、3、7、9）のセル幅は、「画像の横幅」を指定します。
・上辺、下辺（2、8）のセル幅は、「100%」を指定します。
※説明上、構造が分りやすくするために、枠の幅を「1」にしていますが、「0」にすることで、枠線を非表示にすることができます。
4．角の画像を貼り付ける
各角の画像を、テーブルに貼り付けます。
5．辺の画像を貼り付ける
各辺の画像は、中央セル部分のテキストが増えても自動的に対応できるように、背景画像として利用します。
6．ブログのHTMLファイルにを貼り付ける
完成したテーブルタグを、ブログのHTMLファイルに貼り付けます。
中央のセル部分に表示させたいテキスト等を書き込むと完成です。
＜記述例＞
表の横幅、セルの横幅・高さ、画像の横幅・高さ、ファイル名は、使用する画像に応じて、書き換えてくださいね。
次回は、画像を利用した枠の作成（CSSヴァージョン）です。
ブログランキングに参加中です。応援お願いします。
画像を利用すると、下の完成サンプルのように、角が丸い枠で囲むことができます。今回は、テーブルを利用して作成する方法を説明します。
■ 完成サンプル
|
|
|||||
|
||||||
|
|
| 画像を利用した枠の作成方法（テーブル ver.） |
1．枠の画像を作成する
まず、描画ソフトなどを使って枠を作成します。
|
|
|
|
|
2．画像を分割する
作成した画像枠を下記のように分割します。
|
 |
|
 |
 |
|
|
 |
|
3．テーブルを作成する
3行×3列のテーブルを作成し、横幅等を設定します。
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
★テーブルの設定
・横幅（width）は、任意のサイズを指定してください。
・罫線の幅（cellspacing）は、「0」にします。
・セル内の余白（cellpadding）は、「0」にします。
・枠の幅（border）は、「0」にします。
・各角（1、3、7、9）のセル幅は、「画像の横幅」を指定します。
・上辺、下辺（2、8）のセル幅は、「100%」を指定します。
※説明上、構造が分りやすくするために、枠の幅を「1」にしていますが、「0」にすることで、枠線を非表示にすることができます。
4．角の画像を貼り付ける
各角の画像を、テーブルに貼り付けます。
|
|
|
|
|
5．辺の画像を貼り付ける
各辺の画像は、中央セル部分のテキストが増えても自動的に対応できるように、背景画像として利用します。
|
|
|
|
|
|
|
|
|
6．ブログのHTMLファイルにを貼り付ける
完成したテーブルタグを、ブログのHTMLファイルに貼り付けます。
中央のセル部分に表示させたいテキスト等を書き込むと完成です。
|
|
|
| テキスト |
||
|
|
＜記述例＞
| <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">テキスト<br> </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> |
表の横幅、セルの横幅・高さ、画像の横幅・高さ、ファイル名は、使用する画像に応じて、書き換えてくださいね。
次回は、画像を利用した枠の作成（CSSヴァージョン）です。
ブログランキングに参加中です。応援お願いします。
パーマリンク
| コメント (0)
| トラックバック (1)
はてなブックマークに追加
|
2005年9月 7日
画像を利用した枠を作成するには
今回から数回に分けて、「画像を利用した枠の作成方法」について説明していきます。
当ブログのエントリー部分や右サイドメニューを見ていただくと、角が丸い枠で囲まれています。このような枠の作成方法を教えて頂きたいと「掲示板」にて、リクエストがありましたので、お答えしていきます。
まず最初に、画像を利用した枠の作成方法には、下記の２つの方法がありますので、それぞれ説明していきます。
1．テーブルを利用する方法
3行×3列の表を作成し、中央のセル部分は、エントリーなどに利用し、その周りの8つのセル部分に、枠の画像を貼り付けたり、背景画像を指定する方法です。
2．CSSを利用する方法
divタグなどで３つのパーツに分け、スタイルシートで下記のような背景画像を指定する方法です。
テーブルを利用する方法とCSSを利用する方法について、上記で簡単に説明しました。では、実際に、画像を利用した枠で囲むには、どちらの方法で作成したらよいのでしょうか？
それを判断する材料として、テーブルを利用した場合とCSSを利用した場合を比較し、それぞれのメリットとデメリットを挙げていきます。
■ テーブル利用とCSS利用との比較
テーブルの場合は、HTMLタグをメインに使用するため、非常に記述が多くなり、表示速度にも影響があります。
しかし、横幅が違う枠を別に作成する場合、一度画像を作成しておけば、同じ画像を使いまわしすることができます。また、可変幅でも対応可能です。
それに比べ、CSSの場合は、スタイルシートをメインに編集するため、枠をいくつ作成しても、記述は少なくてすみます。
ただし、横幅が違う枠を作成する場合は、その横幅ごとに画像を作成する必要があります。また、可変幅では、背景画像の横幅が固定しているため、適していません。
このように、テーブルとCSSには、それぞれメリットとデメリットがありますが、デザインに関する記述は、できるだけCSSに記述し、HTMLを軽減する方が望ましいとされています。しかし、CSS利用の場合では、可変幅のレイアウト部分では使用することができません。ですので、使用する部分に応じて、使い分けてみてはいかがでしょうか？
次回からは、それぞれの作成方法を具体的に説明していきます。
ブログランキングに参加中です。応援お願いします。
当ブログのエントリー部分や右サイドメニューを見ていただくと、角が丸い枠で囲まれています。このような枠の作成方法を教えて頂きたいと「掲示板」にて、リクエストがありましたので、お答えしていきます。
| 画像を利用した枠の作成方法 |
まず最初に、画像を利用した枠の作成方法には、下記の２つの方法がありますので、それぞれ説明していきます。
1．テーブルを利用する方法
3行×3列の表を作成し、中央のセル部分は、エントリーなどに利用し、その周りの8つのセル部分に、枠の画像を貼り付けたり、背景画像を指定する方法です。
|
|
|
| サンプル（9分割） | ||
|
|
2．CSSを利用する方法
divタグなどで３つのパーツに分け、スタイルシートで下記のような背景画像を指定する方法です。
|
|||||
|
|||||
|
|||||
| テーブル利用とCSS利用との比較 |
テーブルを利用する方法とCSSを利用する方法について、上記で簡単に説明しました。では、実際に、画像を利用した枠で囲むには、どちらの方法で作成したらよいのでしょうか？
それを判断する材料として、テーブルを利用した場合とCSSを利用した場合を比較し、それぞれのメリットとデメリットを挙げていきます。
■ テーブル利用とCSS利用との比較
| 比較項目 | テーブル利用 | CSS利用 |
| 記述量 | 多い | 少ない |
| 表示速度 | 遅い | 速い |
| 画像数 | 8つ使用 | 3つ使用 |
| 固定幅 | OK | OK |
| 可変幅 | OK | NG |
テーブルの場合は、HTMLタグをメインに使用するため、非常に記述が多くなり、表示速度にも影響があります。
しかし、横幅が違う枠を別に作成する場合、一度画像を作成しておけば、同じ画像を使いまわしすることができます。また、可変幅でも対応可能です。
それに比べ、CSSの場合は、スタイルシートをメインに編集するため、枠をいくつ作成しても、記述は少なくてすみます。
ただし、横幅が違う枠を作成する場合は、その横幅ごとに画像を作成する必要があります。また、可変幅では、背景画像の横幅が固定しているため、適していません。
このように、テーブルとCSSには、それぞれメリットとデメリットがありますが、デザインに関する記述は、できるだけCSSに記述し、HTMLを軽減する方が望ましいとされています。しかし、CSS利用の場合では、可変幅のレイアウト部分では使用することができません。ですので、使用する部分に応じて、使い分けてみてはいかがでしょうか？
次回からは、それぞれの作成方法を具体的に説明していきます。
|
|
|||||
|
||||||
|
|
ブログランキングに参加中です。応援お願いします。
パーマリンク
| コメント (0)
| トラックバック (0)
はてなブックマークに追加
|
2005年8月21日
リスト画像のずれを修正するには
リストマークに画像を使用した際に、画像がずれてしまうという経験はありませんか？今回は、リスト画像のずれを修正する方法について説明します。
リストマークに画像を使用する際に、下記のようにスタイルシートの 「 li 」内でlist-style-imageプロパティを用いて画像指定すると、どうしても画像とテキストが一直線上に並ばずに、画像がずれて表示されてしまいます。
<記述例>
このような画像のずれを修正するには、背景画像で指定する方法に変更すると、画像位置の微調整が可能になります。
背景画像を指定するには、background-image プロパティを使用します。
＜スタイルシートの記述例＞
・background-image : url("画像のパス");
リスト画像のURLを指定します。
・background-repeat: no-repeat;
画像の並び方の指定： 繰り返しなし
・background-position: 5px 2px;
画像の表示位置： x軸（横方向） y軸（縦方向）
・padding-left: 20px;
左側の余白
<当ブログでの記述>
<表示例>
以上、リスト画像のずれを修正する方法について説明しました。
なお、当ブログで使用しているリスト画像は、0円のWEB素材屋さんで無料配布されている素材を使用させて頂いています。他にも素敵な素材がたくさんあります＾＾
ブログランキングに参加中です。応援お願いします。
| リスト画像のずれを修正するには |
リストマークに画像を使用する際に、下記のようにスタイルシートの 「 li 」内でlist-style-imageプロパティを用いて画像指定すると、どうしても画像とテキストが一直線上に並ばずに、画像がずれて表示されてしまいます。
<記述例>
| li { list-style-image: url((http://blog.info-rich.jp/img/ya_migi2.gif); } |
このような画像のずれを修正するには、背景画像で指定する方法に変更すると、画像位置の微調整が可能になります。
| 背景画像の指定 ： background-image |
背景画像を指定するには、background-image プロパティを使用します。
＜スタイルシートの記述例＞
| li { background-image : url("画像のパス"); background-repeat: no-repeat; background-position: 5px 2px; padding-left: 20px; } |
・background-image : url("画像のパス");
リスト画像のURLを指定します。
・background-repeat: no-repeat;
画像の並び方の指定： 繰り返しなし
・background-position: 5px 2px;
画像の表示位置： x軸（横方向） y軸（縦方向）
・padding-left: 20px;
左側の余白
<当ブログでの記述>
| li { background-image: url(http://blog.info-rich.jp/img/ya_migi2.gif); background-repeat: no-repeat; list-style-type: none; background-position: left 3px; padding-left: 20px; margin: 1px 0px; line-height: 150%; text-align: left; } |
<表示例>
以上、リスト画像のずれを修正する方法について説明しました。
なお、当ブログで使用しているリスト画像は、0円のWEB素材屋さんで無料配布されている素材を使用させて頂いています。他にも素敵な素材がたくさんあります＾＾
ブログランキングに参加中です。応援お願いします。
パーマリンク
| コメント (0)
| トラックバック (0)
はてなブックマークに追加
|
2005年7月13日
リンク先の説明を表示するには
今回は、リンク文字にカーソルを重ねると、説明文を表示するカスタマイズ方法について説明します。実際にリンク文字にマウスカーソルを重ねてもらうと、どんなものかわかりやすいと思います。→
TOP
■ ＨＴＭＬの編集
リンク先の説明を表示するには、HTML（メインページ、カテゴリー・個別・日付アーカイブなど）を編集します。
■ リンク先の説明を表示するには
リンク先の説明を表示するには、<a>タグに「title」属性を追加し、表示内容を指定します。文字数が多い場合は、適当に折り返されて数行に渡って表示されます。
< 記述例 >
< 表示例 >
上記のリンク文字にカーソルを重ねると、説明が表示されます。
以上、リンク先の説明を表示する方法について説明しました。とっても簡単ですので、試してくださいね。
ブログランキングに参加中です。応援お願いします。
| リンク先の説明を表示するには |
■ ＨＴＭＬの編集
リンク先の説明を表示するには、HTML（メインページ、カテゴリー・個別・日付アーカイブなど）を編集します。
| リンク内容の指定 ： title属性 |
■ リンク先の説明を表示するには
リンク先の説明を表示するには、<a>タグに「title」属性を追加し、表示内容を指定します。文字数が多い場合は、適当に折り返されて数行に渡って表示されます。
< 記述例 >
| <a href="http://blog.info-rich.jp/" title="トップページに移動します">TOP</a> |
< 表示例 >
| TOP |
上記のリンク文字にカーソルを重ねると、説明が表示されます。
以上、リンク先の説明を表示する方法について説明しました。とっても簡単ですので、試してくださいね。
ブログランキングに参加中です。応援お願いします。
パーマリンク
| コメント (0)
| トラックバック (0)
はてなブックマークに追加
|
2005年6月30日
スペースで文字間隔を調節してはいけない理由
見出しなどで、「文字と文字の間隔を広げてバランスよく見せたい」と思われたことはありませんか？その場合、文字と文字の間にスペースを挿入することで調節している方もいるのではないでしょうか？しかし、この方法はあまり望ましい方法とは言えません。なぜだかお分かりでしょうか？
今回は、スペースで文字間隔を調節してはいけない理由と、ではどうやって文字間隔を調節するのか、そのカスタマイズ方法を説明します。
ワープロソフトなどを使用している場合、文字と文字の間にスペースを挿入して文字間隔を広げることは、よくあることだと思います。ブログでも同じようにスペースで調節したくなる方も多いでしょう。しかし、この方法には以下のような問題点があります。
1. 検索エンジンでヒットされなくなる
2. 音声ブラウザの読み上げがおかしくなる
3. 必ずしも望み通りの間隔が開くとは限らない
理由はお分かりでしょうか？
では、それぞれの理由を説明していきます。
■ 検索エンジンでヒットされなくなる
ブログが検索エンジンでヒットされないというのは非常に問題ですね。
特に、ブログタイトルや記事のタイトルが検索エンジンでヒットされないというのはかなりの問題です。
なぜ、検索エンジンでヒットされないかと言いますと、例えば、「文字間隔の調整」という記事のタイトルを、文字間隔を広げるために、スペースを挿入して、「文 字 間 隔 の 調 整」と記述したとします。
そうすると、検索エンジンで「文字間隔」というキーワードで検索しても、そのページ上に存在するのは、「文」「字」「間」「隔」という独立した文字で、「文字間隔」という単語はどこにも存在しないため、「文字間隔の調整」という記事タイトルは「文字間隔」という単語ではヒットされなくなります。
■ 音声ブラウザの読み上げがおかしくなる
上記と同じように、「文字間隔の調整」を、「文 字 間 隔 の 調 整」と記述したとします。そうすると、音声ブラウザは、「 もじかんかくのちょうせい 」とは読まず、「 ぶん・じ・あいだ・かく・の・ちょう・せい 」と読んでしまいます。
この理由は、半角スペースで単語が分断されてしまったために、「単語」と認識できず、独立した1つの文字としてそのまま読んでしまうからです。
■ 必ずしも望み通りの間隔が開くとは限らない
上記と同じように、「文字間隔の調整」を、「文 字 間 隔 の 調 整」と記述したとします。
しかし、「半角スペース」や「全角スペース」がどれくらいの横幅になるのかは、フォントサイズの調整やアクセス環境によって異なります。
つまり、スペースで調節したとしても、自分のデザイン通りに見えるのは、自分の使っている環境のみである可能性もあるということです。
これでは、「見やすくする」ために広げたのに、逆に見にくくなってしまう環境も存在するかも知れないことになります。
それでは、どのようにして文字間隔を調整すればよいのでしょうか？
それは、スタイルシートでletter-spacingというプロパティを利用することで解決します。
文字間隔の指定を指定するには、letter-spacing というプロパティを使用します。
＜スタイルシートの記述例＞
上記の場合、文字間隔は「letter-spacing: .3em;」と指定されています。この「.3em」という記述を変更することで、文字間隔を変更することができます。
文字間隔の指定方法には、「3px」のように絶対サイズで指定する方法と、 「0.3em」のように相対サイズで指定する方法があります。
■ 絶対サイズで指定
< スタイルシートの記述例 >
文字間隔が、3ピクセル（px）になります。
< 表示例 >
■ 相対サイズで指定
< スタイルシートの記述例 >
文字間隔が、0.3文字分（em）になります。
< 表示例 >
絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。
では、文字間隔のカスタマイズ方法について、ブログ別に説明します。カスタマイズをする場合は、利用しているブログを選択してくださいね。
以上、文字間隔の調整、指定方法について説明しました。
是非、参考にして、読みやすい文字間隔にカスタマイズしてください。
ブログランキングに参加中です。応援お願いします。
今回は、スペースで文字間隔を調節してはいけない理由と、ではどうやって文字間隔を調節するのか、そのカスタマイズ方法を説明します。
| スペースで文字間隔を調整してはいけない理由 |
ワープロソフトなどを使用している場合、文字と文字の間にスペースを挿入して文字間隔を広げることは、よくあることだと思います。ブログでも同じようにスペースで調節したくなる方も多いでしょう。しかし、この方法には以下のような問題点があります。
1. 検索エンジンでヒットされなくなる
2. 音声ブラウザの読み上げがおかしくなる
3. 必ずしも望み通りの間隔が開くとは限らない
理由はお分かりでしょうか？
では、それぞれの理由を説明していきます。
■ 検索エンジンでヒットされなくなる
ブログが検索エンジンでヒットされないというのは非常に問題ですね。
特に、ブログタイトルや記事のタイトルが検索エンジンでヒットされないというのはかなりの問題です。
なぜ、検索エンジンでヒットされないかと言いますと、例えば、「文字間隔の調整」という記事のタイトルを、文字間隔を広げるために、スペースを挿入して、「文 字 間 隔 の 調 整」と記述したとします。
そうすると、検索エンジンで「文字間隔」というキーワードで検索しても、そのページ上に存在するのは、「文」「字」「間」「隔」という独立した文字で、「文字間隔」という単語はどこにも存在しないため、「文字間隔の調整」という記事タイトルは「文字間隔」という単語ではヒットされなくなります。
■ 音声ブラウザの読み上げがおかしくなる
上記と同じように、「文字間隔の調整」を、「文 字 間 隔 の 調 整」と記述したとします。そうすると、音声ブラウザは、「 もじかんかくのちょうせい 」とは読まず、「 ぶん・じ・あいだ・かく・の・ちょう・せい 」と読んでしまいます。
この理由は、半角スペースで単語が分断されてしまったために、「単語」と認識できず、独立した1つの文字としてそのまま読んでしまうからです。
■ 必ずしも望み通りの間隔が開くとは限らない
上記と同じように、「文字間隔の調整」を、「文 字 間 隔 の 調 整」と記述したとします。
しかし、「半角スペース」や「全角スペース」がどれくらいの横幅になるのかは、フォントサイズの調整やアクセス環境によって異なります。
つまり、スペースで調節したとしても、自分のデザイン通りに見えるのは、自分の使っている環境のみである可能性もあるということです。
これでは、「見やすくする」ために広げたのに、逆に見にくくなってしまう環境も存在するかも知れないことになります。
それでは、どのようにして文字間隔を調整すればよいのでしょうか？
それは、スタイルシートでletter-spacingというプロパティを利用することで解決します。
| 文字間隔の指定：letter-spacing |
文字間隔の指定を指定するには、letter-spacing というプロパティを使用します。
＜スタイルシートの記述例＞
| #calendar caption { letter-spacing: .3em; } |
上記の場合、文字間隔は「letter-spacing: .3em;」と指定されています。この「.3em」という記述を変更することで、文字間隔を変更することができます。
| 文字間隔の指定方法 |
文字間隔の指定方法には、「3px」のように絶対サイズで指定する方法と、 「0.3em」のように相対サイズで指定する方法があります。
■ 絶対サイズで指定
< スタイルシートの記述例 >
| letter-spacing: .3px; |
文字間隔が、3ピクセル（px）になります。
< 表示例 >
| 2005年06月 |
■ 相対サイズで指定
< スタイルシートの記述例 >
| letter-spacing: .0.3em; |
文字間隔が、0.3文字分（em）になります。
< 表示例 >
| 2005年06月 |
| 絶対サイズ・相対サイズの単位 |
絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。
| 絶対サイズ | 意味 |
| in | インチ。1in = 25.4mm |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント。1pt = 1/72in |
| pc | パイカ。1pc = 12pt |
| px | ピクセル。表示上の1ドット幅 （※正確にはデバイス依存の相対サイズ） |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ （英字の「M」の高さを基準とした大きさ） |
| ex | 基準書体の文字の高さ （英字の「x」の高さを基準とした大きさ） |
| % | 基準書体のサイズに対する百分率 |
| ブログ別！カスタマイズ方法 |
では、文字間隔のカスタマイズ方法について、ブログ別に説明します。カスタマイズをする場合は、利用しているブログを選択してくださいね。
| [MovableType] | → 文字間隔の調整 |
以上、文字間隔の調整、指定方法について説明しました。
是非、参考にして、読みやすい文字間隔にカスタマイズしてください。
ブログランキングに参加中です。応援お願いします。
パーマリンク
| コメント (0)
| トラックバック (0)
はてなブックマークに追加
|
行間を広げるには
今回は、「行間の指定方法」について説明します。
行間を広げることによって、非常に読みやすくなりますので、是非、適切な行間を空けるようにカスタマイズしましょう。
行間（行の高さ）を指定するには、line-height というプロパティを使用します。
＜スタイルシートの記述例＞
上記の場合、行間は「line-height: 150%;」と指定されています。この「150%」という記述を変更することで、行間を変更することができます。
行間の指定方法には、「15pt」のように絶対サイズで指定する方法、 「150%」のように相対サイズで指定する方法、「1.5」のように数値のみで指定する方法があります。
■ 絶対サイズで指定
文字サイズが 10pt のときに、行の高さを 15pt に指定すると、行間は 5pt になります。
（行間 ＝ 行の高さ － 文字サイズ）
■ 相対サイズで指定
文字サイズが 10pt のときに、行の高さを 150% （文字サイズ×1.5倍）に指定すると、行間は 5pt になります。
（行間 ＝ 行の高さ － 文字サイズ）
■ 数値のみ（単位なし）で指定
文字サイズが 10pt のときに、行の高さを 1.5 （文字サイズ×1.5倍）に指定すると、行間は 5pt になります。
（行間 ＝ 行の高さ － 文字サイズ）
絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。
では、行間のカスタマイズ方法について、ブログ別に説明します。カスタマイズをする場合は、利用しているブログを選択してくださいね。
以上、「行間の指定方法」について説明しました。
是非、参考にして、読みやすい行間にカスタマイズしてください。
[次の講義へ] → スペースで文字間隔を調節してはいけない理由
参考になりましたら、1クリックの応援お願いします。
行間を広げることによって、非常に読みやすくなりますので、是非、適切な行間を空けるようにカスタマイズしましょう。
行間（行の高さ）の指定：line-height
行間（行の高さ）を指定するには、line-height というプロパティを使用します。
＜スタイルシートの記述例＞
| .content p { line-height: 150%; } |
上記の場合、行間は「line-height: 150%;」と指定されています。この「150%」という記述を変更することで、行間を変更することができます。
行間（行の高さ）の指定方法
行間の指定方法には、「15pt」のように絶対サイズで指定する方法、 「150%」のように相対サイズで指定する方法、「1.5」のように数値のみで指定する方法があります。
■ 絶対サイズで指定
| line-height: 15pt; |
文字サイズが 10pt のときに、行の高さを 15pt に指定すると、行間は 5pt になります。
（行間 ＝ 行の高さ － 文字サイズ）
■ 相対サイズで指定
| line-height: 150%; |
文字サイズが 10pt のときに、行の高さを 150% （文字サイズ×1.5倍）に指定すると、行間は 5pt になります。
（行間 ＝ 行の高さ － 文字サイズ）
■ 数値のみ（単位なし）で指定
| line-height: 1.5; |
文字サイズが 10pt のときに、行の高さを 1.5 （文字サイズ×1.5倍）に指定すると、行間は 5pt になります。
（行間 ＝ 行の高さ － 文字サイズ）
絶対サイズ・相対サイズの単位
絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。
| 絶対サイズ | 意味 |
| in | インチ。1in = 25.4mm |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント。1pt = 1/72in |
| pc | パイカ。1pc = 12pt |
| px | ピクセル。表示上の1ドット幅 （※正確にはデバイス依存の相対サイズ） |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ （英字の「M」の高さを基準とした大きさ） |
| ex | 基準書体の文字の高さ （英字の「x」の高さを基準とした大きさ） |
| % | 基準書体のサイズに対する百分率 |
ブログ別！カスタマイズ方法
では、行間のカスタマイズ方法について、ブログ別に説明します。カスタマイズをする場合は、利用しているブログを選択してくださいね。
| [MovableType] | → 行間の変更 |
| [livdoor Blog] | → 行間の変更（livedoorBlog編） |
| [FC2 ブログ] | → 行間の変更（FC2ブログ編） |
以上、「行間の指定方法」について説明しました。
是非、参考にして、読みやすい行間にカスタマイズしてください。
[次の講義へ] → スペースで文字間隔を調節してはいけない理由
参考になりましたら、1クリックの応援お願いします。
パーマリンク
| コメント (0)
| トラックバック (0)
はてなブックマークに追加
|
読みやすい文字色にするには