対馬 俊彦
フォーラムへの返信
-
投稿
-
検索窓を設置するには、どのような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並み)にする方がよい、
という考えもありなのかと思います。どの案がベストなのかは、ご質問者が制作中のサイトの状況にもよりますが…
・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 のサイトで調べることができます。
ExUnitや VK Blocks Pro など他プラグインの影響で
そうだったんですか。
先ほど私が試した環境は以下の通りでした。
Lightning G3 Pro Unit 0.1.0
VK All in One Expansion Unit 9.52.1.0
VK Block Patterns 1.0.3
VK Blocks Pro 1.0.16いまアップデートを確認したところ、上記のバージョンは最新のようです。
最新版にアップデートした状態でも症状が解消しなかったのですが、
古いバージョンがサーバー側のキャッシュに残っていたんですね。サーバー側のキャッシュを削除したら解消したので、それが原因と判断してしまいました。
ご指摘・アップデート、ありがとうございます。
私のところにも Google Search Console から
同じ指摘のメールが届くことがあります。最初の頃はいろいろと調べて対処しようと試みましたが、
Search Console 側の誤検出と思われることがほとんどで、
放っておけばそのうち Search Console 管理画面で問題が解消していたので、
最近はこのメールが来ても基本的になにもしていません。もし心配であれば、
Google のモバイルフレンドリーテストでチェックしてみるといいです。私の G3 サイトでも momo さんとまったく同じ症状が起きて、いまは解決しています。
原因はブラウザではなく、サーバー側のキャッシュでした。
そのサイトは、ロリポップのハイスピードプランを使っています。
ロリポップ！アクセラレータのキャッシュを削除したら正常に表示されるようになっています。.p a:hover{ text-decoration: underline; }は間違いで、正解は
p a:hover{ text-decoration: underline; }です。
段落の p はクラス名でないので . をつけません。
<p class="******">の ****** がクラス名です。ただし、上記の正解 CSS を追加してもたぶん反映されないと思います。
理由は以下のページの「3.4. CSSの指定の強さ」を読んでください。指定が強い CSS がすでに存在するときは、それ以上の指定の強さが必要です。
アンダーラインが出る場所と、出ない場所があるのを統一したいな・・・
たぶん、以下の CSS を追加すれば、グローバルメニューも含めて
すべてのテキストリンクにホバー時の下線をつけることができます。a:hover { text-decoration: underline !important; }今回の poohdai515 さんの場合、
上記の CSS に加えてグローバルメニューのテキストリンクに
クラス指定をつけてtext-decoration: none !important;を指定するやり方もありますが、
!importantを!importantで上書きするのは変なかんじです。!importantは他にやり方がない場合の最終手段ですので。該当箇所のクラス指定を調べて、個々に CSS を上書きしてやるのが
正統な、破綻が起きないやり方だと思います。同じhtmlを固定ページのコンテナと、ウィジェットに入れても
アンダーラインの表示方法は違うこれは、もう仕方ないんですかね・・・
はい、仕方ないです。
テーマ制作者がそのように意図して作ったものなので。
