サポート » 使い方全般 » 固定ページのメニューを画像化したい。

  • 解決済 isseiaone

    (@isseiaone)


    はじめまして。
    aoneです。

    現在、WPのバージョンは3.1で「arras」http://demo.arrastheme.com/というテーマを利用しています。

    さて、固定のページメニューを背景画像だけでなく画像化するにはどうしたらよいのでしょうか。「会社概要」「サービス詳細」「アクセス」「お問合せ」などこれらのメニューを、
    文字から全て画像化して表示させてたいのですがやり方がわかりません。
    現在上記のメニューは「外観」→「メニュー」から作って表示をしています。

    お力添えのほどよろしくお願いします。

14件の返信を表示中 - 1 - 14件目 (全14件中)
  • デモページでいうところの、「home」「PC」「PS3」とかの部分ですかね?
    で、あれば

    <li id="menu-item-253" class="menu-item menu-item-type-taxonomy menu-item-253">

    のようなコードになっているのでidかclassのmenu-item-253などに対して画像置換のcssを利用すればいいような気がします。

    画像置換はいやだ、imgタグじゃないとだめ!っていうのでしたらテーマDLして解析しなければいけませんので時間が必要です;)

    img タグな場合:
    テーマの functions.php にだいたい以下のようなコードを追加すれば OK◎

    <?php
    add_filter( 'the_title', 'my_nav_title', 10, 2 );
    // $title メニューのタイトル
    // $id メニューの ID
    // タイトルか id を元に img タグを生成しましょう。
    function my_nav_title( $title, $id ) {
      // the_title フィルタは他でも呼ばれまくるので
     // メニューの場合だけ画像にするように取り計らいます。
      switch ( $id ) { // ここでは id を元にメニューか否かを判断します。
        case 12:
        case 13:
        case 14:
          // 例)画像が「テーマフォルダ/images/nav-メニューID.jpg」な場合。
          return '<img src="'
            . get_bloginfo('stylesheet_directory')
            . '/images/nav-'
            . $id
            . '.jpg" />';
      }
      // メニューじゃない場合はタイトルそのまま。
      return $title;
    }
    ?>

    shokun0803さん

    ご返信本当にありがとうございます。
    まさに、デモページでいうところの、「home」「PC」「PS3」とかの部分です。
    このデモの場合「home」「PC」「PS3」はカテゴリを置いてますが、
    ここの部分に、よくあるパターンの「会社概要」「サービス」「お問合せ」などの固定ページ
    をメニューとして並べたいんです。そして、それらの各メニューボタンを画像にしたいんです。

    shokun0803さんからいただいた、

    <li id="menu-item-253" class="menu-item menu-item-type-taxonomy menu-item-253">

    ですが、
    「idかclassのmenu-item-253などに対して画像置換のcssを利用すればいいような気がします。」
    この部分をもう少しだけ具体的に教えていただけますでしょうか。

    例えば、menu-item-253用に「btn-corporate.jpg」という画像が用意されている場合、
    どこにどんな記述を追記すればよいのでしょうか。

    素人過ぎてすいません。
    「画像置換のcssを利用する」を教えてください。
    よろしくお願いします。

    kzさん

    ご返信本当にありがとうございます。
    kzさんからアドバイスを頂いた、

    <?php
    add_filter( 'the_title', 'my_nav_title', 10, 2 );
    // $title メニューのタイトル
    // $id メニューの ID
    // タイトルか id を元に img タグを生成しましょう。
    function my_nav_title( $title, $id ) {
      // the_title フィルタは他でも呼ばれまくるので
     // メニューの場合だけ画像にするように取り計らいます。
      switch ( $id ) { // ここでは id を元にメニューか否かを判断します。
        case 12:
        case 13:
        case 14:
          // 例)画像が「テーマフォルダ/images/nav-メニューID.jpg」な場合。
          return '<img src="'
            . get_bloginfo('stylesheet_directory')
            . '/images/nav-'
            . $id
            . '.jpg" />';
      }
      // メニューじゃない場合はタイトルそのまま。
      return $title;
    }
    ?>

    は、「imgタグの場合」は上記を追記とありますが、
    imgタグの場合とは具体的にどのようなケースを指すのでしょうか。
    本当に素人ですいません。とても大事なところだと思うので
    是非教えてください。

    よろしくお願いいたします。

    ■画像置換のcssを利用する
    css で要素の背景画像を指定する方法です。
    例)

    #menu-item-253{
      background: url(images/btn-corporate.jpg) 0 0 no-repeat;
    }

    ■imgタグの場合
    html で画像要素を直接記述(img タグを書く)する方法です。
    例)
    <img src="btn-corporate.jpg" />

    html, css ってなんやねん、な場合は WordPress とはちょっと話が離れちゃうので
    書籍やネットで調べまくってください◎

    このデモの場合「home」「PC」「PS3」はカテゴリを置いてますが、
    ここの部分に、よくあるパターンの「会社概要」「サービス」「お問合せ」などの固定ページ
    をメニューとして並べたいんです。そして、それらの各メニューボタンを画像にしたいんです。

    おやおや、もしかして、もしかすると、テーマの改造をしなくてはいけないかも?デフォルトでカテゴリが表示になっているものを固定ページメニューに置き換えたいんですよねぇ?
    htmlやcssがわからないレベルだとphpの修正は難しいかもしれないですよ?

    kzさん

    アドバイスどおり早速やってみます。
    出来たらここでまたご報告しますね。

    shokun0803さん
    画像置換CSSの方法でやってみます。
    あそこのグローバルメニューは「外観」→「メニュー」で作っていて、
    カテゴリも固定ページも表示は管理画面から表示設定できるようになっていました。
    なので、アドバイスどおりやってみます。

    kzさん、shokun0803さんありがとうございます。
    出来たらここでご報告いたします。

    なるほど。テーマをダウンロード検証はしていなかったので早とちりでしたね。
    管理画面からメニューが変更できるタイプのテーマならphpを修正する必要はないですね。

    そんなに難しい修正ではないですよ!がんばりましょう;)

    shokun0803さん、kzさん

    できた。。。嬉しい。
    こんなレベルでも僕には凄く嬉しい。

    また是非是非お力貸してください。

    早急のご返答本当にありがとうございました。

    このフォーラムは問題解決時に。。。「解決済み」どこかでチェックするんでしたっけ?

    このフォーラムは問題解決時に。。。「解決済み」どこかでチェックするんでしたっけ?

    右側のプルダウンですよ;)

    shokun0803さん

    ありがとうございます。^^
    「解決済み」にしました。

    shokun0803さん、kzさん

    すいません。解決したと思っていたんですが。。。
    hover時に画像が切り替わるように追記してみました。
    FireFoxでは通常時もhover時も画像の切り替えも問題なく見えるのですが、
    IE(ver7)で見ると、hoverしていない通常時は画像がちゃんと見えていて、
    hoverすると画像が見えなくなってしまいます。
    なぜなんでしょうか。。。。是非御教授ください。

    下記が私の書いた記述です。

    #menu-item-46 {
    background:url(../../images/global-menu01.jpg) no-repeat;
    display:block;
    float:left; height:50px;
    background-position:-600px 0px;
    text-indent:-9999px;
    }
    
    #menu-item-46 :hover{
    background:url(../../images/global-menu01.jpg) no-repeat;
    display:block;
    float:left; height:50px;
    background-position:-600px -50px;
    text-indent:-9999px;
    }

    自分も似たような質問があります。

    #menu-item-46 {
    }

    #menu-item-46 :hover{
    }

    これはBiz Vektorのテーマでは、どのcssに記述があるのでしょうか?

    モデレーター gatespace

    (@gatespace)

    ※このスレッドは解決済みですので、似たような話題でも新規でスレッドを作成ください。
    (その際、このスレッドへのリンクを張るとベター)

14件の返信を表示中 - 1 - 14件目 (全14件中)
  • トピック「固定ページのメニューを画像化したい。」には新たに返信することはできません。