QLOOKアクセス解析

スポンサーサイト

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



------ --:--

【FC2カスタマイズ】第5回:パンくずリストの作り方

今日はFC2カスタマイズ、第5回です。
パンくずリストをご紹介したいと思いま~す。


パンくずリストってなぁに?

パンくずリストというのは、ユーザーが現在見ているページが、
どの階層にあたるのかを示すリストのことです。
主にユーザビリティ目的で作られるリストのことなんですね。

具体的に言うとこんなリストのこと。
TOP【FC2】 カスタマイズ → 【FC2カスタマイズ】第5回:パンくずリストの作り方
↑は、この記事のリスト。
うちのブログで、個別記事表示の時には記事上部に表示されているのが、
パンくずリストです。


FC2ブログでパンくずリストを実装してみよう~

パンくずリストを作るには、以下のHTMLを使います。

<!--permanent_area-->  … ①
<!--topentry-->  … ②
<a href="<%url>">TOP</a> → <a href="<%topentry_category_link>"><%topentry_category></a> → <%topentry_title>  … ③
<!--/topentry-->  … ④
<!--/permanent_area-->  … ⑤


まずは①と⑤。
これは個別表示した時だけ表示しますよ~という独自タグです。
①で始まり忘れずに⑤で閉じます。

次に②と④。
これは記事を表示するためのエリアの独自タグ。
記事表示関連の独自タグは、<!--topentry-->エリアに記述するという決まりがあります。

最後に③。
これが肝心のパンくずリスト。
<%url>というのは、自分のブログのURLを表す独自タグ。
TOPという文字は、ブログのトップページにリンクされます。
<%topentry_category_link>は、その記事が属するカテゴリのURLです。
<%topentry_category>は、カテゴリの名称を現すので、記事が属するカテゴリへリンクされるようになってます。
<topentry_title>は、表示している記事の記事タイトルです。
現在表示中なので、特にリンクは貼ってない仕様です。


さて、肝心なのはこれをどこにコピペするか?ですね。
テンプレから、<!--topentry-->という記述を探します。
基本的なテンプレだと、ここからが記事表示の始まりなので、
この記述の↑にコピペして下さい。
コピペした後、個別記事表示すると、パンくずリストが表示されてるはずで~す。


パンくずリストは、見ている人が迷子にならない役割が主ですが、
内部リンク効果によるSEO対策も兼ねてます。
お邪魔でなければ、記事上部にひっそりと、パンくずリストを表示させてみては?
質問などはコメ欄にて~♪


⇒【FC2カスタマイズ】第5回:パンくずリストの作り方の続きを読む

スポンサーサイト

20071127 00:10

【FC2カスタマイズ】第4回:折り畳みメニュー

今日はFC2カスタマイズ、第4回です。


折り畳みメニューを作る方法

こちらリクエストがあったのでご紹介したいと思います。
私が左サイドバーで使ってるやつです。

実装するにあたって、こちらのブログ様を参考にさせて頂きました。


1.JavaScriptの記述
まずは以下のJavaScriptを<head>~</head>の間にコピペして下さい。




2.実際に折り畳む箇所の記述
例えば↓のような折り畳みメニューを作りたい場合。

■くだもの ← クリックで開閉
 りんご     <!--ここから折り畳む-->
 みかん
 メロン     <!--ここまで折り畳む-->




まずは、Aの解説。
ここのリンクタグで先ほどコピペしたJavaScriptを呼んでいます。

そして、B。
style="display:none;"に注目。
これは、この<div>タグを非表示にする意味を持ちます。
なので、画面初期表示状態では、折り畳みメニューが閉じた状態になってます。

それをAをクリックしてJavaScriptを呼ぶことで、
開く状態にするんですね。
JavaScriptに、このdivタグを開閉してね~と教えてあげるのが、
Aのonclick="dd('fo01')とBのid="fo01"です。

一つのソース内で同じidは使えません
というか使うと、JavaScriptくんが、どれを開閉すればいいのか分からなくなります。
なので、開閉メニューを増やしたい時は、
fo01fo02,fo03...というように変えていけばOK。

この記述だと、初期表示時は閉じてますが、
最初に開いておきたい場合は、Aのstyle="display:none;"を消せばOKです。


