[ 解決済 ] SNSボタンをヘッダー部に設置したい

うなこさんが回答されたやり方でオッケーなら、たぶんそれがベストだと思います。

★もし他の案がある方はいろいろ参考になりますので、ぜひご提案お願いいたします。★

「ヘッダーレイアウトはナビゲーション回り込みのままがいいんだよ～」って方向けのやり方を書きます。

まず、子テーマの functions.php などに以下のフックを追加します。

add_action( 'lightning_site_header_logo_after', 'my_lightning_site_header_logo_after' );

function my_lightning_site_header_logo_after(){
    echo '<div class="line_friend_add">**********</div>';
};

********** は LINE のソースコードです。

そして、子テーマの CSS などに ↓ こんなかんじの行を追加します。

.line_friend_add {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 120px;
}

@media (min-width: 992px) {
.line_friend_add {
    display: none;
}
}

できる！WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦！

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

しかしモバイルでは、ボタンが表示されませんでした。

「カスタマイズ」の「追加 CSS」に以下のCSSは貼っていますか？

/* ヘッダーコンテナ */
@media (max-width: 991.98px){
.site-header-container {
    display: flex;
    justify-content: space-around;
}
}
/* ヘッダー右側ウィジェットを表示 */
@media (max-width: 991.98px){
.site-header-sub {
    display: block;
    float: none;
    padding: 0;
}
}

もし差し支えなければ、サイトのURLを貼っていただくと解決が早いかもしれません

ご連絡ありがとうございます。
ソースを確認しましたところ、追加CSSにかいてある一部の閉じカッコがなくて、そこから下のCSSが効いていないようです。

具体的には「Googleカレンダー（PC表示）」の閉じカッコがありません。

【修正前】

/*　Googleカレンダー（PC表示） */

@media (min-width: 960px) {

.googleCalender iframe {
height:600px;
}

【修正後】

/*　Googleカレンダー（PC表示） */

@media (min-width: 960px) {

.googleCalender iframe {
height:600px;
}
}

ここを修正しますと表示されると思います。

解決できて良かったです！
もしよければ　子テーマでのアイディアを出していただいた対馬さんの回答の所にベストアンサーをつけるボタンが表示されていると思いますので、表示されていたら是非ベストアンサーをつけていただけますと嬉しいです。

わたしはスタッフになりますので、 モデレーター以上にはベストアンサーが付与できなくなっております。

• この返信は2年、 5ヶ月前にうなこが編集しました。