[ 解決済 ] SNSボタンをヘッダー部に設置したい
[ 解決済 ] SNSボタンをヘッダー部に設置したい
-
投稿者投稿
-
2022年6月6日 8:14 AM #65709
takeshi819参加者■ WordPress のバージョン
6.0■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
14.20.3■ Pro Unit のバージョン
9.76.0.1■ スキンの種類
Origin III■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。■ 期待する動作
SNSボタンをヘッダーに設置したいです。
具体的にはLINEのお友達追加ボタンを表示させ、目立たせたく、ボタンをひとつだけ設置したいです。
特にモバイル表示で、ヘッダーロゴの右隣りに表示させたいです。宜しくお願いします。
■ 自分で試した事
こちらを試しました。■ 症状が発生するブラウザ
chrome■ 実際の症状
ヘッダー部分にSNSアイコンが表示出来ません。2022年6月6日 10:34 AM #65713
うなこモデレーター具体的にはLINEのお友達追加ボタンを表示させ、目立たせたく、ボタンをひとつだけ設置したいです。
特にモバイル表示で、ヘッダーロゴの右隣りに表示させたいです。いろいろ方法があると思いますが、一つの案を提案します。
【01】「外観」→「カスタマイズ」の「Lightning ヘッダー設定」を「ヘッダーウィジェットあり & ナビ貫通」にします。
【02】「ウィジェット」→「ヘッダー右側エリア」に「カスタムHTML」ブロックを配置して、LINEのお友達追加ボタンのソースコードを貼ります。
【03】「カスタマイズ」の「追加 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; } }
CSSはもう少し調整がいるかもしれませんが、いかがでしょうか。
★もし他の案がある方はいろいろ参考になりますので、ぜひご提案お願いいたします。★
-
この返信は2年、 3ヶ月前に
うなこが編集しました。
2022年6月6日 4:19 PM #65735うなこさんが回答されたやり方でオッケーなら、たぶんそれがベストだと思います。
★もし他の案がある方はいろいろ参考になりますので、ぜひご提案お願いいたします。★
「ヘッダーレイアウトはナビゲーション回り込みのままがいいんだよ~」って方向けのやり方を書きます。
まず、子テーマの 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; } }
2022年6月6日 10:27 PM #65747
takeshi819参加者うなこさん
ご回答ありがとうございました。ご提案頂いた内容を行ってみました。
PCでは期待通りのLINEお友達追加ボタンを追加する事が出来ました。
しかしモバイルでは、ボタンが表示されませんでした。
スマホでは表示できないでしょうか?対馬さん
ご回答ありがとうございました。
子テーマはまだ使ったことがなく、試すことが出来ませんでした。
申し訳ございません。もう少しレベルアップしたら
子テーマもトライしたいと思っております。2022年6月7日 12:35 PM #65750
うなこモデレーターしかしモバイルでは、ボタンが表示されませんでした。
「カスタマイズ」の「追加 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を貼っていただくと解決が早いかもしれません
2022年6月7日 2:12 PM #65756
takeshi819参加者うなこさん
ご連絡ありがとうございます。
>「カスタマイズ」の「追加 CSS」に以下のCSSは貼っていますか?
はい。貼り付けしましたがスマホでは表示されませんでした。
iPhone12、ios15.5サイトはこちらになります。
2022年6月7日 2:24 PM #65757
うなこモデレーターご連絡ありがとうございます。
ソースを確認しましたところ、追加CSSにかいてある一部の閉じカッコがなくて、そこから下のCSSが効いていないようです。具体的には「Googleカレンダー(PC表示)」の閉じカッコがありません。
【修正前】
/* Googleカレンダー(PC表示) */ @media (min-width: 960px) { .googleCalender iframe { height:600px; }
【修正後】
/* Googleカレンダー(PC表示) */ @media (min-width: 960px) { .googleCalender iframe { height:600px; } }
ここを修正しますと表示されると思います。
2022年6月7日 2:28 PM #65758
takeshi819参加者うなこさん
早速ありがとうございました。
こちらの確認不足で申し訳ございません希望通りの事が出来ました。
いつも助けていただき感謝しております。以上、よろしくお願いいたします。
2022年6月7日 2:34 PM #65760 -
この返信は2年、 3ヶ月前に
-
投稿者投稿
- このトピックに返信するにはログインが必要です。