不思議の国のアリス スキン
画像は全てクリックで拡大します
このスキンを使用したい場合、2コラム右になりますのでご注意下さい
不思議の国のアリス
スキンですピンクをベースにしていますが、全て変更可能です
ここで注意事項
①ブログタイトル挿入をします
ブログの概要は表示されません
タイトルの画像全体でブログトップにリンクされていますので
お好みで文字を挿入してください(対応可)
②メッセージ欄 変更可
私はメッセージ欄に画像を貼り付けて表示させています
デフォルトでは、画像は表示されませんので
画像をご希望される場合はご連絡ください
③文字色(左から) 変更可
全体の文字 #666666
マウスオン時 #FF33cc
一度訪れたリンク #ff9999
リンク色 #ff0066
記事下にうさぎがいます 変更可
＊右上にはデフォルトでamebaの広告が入ります
以下スキン製作に必要な画像です
お使いになられる場合は、必ずダウンロードしてから
自分の画像フォルダにアップロードしてください
大きさ800×200
ぺタボタンはフリースペースに画像でリンクさせています
ヘッダー全体をリンクさせるタグ
CSSをいじらないと、こんな感じになります。
このように元々指定されている大きさで、ブログタイトルが出てきます。
(私のは分かりやすいように大きくしています)
けれども、このヘッダー画像にデフォルトの文字を入れたくない場合
ブログタイトルも手書きで表示させたい場合
ヘッダー全体をリンク指定させます。
以下タグ(訂正しました)
#header {/* ヘッダー全体 */
height: ○○px;/* 横幅 */(＊ヘッダー全体の高さを入れる)
background: no-repeat url(ここにヘッダー画像のURLを入れる) left top;/* 画像繰り返しなし・左上 */
}
#header h1 {/* ブログのタイトル */
margin-top: 0px;/* 外側余白・上 */
}
#header h2 {/* ブログのサブタイトル */
display: none;/* 表示なし */
}
#header h1 a {/* ブログのタイトルのリンク */
text-indent: -9999px;/* テキストの開始位置 */
display: block;/* 表示 */
width: ○○px;/* リンク幅 */(ヘッダー画像の横幅を入れる)
height: ○○px;/* リンク高さ */(ヘッダー画像の高さを入れる)
text-decoration: none;/* リンク装飾 */
margin-top: 0px;/* 外側余白・上 */
}
わたしのブログヘッダーを例にとると
画像の横幅が780px、高さが200px
ですので、青文字部分はwidth：780px height: 200px になります
一番はじめのピンク文字部分
これってどうして挿入するの？と思われるかもしれません
ここでは、ヘッダー画像と記事の始まりの位置を指定しています
(条件は上と同じ高さが200pxの場合)
205pxにすると5px分の間隔が開きますね
300pxにすれば100px分の間隔が開きます
これはプレビューで確認しながら調整してください
＊＊＊
このタグを挿入すると、デフォルトのブログタイトルが消え
ヘッダー画像のみが反映されます。(下図)
ブログ概要も反映されませんが。ヘッダー全体がブログのトップにリンクされましたね。
ここに自分の好きなように文字を入れます。
＊＊＊
このブログで使っている画像編集ソフトは
・JTrim(フリーソフト) http://www.woodybells.com/jtrim.html
基本的な画像編集や文字入れをしています
・SAI http://systemax.jp/ja/sai/
お絵かきソフトなので、手書きでヘッダーを作りたい方にお勧めです
試用期間あり(30日)
フォトショップなどの有料のものまでは使いたくない…という方におすすめです。
画像はダウンロード先の素材屋さんの規約を守って使ってくださいね。
お勧めフリーフォント集 http://www.akibatec.net/freefont/
フリーフォントで見栄えのいいヘッダー画像を作るのも楽しいですよ。