オリジナルスキンCSSの編集 サイドメニュータイトル1
今回はサイドバーにあるメニュータイトル部分をカスタマイズします
簡単なところから・・・
メニューの左についているマークを変更します
マークに使う画像を用意します
←こんなのです
用意が出来たらCSSの最後にコピペします
/*サイトメニュータイトル猫足跡*/
.menu_title{
color:#ff0000;/*タイトル文字色*/
padding:3px 0 3px 16px;/*文字の位置*/
border-bottom:2px dotted #ff0000;/*下線*/
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:3px 5px;/*画像の位置*/
}
padding:3px 0 3px 16px; 上 右 下 左 の順で文字の位置を調整してください
そのままですと画像とメニュテキストがそろいませんので
background-position:3px 5px; 左からの位置 上からの位置 の順で調整します
border-bottom:2px dotted #ff0000; 太さ スタイル 色 の順で指定します
スタイルにはsolid（線）、dashed（破線）、dotted（点線）などがあります
※dotted（点線）の場合太さを2px以上にしないと破線に見えてしまいます
border-top も指定すればこんな感じにもなります
border:2px dotted #ff0000;/*枠線*/ にすると
border:none;/*枠線を消す*/ にすると
http://ameblo.jp/exlink001/ のように右と左のサイドで表示を換えることも出来ます
その場合、.menu_title{ を
#sub_a .menu_title{ あるいは #sub_b .menu_title{ に変更してください
見本サイトの右サイドのように画像を背景につかう・・・・・・つづきます
オリジナルスキンCSSの編集 ヘッド・タイトル3
タレントブログみたいにクリックしたらトップページに戻るようにしちゃおう・・・
ここまではうまく出来ましたか？
タレントブログ目指して画像を作ります
いままで使ってきた画像にタイトルを入れます
画像ソフトを使って文字入れしてもかまいませんし
前回タイトルを入れたブログをプリントスクリーン でコピーして画像にしても出来ます
今回使う画像です（760px×420px） 彼の名前「殿tono!!」ってタイトルつけてみました
別にブログのタイトルと違っていてもかまいません
CSSの最後にコピペしてください
#header{
height:420px;/*画像の縦*/
background-image: url(画像のURL);
background-repeat:no-repeat;/*繰り返さない*/
background-position:center;/*中央に*/
}
#header h1,
#header h2{/*位置の初期化*/
margin:0;
padding:0;
}
#header h1 a{
width:760px;/*画像の横*/
height:420px;/*画像の縦*/
display:block;
position:absolute;
text-indent:-9000px;
text-decoration:none;
}
#header h2{
display:none;/*概要を非表示*/
}
※赤字部分はみなさまの画像に合わせて変更してください
・・・画像の横がスキンの幅より大きい場合はスキンの幅で設定してください
画像の幅800px スキンの幅760px なら width:760px;/*画像の横*/ に
もし・・・クリックする範囲がヘッド画像と大きくずれている場合は
position:absolute;
この１行を削除してみてください
もし・・クリックしたときの点線が気になるようでしたら・・
（IEでは効果はありません・・・・）
#header h1 a{
overflow:hidden;
outline:none;
}
どうでしょうか？
クリックできるようになっていますか？
クリックしてトップページに戻りますか？
※このサイトのようにタイトルを別の画像にしてロールオーバー するには
※何枚かのヘッド画像をランダムで表示 するには
今回でヘッド、タイトル部分のカスタマイズは終了です
わからない場合はコメントください
２枚のヘッド画像を使ってマウスをのせたとき別の画像になるロールオーバーは
CSS タイトル画像のロールオーバー・・・・
CSS タイトル画像のロールオーバー2
自分で画像を作ってみたい方は・・こちらを参考にして下さい
登録しないでも無料で使えるオンラインソフトを使って作り方を説明しています
ヘッド画像を作る2 Pixlr 鉛筆ツール
ヘッド画像を作る3 Pixlr ブラシツール
ヘッド画像を作る4 Pixlr 自動選択ツール(1)
ヘッド画像を作る5 Pixlr 自動選択ツール(2)
ヘッド画像を作る6 Pixlr 写真の修整
ヘッド画像を作る7 Pixlr フィルター・モザイク
ヘッド画像を作る8 Pixlr グラデーション
ヘッド画像を作る9 Pixlr 文字
ヘッド画像を作る10 Pixlr 四角、円、直線
ヘッド画像を作る11 Pixlr レイヤー
ヘッド画像を作る12 Pixlr レイヤーの複写とレイヤースタイル
ヘッド画像を作る13 Pixlr メニュ一覧
ヘッド画像を作る14 Pixlr 実践
オリジナルスキンCSSの編集 ヘッド・タイトル2
ヘッド部分にオリジナル画像を貼り付けたら
画像に合わせてタイトル、概要の位置、サイズ、色の変更です
タイトル(h1)の文字サイズを25px→20px 文字色を#006600→#ffffff（白）表示位置を中央に
概要(h2)の文字サイズを11px→14px 文字色を#000000→#ffffff（白）表示位置を中央に
※位置、サイズ、色、等は下を参考に皆さんの画像に合わせて調整下さい
CSSの最後にコピペ
#header h1,
#header h2{/*位置の初期化*/
margin:0;
padding:0;
}
#header h1{
padding-top:15px;/*表示位置上から15px*/
text-align: center;/*表示位置センター*/
}
#header h1 a,
#header h1{
color:#ffffff;/*文字色*/
font-size:20px;/*文字サイズ*/
}
#header h2{
color:#ffffff;/*文字色*/
font-size:14px;/*文字サイズ*/
text-align: center;/*表示位置センター*/
}
タイトルを25px→20px 文字色を#006600→#ffffff（白）位置を上から370px左から40pxに
概要を11px→14px 文字色を#000000→#ffffff（白）表示位置を左から40pxに
CSSの最後にコピペ
#header h1,
#header h2{/*位置の初期化*/
margin:0;
padding:0;
}
#header h1{
padding :370px 0 0 40px;;/*表示位置上から370px左から40px*/
}
#header h1 a,
#header h1{
color:#ffffff;/*文字色*/
font-size:20px;/*文字サイズ*/
}
#header h2{
color:#ffffff;/*文字色*/
font-size:14px;/*文字サイズ*/
padding-left:40px;/*表示位置左から40px*/
}
※後々を考えて左からの位置をmarginからpaddingに変更しておきます
※この中にfont-familyを指定すれば書体も変更できますが・・・・・
これは見ている方のパソコンにどんなフォントがインストールされているかで
見え方が違ってきます・・・最悪、文字化けも・・・・
それならタイトル文字まで含めて画像にして
タレントブログみたいにクリックしたらトップページに戻るようにしちゃおう・・・って、つづく