人気ブログランキング | 話題のタグを見る
多忙なため、コメントへのお返しができなくてごめんなさい。温かいコメントは更新の励みです。どうしても解決できない問題がある...という場合に限っての質問箱を設けましたので、よかったらご利用ください。いつもAnimal Skinを愛用してくださってどうもありがとう~♪
Top
「ヒマワリの右メニュースキン」配布 「Sunflower3」 by Animal Skin
「ヒマワリの右メニュースキン」配布 「Sunflower3」 by Animal Skin_f0165338_22204445.jpg

プレビューはここをクリック


手持ちの写真を大きくトップ画像として使いたいという人向けに作った右メニュースキンです。
記事部分には、幅600pxまでの、やや大きい画像が貼れるようになってます。

トップ画像には、850px(横)×450px(縦)にサイズ調整した写真がそのまま使えます。
⇒デフォルトのヒマワリ画像(850×450)
もちろん、トップ画像の色合いに合わせて、ブログ全体の背景色の変更も簡単にできます。

トップ画像の変更の仕方については、初心者にもわかるように解説してあります。↓を読んでね。^^
⇒★自分で撮った写真等をブログのトップ画像として使いたい人へ (初心者向け解説)★

また、基本文字色、リンク文字色など、デフォルトではグレーを基本にしていますが、
こちらもトップ画像に使用した写真に合わせて変えてみると面白いと思います。

6桁の数字またはアルファベット、もしくはその組み合わせからなる、色番号チャートは
Animal Skinのサイドバーにリンクしてあるので、そちらを参照してください。

もちろん、デフォルトのヒマワリ写真のままでお使いいただいてもまったく構いません。^^

トップ画像と背景色を変えた場合のサンプルは⇒こちらをクリックで見られます。

こちらのトップ画像は⇒この写真(同じく850×450)
ヒマワリだったトップ画像を入れ替え、さらにBODYの背景色を#940F12にしただけです。





まずは右メニューレイアウト選択からスタートです。


新しくスキン作成」をクリックした後に、B. 2列のレイアウト-右側にメニューを選択してください。

「ヒマワリの右メニュースキン」配布 「Sunflower3」 by Animal Skin_f0165338_682949.jpg


ここで間違って左メニューレイアウトを選択してしまうと、コードを打ち込むことはできるのですが、実際にスキンを使うときに、メニュー部分が表示されなくなります。
なので、気をつけて忘れずに右メニューレイアウトを選択してね。


ここは特に間違えることもないと思うのですが念のため...
右メニューなので当然ながら、本文とメニューが左右入れ替わっています。

「メイン」の位置はそのままです。
「ヒマワリの右メニュースキン」配布 「Sunflower3」 by Animal Skin_f0165338_655272.jpg

「本文」は左側になっています。
「本文」の配布コードはここにコピペしてね。
本文と書かれているので間違えることはないと思います。
「ヒマワリの右メニュースキン」配布 「Sunflower3」 by Animal Skin_f0165338_6105372.jpg

「メニュー」は向かって右側です。
「メニュー」の配布コードはここに...といっても、Animal Skinで配布しているスキンは、ここの部分をいじらなくてOKなものがほとんどなので心配はいりませんが。
「ヒマワリの右メニュースキン」配布 「Sunflower3」 by Animal Skin_f0165338_6115052.jpg


また、このスキンは画像サイズ横幅600PXまで貼れるようにしてあるので...
微調整が必要です。

とはいっても難しいものではありません。^^


右メニューレイアウトを選択した後、スキン変更ページのHTML編集のすぐ上にある

■ 各部分別横幅

の部分の数値を変更します。



↑こうなっている部分です。

ここで500と書かれている数値を変更します。

数値の右にある「変更」と書かれているボタンを押すと、次のような窓が現れます。



「本文横幅」の右の枠内の500という数値を600にしてください。
半角で打つのを忘れないようにね。

これ↓が、数値変更をしたあとです。




その後、「修正」をクリックします。

元のページは、↓のように変化しているはずです。



これで数値変更はオシマイです。^^


この後は普通に↓をコピペしてください。


■「メイン」■ 枠の中をすべてコピーしてHTML編集の「メイン」部分に貼ってください。

