[Someya Masatoshi]

インスタグラムのアイコンがWebっぽいのが表示されちゃうんですが、インスタアイコンの変更方法ってありますか？

あと、ちょっと小さくて気づかない可能性があるので、カラーバージョンと、サイズ変更ができるようになると嬉しいです。

♥ 0

Who liked: No user

[キタジマ タカシ]

インスタグラムのアイコンがWebっぽいのが表示されちゃうんですが、インスタアイコンの変更方法ってありますか？

QuiQui さんのサイトですよね？拝見したところ、Instagram 公式ではなくサードパーティーのサイトにリンクされているようで、そのため Instagram のサイトと判定されず地球アイコンになっています。Snow Monkey 側で対応するのはちょっと違う感じなので、子テーマの functions.php にコードを追加してアイコンを変更する方法をあとで書き込みますね。

あと、ちょっと小さくて気づかない可能性があるので、カラーバージョンと、サイズ変更ができるようになると嬉しいです。

これは確かにそうかもしれませんね…。大きさは CSS で変更できますが、色はちょっと面倒だと思うので、Snow Monkey 側でそれぞれの色になるようにしましょうかね。Twitter なら水色、Facebook なら青とか。次回アップデートで反映させます！

♥ 0

Who liked: No user

[キタジマ タカシ]

お待たせしました、下記のコードでアイコンを変更できます。子テーマの functions.php に記述してみてください。

add_filter( 'walker_nav_menu_start_el', function( $item_output, $item, $depth, $args ) {
	if ( 'social-nav' !== $args->theme_location ) {
		return $item_output;
	}

	// もしリンク先 URL が 2inc.org を含んでいたら
	if ( false !== strpos( $item->url, '2inc.org' ) ) {
		// 地球アイコンを消す
		$item_output = str_replace( '<i class="fas fa-globe"></i>', '', $item_output );
		// Instagram アイコンに置換
		return str_replace( $args->link_before, '<i class="fab fa-instagram"></i>' . $args->link_before, $item_output );
	}

	return $item_output;
}, 11, 4 );

アイコンのサイズについては、下記の CSS を追加すれば変更できます。

.p-social-nav a {
  font-size: 1.5rem;
}

あと、Snow Monkey v3.5.1 からアイコンに色がつくようになりました。

♥ 0

Who liked: No user

[投稿者]

投稿