webdesignkeys

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

Subscribe by RSS RSS Icon
Follow me Twitter Twitter Icon
 
 

スポンサーサイト

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

Comment

コメントの投稿













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

「blackcool_proj02」 メニューバーのリンクの設定方法

作成したテンプレートのメニューバーへのリンク設定方法について説明します。

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

<div class="menu">
<ul>
<li><a href="<%url>">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">links</a></li>
<li><a href="#">entry</a></li>
<li class="endmenu"><a href="#">rss</a></li>
</ul>

<div class="clear"></div>
<a href="http://webdesignkeys.blog61.fc2.com/"><div id="top_banner"></div></a>

<ul>
<li><a href="#">Service</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Project</a></li>
<li class="endmenu"><a href="#">Category</a></li>
</ul>
</div><!-- /menu -->

私が作成するメニューバーは、リストタグを使っています。
実際には、リンクリストや、カテゴリー、最新情報などに利用されるタグです。

■リストタグ

<ul>
<li></li>
<li></li>
</ul>

今メニューバーの「HOME」と書かれているボタンを押すと
トップページに戻るようになっていると思います。
これはFC2ブログの単変数とよばれるもので、トップのURLの値を返すものを
<%url>と記述しています。
%から始まる単語は、なんらかの値が代入されるものだと思ってください。

■リンクの設定方法

リンクを設定する時は、aタグと呼ばれるもの、実際には、
a href=""と記述されたところのダブルクォーテーションの中に
URLを記述します。
ここでは「#」をURLに変えて使用してください
では実際の使い方としてはどんなものがあるのか
ということですが、例として以下のようなものがあります。

・単変数

<%url> ブログURLを表示
<%css_link> 設定で選択したデザインのCSSファイルへのURLを表示

他の変数と組み合わせると面白いかもしれません
単変数については以下参照
http://fc2blogmanual.blog60.fc2.com/blog-category-15.html#e160

・XML

FC2ブログでは、自動でXMLファイルが生成されます。
例えば、RSSを表示させたいとき
以下のように自分のブログのURLに?xmlを付加してアクセスしてみてください。
デザインはブラウザ依存ですが、RSSが表示されるはずです。
*RSSは、更新情報の表示です

http://webdesignkeys.blog61.fc2.com/?xml

このRSSを表示するときは、
a href="<%url>?xml"
a href="?xml"
と記述しても動きます。

このほかには、
コメントの最新情報
http://webdesignkeys.blog61.fc2.com/?xml&comment
トラックバックの最新情報
http://webdesignkeys.blog61.fc2.com/?xml&trackback

このようなものがあります。
メニューに自サイトのRSSリンクを張ったりするといいのではないでしょうか?


・個別記事

メニューバーの設定には一番よく使うと思います。
例えば、
Aboutに自サイトの概要説明や紹介
Contactに連絡方法
linksに相互リンク集

を設定するとします。
その場合には、これらの内容を記事を書いて投稿してください。

それぞれ投稿した記事をクリックすると
blog-entry-○.htmlのようなアドレスになると思います。

このサイトの例では、このようなアドレスになります。
(このサイトのトップのメニューバーの「about」をクリックすると
以下のアドレスにジャンプします)

http://webdesignkeys.blog61.fc2.com/blog-entry-2.html

このような個別記事のURLをメニューバーの「about」や「contact」に設定すればいいです。



・カテゴリ

個別記事と同じくカテゴリもよく使います。

FC2ブログにはカテゴリというものが存在し、
記事をカテゴリ別にまとめることが可能です。
カテゴリは記事を投稿する時に追加することができます。

私のサイトを見るとわかりやすいのですが、
トップのメニューバーの「wallpaper」をクリックすると、
壁紙の記事一覧が表示されると思います。
これは、壁紙の記事を全て同じ「壁紙」というカテゴリに
分けられているからです。このようなカテゴリを利用したリンクの設定は
とても便利だと思います。

実際のアドレスはというと

http://webdesignkeys.blog61.fc2.com/blog-category-1.html

のようになります。
カテゴリは、生成した順に番号が割り振られます。

割り振られたカテゴリ番号を確認する方法の一つとしては、
「環境設定」から「カテゴリの編集」をクリックし、「件数」と書かれた
場所の数値をクリックすると、該当するカテゴリのページに飛びます。
ジャンプした先のアドレスがカテゴリページになります。





すごく長くなってしまいましたが、個別記事へのリンク方法は以上です。
色々ためしてみるとわかってくるとおもいますので、
チャレンジしてみてください。
わからないことがあれば気軽にコメントください。

それでは、テンプレートを利用してくださってありがとうございました。

Comment

コメントの投稿













管理者にだけ表示を許可する
 
<< 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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。