対馬 俊彦
フォーラムへの返信
-
投稿
-
AU3638 さん、
ロゴの横ではなく、添付画像のように「ヘッダー上部設定」項目の右側に表示したのですができますでしょうか。
ヘッダー上部エリアに検索窓を置くのは私には荷が重いのですが、
ヘッダー上部エリアを表示しないやり方ならわりと楽にできました。こんなかんじになります。
このようにする手順は以下の通りです。
【手順1.】
前回の手順で子テーマの function.php に追加した行を以下のものに差し替えます。function my_lightning_header_logo_after(){ get_search_form(); $append_html = '<div class="header_link"><a href="#">お問い合わせ</a><a href="#">サイトマップ</a></div>'; echo $append_html; } add_action( 'lightning_header_logo_after', 'my_lightning_header_logo_after' );【手順2.】
前回の手順で子テーマの style.css に追加した行を以下のものに差し替えます。.navbar-header form { float: right; width: 280px; } .navbar-header form div input#s { float: left; width: 64%; } .navbar-header form div input#searchsubmit { float: right; width: 33%; } .navbar-header .header_link { float: right; margin-top: 7px; } .navbar-header .header_link a { margin-right: 10px; font-size: 14px; } @media (max-width: 991px) { .navbar-header form, .navbar-header .header_link { display: none; } }ちょこちょこっと作ったものなので、HTML/CSS の調整をした方がいいですが、
これなら実用になるのではないかと…ご回答、ありがとうございます。
エスケープ処理されているとのこと、承知いたしました。
今後必要であればフックで対応します。AU3638 さん、
ロゴの横ではなく、添付画像のように「ヘッダー上部設定」項目の右側に表示したのですができますでしょうか。
その場所にはアクションフックが用意されていないので、
テンプレートファイルを直接いじればできるかもしれませんが、
アップデートのたびに同じカスタマイズ作業をしなければならないし、
私は怖くて手を出せません。すみませんが、ここから先は「お遊び」としてお楽しみいただければうれしいです。
CSS で強引にヘッダー上部の右側に表示しようと思ったら、
子テーマの style.css にさらに以下の行を追加すればそれっぽくなります。.navbar-header form { position: fixed; top: 0; right: calc( (100vw - 1110px) / 2 ); } .admin-bar .navbar-header form { top: 32px; } .headerTop nav { right: 325px; }上記のコードだけでは
レスポンシブ対応にはなっていませんし、
スクロールしたときの見え方が怪しげですし、
他にも問題が起きる予感がします。それともうひとつ、
このやり方で実装するなら、アクションフックでなくてもできます。G3 Pro Unit にヘッダーウィジェットが配置できない不具合を修正した 0.1.3 をアップしました。
石川さん、
G3 Pro Unit 0.1.3 にアップデートして、
ヘッダー右側エリアのウィジェットが使えるようになったことを確認いたしました。
ありがとうございます。昨日このトピックの回答を書きながら、ウィジェットの場所を見つけられなかったので、
「できます」と書きづらくて、「できる仕様になっています」と書きました。G3 の検索ウィジェットのデザイン、いいですね。
ベータ版なので、これから細かいところを仕上げていくのだと思いますが、
デザインについてひとつ要望させてください。添付画像をご参照ください。
検索入力欄をフォーカスしたときのデザインで、
赤丸の部分をピン角にしていただいた方がかっこいいです。検索窓を設置するには、どのようなHTMLコードをどこに入れれば宜しいのでしょうか。
【手順1.】
子テーマの function.php に以下の行を追加してください。function my_lightning_header_logo_after(){ get_search_form(); } add_action( 'lightning_header_logo_after', 'my_lightning_header_logo_after' );【手順2.】
子テーマの style.css に以下の行を追加してください。.navbar-header form { float: right; } .navbar-header form div input#s { float: left; width: 64%; } .navbar-header form div input#searchsubmit { float: right; width: 33%; } @media (max-width: 991px) { .navbar-header form { display: none; } }【補足】
Variety には「ヘッダーバナーHTML」というカスタマイズ項目があって、
そこに HTML コードを書けばいけると思って昨日は回答しましたが、
実際にやってみたら、その方法だとうまくいかないことが判明したので、
上記の方法を回答いたします。「Variety（非推奨）」と「VarietyⅡ」の違いはなんでしょうか。
第1世代：Origin / Variety
第2世代：Origin II / Variety II
です。おそらく今までは Origin II をお使いだったと思いますので、Variety II を選んでください。
近々発売の第3世代が案2.の Lightning G3 です。
komori0321 さんのサイトを確認させていただきましたが、
PC用画像とモバイル用画像の縦横比は同一で 3.17 です。
これでは G3 のサイトをモバイル端末で表示すると文字が隠れてしまいます。私の G3 のテストサイトは https://lightning-g3.hp1.work/ ですが、
縦横比を以下のようにしてあります。
PC用画像：3.17
モバイル用画像：2.00添付画像をご参照ください。
【以下、追記です】
スマホでの見やすさを考慮して、私はスライドの文字数を抑えていますので、
現状の G3 のフォントサイズのままでよいと思います、と書きましたが…Lightning の制作事例(Showcase)を見ると、長い文章を使っているものがありますね。
Lightning(G2) でも文字やボタンが隠れているものがあります。この状況を踏まえると、デフォルトのフォントサイズを小さめ(G2並み)にする方がよい、
という考えもありなのかと思います。添付画像をご参照ください。
調整をお願いします
というご希望を出されていますが、
G3 はモバイル用スライド画像を用意する前提で
フォントサイズの設定を見直しています(と私は理解しています)。縦横比を変えたモバイル用画像を用意すれば隠れることはないですし、
その方がスマホで見る人にとって見やすいです。G2 はスマホで見たときにフォントが小さすぎて見づらいので、
私はカスタマイズして大きくしていました。
私は現状の G3 のフォントサイズのままでよいと思います。どの案がベストなのかは、ご質問者が制作中のサイトの状況にもよりますが…
・Lightning Pro を使い始めて間もない
・サイトの制作に着手して間もない
・急ぎでないのすべての条件が当てはまるのであれば、Lightning G3 を使うのがよいと思います。
Lightning G3 のベータ版はダウンロードして使えるようになっています。
先日の勉強会では早ければ4月中旬、遅くても5月には正式版が販売開始される見込みとのことでした。
※勉強会に出たようなことを書いてますが、先日は不参加であとから録画を見ました。
Lightning Pro のカスタマイズ機能と標準ウィジェットではご希望のことができません。
以下のやり方でできます。
■案1. デザインスキンを追加する
デザインスキンの Fort と Pale はヘッダー右側にウィジェットを配置できます。
ただし、このウィジェットを使うとお問い合わせ電話番号とボタンが表示されなくなります。ヘッダー上部のお問い合わせ電話番号とボタンを残したいのであれば、Variety がよいです。
Variety はこの位置に任意の HTML コードを書くことができます。■案2. Lightning G3 を使う
近々販売開始予定の次期バージョン G3 はご希望通りのことができる仕様になっています。
■案3. アクションフックを使う
functions.php に以下の行を追加すれば、該当箇所に任意の HTML コードを出力できます。
function my_lightning_header_logo_after(){ $append_html = '*******************************'; echo $append_html; } add_action( 'lightning_header_logo_after', 'my_lightning_header_logo_after' );******************************* は任意の HTML コードです。
人によっては、HTML コードを書くやり方は難しいと感じるかもしれません。
以上の気持ちからVektorさんの回答を待ちます。
このトピックを読ませていただき、ダウンロードの手順に関しては
私は、ベクトルさんからの回答はすでに以下のように出ていると理解しました。以下の理由により既存ユーザーの方のG3へのアップデートはお手数ですがマイアカウントページから最新のzipファイルをダウンロードして手動でよろしくお願いいたします。
石川さんが書かれた理由を読むと、
momo さんの要望に対応するためにはシステム改変が必要で多大な労力がかかると推察します。これを正式回答として受け取ってもらえないと、石川さんは困ってるだろうと思います。
解決法は見つかりませんでしたが、調べてみたことをお知らせします。
Windows 10 の Chrome / Edge で表示したところ、
G3 のサイドバーでは position: fixed; が komori0321 さんの期待通りの動作をしていません。
position: absolute; のような動作になっています。Firefox だと期待通りの動作をしています。
親要素に transform が指定してあるとこのような動作になるようです。
これが原因かどうかはわかりませんが、CSS でなんとかできるかとやってみました。
その結果、私の力が及ばず断念しました。どこが原因なのか非常に興味があります。
Lightning Pro 8.9.3
VK All in One Expansion Unit 9.52.1.0
VK 最近の投稿 ウィジェットをトップページに設置同じ環境で試してみましたが、
投稿名をクリックすると投稿したカテゴリー一覧に飛びます。
という現象が起きません。投稿名をクリックすると投稿が表示されます。
どこを設定したら良いのかわかりません
特にそのための設定は必要ないので、
なぜそのような現象が起きているのか不思議ですね。可能であれば、そのサイトのURLを提示していただけると、
なにかアドバイスが得られるかもしれません。縦横比固定でなく比を変えて変更する際どのようにするのでしょうか？
私はこのやり方を考えられません。
考えるのに手間がかかりそうな気がしますし、
レスポンシブ動作の中で見た目がおかしくなる不安があります。私なら縦横比を揃えて画像を作りますし、その方が得策だと思います。
もしかしたら、他の方からご期待に合う回答があるかもしれませんが…
隣接間の画像のスペース間隔を設定したいです。
以下のトピックが参考になると思います。
Lightning Pro には Font Awesome 5 Free というアイコンフォントが組み込まれています。
これを使って、以下のようなコードを [カスタム HTML] に入れればアイコンだけの表示にできます。
<a href="#"><i class="fab fa-twitter" style="font-size:2.0em;color:#aaa;"></i></a>Twitter 以外のアイコンのコード (上記の fab fa-twitter の部分) は Font Awesome のサイトで調べることができます。
