対馬 俊彦
フォーラムへの返信
-
投稿者投稿
-
アップデートのbreadcrumb.phpの変更も考えると対馬様の方法に変更しておいた方がいいですね・・・
サイト制作を請け負う側からすると、手離れがよいというのはたいへん大事なことで、
テンプレートを書き換えることにはどうしても消極的になってしまいます。もしご自身のサイトであれば、手離れのことは気にしなくてよいので、
テンプレートを書き換える方が
・わかりやすいし
・テーマの動作が理解できるし
・いじくり倒すのが好きな人にはたまらないし
・アップデートでトラブったときには勉強になるし(経験あり)・・・といいこともありますよ。いつもお世話になっています。
FAQ ブロックのように【1】の部分を太字にしていただくのがよいと思います。
また、開いたときに【2】の部分にレスポンシブスペーサーひとつ分くらいのマージンを持たせると見やすくなるように感じます。先日はこのように書きましたが、意見を方向修正させていただきます。
アコーディオンブロックに「背景なし」以外のスタイルを設定すると、
それだけでとても見やすくなります。その後、アコーディオンブロックを使っていて、
「背景なし」以外のどれかをデフォルトにするのがいいと思うようになりました。「背景なし」は見出しの「装飾無し」のような位置付けで、
スタイルをカスタマイズしたい人向けに今のまま残しておけば、
デフォルトのまま使うことが多い初心者にも、
カスタマイズしたい人にもうれしい仕様になると思います。子テーマに .js ファイル (JavaScript) を組み込む必要がありますが、
以下のプログラムで書き換える方法もあります。jQuery(function($){ $("#panHome > a > span").html('<i class="fa fa-home"></i> ホーム'); });
よく見ると、一瞬だけ「HOME」と表示されますので、その点においては美しくないですが、
テーマのアップデートの影響を受けにくいのがこのやり方のメリットです。昔からこうだったのか?
はい、そうだと思います。
私が数年前に Lightning Pro で作ったサイトもこのくらい空いています。もしかしたら、見え方の違いの原因はサイドバーの有無かもしれません。
サイドバーがあれば、「お問い合わせ情報」ブロックの幅が狭くなりますから、
真ん中の空白はかなり小さくなります。Lightning Proバージョン: 8.9.5
Lightning Skin Paleバージョン: 8.1.2上記と同じ環境のサイトで試しましたが、
以下の CSS だけでモバイル端末で段落の下マージンをゼロにできています。p { margin-bottom: 0em; }
p タグに対してこの CSS よりも強い指定をしているものが別にあるのではないかと思います。
例えば、プラグインを追加したとか…。
JPNSTYLE 8.1.1 にアップデートして下部の余白が修正されたことを確認いたしました。
パンくずエリアの件について、承知いたしました。
どうもありがとうございました。
以下の CSS を追加すればできると思います。
■孫メニューを右に開く CSS の例
⇒ https://lightning.uonuma-js.com/menu-open-right/@media (min-width: 992px) { .gMenu>li:hover>.sub-menu { overflow: visible; } .vk-menu-acc ul.sub-menu ul.acc-child-open, .vk-menu-acc ul.sub-menu ul.acc-child-close { position: absolute; left: 100%; top: 0px; width: 240px; background-color: #191919; } }
■孫メニューを2列で表示する CSS の例
⇒ https://lightning.uonuma-js.com/menu-2-columns/@media (min-width: 992px) { .gMenu>li:hover>.sub-menu { overflow: visible; } .vk-menu-acc ul.sub-menu ul.acc-child-open, .vk-menu-acc ul.sub-menu ul.acc-child-close { position: absolute; left: -50%; width: 480px; } .vk-menu-acc ul.sub-menu ul.acc-child-open li, .vk-menu-acc ul.sub-menu ul.acc-child-close li { width: 240px; float: left; background-color: #333333; } .vk-menu-acc ul.sub-menu ul.acc-child-open li a, .vk-menu-acc ul.sub-menu ul.acc-child-close li a { border-right: 1px solid rgba(255,255,255,.15); } }
メニュー項目の数が多い場合は、以下のブロックのどれかを使って固定ページを作った方が見やすくなるかもしれません。
・子ページリスト
・選択投稿リスト
・カードSlide rest time = スライドが静止している時間
Slide transition time = 次のスライドに切り替わる動作の時間
です。参考情報として、自動再生のパラメータの設定を先ほどの書き込みに追記しました。
マウスポインターで画像をつかむと停止しますが
Slide rest timeの設定時間が来ても動き出しませんこれはスライドショーを動かしている Swiper というプログラムのデフォルト仕様で、正常な動作です。
デフォルトと書いたのは、自動再生を継続することも可能ということです。
https://www.webdesignleaves.com/pr/plugins/swiper_js.html より抜粋
パラメータ:disableOnInteraction
デフォルト:true
説明:
ユーザが操作したら自動再生をストップさせる設定です。
false を指定すると操作があっても自動再生を継続します。私はこのデフォルトのままでよいと思いますが、要望が多ければベクトルさんが検討してくださるかもしれません。
再利用ブロックだと投稿権限の場合編集不可でしょうか?
試してみたら、再利用ブロックだと投稿者権限でも編集可能です。
この件は再利用ブロックを使うのがよさそうですね。返答が正しい JSON レスポンスではありません
これはサーバーの WAF が原因で起きることがあります。
WAF の設定を見直せば解決するかもしれません。G3 のパンくずリストのスタイルのカスタマイズサンプルです。
※G3 のアップデートで home アイコンが追加されたら、最初のブロックは削除してください。
/* 先頭に home アイコンを表示 */ .breadcrumb li:first-child::before { font-family: "Font Awesome 5 Free"; font-weight: bold; content: '\f015'; padding-right: 0.3em; color: #00fa9a; } /* リストアイテムの右に右向き三角アイコンを表示 */ .breadcrumb li::after { font-family: "Font Awesome 5 Free"; font-weight: bold; content: '\f0da'; padding: 0 0.3em; color: #00fa9a; } /* 最後のリストアイテムの右はアイコンなし */ .breadcrumb li:last-child::after { content: ''; }
content:
の \ に続く4文字の記号は Font Awesome アイコンの番号のようなものです。
調べ方は添付画像をご参照ください。上記の CSS を追加したパンくずリストはこうなります。
Attachments:
You must be logged in to view attached files. -
投稿者投稿