webdesignkeys

CSSやjavascriptなどを利用した動的なサイト作りやwebデザインに関するネタを紹介!

Subscribe by RSS RSS Icon
Follow me Twitter Twitter Icon
 
 

スポンサーサイト

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

Comment

このテンプレートを利用させていただいてます。
とてもデザインが好きでお気に入りなのですが
難しくとても使いこなせているわけではございません。

上下メニューの間に画像を差し替えたいのですが
どうしたらいいのかわかりません。

そもそも上級者向けに作られたテンプレートを
生意気に初心者が使って
さらに初歩的な質問までして申し訳ありません。
時間がかかってもかまいません。
ご回答お待ちしております。

2010.08.13 | URL | hatyu #- [ edit ]

コメントの投稿













管理者にだけ表示を許可する
 

「blackcool_proj02」 ギャラリーの画像を変える

ギャラリー画像の変え方について紹介したいと思います。

今のテンプレートですと、9枚の画像が自動でスクロールするようになっています。どこでこれを記述しているかというと

「環境設定」⇒「テンプレート設定」でHTML編集の編集見てみてください。
すると以下のような記述が見つかると思います。


<div class="infiniteCarousel">
<div class="wrapper">
<ul>
<li><a href="#" title="Tall Glow"><img src="http://blog-imgs-29.fc2.com/w/e/b/webdesignkeys/p02-ga01.jpg" height="75" width="75" alt="Tall Glow" /></a></li>
<li><a href="#" title="Wet Cab"><img src="http://blog-imgs-29.fc2.com/w/e/b/webdesignkeys/p02-ga02.jpg" height="75" width="75" alt="Wet Cab" /></a></li>
<li><a href="#" title="Rockefella"><img src="http://blog-imgs-29.fc2.com/w/e/b/webdesignkeys/p02-ga03.jpg" height="75" width="75" alt="Rockefella" /></a></li>
<li><a href="#" title="Chrysler Reflect"><img src="http://blog-imgs-29.fc2.com/w/e/b/webdesignkeys/p02-ga04.jpg" height="75" width="75" alt="Chrysler Reflect" /></a></li>
<li><a href="#" title="Chrysler Up"><img src="http://blog-imgs-29.fc2.com/w/e/b/webdesignkeys/p02-ga05.jpg" height="75" width="75" alt="Chrysler Up" /></a></li>
<li><a href="#" title="Time Square Awe"><img src="http://blog-imgs-29.fc2.com/w/e/b/webdesignkeys/p02-ga06.jpg" height="75" width="75" alt="Time Square Awe" /></a></li>
<li><a href="#" title="Wonky Buildings"><img src="http://blog-imgs-29.fc2.com/w/e/b/webdesignkeys/p02-ga07.jpg" height="75" width="75" alt="Wonky Buildings" /></a></li>
<li><a href="#" title="Leaves of Fall"><img src="http://blog-imgs-29.fc2.com/w/e/b/webdesignkeys/p02-ga08.jpg" height="75" width="75" alt="Leaves of Fall" /></a></li>
<li><a href="#" title="Leaves of Fall"><img src="http://blog-imgs-29.fc2.com/w/e/b/webdesignkeys/p02-ga09.jpg" height="75" width="75" alt="Leaves of Fall" /></a></li>
</ul>
</div>
</div>



<div class="infiniteCarousel"> <div class="wrapper">
の記述は今は気にしなくていいです。

では、ソースコードについて簡単に説明します。


■リンク
a href ="#" と書かれたこの「#」のところがリンク先アドレスになります。
今は、シャープはクリックしても何もアクションが起きない状態です。
ここにリンクさせたいアドレスを記述すれば、画像をクリックしてそのURLにジャンプするようになります。

■タイトル
title="" のダブルクォーテーションに入るのは、マウスで画像をホバーした時に出力されるポップアップテキストになります。

■イメージ
img src ="" のダブルクォーテーションには、アップした画像のアドレスを記述するところになります。
なのでギャラリーの画像を変えるためには、ここのダブルクォーテーションに囲まれた場所を変更します。

FC2ブログでは、アップしたファイルが、ブログとは、別のサーバにアップされるので、絶対パス(http://から拡張子まで全部)を記述してください。
注意すべき点は、画像のサイズですが、75×75にしてください。レイアウトが崩れる恐れがあります。


ギャラリー画像の変更の仕方は以上になります。
他に大きな画像を入れたいとか画像の表示数を増やしたり減らしたりしたいなど
要望があれば気楽に質問してください。

テンプレートを利用していただいてありがとうございます!

Comment

このテンプレートを利用させていただいてます。
とてもデザインが好きでお気に入りなのですが
難しくとても使いこなせているわけではございません。

上下メニューの間に画像を差し替えたいのですが
どうしたらいいのかわかりません。

そもそも上級者向けに作られたテンプレートを
生意気に初心者が使って
さらに初歩的な質問までして申し訳ありません。
時間がかかってもかまいません。
ご回答お待ちしております。

2010.08.13 | URL | hatyu #- [ edit ]

コメントの投稿













管理者にだけ表示を許可する
 
<< PREV | HOME | NEXT >>

FC2 template
fc2_template_question.jpg

Category

NEWS
 

Comment

Archives

Favorite
125x125 banner 1
125x125 banner 2
125x125 banner 3
125x125 banner 4

Object
CoRich word of mouth information
Web service is developed through word of mouth information. ⇒CoRich
web design keys fc2 blog ranking!!
It challenges the ranking on my site. Please click this links. ⇒FC2 Blog Ranking
Proin magna amet fermentum dignissim
Nulla gravida, lacus molestie convallis dolor sem suscipit nisl, ut pharetra erat leo in elit.
Fusce pulvinar euismod urna vel viverra
Quisque malesuada laoreet tellus vel iaculis. Morbi nulla leo euismod pulvinar erat.
Class aptent taciti sociosqu ad litora
Curabitur vestibulum est eu purus bibendum eu eleifend diam tempor. Fusce metus eros, faucibus ut hendrerit ac.

Links

 
 
 
 
 
 
Copyright Info.

Nulla enim nibh, conse ctetuer sed, vesti bulum eleme ntum, sagittis nec, diam. Mauris blan dit vehi cula neque. Read More

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