サポート » テーマ » twentyseventeenでソーシャルメニューのアイコンの変更

  • 解決済 kitakarasu

    (@kitakarasu)


    テーマをこれまで使っていたBizvectorからtwentyseventeenに変更して,見栄えの修正をしています。
    先日からお世話になります。
    もうひとつ教えてください。
    <質問>
    「外観」→「メニュー」で「ソーシャルリンクメニュー」を設定することで,
    フッターにリンク先をつけることができました。
    このリンクが円形のグレーで鎖の輪が2つ並んだマークに
    なっていますが,これを文字に変える方法を
    教えてください。
    <変えたい理由>
    4つのリンク先を並べているのですが,
    「A倶楽部」「B法人」「C団体」などの
    HPに飛ぶのですが,4つとも同じ鎖のマークですから
    どれをクリックしたら「B法人」に行けるかが
    わからないから。
    <自分が何をしたか>
    twentyseventeenに変更して,先般の質問で
    お世話になり,リンク文字の下線が太いのを
    別の人の質問で修正し,
    背景の色の変更やタイトル文字の影付けなどは
    自力で,やってきましたが,
    ソーシャルメニューの修正は,style.cssの
    どこをさわればいいのやら,さっぱりわかりません。
    丸くて鎖の書かれた画像データがどこかにあるのだろうと
    twentyseventeenのフォルダーの中を探したのですが,
    見つかりませんでした。
    こんな状態ですが,ぜひとも私に教えてください。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • npssl

    (@npssl)

    鎖マークの画像(icon-chain)は、 /wp-content/themes/twentyseventeen/assets/images/svg-icons.svg の129行目にあります。

    <symbol id="icon-chain" viewBox="0 0 30 32">
    <path class="path1" d="M26 21.714q0-0.714-0.5-1.214l-3.714-3.714q-0.5-0.5-1.214-0.5-0.75 0-1.286 0.571 0.054 0.054 0.339 0.33t0.384 0.384 0.268 0.339 0.232 0.455 0.063 0.491q0 0.714-0.5 1.214t-1.214 0.5q-0.268 0-0.491-0.063t-0.455-0.232-0.339-0.268-0.384-0.384-0.33-0.339q-0.589 0.554-0.589 1.304 0 0.714 0.5 1.214l3.679 3.696q0.482 0.482 1.214 0.482 0.714 0 1.214-0.464l2.625-2.607q0.5-0.5 0.5-1.196zM13.446 9.125q0-0.714-0.5-1.214l-3.679-3.696q-0.5-0.5-1.214-0.5-0.696 0-1.214 0.482l-2.625 2.607q-0.5 0.5-0.5 1.196 0 0.714 0.5 1.214l3.714 3.714q0.482 0.482 1.214 0.482 0.75 0 1.286-0.554-0.054-0.054-0.339-0.33t-0.384-0.384-0.268-0.339-0.232-0.455-0.063-0.491q0-0.714 0.5-1.214t1.214-0.5q0.268 0 0.491 0.063t0.455 0.232 0.339 0.268 0.384 0.384 0.33 0.339q0.589-0.554 0.589-1.304zM29.429 21.714q0 2.143-1.518 3.625l-2.625 2.607q-1.482 1.482-3.625 1.482-2.161 0-3.643-1.518l-3.679-3.696q-1.482-1.482-1.482-3.625 0-2.196 1.571-3.732l-1.571-1.571q-1.536 1.571-3.714 1.571-2.143 0-3.643-1.5l-3.714-3.714q-1.5-1.5-1.5-3.643t1.518-3.625l2.625-2.607q1.482-1.482 3.625-1.482 2.161 0 3.643 1.518l3.679 3.696q1.482 1.482 1.482 3.625 0 2.196-1.571 3.732l1.571 1.571q1.536-1.571 3.714-1.571 2.143 0 3.643 1.5l3.714 3.714q1.5 1.5 1.5 3.643z"></path>
    </symbol>
    kitakarasu

    (@kitakarasu)

    npssl様
    画像はJPGかGIFかだと思っていましたが,SVGで定義されているのですね。
    footer.phpの32行目を変えることで,別のアイコンに変えることができました。
    が,
    それは,当然のことですが,4つとも同じアイコンになります。
    4つの異なるアイコンをSVGで定義して,それを4つのリンク先の
    アイコンとして張り付けることは,私の能力ではできそうもありません。
    私にはレベルの高すぎる課題ということで,あきらめます。
    ご回答,ありがとうございました。

    ioxrxogi

    (@ioxrxogi)

    解決済みにされているのにあれですが……。

    アイコンを変えるのはわたしもハードルが高いので、
    アイコンの背景色を変更してはどうでしょう。

    スタイルシートに、

    .social-navigation a[href$="/リンクのアドレス/"] {
        background-color: orange;
    }

    このコードを追加すれば背景色を変更することができます。

    kitakarasu

    (@kitakarasu)

    ioxrxogi様
    ありがとうございます。
    なるほど,色を変えることができました。
    灰色は好きではなかったので,背景にあう色に
    変更しました。

    フッターに入れるソーシャルリンクメニューとしては,
    最も大切なリンク先の1つだけにして,
    他の3つは,「ウィジェット」の「フッター2」に
    「テキスト」で,で加えました。

    これ以上は,私のレベルでは難しそうです。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • このトピックに返信するにはログインが必要です。