対馬 俊彦
フォーラムへの返信
-
投稿
-
ブログをサイト内で運用する際に、ブログとは無関係な「お知らせ」が表示されてしまい、その「お知らせ」を非表示にするために、さらにカスタマイズが必要という、典型的なバグ誘発ロジックになってしまいます。
初心者の WordPress 勉強、職業訓練講習に限定すれば、
私は以下の2つのカテゴリーを作って対応します。お知らせ
https://******.com/blog/info/スタッフブログ
https://******.com/blog/staff/実際に運用しているサイトでもこのやり方で OK のものもあります。
実際に運用するサイトでご指摘のようなケースが発生することはあります。
その場合は Pro 版でカスタム投稿タイプを使う、という考えでよいのではないかと思います。私はパソコン教室を運営していて、
自分で WordPress サイトを作りたいという初心者に指導することもありますし、
職業訓練でホームページ制作の講師を担当した経験もあります。
なので、貴社と似通っている部分はあると思います。> お知らせの機能は学びたがるところです。
この場合、投稿カテゴリーに「お知らせ」を作って、
WordPress 標準の [最新の投稿] ブロックでそのカテゴリーを表示すれば、
受講者は納得してくれると思います。> 方法も公開しているくらいなので、それほど労力はかからず、利便性と労力の両立ができると思うのですが…
数行のコードのカスタマイズでできることでも、
それをシステムのコアの機能として実装～メンテナンスするのに労力がかかるということはあると思います。ウィジェットは使わないという全体構想に合わせようとした結果発生した問題点なのに、ウィジェットを使うことで解決というのは、ちょっと全体の思想にミスマッチではないでしょうか？
コアの部分にウィジェットを実装せずに対応するということなので、
ミスマッチにはならないと思います。他の利用者のご意見も、伺いたいところです。
今までできたことがアップデートによりできなくなる、
ということについて残念に思われる気持ちがわかりますが、
G3 は古い機能・互換処理のためのコードを削除しているので、
無料版に関してはある程度の不便はしかたないのではないかと思います。同じようなブロックを増やすと実装がよかったとしてもメンテが対応できない。
石川さんが GitHub でこう書かれているのを見ると、Pro 版のユーザーとしては、
無料版の機能実装やメンテナンスに労力をかけ過ぎないでほしいと望みます。このフォーラムは Pro 版のユーザーがほとんどなので、
私の考えに近い方が多いかもしれません。以下の CSS を追加すると、
見た目が添付画像のようにハンバーガーっぽくなりますよ。.gMenu_name .fa-bars { color: #999; border: 1px solid #999; font-size: 22px; padding: 5px; border-radius: 3px; margin-top: -8px; }その他の下層メニューをハンバーガーメニューに隠したい。
一般的な右上にあるハンバーガーメニューの動きをイメージされているのであれば、
ご希望のことを実現するのは、不可能ではありませんが、難しそうです。なんちゃってハンバーガーであれば、かんたんなやり方があります。
添付画像をご参照ください。ナビゲーションラベルに
<i class="fas fa-bars"></i>と入力すれば、
見た目はそれらしくなりますし、URL の欄を空にしておけば
ハンバーガーボタンのリンクは解除されます。メニューに追加するときには URL を空にできませんが、あとから空にすることはできます。
いかがでしょうか？
モバイルの時に出てくる三本線メニュー（ハンバーガーメニュー）をパソコンの時にも表示できますか？
ご質問者がやりたいこととは違うかもしれませんが、
単純にモバイルナビと同じものをパソコンでも表示したいのであれば、
以下の CSS でいけると思います。@media (min-width: 992px) { body.device-pc .vk-mobile-nav-menu-btn, body.device-pc .vk-mobile-nav { display: block; } }メニューが多いので、ヘッダーメニューに5つほど通常のメニュー表示をし、隅っこに三本線メニュー（ハンバーガーメニュー）を表示させたいと思っています。
モバイルナビと違う中味のハンバーガーメニューを実現するのは難しそうです。
こだわりがなければ、ナビゲーションメニューを階層構造にするのが楽でよいと思います。
石川さんが提示された CSS にコメントするのはドキドキしますが…
Windows のブラウザは
overflow-y: scroll;にすると、
スクロールの必要がないときでも添付画像 (Chrome の例) のように
スクロールバーを表示してしまいます。overflow-y: auto;の方がよいのではないかと思います。ご回答、ありがとうございます。
ツールバーのリンクアイコンをクリックしてください。
そこでしたかぁ…気がつきませんでした。
ちょっと柔軟な思考をすればわかったことですね…反省です。
記事タイトルでも入力しやすいようにという仕様変更
やり方がわかれば、たしかに今までより使いやすくなってますね。
ありがとうございます。横からすみません。
以下の CSS を追加すればとりあえず表示が欠けないようになります。
.vk-menu-acc ul.acc-child-open { max-height: 1200px; }Lightning では 1200px のところが 1000px になっていて、
20個の項目を表示するには足らないのですが、20個は多過ぎると思います。モバイル端末であればスクロールして最後まで表示することが可能ですが、
ノートパソコンではスクロールしても下の項目を表示できません。低価格のノートパソコンでよく使われている 1366 x 768 ピクセルの画面だと、
「ボード重量計算シート」の先を見ることができません。ご参考まで。
私の Katawara のサイトでも確認したところ、
クラシックエディターで画像を追加して中央揃えにした場合、
公開されている記事に中央揃えが反映されません。とりあえず、以下の CSS で中央揃えにできます。
img.aligncenter { display: block; }Katawara はブロックエディターで使うことを前提にした製品だと思いますので、
クラシックエディターを使い続けると、他にもこのような問題が起きる可能性がありそうです。また、インストールされている VK Blocks Pro はとても役に立つプラグインですが、
クラシックエディターでは使えません。> クラシックエディターを適用で運用しておりますが、
使い慣れたエディターということでそのようにされているのだと思いますが…
Katawara ＋ VK Blocks Pro の組み合わせであれば、機能面でも使いやすさの面でも、
ブロックエディターの方がはるかに上です。新規制作中サイトのようですので、ブロックエディターへの切り替えをおすすめします。
私のテストサイトで試してみたら、同じ現象が起きました。
■ 確認できた現象
PC の 固定ページ で下記の現象が起きます。(モバイルではこの現象は起きません)
- [カスタマイズ]→[Lightning ページヘッダー設定]→[共通] で背景画像を変更する。
- カスタマイズ画面で表示される固定ページには変更が反映されている。
- 公開されている固定ページに変更が反映されていない。
■ 対策
- [カスタマイズ]→[Lightning ページヘッダー設定]→[固定ページ] で背景画像を設定して公開する。
- [カスタマイズ]→[Lightning ページヘッダー設定]→[固定ページ] で背景画像を削除して公開する。
ベクトル様、
もしかしたらバグかもしれませんので、ご確認いただければと思います。momo さんへ
momo さんのトップページは CLS スコアが 0 (満点) です。
つまり、もう CLS 改善の余地はないんです。これをやると「CLS を改善できます。」と Google は言ってますが、
CLS に関してはこれ以上やる意味がないので無視するのが吉です。momo さんのトップページを見たところ、もう十分にシェイプアップされていて、
やることがなさそうです。これ以上スコア改善のためにやるとしたら、
デザインスキンを Origin III から Plain にすることくらいかと思います。
