プレビューはここをクリック
手持ちの写真を大きくトップ画像として使いたいという人向けに作った右メニュースキンです。
記事部分には、幅600pxまでの、やや大きい画像が貼れるようになってます。
トップ画像には、
850px(横)×450px(縦)にサイズ調整した写真がそのまま使えます。
⇒デフォルトのヒマワリ画像(850×450)
もちろん、トップ画像の色合いに合わせて、ブログ全体の背景色の変更も簡単にできます。
トップ画像の変更の仕方については、初心者にもわかるように解説してあります。↓を読んでね。^^
⇒★自分で撮った写真等をブログのトップ画像として使いたい人へ (初心者向け解説)★
また、基本文字色、リンク文字色など、デフォルトではグレーを基本にしていますが、
こちらもトップ画像に使用した写真に合わせて変えてみると面白いと思います。
6桁の数字またはアルファベット、もしくはその組み合わせからなる、色番号チャートは
Animal Skinのサイドバーにリンクしてあるので、そちらを参照してください。
もちろん、デフォルトのヒマワリ写真のままでお使いいただいてもまったく構いません。^^
トップ画像と背景色を変えた場合のサンプルは
⇒こちらをクリックで見られます。
こちらのトップ画像は
⇒この写真(同じく850×450)
ヒマワリだったトップ画像を入れ替え、さらにBODYの背景色を#940F12にしただけです。
まずは右メニューレイアウト選択からスタートです。
また、このスキンは画像サイズ横幅600PXまで貼れるようにしてあるので...
微調整が必要です。
とはいっても難しいものではありません。^^
この後は普通に↓をコピペしてください。
■「メイン」■ 枠の中をすべてコピーしてHTML編集の「メイン」部分に貼ってください。
■「本文」■ 枠の中をすべてコピーしてHTML編集の「本文」部分に貼ってください。
■メニュー■ (一応「メニュー」部分へのコードを貼っておきますが、ここはもともと書いてあるコードでOKです。つまりここは無視しちゃってOK!)
■CSS編集■ 枠の中をすべてコピーして「CSS編集」部分に貼ってください。
いかがでしょう?
すべてではありませんが、主な部分の色変更が簡単になるよう、説明書きを入れてみました。
説明書きを入れなかった部分にも、6桁の数字が見えると思いますが、
もちろんそれらもすべて変更可能です。
プレビューでは見えないため、いったいどこの色を変えたのかわかりにくい部分もあるので、
その際は実際に改造後のスキンを適用して、その後で見なければなりません。
その場合、改造用のスキンをコピペによりあらかじめ作っておき、それをあれこれ弄るのがいいでしょう。
「元に戻したいのに戻せなくなってしまった」という状況に陥るのを防ぐことができて便利です。
万が一スキン改造に失敗しても、別に保存してある元のスキンに戻せばいいだけですからね。^^
また、記事タイトルの下や、メニューのタイトルそれぞれの下などにある
ボーダーライン(2PX #D5D0CB solidなど)の改造については、
†CrossMoon † さんがとても詳しく説明されてますので、ぜひそちらを参照してください。
⇒BORDER(枠の装飾) by †CrossMoon †
Top▲ | by mari_ca
by animal_skin
| 2009-07-18 03:41
| 右メニュースキン