折り畳みメニューは結構需要が高いので紹介してみました。
こちら、FC2ブログでなくても普通のサイトでも他のブログでも利用出来ます。
質問などはコメ欄にて~♪

⇒【FC2カスタマイズ】第4回:折り畳みメニューの続きを読む


20071120 10:11

【FC2カスタマイズ】 第3回:記事から管理画面へ直行する方法

今日はFC2カスタマイズ、第3回です。


記事から管理画面へ直行する方法

記事を書いた後、しまった!書き忘れ!とか、
リンク貼り忘れた~!!とかいう経験ないですか?

私はよくやらかします。
特にライター系の記事を書いて見直しをしてる時なんかに……。

詳細記事を修正したい時なんかもそうですが、
管理画面開いて、過去記事の管理開いて、修正対象記事探して……。
面倒くさ~い!!!!!
ってなった時に便利。
記事から直接、記事編集画面に行く方法をご紹介♪


★旧管理画面を使っている場合の記述
<a href="http://blog●.fc2.com/■/admin.php?mode=editentry&no=<%topentry_no>" target="_blank">Edit</a>

★新管理画面を使っている場合の記述
<a href="http://blog●.fc2.com/control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank">Edit</a>

●の部分には、自分のブログのサーバー番号を設定して下さい。
サーバー番号は、ブログのURLを見ればすぐに分かります。
このブログのURLは、http://sohappy0.blog58.fc2.com/なので、
サーバー番号は58になります。

■の部分には、自分のブログのIDを設定して下さい。
IDはブログを作った時に自分が決めたもの。
こちらもブログURLを見ればすぐに分かります。
このブログだと、sohappy0がIDです。


さて、この記述をどこに書くのかという問題ですが…。
↑の記述を見ると、<topentry_no>という独自タグを使ってます。
これは、<!--topentry-->~<!--/topentry-->内でしか使えないという規則があります。

逆に言えば、その条件さえ守れば、どこに記述してもいいんですが…。
私は、コメントとトラックバックの数を表示している右側に鍵マークで表示してます。

この位置に表示させたい場合。
コメントやトラックバックの数を表示させる独自タグは、
<%topentry_comment_num>もしくは<%topentry_tb_num>です。
この独自タグをテンプレート内から探しだして、↑の記述をコピペすればOK。

記事表示部分は、テンプレート作成者さんによって色々違うので、
ここにこう書けばいいよ!とは書きにくいんですけどね(・・;)

使ってみたいけどどこに書けばいいか分からない!という方は、
コメントででも聞いて下さい♪


続きを読むとさるるの日記が読めます♪

⇒【FC2カスタマイズ】 第3回:記事から管理画面へ直行する方法の続きを読む


20071110 00:10

【FC2カスタマイズ】 第2回:ブログタイトルを画像にする方法

今日はFC2カスタマイズ、第2回です。


ブログタイトルを画像にする方法

これも何人かのお友達から質問された内容です。

画像にしたい!と思う人は思うし、必要ないと思う人は思うし、
人それぞれだと思いますが、掲載してみました。


FC2ブログで、ブログタイトルを表示しているのは、例によって独自タグです。
<a href="<%url>"><%blog_name></a>
↑こんなタグが<body>タグの下の方に書いてあると思います。

<%url>がブログURLの独自タグ、
<%blog_name>がブログ名の独自タグになります。


さて本題。
単純にブログタイトルを画像に変えたい場合、↑のタグが記述されている箇所を探して、
<a href="<%url>"><img src="画像のURL"></a>
と書き換えてやれば画像が表示されます。

ただ。SEO対策が施されているテンプレだとブログタイトルの箇所は大抵、
<h1><a href="<%url>"><%blog_name></a></h1>
↑こうなってます。
これは<h1>タグがロボット検索エンジンに重要視されるためですね。

それをあっさりさっぱり捨ててしまうのは勿体ない。
ということで。
まずhtmlテンプレの方の記述をいじります。

<h1><a href="<%url>"><%blog_name></a></h1>

<h1><a href="<%url>"><span><%blog_name></span></a></h1>

そしてCSSテンプレの方に追記。

h1 a {
background:url(使用する画像のURL);
background-repeat:no-repeat; → 画像を繰り返さない指定
width : ●px; → 使用する画像の幅を指定
height : ●px; → 使用する画像の高さを指定
display : block;
}
h1 span {
display : none;
}


