Make your own free website on Tripod.com

さてさて、クリスタルさん、まずは、Animal Skinの「配布スキンの正しい使い方」を見てみてくださいね。^^ ⇒こちら ここで、まずは手順1にあるように 「Powered by Animal Skin」という小さい画像(スキンイメージと呼ばれるらしい)を PCにダウンロードしてください。 そのまま先に進んで、手順5のところで

5:次のページではまず「レイアウト選択」をするよう指示されるので、そこで「C. 2列のレイアウト-左側にメニュー」というのを選んで、横の丸をクリックして塗りつぶし、次へ進みます。 ※現在はこのレイアウト以外のスキンも配布しています。 その場合は、各配布ページにその旨を記してあるので、見逃さないようにしてくださいね。^^
と、あるのが見えると思いますが、クリスタルさんの場合は右メニュー希望なので、上から2番目の B. 2列のレイアウト-右側にメニュー メニューを含むサイドバーが右に位置したスキンです。 本文の内容が目立ちます。 というのを選択して、「次へ」をクリックしてください。^^ 次のページに行くと ■ 各部分別横幅 とあり、そのすぐ下に 「現在設定された部分別横幅(pixel) : 本文 500 - ロゴ 150 - メニュー 150」 とあります。 ここの本文のところを500から700に、ロゴ&メニューをそれぞれ160に数値変更してください。 あとは、手順にそってコピペするだけです。^^ ではコピペ用のソースコードは後半で...

最初はHTMLのメイン部分です。 枠の中をそっくりコピーして、すでにその部分にあるタグと入れ替えてください。 Animal Skinの手順にペーストする場所がイラスト入りで載ってます。^^ 日本語で説明文がいろいろ書いてありますが、これは画面上には表示されないので、そのままペーストしちゃうと、もし後になってさらにカスタマイズしたいときに便利だと思いますよ〜。

