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

カスタマイズは 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;
}

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

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

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

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

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

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

Akiraさま

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

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

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

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

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

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

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

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

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

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

かうたっく様

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

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

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

ありがとうございます。

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

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

下記の 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;
}

Akira様

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

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;
}

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

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

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

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

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