カスタマイズ
|
■Javascript ├ ランダム表示の活用 ├ リンクのURLを隠す ■SEO対策 ├ SEOスパムについて ├ 被リンク数のチェック ├ 被リンクされるときの文字 ├ metaタグのkeywords |
■CSS ├ リストのマークを変更する ├ リストのマークを画像に変更する ├ リンクの挙動のカスタマイズ ├ 行間の高さを変更する ├ スクロールバーの見た目を変える ├ ドリコムの表示をCSSで変更する |
タイトルの通り、申請していたテンプレートが承認されました。
さっそくダウンロードして頂いているみたいです。
今後の予定は、黒ベースのテンプレートもリリースしようかと。
さっそくダウンロードして頂いているみたいです。
今後の予定は、黒ベースのテンプレートもリリースしようかと。
[ 2007/10/30 ] | 未分類
「お気に入りに追加」ボタンの作成の仕方を解説します。
下枠にHTMLを記述します。サイトURLとサイト名のところはご自分のHPのモノに置き換えてください。
以下のようなボタンが作成できます
下枠にHTMLを記述します。サイトURLとサイト名のところはご自分のHPのモノに置き換えてください。
<form>
<input type="button"
onclick="window.external.addFavorite('サイトURL','サイト名')"
value="お気に入りに追加">
</form>>
[ 2007/10/27 ] | HTML
スクロールバーの色をCSSで変更する方法を解説します。
指定できるプロパティは8個あります。
但しscrollbar-base-colorは、他のプロパティで指定されなかった場合に基本となる色を指定します。
具体例を見ていただいた方が早いので、まずは下枠のCSSの記述を見てください。
このように指定した場合、下のようなスクロールバーになります。
各プロパティの色を変えていろいろ試してみてください。
指定できるプロパティは8個あります。
但しscrollbar-base-colorは、他のプロパティで指定されなかった場合に基本となる色を指定します。
具体例を見ていただいた方が早いので、まずは下枠のCSSの記述を見てください。
BODY{
scrollbar-base-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-arrow-color:#9999FF;
scrollbar-3dlight-color:#9999FF;
scrollbar-darkshadow-color:#9999FF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
}
このように指定した場合、下のようなスクロールバーになります。
各プロパティの色を変えていろいろ試してみてください。
[ 2007/10/19 ] | カスタマイズ
行間が狭すぎると文章が読みにくく感じる場合があります。
そんなときは行間を広げましょう。
記述の仕方は、line-heightプロパティで行の間隔を指定します。
また、ここで指定できる行の間隔とは、行の上のラインから次の行の上のラインまでのことです。
■数値で指定する
単位をつけずに数値だけで指定した場合、行間はフォントサイズに数値を書けたものになります。
■pxやemの単位で指定する
指定した単位が行の間隔になります。
■％で指定する
フォントサイズに対する比率が行の間隔になります。
下枠の中に例を示します。
そんなときは行間を広げましょう。
記述の仕方は、line-heightプロパティで行の間隔を指定します。
また、ここで指定できる行の間隔とは、行の上のラインから次の行の上のラインまでのことです。
■数値で指定する
単位をつけずに数値だけで指定した場合、行間はフォントサイズに数値を書けたものになります。
■pxやemの単位で指定する
指定した単位が行の間隔になります。
■％で指定する
フォントサイズに対する比率が行の間隔になります。
下枠の中に例を示します。
line-height:1で指定した場合
あいうえお
かきくけこ
さしすせそ
かきくけこ
さしすせそ
line-height:2で指定した場合
あいうえお
かきくけこ
さしすせそ
かきくけこ
さしすせそ
line-height:5pxで指定した場合
あいうえお
かきくけこ
さしすせそ
かきくけこ
さしすせそ
line-height:150%で指定した場合
あいうえお
かきくけこ
さしすせそ
かきくけこ
さしすせそ
[ 2007/10/18 ] | カスタマイズ
リンクの色・修飾・挙動のカスタマイズを解説します。
具体例を挙げて解説したほうが早いので、まずは下枠の中を見てください。
通常のリンク／実行中のリンク／訪問済のリンク／マウスオーバー中のリンク 以上、４つの場合のリンクの色や挙動を記述できます。
■色の指定
color:#0000FF; /* リンクの色を指定 */
■リンクの修飾
■マウスオーバー時のリンクの移動
position:relative; top:1px; left:1px; /* リンクの相対的移動 */
下枠のようにCSSを記述した場合
マウスを下のリンクに乗せて挙動を確かめてみてください。
具体例を挙げて解説したほうが早いので、まずは下枠の中を見てください。
通常のリンク／実行中のリンク／訪問済のリンク／マウスオーバー中のリンク 以上、４つの場合のリンクの色や挙動を記述できます。
a:link {......} /* 通常 */
a:active {......} /* 実行中のリンク */
a:visited {......} /* 訪問済のリンク */
a:hover {......} /* マウスオーバー中のリンク*/
■色の指定
color:#0000FF; /* リンクの色を指定 */
■リンクの修飾
text-decoration:none; /* 装飾無し */ text-decoration:underline; /* 下線 */ text-decoration:overline; /* 上線 */ text-decoration:line-through; /* 取り消し線 */
■マウスオーバー時のリンクの移動
position:relative; top:1px; left:1px; /* リンクの相対的移動 */
下枠のようにCSSを記述した場合
a:link {color:#33FF33;text-decoration:none;}
a:active {color:#00FF00;text-decoration:none;}
a:visited {color:#33FF33;text-decoration:none;}
a:hover {
color:#FF0000;
text-decoration:underline overline; /* 上下線 */
position:relative;
top:1px;
left:1px;
}
マウスを下のリンクに乗せて挙動を確かめてみてください。
[ 2007/10/17 ] | カスタマイズ
プロフィール
Author:てんちゃん７７７
ＦＣ２ブログへようこそ！
最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
ブログランキング
友達申請フォーム