これでブログタイトルが非表示になり、代わりに画像が表示されます。
ただし、CSSテンプレに元から<h1>タグへの指定がなにかあった場合、
うまくいかない場合もあるかもしれません。

ブログのカスタマイズをする前には、必ずバックアップを取りましょう~。


続きを読むとさるるの日記が読めます♪

⇒【FC2カスタマイズ】 第2回:ブログタイトルを画像にする方法の続きを読む


20071020 01:11

【FC2カスタマイズ】 第1回:ランキングバナーなどを記事内に必ず表示させる方法

今日はサイト紹介をちょっとお休みして…。
FC2ブログのカスタマイズ方法をご紹介したいと思いま~す。


第1回はこれ。

記事内にランキングバナーや広告を固定表示させる方法

最近、お友達から質問された内容です~。
みなさん記事内にランキングやバナー広告を表示されてるので、
普通にご存知のことかと思ってたんですが、
記事を書くたびに貼ってる方もいらっしゃったことを知りました(・・;)


まず軽くテンプレートの構成から…。
テンプレート内の記事を表示する部分は、独自タグというもので構成されてます。

マメ知識 独自タグってなに??

これはFC2ブログ内でのみ利用出来るタグのことをいいます。
独自タグの種類はたくさんあって、そのタグを記述すると、
ブログを表示した時に対応した内容を表示してくれるというもの。

いくつかまとめてみました。
<%topentry_body> 記事本文に置き換わる独自タグ
<%topentry_link> 記事URLに置き換わる独自タグ
<%topentry_more> 追記に置き換わる独自タグ

独自タグについては、別記事で詳しく説明しようと思いま~す。

簡単な記事表示部分の構成は…。

<!--topentry-->
<%topentry_body>
<!--more_link-->
<!--/more_link-->
<!--more-->
<%topentry_more>
<!--/more-->
<!--/topentry-->

という構成になってます。
日本語で書くと、

記事開始 →<!--topentry-->
記事本文 →<%topentry_body>
追記がある場合【続きを読む】を表示 →<!--more_link-->~<!--/more_link-->
追記開始 →<!--more-->
追記本文 →<%topentry_more>
追記終了 →<!--/more-->
記事終了 →<!--/topentry-->

という感じ。
全てが独自タグで構成されているので、適切な位置に言葉を書くと、
それが全ての記事にくっついてくるわけです。


【追記内に表示を固定させる方法】

1.<%topentry_more>を探す
まずは利用中のテンプレートの中から、<%topentry_more>という記述を探します。

2.次の行に表示させたいタグや言葉を書く
【ここに表示してみる?】
と書くと、記事全てにこの文章がくっついてきます。


【本文→追記→表示固定の方法】

1.<!--/topentry-->を探す
まずは利用中のテンプレートの中から、<!--/topentry-->という記述を探します。

2.1行前に表示させたいタグや言葉を書く
【ここに表示してみる?】
と書くと、記事全てにこの文章がくっついてきます。

うちのサイトはこのパターンです。
この表示方法だと、一覧表示の場合でも個別記事表示の場合でも、
表示させたいものが表示されて便利♪


【本文→表示固定→追記の方法】

1.<!--more_link-->を探す
まずは利用中のテンプレートの中から、<!--more_link-->という記述を探します。

2.1行前に表示させたいタグや言葉を書く
【ここに表示してみる?】
と書くと、記事全てにこの文章がくっついてきます。

記事と追記の間に表示させる方法ですね。
記事と追記が離れるのである意味読みやすいかも?


※ここで注意!!
改行タグ<br>は忘れずに入れて下さい。
そうしないと、ランキングやバナーと同じ行に追記などが表示されてしまいます。


毎回貼り付けるのは面倒だったよ!!という方は利用してみて下さい♪
質問があればコメして頂ければお答えしま~す。

続きを読むとさるるの日記が読めます♪

⇒【FC2カスタマイズ】 第1回:ランキングバナーなどを記事内に必ず表示させる方法の続きを読む


20071010 00:00

| HOME |

MENU

Access Ranking

LINK

★お小遣い稼ぎサイトさん★

★素材屋さん★
web*citron A Trial Product's 素材置き場

Vivid Colors SUGAR PINK

お気軽にどうぞ☆
さるるとブロともになってみる

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