SEO対策 テンプレート

SEO対策済みのテンプレートを配布
カスタマイズ

■Javascript
ランダム表示の活用
リンクのURLを隠す

■SEO対策
SEOスパムについて
被リンク数のチェック
被リンクされるときの文字
metaタグのkeywords
■CSS
リストのマークを変更する
リストのマークを画像に変更する
リンクの挙動のカスタマイズ
行間の高さを変更する
スクロールバーの見た目を変えるドリコムの表示をCSSで変更する

本ブログで使用しているテンプレートを「tm_seo_white」という名前で登録しています。
なるべくシンプルでカスタマイズしやすく作ってありますので、宜しければ使ってみてはいかがでしょうか?

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- ] | スポンサー広告

サイトの文字色を統一する

今回のテーマは初心者向けのCSSの設定です。
当ブログの文字色は少し灰色に近い設定にしています。
これだと少し見にくいという方もいるかもしれませんね。
ブログまたはサイトのCSSに以下の記述を追加してみましょう。

body {
    color:#000000;
}

上記を追加するだけでサイト全体の文字色が黒くなります。
もちろん文字色を赤くしたい場合にも、color:#FF0000;と記述すれば、 文字色は赤く出来ちゃいます。
スポンサーサイト
[ 2009/06/21 ] | カスタマイズ

ドリコムRSSをCSSでカスタマイズ

ドリコムRSSで表示される更新状況の見た目をCSSで変更することができます。
.drecom {
text-align:left;
}
div.drecom br { 
line-height: 0px; 
} 
.drecomrss_blog_list_category { 
font-weight:bold;
margin:10 10 0 0px; 
background: #DDDDFF; 
width:100%;
color:#6666FF;
} 

.drecomrss_blog_list_item { 
padding: 0px; 
font-size: 13px; 
line-height: 130%; 
border-bottom: 1px dotted #CCCCCC; 
} 
.drecomrss_blog_list_powered { 
margin-top: 5px; 
}
CSSに上枠の中に記述されている内容を追加するだけで、下のような表示に変更することができます。
ちなみにドリコムでの表示設定の表示方法を「カテゴリ別新着順」にしています。こうするとカテゴリ別に表示できてカッコいいです。
[ 2007/11/07 ] | カスタマイズ

CSSでブログカスタマイズ スクロールバーの見た目を変える

スクロールバーの色を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 ] | カスタマイズ

CSSでブログのカスタマイズ 行間の幅を変える

行間が狭すぎると文章が読みにくく感じる場合があります。
そんなときは行間を広げましょう。
記述の仕方は、line-heightプロパティで行の間隔を指定します。
また、ここで指定できる行の間隔とは、行の上のラインから次の行の上のラインまでのことです。

■数値で指定する
単位をつけずに数値だけで指定した場合、行間はフォントサイズに数値を書けたものになります。

■pxやemの単位で指定する
指定した単位が行の間隔になります。

■%で指定する
フォントサイズに対する比率が行の間隔になります。

下枠の中に例を示します。
line-height:1で指定した場合
あいうえお
かきくけこ
さしすせそ


line-height:2で指定した場合
あいうえお
かきくけこ
さしすせそ


line-height:5pxで指定した場合
あいうえお
かきくけこ
さしすせそ


line-height:150%で指定した場合
あいうえお
かきくけこ
さしすせそ


[ 2007/10/18 ] | カスタマイズ

CSSでブログのカスタマイズ リンク編

リンクの色・修飾・挙動のカスタマイズを解説します。
具体例を挙げて解説したほうが早いので、まずは下枠の中を見てください。
通常のリンク/実行中のリンク/訪問済のリンク/マウスオーバー中のリンク  以上、4つの場合のリンクの色や挙動を記述できます。

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 ] | カスタマイズ
ブログ内検索

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。