livedoorBlogサポート同盟
TOPページへ
食と日記:毎日の食と日記 ブログ:ブログカスタマイズ教室 オススメ:食のオススメ こうさぎ:こうさぎ関連 リンク:お世話様ですリンク 掲示板:ご意見・ご感想・リクエストなど何でもどうぞ

[ブログ]番外編 ページ上部にカテゴリリンク

October 08, 2004


リクエストシリーズ第2弾は、萌黄さんのリクエストでタイトルのすぐ下にカテゴリ別のリンクを表示する方法です。
カテゴリ別のリンクがページ上部にあると、どんな内容のブログなのか一目でわかり、便利ですよね。
難しいことはないので、皆さんぜひ挑戦してみてください。


1.やり方

1.各カテゴリーのURLをメモする
自分のブログのカテゴリーアーカイブを表示し、URLをコピーしてメモ帳などに貼り付けておきます。
それぞれどのカテゴリーのものかがわからなくならないよう注意してください。
ちなみに私の場合はこんな感じです↓

2.HTMLを記述
メモ帳などで、タイトル下に挿入するHTMLを記述します。
<DIV CLASS="categorylink">
<A HREF="各カテゴリのURL" TITLE="各カテゴリ名">
各カテゴリ名
</A>
</DIV>
初めの<DIV CLASS="categorylink">と最後の</DIV>は後からCSSで見栄えを調整するためのものです。
各カテゴリのURL」の部分には、1でメモをとったURLを「http://」から記述します。
各カテゴリ名」にはカテゴリの名前を記述してください。
私のブログの場合は、以下のようになります。


テキストリンクではなく画像を使用する場合は、<A>と</A>の間に<IMG>タグを利用して画像を貼り付けます。
例えばこんな感じです。

実際に私のブログで利用しているのは、こちらになります。
画像のアップ、URLの取得の仕方は、第五回の画像のURL1〜3を参照してください。

3.2のHTMLをコピーしてBlogの設定の「説明」欄に貼り付ける
カテゴリーリンク部分のHTMLが記述できたら、すべて選択してコピーします。
管理画面で「Blogの設定/管理」タブをクリックすると、「blogの設定」画面が出てきますので、 上から3つ目の「説明」のところに、先ほどコピーした記述を貼り付けます。
設定を保存したら「Blogの再構築」で「全ページ」を選択して再構築して下さい。

※現在はHTMLを編集することができるので、直接HTMLに記述を加えることもできます。
   2のHTMLをコピーして、トップ・個別記事・カテゴリ別・月別の各HTMLテンプレートの「</description>」の前か後あたりに貼り付けてください。

基本的にはこれだけでOKです。
一度自分のブログを確認し、リンクをクリックしてちゃんと飛べるかどうか、確認してみてください。
レイアウトが変なのは、CSSの指定で調整できます。

2.装飾

単にHTMLで記述を加えただけだと、見栄えがよろしくないかと思われます。
そこで、CSSを利用して、自分のブログに合うように装飾してみましょう。
が、細かく説明する余裕はないので、 リクエストしてくれた萌黄さんのブログに合わせて私が作ったCSSの記述を載せておきます。
この記述を参考に、装飾にチャレンジしてみてください。

「.categorylink」

ここにはカテゴリーリンク全体の位置に関わる記述をします。


「.categorylink A」
ここには各リンクの領域の大きさや文字の位置に関わる指定をします。


「.categorylink A:hover」
ここにはリンクにカーソルが触れた時の背景色などを指定します。
ちなみにリンクの文字色等を指定したい場合は、
   「.categorylink A:link」(まだ訪問していないリンク部分)
   「.categorylink A:visited」(すでに訪問したリンク部分)
   「.categorylink A:active」(現在選択中のリンク部分)
にいろいろ指定してみてください。



こんなところで解説はおしまいです。
もしわからないことがあったらお気軽にご質問くださいませ。



