サポート » プラグイン » 文字だけのメニュー横にSNSのアイコンを設置する方法

  • 皆様はじめまして、Wordpressを始めてまだ数週間の初心者です。

    グローバルメニューには文字だけのメニューが5つあるのですが、その文字メニューはそのままで、右隣にFacebookとInstagramの用意した画像アイコン2つだけを設置したいと思っています。

    検索するとMenu Imageというのを見つけたのですが、 これは今ある文字メニューの隣にアイコンが置かれる感じですよね?

    私は上記でも申しましたように、これまでの文字メニューはそのままで、隣にSNSアイコンだけ(文字無し)を出来れば設置したいのですが、Menu Imageでもこういったことは可能ですか?

    また、私の希望どおりにできる、他のプラグインやその他の方法がございましたら、ぜひお教えくださいませんでしょうか?何卒宜しく申し上げます。

15件の返信を表示中 - 1 - 15件目 (全19件中)
  • Menu Imageでもこういったことは可能ですか?

    実際に試してみればわかりますよね。私は使ったことがありませんが、たぶん試してみると思います。ダメならプラグインを停止・削除すれば元どおりですし。

    他のプラグインやその他の方法

    アイデアだけですが例えば…

    • メニューにFacebook用とInstagram用のメニュー項目を普通に文字列で配置して、WordPressのフィルターフックを使って表示のときにメニュー文字列をアイコンに置き換える。
    • テーマのテンプレートの中にグローバルメニューを表示するphpコードがある筈なので、コードを変更(追加)して右隣にアイコンを表示。

    その他の方法としてもう一つ。

    • CSSで画像に置き換える
      (わからなければ「css 画像置換」とかで検索してみて下さい)

    Menu Imageでもこういったことは可能ですか?

    試してみました。4.2.1 でも支障なく利用できました。
    これまでは CSSで画像に置き換える方法を使ってきましたが、複数のアイコンサイズを用意しないでもいいのでスピーディに整いました。
    http://wp.me/p5DESR-as

    Menu Imageでアイコンを追加した上でCSSまたはフィルターフックを使って文字だけを消す、という方法もあると思いますが少し面倒でしょうか…。

    ブログの方でも触れましたが、Title position で Hide を選ぶと、文字だけをけしてアイコン画像だけになりました。

    トピック投稿者 tiiki

    (@tiiki)

    ご回答くださった皆様に心からのお礼を申し上げます。

    私は海外在住の身なのですが、何日も続いた大雨の影響で現在自宅インターネットが使用できなくなっています。

    なので、アドバイス通りすぐにでも試してみたいのですができません(T_T)
    数日もしないうちに復旧できると思うので、設定を試してから、またお礼と共に報告さしあげたいと存じます。

    今日遠出した先でインターネットを少し拝借し、やっとこのメッセージを送信することができました。

    再度、こんな初心者にご指南くださり本当にありがとうございました!m(_ _)m

    災害、お見舞い申し上げます。

    言葉だけで直接応援も出来ませんが、アドバイスで役立ててもらうことが出来れば一生懸命お手伝いします。
    ともかく復旧をあせらずに落ち着いてご対応ください。

    こちらも近くの火山が警戒レベルの日々がずっと続いていて微振動があり、ハードディスクが2基続けて壊れるという状況です。

    極力、知りうること出来うることがあれば、一緒に考えていきましょう。

    トピック投稿者 tiiki

    (@tiiki)

    맹조様

    無事インターネット復活致しました!
    お気遣い本当にありがとうございます!^^

    맹조様のご自宅付近も落ち着かない状況なのですね…
    一刻も早く맹조様ともに付近の皆が安心できる毎日に戻れますようお祈り致します。

    インターネット復活に伴い、早速、맹조様のブログを参考にSNSアイコン2つをグローバルメニューに設置することができました!感激です!

    ただ欲を言えば、アイコンとアイコンの間を少し狭めてメニュー内容全体ももう少し右寄りにしたいのと、アイコンをクリックした時、別の画面でリンク先が表示できるようにしたいのです。

    もしまたお知恵を拝借できれば幸いでございます。
    何卒よろしくお願い致します。

    トピック投稿者 tiiki

    (@tiiki)

    맹조様

    何度もすみません!自分のサイトです。

    http://tokinails.com

    参考までにm(_ _)m

    アイコンとアイコンの間を少し狭めてメニュー内容全体ももう少し右寄りにしたい

    メニューの li 要素の指定が

    font-family: Roboto Condensed;
    font-weight: 400;
    font-style: normal;
    font-size: 11px;
    line-height: 24px;
    word-spacing: px;
    letter-spacing: 4px;

    となっているので調整すると良いでしょう。

    アイコンをクリックした時、別の画面でリンク先が表示できるようにしたい

    ダッシュボード>メニューの編集画面
    表示オプションから
    詳細メニュー設定を表示>リンクターゲット にチェックを入れると「リンクを新ウィンドウまたはタブで開く」が表示されるので、チェックを入れれば新規ウィンドウで開きます。

    トピック投稿者 tiiki

    (@tiiki)

    맹조様

    早速のご回答ありがとうございます!

    アイコンをクリックした時、別の画面でリンク先が表示できるようにしたい

    教えてくださった通りリンクターゲットにチェックを入れ、「リンクを新ウィンドウまたはタブで開く」にもチェックしてから『Save Manu』(私のダッシュボードは英語表記なのですが、ページ内上下にひとつづつある「設定を保存」するオレンジのボタンです。)をクリックして設定保存したのですが、なぜかまだ、アイコンをクリックしても別ウィンドウで開くことができません。

    ちなみにリンクターゲットの他には、
    ①カスタムリンク ②カテゴリー ③ページ ④Image(画像?)にチェックが入っています。

    それと、「メニューの li 要素」とはどこにあるのでしょうか?

    お手数おかけしますが、再度お助け頂けませんでしょうか?
    本当にすみません!(><;;

    なぜかまだ、アイコンをクリックしても別ウィンドウで開くことができません。

    可怪しいですね。リンクはFacebookとインスタグラムを新規タブで開くになっているようです。
    わたしのサイトでは問題無いです。
    http://wp.me/P5DESR-9u
    ナビゲーション・メニューの Profile の左側のアイコンで親サイトを開けます。

    プラグインかテーマの仕様でしょうか、デフォルトの Twenty シリーズで確認してみてください。問題が設定かテーマ自体か判断しやすくなります。

    トピック投稿者 tiiki

    (@tiiki)

    맹조様

    度々お世話になります。
    ご返答ありがとうございます^^

    外観⇒テーマからtwentyシリーズを「Activate(有効?)」して確認ということですが、その際、元のサイトに戻す時に内容が消えたり変更されたりすることはないのでしょうか?

    実は昨日から少しサイトに手を加えていたのですが、そのせいでブログ記事内トップに変な文字列がたくさんでてきてしまい、なんとか修正しなければならなく、これ以上変なことにならないかと正直恐れおののいております…(T_T)

    なので一応確認作業を始める前に”確認”をさせていただきたく存じます。m(_ _)m

    トピック投稿者 tiiki

    (@tiiki)

    맹조様

    それともう一つしつこくて申し訳ないのですが、「メニューの li 要素」はダッシュボードのどこから入ればよいのか教えていただきたいです。

    本当にお手数おかけして申し訳ありません!

    変な文字列というのが、エラーメッセージでしょう。
    具体的なことがわからないので、修正がどのようなことかわかりませんが、それが、別ウィンドウで開くということを制約している可能せもありますね。
    リンクの表示では、別ウィンドウで開くとなるのでWordPress自体は、その挙動をしているのだと推測できます。

    なので使用中のテーマに問題があるかと考えてます。

    そのテーマ Shore は公式ディレクトリのものではないので、WordPressのテーマ作成の条件を無視している可能性もありますね。

    「メニューの li 要素」はブラウザの『要素の詳細を表示』を使って、どのファイルに記載されているか探してください。有償テーマなのでフォーラムでは控えさせてください。

    ただ、子テーマを作ってスタイルシートを追加すれば、メニューの li 要素の指定は調整できるでしょう。

15件の返信を表示中 - 1 - 15件目 (全19件中)
  • トピック「文字だけのメニュー横にSNSのアイコンを設置する方法」には新たに返信することはできません。