スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告

ブログデザインが変わったよ!
ルドイ方は気づいたかな~?
マメ柴「まるこ」通信、ブログのデザインを変更しました~!


一番の変更点はヘッダー
#ブログの一番上に表示されているブログタイトル画像です。


今回は、こちら↓の4種類の画像が登場
ページを表示するたびに、ランダムで出てきます♪

#ランダム表示を試してみたい方は、「F5」キーを何度か押してみてね。

h01
h02
h03
h04


やり方はね・・・htmlをいじらない方にはすこし難しいかもだけど、
htmlの中にちょっとしたスクリプトを記述しています。

#まるこママはWebデザインのお仕事してるので、
 ちょっとこういう分野のことをかじっているのでした~☆



どうしてもこのやり方を聞きたい~!
という方がいらしたら、メールフォームorコメント欄よりご連絡ください♪

#あ、「どうしても」じゃなくってもOKです~(笑)


***********************************
ホントは1種類を選ぶ予定だったのだけど、
どのまるこちゃんもかわいくって絞り込めず…
結果的にはランダム表示で楽しくなったのでよかったです(笑)


ブログランキングに参加しています♪
よかったらポティっとお願いします!
にほんブログ村 犬ブログ 柴犬へ


***********************************
拝島付近で迷子になった柴犬の情報を求めています!
詳しくは下のバナーをクリックして、詳細情報をご覧ください。