posted by すい at 04:52 │ブログComments(11)TrackBack(1)↑PageTop↑
TrackBack URL:http://trackback.blogsys.jp/livedoor/sui_vent/7775833
EditDelet
トラックバック

本日、カテゴリリンクの設置完了しました 昨日の夜からやってたので、ウレフィスです といっても、姉様にやり方聞いたので、100%自力という訳ではないですが・・・ でも、嬉しいナw ビンがかわいいから一目ぼれしてなんとか使ってやろうと考えましたw 参照にしたb
by ▽△カテゴリリンクの設置成功△▽【SPA LOG」」」】at August 14, 2005 22:55

コメント

萌黄さんへ
リクエストをいただいていたのに遅くなってしまって申し訳ありませんでした。
お詫びといってはなんですが、すぐにできるように、萌黄さん用のHTMLとCSSを用意しました。
それぞれURLをコピーしてジャンプ、出てきたページのソースを開いて、中身をコピーしてお使いください。。

HTML(Blogの設定の「説明」部分に貼り付けてください)
http://blog.livedoor.jp/sui_vent/46f85294.txt
CSS(「custom」をクリックして出てきたフォームの中身を削除してから貼り付けてください)
http://blog.livedoor.jp/sui_vent/3022ae94.txt

装飾は、ご自分でお好きなように手直ししてくださいね〜。
Posted by すい at October 08, 2004 05:11
すいさん、お忙しい所ありがとうございます
わざわざソースまで用意してくださり、かえって悪かったなぁと反省
本当にすみませんでした そして本当にありがとう<(_ _*)>
さっそくつかわさせていただいてます^^

1つ質問が出来たので書き込みさせていただきます
私のBlogはカテゴリとか関係なく全部表示された状態なんですが、すいさんの所のようにカテゴリだけ(「食と日記」なら「食と日記」だけ)の状態で表示したいです
どうすればいいか、また教えてください ヨロシク(゚0゚)(。_。)ペコッ

P.S 最近のライブドア夜になると重たくて仕方ないですよね
なんか問題ばかり起きてる気が… 野球もいいけどBlogもどうにかしてくれ_| ̄|○
Posted by 萌黄 at October 08, 2004 22:27
はてはて?
う〜んと、カテゴリページにとべばちゃんと表示されますよね。
もしHPの中で「Diary」をクリックした時に表示されるページを特定のカテゴリのものにしたい、とかならば、そのカテゴリのアドレスにリンクをはればよいのですよね?
ちなみにうちのもトップページはカテゴリ関係なく全部の記事がでてますよ。
もちっと詳しく言っていただければもちっとちゃんとしたアドバイスができるかもです。。

