« 第34回:ココログを携帯で閲覧してみよう | トップページ | カスタマイズ・サンプル<No.5:sewing> »

2006/09/02

第35回:サブタイトル部分に簡易メニューを付けてみよう

KOROPPYさんのブログを参考に、任意の記事にジャンプする(させる)ための簡易メニューをサブタイトル部分に付けてみました。

サブタイトルに簡易メニュー:サンプル

 


参考にさせていただ いたのは以下のエントリーです。
■KOROPPYの本棚様: 「メニューをつけてみました」 / 「サブタイトルの表示をアレンジ」
ありがとうございました♪

KOROPPYさんは画像(バナー)にご自分で文字入れをしたものを使っていらっしゃいますが、私はサブタイトル部分にはリンク用のタグだけを入れてそのリンクをCSSで装飾する方法をとりました。
処理方法は以下の通りです。

手順

リンク用のHTMLタグ、及びCSSタグを準備する

サブタイトル部分の変更は、反映前に「確認」することが出来ません。
保存するとそのまま(少なくともトップページには)反映してしまうので変更する場合は、事前準備をしっかりしておく必要があります。

〈HTMLタグ〉
リンク先を指定するタグです。

  1. リンク用のHTMLを「メモ帳」などに記述する。

    <a href="●●●">■■■</a>
    ※●●●=リンク先のアドレス、■■■=サブタイトル欄に表示する文字列を代入

    ※いくつ書いても大丈夫ですがタイトル表示部分の幅を考えて並べて下さい。
    ※折り返す場合は<br />タグを間に入れましょう。
  2. 記述したHTMLを

    <div class="menu">

    </div>

    で挟む。
    ※下記のCSSを適用するためのクラスをここで指定します。
    ※上記の例でいくと

    <div class="menu">
    <a href="●●●">■■■</a>
    </div>

    となります。
    ※CSSを適用しない場合は、この<div>タグは不要です。

〈CSSタグ〉
上記のHTMLを装飾するためのタグです。

  1. リンク装飾用のCSSタグを「メモ帳」などに記述する。
    ※セレクタはそれぞれ下記のような形で指定します。

    /*未訪問*/
    #banner h2 div.menu a:link{~}

    /*訪問済み*/
    #banner h2 div.menu a:visited{~}

    /*マウスでポイントしたとき*/
    #banner h2 div.menu a:hover{~}

    ※{~}内の要素はそれぞれ好きなように記述して下さい。
    ※私は以前
    第28回: リンクの装飾を設定してみよう
    でサンプルに使った「枠線を付けてボタン風に表示」のスタイルを使ってみました。

サブタイトル欄にHTMLタグを入力する

  1. [管理ページトップ]→[ブログ]タブ→[設定]→[基本設定]画面を開く。
  2. 上記で書き出した〈HTMLタグ〉を全文コピーして、「ブログのサブタイトル(キャッチフレーズ)」欄に入力する。
  3. 画面一番下の「変更を保存」ボタンを押す。
    ※保存が終了すると、
    『設定変更の内容を保存しました。変更をサイトに反映させるには、サイトへの反映が必要です。』
    の文章と「サイトに反映」ボタンが表示されますが、ここでは反映せずに次の作業に移ります
    ※CSSの適用が不要な場合は、ここで「反映」してしまって構いません。

カスタムCSSにCSSタグを入力する

  1. [管理トップページ]→[ブログ]タブ→(便利メニューから)[デザインの編集]→[カスタムCSSを編集]
    ※「カスタムCSSを編集」は、リッチテンプレート適用時には利用できません。
    ※CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください。
    ※カスタムテンプレートの作り方は
    第3回: カスタムテンプレートを作ってみよう
    を参照して下さい。
  2. 上記で記述したCSSを「編集」画面のCSS記述欄に全文コピー&ペーストする。
  3. 「変更を保存」ボタンを押す。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。
うまくできましたか?

ここがポイント

  • KOROPPYさんのように画像(バナー)を使ってリンクを張る場合はCSSは不要です。
    サブタイトル欄にHTMLタグのみを入力して、「保存」→「反映」させて下さい。
  • この方法ならどのページから入ってもリンクが見えますので「目次」や「ブログポリシー」「注目記事」 など読んで欲しい記事へのリンクの他、別ブログ、掲示板への誘導など工夫次第でいろいろと便利に使えると思います。
    試してみて下さい。

お世話になりました

「KOROPPYの本棚」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメ ントを書く*


|

« 第34回:ココログを携帯で閲覧してみよう | トップページ | カスタマイズ・サンプル<No.5:sewing> »

カスタマイズ」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

こちらで取り上げていただけるとは光栄です♪
画像を使わない方が表示は軽いし、好ましいかもしれないですね。

投稿: KOROPPY | 2006/09/02 16:44

■KOROPPYさん
こんにちは。わざわざこちらにもコメントを頂きありがとうございます。

>画像を使わない方が表示は軽い

なるほど、確かにそうですね。
でも、それ以上に「画像に文字入れをするのが面倒だった」というのが一番の理由です(笑)
気に入った画像を探すのも大変だし…^^;

スッキリした上に目立つようになって大満足です♪
アイディアをありがとうございました(^^)

投稿: tako→KOROPPYさん | 2006/09/03 11:09