<a name=pt></a>
<CENTER>
<DIV ID=BODY>
</CENTER>
<CENTER>
<div id="base">
</CENTER>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="800">
<tr><td height="350"></td></tr>
<tr><td valign="top">
<div class="HEADER"><$header$></div>
<div class="URL"><$blogurl$></div>
<div class="USERMENU"><$adminmenu type=2$></div>
</td></tr>
<tr><td height="30"></td></tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="850">
<tr><td width="650" valign="top">
<$post$>
<td width="20"></td>
<td width="180" valign="top">
<DIV ID=RIGHT>
<div class="PROFILE">
<div align="center"><$logoimage type=1$></div>
<$description$>
<$nick$>
</div>
<$calendar type=1$>
<div class="MN">
<$menuright$>
</div>
</div>
<$banner type=1$>
<$xml$>
<font size="1">
"Sunflower3" Skin<br>by <a href="http://animalskin.exblog.jp/" target="_blank"><b>Animal Skin</b></a></div></a></font>
</td>
</td></tr>
<tr><td colspan="3" height="100"></td></tr>
</table>
</div>
</DIV>
</CENTER>
<center><table border="0" cellpadding="0" cellspacing="0" width="50%">
<tr><td align="right" width="35%"><$prepage type=1$></td>
<td align="center" width="30%"><a href="#top" target="_self"> | ページトップ | </a></td>
<td align="left" width="35%"><$nextpage type=1$></td></tr>
</table></center>
<p>



■「本文」■ 枠の中をすべてコピーしてHTML編集の「本文」部分に貼ってください。

<div class="POST">
<div class="POST_HEAD">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="80%">
<DIV CLASS=POST_TTL><$postsubject$></DIV></td>
<td width="20%" align="right"><$postadmin type=2$></td></tr>
</table>
</div>
<div class="POST_BODY">
<$postcont$>
<div class="POST_TAIL" align="right"><a href=#pt>Top▲</a> |
<$posttail$></div>
</div><$cmtjs$>
</div>



■メニュー■ (一応「メニュー」部分へのコードを貼っておきますが、ここはもともと書いてあるコードでOKです。つまりここは無視しちゃってOK!)

<div class="MNTTL"><$mntitle$></div>
<$mnbody$>




■CSS編集■ 枠の中をすべてコピーして「CSS編集」部分に貼ってください。

/* Sunflower3 Skin by Animal Skin*/