拝島橋付近で迷子になった柴犬ちゃん
お知らせ
8 0
comment
おはようございま~す(´∀`)
あらららら。可愛い~!!
さすが、まるこママ!私はとても無理です。
4種類も作ったんですね♪全部ヵヮ。゚+.(・∀・)゚+.゚ィィ!!
まるこママブログのデザインとか簡単に出来るんですか?

作り方教えてもらいたいです。お願いします♪
2009/05/05 07:49 | | edit posted by ゆずサブレ
こんにちは~
えぇっと。。いつも読み逃げのくせに
こんな時だけコメントを入れるコトに少し気が引けましたが
前からブログのトップにオリジナル写真を使いたいなぁ。。
と思っていたので、思い切ってコメント入れました。(^^;
でもここまで凝った感じでなくていいので
どうやったらトップを写真に出来るのか教えて下さい~

まるこちゃんの写真、どれも可愛いですね♪
とりあえず3回更新したら
2パターンの可愛いまるこちゃんに会えました♪
2009/05/05 15:43 | | edit posted by あっこ
きれいな写真
こんにちは!
まるこちゃん、どれもニッコリかわいい笑顔で
選べないですよね!
背景の草花も好きです!
2009/05/05 17:52 | | edit posted by まんぼう
ゆずサブレさまへ(作り方)
こんにちは!そうそう、つい4種類も…(笑)
ゆず君もかわいいお写真いっぱいだから、
ぜひぜひチャレンジしてみてください♪

で、作り方レクチャーのため、ゆずサブレさんのブログの
htmlソースを少し拝見しました。
同じ「FC2」なので、以下の通りで変更できると思います。
念のため、現在のテンプレートをコピーして試してくださいね!

①お写真を準備!
横800×縦223ピクセルのお写真を3枚準備してください♪
できたら「ツール」→「ファイルのアップロード」で
お写真をサーバーにアップロードしてくださいね!
さらにアップロードした画像のURLを3つともメモしておいてください。
(→アップしたお写真をクリックするとアドレスバーにURLが出てきます)

#お写真には現在のと同じく、ブログタイトルを入れてね!
#3枚以上増やしたい場合は、一度3枚バージョンでできてから
またお教えしますね♪



②htmlソースを書き換え!-その1-
テンプレート内htmlソースの中から以下の記述を探してね。
<!--▼ヘッダーここから▼-->

#上の方にありました(スタイルシートじゃないよ~)


<!--▼ヘッダーここから▼-->から<!--/ヘッダーここまで-->の間に
以下の記述をコピペします。


<!--▼ヘッダーここから▼-->
<div id="header">

<!--▼管理リンクここから▼-->
<script language="JavaScript">
var images = new Array();

/* 使用するタイトル画像を好きなだけ記述 */
images[0] = "画像のURLを入れてね~";
images[1] = "画像のURLを入れてね~";
images[2] = "画像のURLを入れてね~";

var rnd = Math.floor((Math.random() * 100)) % images.length;
document.write('<a href="<%url>" alt="<%blog_name>"><img src=',images[rnd],' border="0"></a>');
</script>
<p class="intro">2008年4月6日 わが家に柴犬ゆずがやってきた!ずっと柴犬が飼いたかったので、感激の毎日!!!!!</p>
</div>
<!--/ヘッダーここまで-->



③htmlソースを書き換え!-その2-
今コピペした中にある以下の部分を書き換えます。

/* 使用するタイトル画像を好きなだけ記述 */
images[0] = "画像のURLを入れてね~";
images[1] = "画像のURLを入れてね~";
images[2] = "画像のURLを入れてね~";


①でメモした写真画像のURLを準備してください。
それぞれのURLを"画像のURLを入れてね~"の文字部分に置き換えます。

#このとき""を消さないように要注意です☆


④スタイルシートを書き換え!
今度はスタイルシートの一部を書き換えます。
スタイルシートの中に「ヘッダー」と「ブログ説明」がありますので、
以下をコピペしてそれぞれ書き換えてください。

/*ヘッダー */
#header {
width:800px; /*ヘッダーの幅*/
height:250px; /*ヘッダーの高さ*/
font-family:Verdana,Chicago; /* 文字種類 */
line-height:1.4; /* 中央下に配置 */
background-color:#fff; /* 背景色 */
margin:0;
padding:0;
}

/* ブログ説明 */
.intro {
text-align:center; /* 左寄せ */
font-size:13px; /* 字の大きさ */
color:#000; /* 文字色 */
font-weight:normal;
margin: 0;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}


★これで「プレビュー」してみてね!できているはず~(祈)
2009/05/05 18:27 | | edit posted by まるこママ
どの写真もかっわいい。
この中から1つだけ選ぶのは難しいよね。
クリックするのがわくわく楽しかったデス♪
写真は晴天の中で写すべきだと
激しく感じた私でした^^;


2009/05/05 20:22 | | edit posted by ぴぐっち
あっこさまへ(作り方)
こんばんは~私もりねんちんを毎日こっそり見てるので、
お互いさまですね(笑)読み逃げばんざぁい!

さて、あっこさんのブログのhtmlソースを少し拝見しまして、
ちょっと遊んでみました。
まずはランダム表示無しで、画像を挿入する方法をお伝えします。
まずは以下のとおりやってみてください♪

もし無事にできて、ランダムにしたい!ということであれば、
また改めてやり方をお教えしますね♪

①トップの画像を準備!
横650×縦270ピクセルの画像を1つ準備してください。
一応、お試し画像を一つ作りましたので、こちらをご参考に!
http://blog-imgs-27.fc2.com/m/a/m/mameshibamarco/top.jpg

#縦の高さのうち、上から20ピクセルは白にしてくださいね。
 (デザイン上、たぶんそうしたほうがきれいです^^)


②htmlソースを書き換える!
「テンプレートの設定」から、現在のテンプレート→「編集」をクリック。

htmlソースの中に以下の記述があるので探して下さい。

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="167"><td class="site_title" valign="top"><a href="http://cororinen.blog39.fc2.com/">りねん日和</a><div class="site_s">リネンの、リネンによる、私のためのブログ。</div></td></tr>
</table>


この部分を以下の通り上書きします。

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="300"><td height="270" valign="top" class="site_title"><a href="http://cororinen.blog39.fc2.com/">
<img src="top.jpg" width="650" border="0" longdesc="http://blog-imgs-27.fc2.com/m/a/m/mameshibamarco/top.jpg"></a></td></tr>
</table>


そして、赤い部分に画像のURLを入れると入れ替わります。
①で画像を作ったら、あっこさんのブログにアップロードして、
そのURLを上の赤い部分に入れ替えてください。

③スタイルシートを書き換える!
htmlと同じページにあるスタイルシートの中から、
「.site_title」で始まる部分を探して以下の通り上書きしてください。

.site_title{
padding-top: 0px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}



★これでうまくいくと思うのだけど~レッツトライ!
 もしよければお試し画像もご活用くださいね♪
2009/05/05 22:26 | | edit posted by まるこママ
お返事♪
v-463まんぼうさま
実はなかなかにっこりしない子なので、
どれも貴重なお写真なんですよ~(笑)
撮影場所の多くは多摩川河川敷なので、
季節の草花が一緒に写っていますね♪

v-463ぴぐっちさま
そうね~晴れてる日は写真写りもいいし、
表情も自然と柔らかく生き生きとする気がします♪
クリックで楽しんでいただけたようでよかった~!
またぜひ遊びにきてくださいね^^
2009/05/05 22:34 | | edit posted by まるこママ
あっこさまへ(補足)
さきほどの作り方の中で、②の画像の差し替え方法のところ、
「赤い部分」と書いたのだけど、実際には上手く赤くなってなかったノ!

正確には、
<img src="top.jpg" width="650" border="0" longdesc="http://blog-imgs-27.fc2.com/m/a/m/mameshibamarco/top.jpg">だったところを、
<img src="作った画像のURLを入れる" width="650" border="0">
に書き換えてほしいです。

まぎらわしくってごめんなさいね~(汗)
2009/05/05 22:41 | | edit posted by まるこママ
comment posting














 

trackback URL
http://mameshibamarco.blog100.fc2.com/tb.php/345-ca0ae117
trackback
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。