takoさんはじめまして。
ココログフリープランでブログを書いております。
早瀬五郎と申します。
この記事を参考に、サブタイトル部分に「目次メニュー」をつけることができました。
サブタイトル部分に作成したボタンから、ブログサーバ内にアップしたHTMLファイルへ飛ばす仕様にしています。
ほかにも色々と参考にさせて頂いておりますが、今回はこちらの記事のおかげで本当に欲しい機能が手に入りました。ありがとうございます。

投稿: 早瀬五郎 | 2006/12/07 12:16

■早瀬さん
こんにちは。コメント&TBありがとうございます。

私の記事がお役に立てたようで何よりです(^^)
ちなみに記事に書かれている「以前の月を表示するカレンダー」の件ですが、ココログユーザーの風柳さんがカレンダーを改変する独自のスクリプトを公開されています。
一度記事をチェックしてみては如何でしょうか。

■風柳亭様
【ココログ】バックナンバーに応じたカレンダーを表示するスクリプト&過去月カレンダー作成フォーム

ご参考まで。

投稿: tako→早瀬五郎さん | 2006/12/08 07:16

はじめまして。
 
ここのサイト様はわかりやすくて丁寧なので、いつも困ったときに
見させて頂いています(*^-^)

今回はちょっと質問?です・・・。 

サブタイトルのメニューのところへ画像を表示したいのですが、
HTMLタグだけをを打ち込んでも、長々と文字が表示されて
しまうんです・・・。。・゚゚・(≧д≦)・゚゚・。

どうすれば画像が出るんでしょうか??
より詳しく教えていただけたら幸いです。

投稿: ひまわんこ | 2009/09/25 13:27

■ひまわんこさん
こんにちは。ご訪問ありがとうございます。

さて、ご質問の件、

>HTMLタグだけをを打ち込んでも、長々と文字が表示されてしまう

とのことですが、どのようなタグを記述されているか参照できない状況では残念ながら何が悪いのか私にも判断出来ません。

ブログを実際に拝見出来れば何か判ることもあるかもしれませんので、ブログアドレスを教えて頂けませんか?
(その際、タグを入力した状態のままにしておいて下さい)
それが難しいようなら、記述したタグをこちらのコメント欄に書いていただいても結構です。

いずれにしても現在の情報だけでは回答は出来ません。
悪しからずご了承下さい。

投稿: tako→ひまわんこさん | 2009/09/25 21:31

すみません解決しましたー(^-^;

どうやら勘違いしてたようで・・・。

ブログのほうは今ちょっと準備中なので、
正式に公開したら、見に来ていただきたいとおもいます。

ありがとうございました(*^-^)

投稿: ひまわんこ | 2009/09/26 11:32

始めまして、私は以前からこのサイトはよく拝見し、利用しております。
まだ、ブログは始めたばかりなので、毎日四苦八苦しております、質問なんですがタイトルバナーの上にスペース(ワードのヘッター、フッターのように)を入れたいのですが、どうしてもできません。どのようなタグと何処にに貼り付ければよいのですか?cssのヘッターの記述のところに貼り付けると説明しているサイトもありますが、ヘッターの記述が見当たりません宜しくお願いします。

投稿: | 2016/03/22 12:02

■'16/3/22 12:02にコメントくださった方へ

コメントありがとうございます。

>タイトルバナーの上にスペース(ワードのヘッター、フッターのように)を入れたい

スペースの用途が判然としませんので回答しにくいですが、単純にバナー画像の上にスペースが開けばいいだけならCSSに

​#banner{margin-top:●●px;}

あたりを入れれば隙間が空くと思います。

なお、こちらのブログは更新しなくなって久しいですし、私も最近ではHTMLやCSSを触る機会もめっきり減っていますので以前出来ていたことも忘れてしまい今は出来なくなったということも少なくありません。
よって、ご質問をいただいてもご期待にそう回答が出来ない可能性が高いということをご了承ください。

あと、コメントいただくときは出来れば名前だけでも入れていただくと助かります。(その場限りの適当な名前でも結構ですので)

以上、よろしくお願いいたします。​

投稿: tako | 2016/03/24 21:11

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/3291982

この記事へのトラックバック一覧です: 第35回:サブタイトル部分に簡易メニューを付けてみよう:

» ブログのデザイン [コンフォートライフ]
ブログ始めたばかりですが、そろそろデザインをいろいろ変えてみたくなって悪戦苦闘し [続きを読む]

受信: 2006/10/08 20:41

» 今宵の月 [雑:写真]
ブログのデザインを少し変えてみた。やりたかったことは記事を一つひとつ「島状」に分 [続きを読む]

受信: 2006/12/01 17:52

» アポカリプス(←それ黙示) [雑兵とマジョリティ]
ココログをカスタマイズしよう!というお話です。ココログフリープランでブログを書い [続きを読む]

受信: 2006/12/07 23:23

» ココログにヘッダメニューを設置する方法 [ガジェットWatch]
Blogのタイトルと説明が出ている部分にヘッダメニューを設置してみました。 ちょっと無理やりな方法なのですが、ヘッダメニュー以外にもいろいろ応用が利くやりかたです。 ご存知の方も多いと思いますが、ご参... [続きを読む]

受信: 2007/04/24 12:40

« 第34回:ココログを携帯で閲覧してみよう | トップページ | カスタマイズ・サンプル<No.5:sewing> »