> P.S
ライブドアにはもう期待しません。
今うちのブログ、コメントを投稿する時の確認画面が出ないので、それだけ問い合わせしていますが。。
すばやい回答は期待しません。はい。
どうせやめるしね。。
Posted by すい at October 09, 2004 13:23
風邪とか大丈夫でしょうか? このところ体調がすぐれない萌黄です(;´Д`A ```

かなり恥ずかしい勘違いしてたみたいです(キャーw
「気がつかなかった リンクかぁ」と納得して貼ろうと思ったんですが、#LINKSの部分が表示されてなかったので結局TOPにしました
もうちょっとちゃんと確認してからでないといけないですね(それから勉強も
ほんと申し訳ないですm(。_。;))m ペコペコ…

P.S Blogやめられちゃうんですか?オロ(゚д゚;≡= ≡;゚д゚)オロ
いろいろお忙しいですもんね でもすごく勉強になるサイトだったのでやっぱりショックです
そうじゃなくてライブドアやめるだけならば、他のサイトに移られてもこっそり覗きに行かせてもらいますw
σ(´ェ` *)はすいさんに作っていただいたカテゴリボタンがめっちゃお気に入りなので、もうしばらくがんばろうと思います
Posted by 萌黄 at October 12, 2004 19:00
アーカイブページにもサイドバーを出すことはできますよ^^
ちょっと検索かけてみればやり方はいっぱい見つかると思うんで、
勉強してみてはいかがでしょう??

> P.S
ブログはやめませんよー。
ただ、ここ最近のライブドアの暴挙に、投稿する気になれないのも事実。
ネタはいろいろあるんですがね・・・。
現在MovableTypeでちまちまとサイト作成中です。
公開したらここからもリンクはりますので、どうぞよろしくおねがいします☆
Posted by すい at October 14, 2004 14:23
(´・ω・`)ホゥ ありがとうございます^^ 勉強してみますね
やっとバナーも出来て公開できるようになりましたε- (´ー`*) フゥ
これからも頑張らないとなぁ

P.S (´▽`) ホッ これはよかったです^^
ここんトコ、問題続きでしたもんね、対応もいまいちだしw
新しく出来上がったらまたリンク張替えますd(・ω・。)ネ
お互い更新は大変ですががんばりましょう


Posted by 萌黄 at October 16, 2004 05:05
萌黄さんどうも〜
バナーかっこいいですね!!
私もそのくらいセンスと技術があればなぁ・・・
新しいサイトは着々と形になっています。
てかもう、ほとんど準備OKで後は記事を移動したりAboutやLinkページを作成するのみです。
萌黄さんにお知らせできる日も近いかも・・・って、
こんなことしてる場合ではないのですけどね。。。
Posted by すい at October 16, 2004 16:53
こんばんわ。はじめまして。まつしたと申します。

CSSは、まったくの初心者で本と萌黄さんのようなサイトを見ながら
勉強中です。
CSSは、なかなかなれなくて大変ですが、萌黄さんの説明みてると
頑張れそうだ!って、いろいろやってみたのですが、
どうしても無理なので、どうかお教え下さい。m(_ _)m

私がしたいことは、萌黄さんのブログの位置でいうと
黄緑色の背景部分((TOP>ブログ>[ブログ]番外編と書いてあるところ)
の位置に http://blog.livedoor.jp/mongocco/90f343df.gif を
横方向に繰り返しで並べたいのです。私がやってみたCSSですが

.description{


のあとに
.flag{
margin:0 0 10px 0;
position:absolute;
top:115px;
background-image:url"http://blog.livedoor.jp/mongocco/90f343df.gif");
background-repeat:repeat-x;
}

書き加えました。そして、TOPのHTMLの
<div class="description"><$BlogDescription$></div>
</div>のあとに
<div class="flag"></div>
を書き加えました。
そのあとに Blogの再構築しましたが、まったく反映されませんでした。(T_T)
どうしたらいいのだろ?.....、ってフリーズ状態です。

卒論でお忙しいなかを 本当にすみませんが、お教えください。m(_ _)m
Posted by まつした at October 26, 2004 21:33
あ!ごめんなさい。m(_"_)m

お名前を間違っていました。(>_<)

萌黄さんではなくて...すいさんです。

すいさん、お名前を間違えて大変申し訳ありませんでした。

Posted by まつした at October 27, 2004 19:01
すみません、ここのところこちらのコメントはチェックしていませんでした。。
大変申し訳ないですが、次回からはBbsか、clover(http://suisui.moo.jp/)の方にコメントいただけると嬉しいです。

で、ですね。
実際にやってみて確かめたわけではないのですが、
もしかしたら.flagに、widthやheightを指定してやるとできるかもしれません。
.flag内に何も書かれていないので、領域として成り立っていないのだと思われます。

もしできなかったらまたコメントくださいね。
(Bbsかcloverに、お願いします。。)
Posted by すい at October 28, 2004 10:41
すいさん、こんばんわ。

お忙しい中、サポート同盟とこちらの両方のお返事を
ありがとうございました。m(_ _)m

お名前を間違うという失礼な間違いをしてごめんなさい。

widthとheightの指定で画像表示されましたが、
こまったことが起きました。(T_T)
さぽーと掲示板の方に内容をかきこしました。
ご覧頂けますように....。m(_ _)m
Posted by まつした at October 28, 2004 19:45