/*↓ BODYの次、backgroundの後の#に続く6桁の番号は背景色です。Animal Skinのサイドバーに、6桁で表すことのできる色番号チャートのサイトへのリンクがあるので、それを見ながら好きな色の番号にこれを変えれば、背景の色を自由に変更できます。*/
BODY{ background:#E6B039; }
BODY,TD,DIV,LI{ FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #777777; }
/* ↑の中で最後に出てくるCOLORの、#の次の数字は記事の文章の色です。*/


/* ↓ ここはリンク文字の色です。上から、「クリックしていないサイトへのリンク」「すでにクリック済みのリンク」「クリックしているときのリンク(ここを省いてあるケースも多い)」「カーソルが乗っているときのリンク」です。*/
A:LINK{ COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
A:VISITED{ COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
A:ACTIVE{ COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
A:HOVER{ COLOR: #8889A0; position:relative; top: 1px; left: 1px; }


/* base (トップ画像の入れ替えはこの中のURLでできます。このスキンのトップ画像のデフォルトサイズは850px × 450pxです。)*/
div#base {
background:transparent url("http://pds.exblog.jp/pds/1/200907%2F17%2F38%2Ff0165338_16122441.jpg") no-repeat center top;
margin:0px auto;
overflow:hidden;
width:850px;
padding: 0px;}


/* #の後に続く6桁の番号は、記事部分をメインとした、トップ画像の下部分すべての背景色です。↓ 現在はFFFFFF=白になっています。*/
DIV#BODY {BACKGROUND : #FFFFFF; WIDTH : 850PX; MARGIN : -15PX;
TEXT-ALIGN : LEFT;}

DIV.HEADER{ FONT : BOLD LARGE/100% TAHOMA; MARGIN : 10PX 0PX 20PX; TEXT-ALIGN:LEFT;}

/* ↓ ブログタイトルの文字色です。上から、「基本色」、「一度クリックして訪問したあとの色」、「カーソルが乗っているときの色」です。*/
DIV.HEADER A:LINK { COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
DIV.HEADER A:VISITED { COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
DIV.HEADER A:HOVER { COLOR: #8889A0; position:relative; top: 1px; left: 1px; }

DIV.URL{ FONT : X-SMALL/100% VERDANA,TAHOMA; MARGIN : 10PX 0PX 20PX; TEXT-ALIGN:LEFT;}
DIV.USERMENU{ FONT : 8PT/100% VERDANA; TEXT-ALIGN : LEFT; MARGIN-BOTTOM : 7PX; }

/* ↓ ブログURLの文字色です。*/
DIV.URL A:LINK {COLOR: #888888; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: #888888; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: #8889A0; position:relative; top: 1px; left: 1px;}


/* ↓ ユーザーメニューの文字色です。残念ながら現在のところ、プレビューで確認することはできません。*/
DIV.USERMENU A:LINK {COLOR: #888888; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #888888; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #8889A0; position:relative; top: 1px; left: 1px;}


/* #の後に続く6桁の番号は、メニュー部分の背景色です。↓ 現在はFFFFFF=白になっています。実際には、メニュー部分の枠内なので、↑で説明してある「トップ画像の下部分すべての背景色」が、ここでデフォルトとして設定してある白の、さらに後ろに見えることになります。*/
DIV#RIGHT {
WIDTH : 150PX;
MARGIN : 10PX 0PX 0PX;
PADDING : 10PX;
BACKGROUND : #FFFFFF;
OVERFLOW : HIDDEN;
BORDER-LEFT : 2PX #D5D0CB solid;}
/* BORDER-LEFTとあるのは↑ メニューと記事部分の間にある縦のラインの色です。*/



DIV.PROFILE{ WIDTH : 150PX; PADDING : 0PX 0PX 10PX; LINE-HEIGHT : 130%; OVERFLOW : HIDDEN; TEXT-ALIGN:CENTER;}
DIV.MN{ TEXT-ALIGN:LEFT; BORDER:1px;}
DIV.MNTTL{ WIDTH : 150PX; BORDER-BOTTOM : 2PX #D5D0CB solid; PADDING : 2PX 0PX 0PX; MARGIN : 25PX 0PX 10PX; TEXT-ALIGN : LEFT;}
DIV.MEMOBODY{ WIDTH : 150PX; OVERFLOW : HIDDEN; }
/* DIV.MNTTLに続く#の後の6桁は↑ メニューの中のそれぞれの題の下にある横のラインの色です。*/


/* DIV.POST_TTLに続く#の後6桁は↓ 記事タイトルのすぐ下にある横のラインの色です。*/
DIV.POST{ MARGIN : 25PX 0PX 50PX 25px;TEXT-ALIGN:LEFT;}
DIV.POST_HEAD{ MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX; BORDER-BOTTOM : 2PX #D5D0CB solid; MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX;}
DIV.POST_TTL{ font-weight: bold; font-size: small; line-height: 120%;}
DIV.POST_ADMIN{ TEXT-ALIGN : RIGHT;}
DIV.POST_BODY{ LINE-HEIGHT : 150%; WIDTH : 600PX; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; }
DIV.POST_TAIL{ FONT : 11PX/150% TAHOMA; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; }


/* DIV.COMMENTに続く#の後6桁は↓ コメント欄全体を囲むラインの色、BACKGROUNDとあるのはコメント欄の背景色です。残念ながら現在のところ、プレビューで確認することはできません。*/
DIV.COMMENT{ BORDER : 2PX #D5D0CB solid; BACKGROUND : #FFFFFF ; PADDING : 15PX;MARGIN : 20PX 0PX; }
DIV.COMMENT_BODY{ MARGIN-BOTTOM : 20PX; LINE-HEIGHT : 130%; }
DIV.COMMENT_TAIL{ MARGIN : 8PX 0PX 5PX; FONT : 8PT/150% TAHOMA; COLOR : #777; }
DIV.COMMENT_INPUT{ MARGIN-TOP : 20PX; BORDER-TOP : 1PX #AAA DOTTED; PADDING-TOP : 20PX; }
DIV.COMMENT_LINE{ BORDER-TOP : 1PX #AAA DOTTED; MARGIN : 10PX 0PX 15PX; }

DIV.TRACK_TOP { LINE-HEIGHT : 170%; }
DIV.ARCHIVE_HEAD { FONT-WEIGHT : BOLD; MARGIN-BOTTOM : 10PX; }
DIV.ARCHIVE_BODY { MARGIN : 20PX 0PX; LINE-HEIGHT : 160%; PADDING-BOTTOM : 100PX; }

IMG.IMAGE_TOP{ MARGIN-BOTTOM : 15PX; }
IMG.IMAGE_LEFT{ MARGIN-RIGHT : 15PX; MARGIN-BOTTOM : 15PX; TEXT-ALIGN:LEFT}
IMG.IMAGE_MID{ MARGIN-TOP : 15PX; MARGIN-BOTTOM : 15PX; }
IMG.BOOKMK{ MARGIN : 10PX; BORDER : 0PX; }
IMG.USERMENU{ MARGIN-LEFT : 8PX; }
IMG.LOGO{ MARGIN-BOTTOM : 10PX; }

DIV.BANNER{ MARGIN : 30PX 0PX 10PX; }

.SMALL{ FONT-SIZE : 11PX; }
.DATE{ FONT : BOLD 8PT/150% TAHOMA; }
.TIME{ FONT : 8PT/150% TAHOMA; TEXT-ALIGN : LEFT; }
.AUTHOR{ FONT : BOLD 8PT TAHOMA; }
.TXTFLD{ FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:#FFF; }
.SUBMIT{ FONT :9PT/140% ;COLOR:#000; }

DIV.CAL_TOP { }
DIV.CAL { MARGIN : 20PX 0PX 20PX; WIDTH : 150PX; TEXT-ALIGN : CENTER;}
DIV.CAL_HEAD { WIDTH : 150PX; FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; PADDING : 4PX 0PX; MARGIN-BOTTOM : 10PX;}
DIV.CAL_BODY { WIDTH : 150PX; TEXT-ALIGN : CENTER;}
DIV.CAL_BOTTOM { }

.CAL{ FONT : 7PT/170% VERDANA; TEXT-ALIGN : CENTER; }
.CAL_DAY{ FONT : BOLD 7PT/170% VERDANA; TEXT-ALIGN : CENTER; }
.CAL_SUN{ FONT : BOLD 7PT/170% VERDANA; COLOR : #D36654; TEXT-ALIGN : CENTER;}
.CAL_SAT{ FONT : BOLD 7PT/170% VERDANA; COLOR : #3572A1; TEXT-ALIGN : CENTER;}
.CAL_TODAY{ FONT : BOLD 7PT/170% VERDANA; BACKGROUND : #D4CFC9; COLOR : #FFFFEE; TEXT-ALIGN : CENTER; }
.CAL_TR { }

DIV.XML { FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; }

TEXTAREA.TXTFLD {height:10em;}/*コメント入力欄を広く*/



いかがでしょう?

すべてではありませんが、主な部分の色変更が簡単になるよう、説明書きを入れてみました。

説明書きを入れなかった部分にも、6桁の数字が見えると思いますが、
もちろんそれらもすべて変更可能です。

プレビューでは見えないため、いったいどこの色を変えたのかわかりにくい部分もあるので、
その際は実際に改造後のスキンを適用して、その後で見なければなりません。

その場合、改造用のスキンをコピペによりあらかじめ作っておき、それをあれこれ弄るのがいいでしょう。
「元に戻したいのに戻せなくなってしまった」という状況に陥るのを防ぐことができて便利です。
万が一スキン改造に失敗しても、別に保存してある元のスキンに戻せばいいだけですからね。^^


また、記事タイトルの下や、メニューのタイトルそれぞれの下などにある
ボーダーライン(2PX #D5D0CB solidなど)の改造については、
†CrossMoon † さんがとても詳しく説明されてますので、ぜひそちらを参照してください。
⇒BORDER(枠の装飾) by †CrossMoon †
Top▲ | by mari_ca by animal_skin | 2009-07-18 03:41 | 右メニュースキン
<< 「道端の車」のスキン配布 「v... | ページトップ | 「ピンクフレームのシンプルスキ... >>
↓質問はこちらへ↓