上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。

--.--.-- (--)

スポンサーサイト

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

2011.07.24 (Sun)

できたーっ!°゚°。。ヾ( ~▽~)ツ ワーイ♪

紅魔郷3面

紅魔郷L3面道中です。少し時間に余裕が出来たので練習をしていました。
3面難しい・・・いまだ安定してできません。

できたというのは、そう、複数の背景画像を一定時間ごとに切り替える方法です!

昨夜の記事でも書きましたが苦労しました・・・
2つの画像を切り替えるのは他の方のプログラムそのままで出来ましたが、これを3枚以上にどう発展させればいいのか、プログラムの意味を読み解くのが素人同然の私にはつらかった・・・

答えがわかってみれば、if構文の条件式の単純ミスでした。。。
「if(num==1){」としなければならないところを「if(num=1){」とか。
・・・情けない...... ( 〃..)ノ ハンセイ

折角なので、ここで方法をまとめておこうと思います。
もし、使いたい方がいましたらどうぞー。

テンプレは透過背景のときにも使ったstandard_3variableを使います。画像は5種類使ってみます。

1.まず始めに、背景画像の固定と繰り返しを設定しておきます。テンプレ編集画面に入り、スタイルシートの編集で「body」のところに次のテキストをコピペします。下図を参考にしてください。すでにbackground-image:url"背景画像のurl"が設定されている場合は削除しておいてください。

↓これをコピペ
background-repeat: repeat;
background-attachment: fixed;

テンプレいじり4-5


2.HTML編集の</head>のすぐ上に、下のテキストを図の赤枠内のように記述します。画像のURLは自分のアップロードした画像のものを入れてください。
(注 コピペする場合は、ペースト後に "<" と ">" を半角に変えてください。ここで半角にするとブログ画面に表示されないので全角にしてあります)


<script language="javascript">
flg=1;
function changeImage(num){
if(num==0){
document.body.background="画像1のURL"
return 1
}else if(num==1){
document.body.background="画像2のURL"
return 2
}else if(num==2) {
document.body.background="画像3のURL"
return 3
}else if(num==3) {
document.body.background="画像4のURL"
return 4
}else if(num==4) {
document.body.background="画像5のURL"
return 0
}
}
</script>

テンプレいじり4-2

3.HTML編集で、</head>と<body>の間に次にテキストをコピペします。ここでも "<" と ">" は全角になっていますので、ペースト後半角に直してください。画像1のURLは、最初に表示する画像です。2.で設定した画像1のURLを入れれば良いでしょう。
切り替え時間のところには何秒ごとに切り替えたいかを設定します。1秒=1000です。

<body background="画像1のURL" onLoad="timeid=setInterval('flg=changeImage(flg)',切り替え時間)">

テンプレいじり4-3

ここまでで、設定した時間ごとに背景画像が切り替わるようになります。

4.最後に、画像をさらに増やす方法も書いておきます。2.で記述したテキストに、図のようにテキストを追加します。return の値に注意してください。

テンプレいじり3-4

画像を減らす場合も同じように要らない部分を削除して最後のreturn の値を修正すれば出来ます。


スポンサーサイト

テーマ : 東方Project - ジャンル : ゲーム

15:24  |  テンプレ改造  |  トラックバック:(0)  |  コメント:(8)

2011.07.24 (Sun)

テンプレいじり続けている・・・

また3D酔いしてしまいました・・・
こいしさんとSAをやっていて、ものの1時間くらいで・・・
これって免疫とかできないのかな?、きつすぎです。

やっと復活してきたので今日の更新をしておくことにします(とっくに日付変わってしまってますが)。

最近テンプレの理想形(あくまで個人的にですが)を求めていろいろいじってます。

今トライしているのが背景画像を一定時間ごとに切り替える方法なのですが、
これが思いのほかムズイ・・・

いろいろなサイトを見て、Java Script の setIntervalメソッドでプログラム組んで見たりしたのですが、指定した時間になりイベントが起きたとたんにフリーズしてしまって・・・
まあ、C++とC#の基礎を少しかじった程度のプログラミング知識ではあたり前なのかもしれませんが。

その後もネットをさまよって、なんとか2つの画像を切り替えることには成功しました。
現在、15秒ごとに切り替わる設定にしてあります。最初の1回目の切り替えに読み込みが入るのが気になる・・・2回目以降はスムーズに切り替わるのにo( ̄ー ̄;)ゞううむ

これを拡張して画像数を増やせないかといじってみたのですが、プログラムの内容が理解できませんでした( ̄_ ̄|||) どよ~ん

あと3枚くらい使いたい画像があるんだけどなー・・・また今度頑張ります。

それから、ヘッダーの画像に姫様とえーりんを各2パターン追加しました。
Photoshopで画像を合成しているだけですが、えーりんのはなかなかお気に入りのができました。

大分使い方にも慣れてきたし、やっぱり便利ですね!
あとはILLUST STUDIOを使いこなせるようにならねば・・・


テーマ : 東方Project - ジャンル : ゲーム

03:16  |  テンプレ改造  |  トラックバック:(0)  |  コメント:(4)

2011.07.22 (Fri)

記事背景の透過

こんばんはー。
昨日さりげなくヘッダーの画像を増やしておきました。

今までは名台詞集みたいな感じで、ゲーム本編で使われている台詞で作っていたのですが、これだけだとあまり面白みがないので、私の独断と偏見で台詞を変えたバージョンが追加されてます。

今後もキャラを増やしていく予定です。
もし、「このキャラにこんな台詞しゃべらせたら面白そうだ」という案があれば募集します!
なければ私が勝手に台詞を決めます。キャラのイメージ崩れても勘弁してね<( ̄∇ ̄)ゞゴメリンコ~♪

さて、それでは本題に。

ジョバンニさんはもう背景のランダム表示に成功したようですね。さすがだ!
それに関連して、記事の背景を透過背景にする方法をリクエストいただいたのでまとめさせていただきます。

まず、私はFC2ブログのテンプレート工房というサイトを参考にさせていただきました。ありがとうございます。
透過用の素材もこちらからダウンロードさせていただいたものを使わせていただきます。

それではジョバンニさんが使われているstandard_3variableのテンプレートを使って実際にやってみますよ。

1.まず透過素材の画像をアップロードしておきます。この下に貼り付けておきますのでダウンロードしてお使いください。
見にくいけど、( )内にあります。小さい画像なのでよく見てね。
80%透過素材→(white20.png
60%透過素材→(white40.png

ここでは2種類用意しました。上のサイトに行けばもっと種類があります。
以後、80%透過素材を使って進めていきます。

2.テンプレの編集画面に入り、スタイルシート編集のところで、必要な箇所に以下のテキストをコピペしていきます。
" " 内にはアップロードした透過素材のurlを入れてください。

background-image:url("透過素材のurl");

必要と思われるところを順番に探していきましょう。

○まずエントリーと書かれているところで、記事タイトルと記事の背景を変えます。以下の画像のようにテキストを貼り付けてurlを入れてください。
テンプレいじり3-1

○ついでに記事下の日付、時間、コメント件数・・・のところも下の画像のように追加しちゃいます。
テンプレいじり3-2

○プラグイン1,2の背景も透過させるとすっきりしますね!まず下の画像のようにサイドバーボックスと書かれたところを探します。そして、「background:"fff;」というのを削除してください。
テンプレいじり3-4-2

今削除した場所に、次のように「background-image:url("透過素材のurl");」を追加してください。
テンプレいじり3-4

○おっと、忘れちゃいけない・・・コメントページにも必要ですね!下の画像のところにも追加です。
テンプレいじり3-3

私が見たところ、こんなところで良いのではないでしょうか。
完成後の画像はこんな感じです(天子の画像をあらかじめ背景に貼っておきました)。

↓記事と
テンプレいじり3-5

↓コメントページです
テンプレいじり3-6

以上です。昨日のヘッダーランダム表示よりは簡単ですから、頑張ってくださいね。

私はこれから、背景画像を一定時間ごとに切り替える方法に挑戦してみようと思います。
いやー、テンプレいじりって楽しいですねー。それではさよおならー(⌒∇⌒)ノ""マタネー!!



テーマ : 東方Project - ジャンル : ゲーム

21:30  |  テンプレ改造  |  トラックバック:(0)  |  コメント:(6)

2011.07.21 (Thu)

ヘッダーの画像追加

こいしさんからリクエストがあったので、ヘッダーに画像を追加する方法をまとめておこうと思います。
テンプレはジョバンニさんの説明でも使われていたyellow_3columnを使うことにします。

少し面倒ですが頑張って順番にやっていきましょう。

まずヘッダーに1つの画像を表示させるところからやっていきます。
複数の画像をランダム表示させる場合も途中まで一緒ですのでここから始めてください。

1.まず、テンプレ編集の画面に入り、スタイルシート編集のところから「div#container」と書かれたところを探します(上の方にあります)
テンプレいじり2-0

max-width:1150px と書かれていますね、したがって幅1150pxまでの画像を載せることができます。
(min-width:850px と書いてありますが、それ以下の画像も載せられます)

2.必要な画像の幅がわかったので、次に載せたい画像を用意しアップロードしておきます。
今回は、私が使用しているこの画像↓を使ってみます。画像のサイズは幅792px、高さ250pxです。
フラン
 
3.次に、スタイルシート編集から「div#header」と書かれているところを探します。
テンプレいじり2-1

見つかったら、図のように、以下のテキストをコピペします。widthとheightの数値は用意した画像に合わせて変えてください。

div#branding {
width : 792px;
height : 250px;
}

4.次にHTML編集のところから、div id="header"と書かれたところを探します。
テンプレいじり2-2

ここに、図のように、赤枠内のテキストを入力します。

5.次に、今入力した部分に青枠内のテキスト(" " の間には画像のurlを入れる)を挿入してください。

テンプレいじり2-3

6.これで次のように画像が表示されるはずです。

テンプレいじり2-4

7.画像の上下のスペースを調整すると見栄えがよくなるでしょう。
まず、スタイルシート編集で「div#header」とかかれたところを探し、下の図のように「margin-bottom」のところを60px→10pxに変更します。
テンプレいじり2-5

更に、スタイルシート編集で「div#main」、「div#sidemenu1」、「div#sidemenu2」と書かれたところを探し、図のように3箇所に margin-top:10px; を追記します。
テンプレいじり2-6

これで、下図のようにマージンが適切になって見栄えがよくなりました。画像を1枚だけ載せる場合はこれで終了です。
テンプレいじり2-7

8.さらに画像をランダム表示させたい方は、もう少し頑張りましょう。
もう一枚、同じサイズの画像を用意しアップロードしておきます。ここでは次の画像を使うことにします。
お嬢様


9.まず、5.で記入した青枠内を下図のように削除してください。
テンプレいじり2-3-2

10.次に、HTML編集のところで、--/nextentry--> と /head> が並んでいるところを探します。上の方にあります。ここに、下図のように、--/nextentry--> と /head> の間に赤枠内のテキストを追記してください。面倒ですが頑張りましょう!
head[0] = " "; の " " の間には1枚目の画像のurlを、
head[1] = " "; の " " の間には2枚目の画像のurlを入れます。
テンプレいじり2-8

入力が終わり「更新」をクリックすれば、ランダムで画像が表示されるようになっているはずです。
テンプレいじり2-9

11.もし更に画像を追加したい場合は、10.のHTML編集のところで下の図のように
head[2] = " ";
head[3] = " ";
   ・
   ・
   ・
と追加する画像の数だけテキストを追加すれば無限に増やせるようです。
テンプレいじり2-10

お疲れ様でした。以上でヘッダーに画像を表示する方法は終了です。頑張ってください。

ふぅ。やっと終わった・・・大変だったわりに、ちゃんと伝わるのか大いに心配です・・・
自分でまとめてみて改めて面倒な作業だと思いました・・・
もしわからなかったら遠慮なく聞いてください。

さて、このあとは自分の趣味に没頭させていただきます。さようならー

テーマ : 東方Project - ジャンル : ゲーム

22:39  |  テンプレ改造  |  トラックバック:(0)  |  コメント:(6)
 | ホーム | 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。