上部のSNSフォローボタンにitunesのボタンを表示させて特定のページにリンクさせたい

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など 上部のSNSフォローボタンにitunesのボタンを表示させて特定のページにリンクさせたい

このトピックには18件の返信が含まれ、1人の参加者がいます。5 ヶ月前 3720 さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #59965

    3720

    WordPress WordPress 4.9.5
    Simplicity2 childバージョン: 20161002
    Chrome 66.0.3359.139

    お世話になっております。
    初心者の質問で申し訳ないのですがよろしくお願いいたします。

    http://oldbearst.xsrv.jp/sample4/

    リンクさせたいページは以下になります
    https://itunes.apple.com/jp/album/ai-ep/id1048893192

    以下の記事を参考にして他のボタンと同じように記述してみたのですが上手くいきません。
    https://prfac.com/post-75/

    sns-page/phpは子テーマにコピーしました。csutomizer.phpは子テーマのどこに置いたらよいのでしょうか?

    まだまだド素人でcssを勉強し始めた程度のスキルしかなくお力をお借しいただけると助かります。
    よろしくお願い申し上げます。

  • #59966

    Akira

    カスタマイズは 2 ステップで終わります。

    iTunes へのリンクは直接 HTML に書く方が簡単だと思うので、 customizer.php は変更しません。

    ●ステップ 1 : sns-page.php に iTunes を追加●

    すでに設置されているようですが、親テーマの sns-page.php を子テーマにコピペをし設置します。

    子テーマに設置した sns-page.php を開き、以下の HTML を任意の場所に追加します。

    <li class="apple-itunes"><a href="https://itunes.apple.com/jp/album/ai-ep/id1048893192" target="_blank" title="iTunesをフォロー" rel="nofollow"><span class="fa fa-apple" aria-hidden="true"></span></a></li>

    href に iTunes へのリンクを追加しています。 title は、ホバーした時に表示されるテキストを指定します。また、アイコンは Font Awesome の Apple マークを使っています。

    もし、Twitter の前にフォローボタンを設置されるのなら、以下のコードの上の行に追加します。

    <?php if ( get_twitter_follow_id() )://Twitterフォローボタンを表示するか ?><li class="twitter-page"><a href="//twitter.com/<?php echo esc_html( get_twitter_follow_id() ); //TwitterフォローIDの取得?>" target="_blank" title="<?php _e( 'Twitterをフォロー', 'simplicity2' ) ?>" rel="nofollow"><span class="icon-twitter-logo"></span></a></li><?php endif; ?>

    もし、YouTube の後に設置されるのなら、以下のコードの下の行に追加します。

    <?php if ( get_youtube_follow_url() )://YouTubeフォローボタンを表示するか ?><li class="youtube-page"><a href="<?php echo esc_html( get_youtube_follow_url() ); //YouTubeフォローURLの取得 ?>" target="_blank" title="<?php _e( 'YouTubeをフォロー', 'simplicity2' ) ?>" rel="nofollow"><span class="icon-youtube-logo"></span></a></li><?php endif; ?>

    ●ステップ 2 : CSS を追加●

    子テーマの style.css に、下記の CSS を追加します。

    ul.snsp li a .fa-apple {
      font-size: 24px;
      line-height: 33px;
      text-align: center;
    }
  • #59974

    3720

    出来ました!
    ありがとうございました。

  • #60006

    3720

    この前は気づかなかったのですがブラウザがChrome・Edge・IE・Androidは問題なく表示できるのですが、iphoneとipadのsafariでボタンの縦位置がずれてしまいます。(macは手元にないので不明です)

    appleのボタンがずれる

    調べてみてdisplay: table-cell; vertical-align: middle;を記述すると今度は少し上にずれてしまいます。
    対処方法をご教授いただきたくよろしくお願いいたします。

  • #60007

    3720

    ↑画像が表示できなかったのでリンクを上げときますAppleのボタンがずれた画像

  • #60008

    Akira

    私が iPhone を持っていないので、申し訳ありませんが確認できません。

    iPhone でお使いのブラウザのキャッシュを削除しても、表示がずれるでしょうか。

  • #60011

    3720

    Akiraさま

    ありがとうございます
    キャッシュを削除しても一緒です。

    いろいろ検索してみましたがブラウザのずれを解消する「CSSハック」なるものがあるらしいのですが
    まだ理解できてません。

  • #60013

    Akira

    ちなみに下記の CSS に変更すると、どうなるでしょうか?

    ul.snsp li a .fa-apple {
      display: inline-block;
      font-size: 24px;
      line-height: 33px;
      text-align: center;
    }
  • #60014

    3720

    やってみましたが変化ありません

  • #60021

    かうたっく

    検証画面で見ると、Appleのアイコンaタグだけ落ちてるのが原因だと仮定してみました。

    ビフォー画像
    http://netakiri.net/uploader/src/up0481.png

    アフター画像
    http://netakiri.net/uploader/src/up0482.png

    以下で正常に表示されるかも?しれません。

    .apple-itunes a {
    	display: inline-block;
    	height: 33px;
    }
  • #60027

    3720

    かうたっく様

    ありがとうございます
    ずれは少なくなりましたが、やはりラインは揃わず少しだけ下にずれてしまいます。

  • #60028

    かうたっく

    どの部分がどうなっているのか、目視とおそらく的なカンでしか調整できないので、画像があればと思います。※どこかの領域の指定が必要だと思ってるのが前提ですが、それも不明です。

    またはMACを持っていればスマホと繋いで云々・・・できるかもしれません?

  • #60029

    3720

    ありがとうございます。

    iphoneのディスプレイではこんなふうになります。
    iphoneの画像

    修正後はずれが少なくなりましたがまだ少しずれがあります。
    iphoneの画像修正後

  • #60035

    Akira

    下記の CSS にすると、どうなるでしょうか?

    #main ul.snsp {
      display: flex;
      flex-wrap: wrap;
    }
    
    ul.snsp li {
      display: block;
      margin-bottom: 5px;
    }
    
    ul.snsp li a .fa-apple {
      font-size: 24px;
      line-height: 33px;
      text-align: center;
    }
  • #60037

    3720

    Akira様

    ありがとうございます。
    iphoneとipadは横一列でラインが揃いましたが、今度はWindows(Chrome・Edge・IE)で上部SNSフォローボタンが縦並びになってしまいました。縦並びでヘッダー幅に収まりません。

  • #60038

    3720

    縦並び

  • #60039

    3720

    block のところを inline-block に変更したらWindows、iphone、ipad ともまともに表示できました!
    Androidはまだ未確認です。

    #main ul.snsp {
      display: flex;
      flex-wrap: wrap;
    }
    
    ul.snsp li {
      display: inline-block;
      margin-bottom: 5px;
    }
    
    ul.snsp li a .fa-apple {
      font-size: 24px;
      line-height: 33px;
      text-align: center;
    }
  • #60040

    Akira

    ごめんなさい。サイト右上のフォローボタンは見ていませんでした。 Android でも、しっかりと横並びになっています。

    http://netakiri.net/uploader/src/up0484.png

    その CSS で修正されたのなら、原因は display: inline-block で横並びしていたためです。

    inline-block での横並びは Safari で表示が崩れる恐れがあると昔聞いたことがあるのですが、本当に崩れるんですね。思い出すのに時間がかかりました。

  • #60041

    3720

    お手間とらせました。やっとスッキリです!
    ありがとうございました。

トピック「上部のSNSフォローボタンにitunesのボタンを表示させて特定のページにリンクさせたい」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)