サポート » テーマ » Raindropのメインメニューのカスタマイズはいずこで…

  • 初めまして。
    現在WordpressにRaindropをインストールしカスタマイズさせて頂いておりますが、メインメニューのテキストにアイコン画像などをつけたいと思い、カスタマイズ箇所を探しているのですが、なかなか見つからず苦戦しております。
    どなたか、ご存じの方がいらっしゃいましたらご教授頂けますと幸いです。
    お手数をお掛け致しますが宜しくお願い致します。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • こんにちは、

    テーマは、以下のものですか?
    https://wordpress.org/themes/raindrops

    上記の、Raindropsテーマの制作者です。

    メインメニューのテキストにアイコン画像などをつけたいと思い、カスタマイズ箇所を探しているのですが、なかなか見つからず苦戦しております。

    どのようにカスタマイズしたいのか、もう少し詳しく教えていただけますか?

    見本になるようなサイトを提示していただくとか、画像のサンプルなどがあると助かります

    nobitaさま

    ご返信有難う御座います。
    カスタマイズ対象のテーマは、nobitaさまのRaindrops1.215を使用しております。
    大変扱いやすいテンプレートで複数サイトに使わせて頂いております。有難う御座います。

    今回カスタマイズしたかった個所は、グローバルメニュー及び最新ニュースのメニュー部分となります。
    完成イメージはこんな感じなのですが、修正ポイントがなかなか見つけられずに苦戦しておりました。

    お手数をお掛け致しますが調整対象のファイル、ヶ所をご教授頂けますと幸いです。

    グローバルメニュー、サイドバーのウィジェットリンクの左側に、リスト画像を追加する感じでよろしいですか?

    Raindropsの付属画像を使ってサンプルを書いてみました。

    style.cssの最終行に追加(子テーマでもOK)

    .rsidebar > ul > li > ul > li > a:before,/* エキストラサイドバーの 親リンク */
    .lsidebar > ul > li > ul > li > a:before,/* メインサイドバーの 親リンク */
    .menu-header > .menu > .menu-item > a:before {/* グローバルメニュー */
        margin: .5em;
        content: " ";
        display: inline-block;
        width: 16px;
        height: 16px;
        background-size: cover;
        vertical-align: middle;
        background: url("images/next.png");
    }

    のような感じでよろしいですか?

    ちょっと違うという場合は、書き込んでみてください

    Raindropsを使っていただきありがとうございます

    nobitaさま

    早々のご教授有難う御座いました!!
    はい、まさにこのようにしたかったので大変助かりました。

    ひとつ追加で恐縮ですが、リスト画像の後ろに続くタイトルテキストの文頭を揃えたいのですが、こちらは投稿タイトルの変数を含んで<div>タグ等でくくる必要性があるかと思いますが、この場合の設定ファイルはどちらになりますでしょうか?
    お手数をお掛け致しますが、重ねてのご教授のほど宜しくお願い申し上げます。

    グローバルメニューは、Raindropsの場合

    functions.php 6200行あたりの

    function raindrops_nav_menu_primary( )

    で出力しています。サイドバー周りについては、WordPressコアのウィジェットで出力しています。

    グローバルメニューに関しては、

    $defaults = array(
                    //....
                    'before'            => '',
                    'after'             => '',
                   // ....
                );

    before afterにたとえば

    $defaults = array(
                    //....
                    'before'            => '<span class="my_class">',
                    'after'             => '</span>',
                   // ....
                );

    等としていただくと、リンクテキストをタグで囲むことができます。

    さて、

    リスト画像の後ろに続くタイトルテキストの文頭を揃えたい

    とのことですが、これだけでしたら提示させていただいたスタイルの変更だけで可能ではないかと考えています。

    .rsidebar > ul > li > ul > li > a:before,/* エキストラサイドバーの 親リンク */
    .lsidebar > ul > li > ul > li > a:before,/* メインサイドバーの 親リンク */
    .menu-header > .menu > .menu-item > a:before {/* グローバルメニュー */
        margin: 0 .5em;/* 画像と リンク文字列の距離 上下 左右 これでリンクテキストの頭をそろえられます */
        content: " ";
        display: inline-block;
        width: 16px;/* リンク画像のサイズ 幅*/
        height: 16px;/*リンク画像の高さ 画像の幅高さとは無関係にコントロール可能*/
        background-size: cover!important;/* 上記のサイズに画像をフィット */
        vertical-align: middle!important;/* 画像と、テキストの上下方向の調整*/
        background: url("images/next.png");
    }

    追伸

    Raindropsテーマは、レティーナディスプレイに対応するスタイル設定があります。

    レティーナディスプレイ対応というのは、スマフォなどの高精細なディスプレイでページを表示した場合、画像がぼやけてしまうということに対応するものなのですが、

    通常の画像とは別に、縦横倍サイズの画像を準備しておいて、レティーナの場合その画像に切り替えるものです。

    style.cssの3260行付近に

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi) {

    以下にそれらの設定が記述されていますので、その点もお含みいただけるとよいと思います。

    nobitaさん
    早速のご教授有難う御座いました!
    今夜、チャレンジしてみます。結果は改めて記載させて頂きますので宜しくお願い致します。
    取り急ぎ。。。

    nobitaさん
    お世話になります。今しがた確認させて頂きました。
    ご説明不足で失礼致しました。

     margin: 0 .5em;

    ですと…

    –例A–

     ①
     │
    ▼ タイトルAタイトルAタイ
    トルA
    ▼ タイトルBタイトルBタイ
    トルB
    ▼ タイトルCタイトルC

    それぞれのタイトルA~Cの①の位置は揃いますが、タイトルが長く改行された場合に2行目の文頭が①の位置に揃いません。

    –例B–

     ①
     │
    ▼ タイトルAタイトルAタイ
      トルA
    ▼ タイトルBタイトルBタイ
      トルB
    ▼ タイトルCタイトルC

    文頭で揃えたい意図は、例Bのようなケースを想定しておりましたので、CSSのみでは難しいのかと判断致しておりました。
    やはりFunction.php若しくはコアウィジットをいじるしかなさそうですかね。。。

    何度もご丁寧なサポートを頂き有難う御座います。

    すいません。半角スペースが抜けてずれてしまいましたね。。

    –例B–

     ①
      |
    ▼ タイトルAタイトルAタイ
       トルA
    ▼ タイトルBタイトルBタイ
       トルB
    ▼ タイトルCタイトルC

    です。

    ということでしたら、リストマーカーを画像にすればいいと思います。

    サイドバーに関しては、

    .lsidebar > ul > li > ul,
    .rsidebar > ul > li > ul{
        list-style-image: url("images/next.png");
        margin-left:26px;
    }

    画像の上下方向の微調整は、マーカー画像の上下方向に透明な部分を作成して調整してみてください。

    nobitaさま
    何度もご丁寧なサポートを頂戴し、お手数をお掛けし有難う御座いました。
    お陰様で想定していたイメージにすることができました。
    今後とも宜しくお願い申し上げます。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「Raindropのメインメニューのカスタマイズはいずこで…」には新たに返信することはできません。