<!-ここにあるタグは削除可なものと不可なものとがあります。削除不可なものを編集ページで消してしまうと、エラーが出ます。 こちらのページを参考にどうぞ。^^ ⇒http://exblog.jp/help/tag_help.asp-> <!-書き込んである補助説明の一切は、タグを無効化する記号内にあるので、このままコピペしても画面上に表示はされません。^^-> <a name=pt></a> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="870"> <tr><td height="180"><!- ←heightの数値を変えるとブログ名の上のスペース値が変化します-></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="70"><!- ←heightの数値を変えると記事とサイドバーの部分の上にあるスペース値が変化します-></td></tr> </table> <table border="0" cellpadding="0" cellspacing="0" align="center" width="890"> <tr> <td width="700" valign="top"> <$post$> <table border="0" cellpadding="0" cellspacing="0" width="70%"> <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> <!-記事最下部のコピーライト部分ここから。必要ない場合はそっくり消去しちゃってね。文字色の変更はFont colorのところの文字色番号でできます。-> <DIV ID=BOTTOM><center><b><font color="#D6D280">Copyright © 2008 Crystal Diary2 〜その後のMessage In A Bottle〜. all rights reserved.</b><br> Any use of materials/images on this site without permission is STRICTLY PROHIBITED.<br>掲載写真・文章に関しての無断使用・転載はご遠慮下さい。 </center></DIV><p></font> <!-記事最下部のコピーライト部分ここまで-> <td width="30" valign="top"></td> <td width="160" valign="top"> <div class="PROFILE"> <div align="center"><$logoimage type=1$></div> <$description$><!-消去可。代わりにここに好きな文章を打ち込めます-> <$nick$><!-プロフィール下のハンドル。削除した場合、ここに希望ハンドルを打ち込めばそれが代わりに表示されます。-> </div> <!-最新記事表示プルダウンメニューここから-> <!-プルダウンメニューは観覧者側のブラウザーのJavaScriptがOFFだと見えません-> <!-ちょっと面倒ではありますが、ブログを更新するごとに、リストの最後を消去して、その次に「新着記事」と書かれている部分を以降の一番上に、新しく更新した記事の「記事タイトル」と「記事ページのURLの最後にある数字(例文参照)」を付け足してね。...現在は過去記事10件まで表示されるようにしてあります。変更可。-> <select onchange="location.href = this.options[selectedIndex].value" style="width:160px;" class="list" style="font-size:9pt" style="color:#94430B"> <option value="">新着記事</option> <option value="/9231026/">Crab Alfredo with Penne</option> <option value="/9225510/">Lotus Flower</option> <option value="/9219218/">林檎たっぷり*アップルロール*</option> <option value="/0000000/">記事タイトル</option> <option value="/0000000/">記事タイトル</option> <option value="/0000000/">記事タイトル</option> <option value="/0000000/">記事タイトル</option> <option value="/0000000/">記事タイトル</option> <option value="/0000000/">記事タイトル</option> <option value="/0000000/">記事タイトル</option> </select> <!-最新記事表示プルダウンメニューここまで-> <$calendar type=1$> <!-エキブロにもともとあるメニュー欄ここから。増設メモはここの上にも作ることができます。現在は2つの増設メモをこのすぐに下にプラスしているのが見えると思います-> <div class="MN"> <$menuright$> </div> <!-もともとのメニュー欄ここまで-> <p> <!-増設メモ1ここから。例に習ってマニュアルでリストを大きくしていってね-> <div class="MNTTL">日本のお友達リンク</div> <div class="menu1"> <center><a href="http://niccatekuteku.blog83.fc2.com/" target="_blank">☆NICCA☆ tekuteku*日記</a></center> <center><a href="http://hana2525.blog10.fc2.com/" target="_blank">清く楽しく美しく♪</a></center> <center><a href="http://blog.goo.ne.jp/nr232em4_2005/" target="_blank">ねこにっき</a></center> <p><!- このPタグは、1列飛ばすということ。現在のスキン内ではここに隙間があったので一応開けておきました。いらなかったら削除してね。^^ -> <center><a href="http://masyamayu.blog74.fc2.com/" target="_blank">パンとお菓子作ってダイエット</a></center> <center><a href="http://blogs.yahoo.co.jp/cokia_feb/" target="_blank">*COKIA*が作るもの</a></center> <center><a href="http://oshaberikitchen.blog91.fc2.com/" target="_blank">おしゃべりKitchen。</a></center> <center><a href="http://breadlife.blog63.fc2.com/" target="_blank">Yuki Bread Studio</a></center> </div> <!-増設メモ1ここまで-> <!-  ここ↑で見られるように、<center>から</center>までのリンク先とリンク名を変更したものを、どんどん続けてコピペしていけば、増加メモとしてエキブロ以外のリンク集がつくれます。^^ また、このdiv class="MNTTL"と/divではさまれた追加メニュー部分自体も同様にしていくつも作れます。(このすぐ下に別リンク集としてもう一つ作ってあります。) 貼り付け場所はエキブロ基本メニューの上か下...ということになっちゃいますけどね。 タイトルはクリスタルさんのブログからそのまんま、リンク先もいくつか例にとってみたので、そこから応用してみてください。 target="_blank"というのは、クリックで別窓が開くということです。 同じウィンドウ上でリンク先を開きたい場合は、target="_blank"というのを消しちゃってね-> <!-増設メモ2ここから。例に習ってマニュアルでリストを大きくしていってね-> <div class="MNTTL">海外のお友達リンク</div> <div class="menu2"> <center><a href="http://blogs.yahoo.co.jp/floridabread/" target="_blank">アメリカ手作りパンの会</a></center> <center><a href="http://blogs.yahoo.co.jp/mylittleqp/" target="_blank">にゃっとフロリダ紀行</a></center> <center><a href="http://sakumanbo.blog75.fc2.com/" target="_blank">うつくしきをメデテすごさん</a></center> <center><a href="http://keikoro.blog3.fc2.com/" target="_blank">フロリダケリー</a></center> <center><a href="http://sugar2caramel.blog102.fc2.com/" target="_blank">*☆*Candy Factory*☆*</a></center> <center><a href="http://charlesnicole.blog68.fc2.com/" target="_blank">のんきなフロリダ暮らし</a></center> <center><a href="http://crab6.blog81.fc2.com/" target="_blank">4人の子持ちお母さん奮闘記 in アメリカ</a></center> </div> <!-増設メモ2ここまで-> <$banner type=1$> <$xml$> <font size="1"> Original Skin by<br><a href="http://animalskin.exblog.jp/" target="_blank"><b>Animal Skin</b></a></div></a></font> </td> </div> </td></tr> <tr><td colspan="3" height="100"></td></tr> </table>
次はHTMLの「本文」部分です。クリスタルさんの場合はAnimal Skinの手順にあるイラストと左右が逆になってるのがわかると思います。 ここもそっくりそのままコピペしてね。^^
<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> <div class="POST_TAIL" align="right"><a href=#pt>Top▲</a> | <$posttail$></div> <$cmtjs$> </div>
次はHTMLの「メニュー」部分です。 一応タグはこうなってますが、すでにそこに載っているタグと同じです。 なのでここはそのままで大丈夫です。^^
<div class="MNTTL"><$mntitle$></div> <$mnbody$>
最後がCSS部分です。 ここもそっくりそのままコピペしてね。 日本語でアレコレ書いてある説明文は、これも画面上には表示されないので、そのままにしておくと後々のさらなるカスタマイズのときに便利だと思います。^^
/* Especially for Ms.Crystal*/ /* ↓スクロールバーの色です。画面右端のスクロールバーと、ブログ内に使ってある増加メモのスクロールバーの両方にアプライされます。ちなみに現在はこれは無効になってます。有効化したい場合は、HTMLとあるすぐ前と、最後の部分にあるカモメみたいなののすぐ後に続いている、タグを無効化する記号(こういった文章が挟まれているスラッシュと星マークのです。^^)を削除してください。色も自由に変えられます。ただし、これは観覧者側のブラウザによっては見えない場合もあります。IEではOKのようですが。/* /* HTML,body { SCROLLBAR-FACE-COLOR : #F1F1B1; SCROLLBAR-HIGHLIGHT-COLOR :#FFFFFF; SCROLLBAR-SHADOW-COLOR :#E9E9BE; SCROLLBAR-3DLIGHT-COLOR : #FFF5D7; SCROLLBAR-ARROW-COLOR :#FFFFFF; SCROLLBAR-TRACK-COLOR : #FFFFFF; SCROLLBAR-DARKSHADOW-COLOR :#FFFFFF; SCROLLBAR-BASE-COLOR :#FFFFFF; }/* /* ↓BODYの中にある、URLを手持ちの写真と入れ替えることでトップ画像が変えられます。*/ /*ただ、この場合は白背景の左上すみっこにメインの画像がくるようになっているので、入れ替えをするとしたら同様の画像が必要になります。 画面の中央に長方形のトップ画像を置く場合とは違いますからね。 もし、手持ちの写真を、このスキンに合わせられるように、つまり左上コーナーに画像を残してあとは白背景にブレンドさせる加工が欲しいとご希望でしたらおっしゃってください。^^  それくらいは5分くらいですぐにできますからね♪ */ BODY{ background-image: url("http://pds.exblog.jp/pds/1/200807%2F15%2F44%2Ff0027944_10141454.jpg" ); background-repeat : no-repeat; background-position : LEFT top;} BODY,TD,DIV,LI{ FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #555555; }/*←この番号が記事内の基本文字色になります。もちろん変更可*/ /* ↓ここから*/ A:LINK{ COLOR: #E39724; TEXT-DECORATION: NONE; } A:VISITED{ COLOR: #E39724; TEXT-DECORATION: NONE; } A:ACTIVE{ COLOR: #E39724; TEXT-DECORATION: NONE; } A:HOVER{ COLOR: #9EA31A; TEXT-DECORATION:NONE } /* ↑ここまでリンク文字の色が変えられます。 内容は ■LINK:クリックしていないリンクの色 ■VISITED:クリックしてあるリンクの色 ■ACTIVE:クリックしている時のリンクの色 ■HOVER:カーソルを載せている時のリンクの色 です。 Animal Skinに色番号の一覧が見られるサイトをリンクしてあるので、参考にしてみてくださいね。^^ ちなみにフォトショでもWEB用の色番号は見られます。*/ DIV.HEADER{ FONT : BOLD LARGE/100% TAHOMA; MARGIN : 10PX 0PX 20PX; TEXT-ALIGN:RIGHT;} DIV.HEADER A:LINK { COLOR: #94430B; TEXT-DECORATION: NONE; } DIV.HEADER A:VISITED { COLOR: #94430B; TEXT-DECORATION: NONE; } DIV.HEADER A:HOVER { COLOR: #FFDE07; TEXT-DECORATION: NONE; } /* ↑ここはヘッダー、つまりブログタイトルの色を変えます*/ DIV.URL{ FONT : X-SMALL/100% VERDANA,TAHOMA; MARGIN : 10PX 0PX 20PX; TEXT-ALIGN:RIGHT;} DIV.USERMENU{ FONT : 8PT/100% VERDANA,TAHOMA; MARGIN : 10PX 0PX 20PX; TEXT-ALIGN:RIGHT;} DIV.USERMENU A:LINK {COLOR: #FEBB12; TEXT-DECORATION: NONE} DIV.USERMENU A:VISITED {COLOR: #FEBB12; TEXT-DECORATION: NONE} DIV.USERMENU A:HOVER {COLOR: #9EA31A; TEXT-DECORATION: NONE;} /* ↑ここはユーザーメニューの色を変えます。Add linkとかTopとかのアレですね。(プレビューでは確認不可)*/ DIV.PROFILE{ WIDTH : 160PX; PADDING : 0PX 0PX 10PX; LINE-HEIGHT : 130%; OVERFLOW : HIDDEN; TEXT-ALIGN:CENTER;}/*プロフィールの文字*/ /* ↑TEXT ALIGNとは文字の位置です。センタリングしたり、左に寄せたり変えられます。*/ /* ↓ここから*/ .MN a{ line-height:125%;} .MN td{ line-height:100%; height:5px;} /* ↑ここまででサイドバーの文字の行間が変えられます。パーセンテージを大きくすれば全体に間延びした印象に、小さくすれば小ぢんまりした印象になります。ここではスペースセーバー仕様にしてあります。^^*/ /*増設メモスクロール部分ここから*/ div.menu1{ width:160px;/*増設メモ1の幅*/ height:120px;/*増設メモ1の高さ=自由に変更してね(ただし、リストそのものが短い場合は、それ以上の長さのスクロールバーは表示されなくなってしまうようです)*/ overflow:auto; overflow-x:hidden; overflow-y:auto; text-align:left; padding:0px; margin:0px;} div.menu2{ width:160px;/*増設メモ2の幅*/ height:120px;/*増設メモ2の高さ=自由に変更してね(ただし、リストそのものが短い場合は、それ以上の長さのスクロールバーは表示されなくなってしまうようです)*/ overflow:auto; overflow-x:hidden; overflow-y:auto; text-align:left; padding:0px; margin:0px;} /*増設メモスクロール部分ここまで*/ DIV.MNTTL{ WIDTH : 160PX; BORDER-BOTTOM : 3PX #D6D280 solid; PADDING : 2PX 0PX 0PX; MARGIN : 25PX 0PX 10PX; TEXT-ALIGN : CENTER;} DIV.MEMOBODY{ WIDTH : 160PX; OVERFLOW : HIDDEN; } /*↑メニューのタイトル部分とメモ部分本体です。 BORDER-BOTTOM : 3PX #D6D280 solid; というのは、メニュータイトルの下にあるボーダーラインのことです。 */ DIV.POST{ MARGIN-BOTTOM : 50PX; TEXT-ALIGN:LEFT;} DIV.POST_HEAD{ MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX; BORDER-BOTTOM : 3PX #D6D280 solid; MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX;} DIV.POST_TTL{ FONT-SIZE : 9PT;FONT-WEIGHT : BOLD;} DIV.POST_TTL A:LINK {COLOR: #94430B; TEXT-DECORATION: NONE;} DIV.POST_TTL A:VISITED {COLOR: #94430B; TEXT-DECORATION: NONE;} DIV.POST_TTL A:ACTIVE {COLOR: #94430B; TEXT-DECORATION: NONE;} DIV.POST_TTL A:HOVER {COLOR: #D6D280; TEXT-DECORATION: NONE;} /* ↑各記事のタイトルの文字。好きなように変更してください。プレビューでは確認不可。*/ DIV.POST_ADMIN{ TEXT-ALIGN : RIGHT;} DIV.POST_BODY{ LINE-HEIGHT : 150%; WIDTH : 700PX; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; TEXT-ALIGN:center;} DIV.POST_TAIL{ FONT : 11PX/150% TAHOMA; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; } /*↑メインの記事部分です。数字や文字色や文字の位置ををいろいろ変えて遊んで見てください。^^ 保存する前にすべてプレビューで確認できます。*/ DIV.COMMENT{ BORDER : 3PX #FFC40E 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{ WIDTH:500px; MARGIN-TOP : 20PX; BORDER-TOP : 1PX #AAA DOTTED; PADDING-TOP : 20PX; } DIV.COMMENT_LINE{ BORDER-TOP : 1PX #AAA DOTTED; MARGIN : 10PX 0PX 15PX; } /* ↑コメント欄です。残念ながらプレビュー確認不可!現在は白背景にオレンジのボーダーがついています(今だったらAnimal Skinがこのスキンを使っているので、参考までにコメント部分もそこで見ることができます。^^)*/ TEXTAREA.TXTFLD {height:12em;FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #CCCCCC; BACKGROUND:#FFF; background-image:url(http://pds.exblog.jp/pds/1/200807%2F14%2F38%2Ff0165338_148362.jpg); background-position:95% 95%; background-repeat:no-repeat;} /*↑コメント入力欄部分です。ここも残念ながらプレビュー確認不可。今は小さなてんとう虫モチーフが入ってますが、URLを入れ替えることで好きな画像と交換できます。一番最初のheightの次にある数値を変えると、コメント欄の高さが変わります。*/ DIV#BOTTOM {BORDER-top : 2PX #E9E9BE solid ;margin-top:60px; WIDTH : 700PX; PADDING : 0PX 0PX 10PX; FONT : 7PT/150% VERDANA; TEXT-ALIGN : CENTER; } /*↑コピーライト部分のサポートCSSです。HTMLでその部分を削除した場合、自動的に無効化されます*/ 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 : 10PX; }/*←サイドバーにある最近のコメント部分の、コメントをくれた人の名前の文字のサイズ。数値を変えれば変更できます。現在はスペースセーバー仕様で小さくしてあります。*/ .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 : #E3E3E3; COLOR : #3D5586; TEXT-ALIGN : CENTER; } .CAL_TR { } /* ↑カレンダー部分です。変えるところはあんまりないかな...Jeweldays!さんにカスタマイズの仕方が載ってはいます(レッスン52参照)。⇒http://jeweldays.exblog.jp/tags/HTML/*/ DIV.XML { FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; }
どうでしょうか?プレビューで確認できました?^^ 一応こちらでも不具合がないかチェックしておいたので、大丈夫だとは思うのですが... で、これはこのスキンだけに限らず、他のデザインでもいえると思うのですが、ブラウザによって若干違って見える場合があるとは承知しておいてください。 そんなに凝りに凝ったスキンではないし、思い切りスキン崩れしてる...なんてことはないと思いますけどね。 とりあえず私はIE利用者なので、IEを使ってる人(がほとんどだとは思いますが)には同じように見えていると思います。