Raindropのメインメニューのカスタマイズはいずこで…

こんにちは、

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

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

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

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

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

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

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を使っていただきありがとうございます

グローバルメニューは、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) {

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

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

サイドバーに関しては、

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

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