ホームページやブログを改修していく際に、
「完全に消したくないけど、非表示にしておきたい」
といった箇所が出てくることもあります。
リビジョンで残しておいてもいいのですが、必要なバージョンを探すのに手間がかかります。
また、そもそも私はリビジョンの保存数を5件に制限しているため、今回はCSSで残す方法を選びました。
- 追加CSSクラス
- 該当ページのCSS
の2つで解決できますので、その方法を書いてみます。
こんなケースでブロックを非表示にしたい
私のケースでいうと、ブログトップページを見直していたときです。
リッチカラムで、こういったブロックをつくっていましたが、もういらないかなぁと。
それなりに手間をかけて作っていたものではあるのですが。
まぁ、思い切って削除してもいいのですが、
あとで復活させたいときに手間はかけたくなく。
そのため、今回は非表示にする方法を選びました。
※固定ページを複製して、バックアップとして取っておく方法もありますがページを増やしたくなく。
ちなみに「Hot News！」という新着情報のブロックもありましたが、
これは非表示にせず削除しました。
追加CSSクラスとCSSを設定する
では、具体的な方法に移ります。
①ブロックの「追加CSSクラス」にクラス名を入力
まず、非表示にしたい範囲の親ブロックを選択します。
リッチカラムの中に段落・リストがある、といったような複数階層になっている場合は、
非表示にしたい範囲全体を選択できているか確認しましょう。
「追加CSSクラス」に任意のクラス名を入力します。
今回は「hide-block」としました。
これで「追加CSSクラスの設定」は完了です。
②SWELLのカスタムCSSに非表示用のCSSを記載
次にCSSを設定していきます。
使うコードは以下です。
.hide-block {
display: none !important;
}ブロックタブ内にも「追加CSS」を記載する箇所はあるのですが、
ここに非表示のCSSを記載すると、編集画面自体からブロックが消えてしまいます。
WordPress 7.0にアップデートされてから、編集画面にもCSSがリアルタイムで反映されるようになったためです。
これだと将来的に戻すときに、非常に分かりづらくなってしまいます。
そのため、SWELLを使っている場合は、
編集画面下部のカスタムCSS欄に記載するのがもっとも手軽です。
これで、無事対象のブロックを非表示にしつつ、
編集画面上は表示されたままにすることができました。
SWELL以外で設定する場合
SWELL以外のテーマでは、投稿・固定ページごとのカスタムCSS欄がない場合があります。
その場合は、ダッシュボードから外観のカスタマイズを選びます。
カスタマイザーが開いたら、最下部の「追加CSS」をクリックしましょう。
ここに上記のCSSコードを記載すると、非表示にできます。
複数ページで「hide-block」を設定して非表示にしていきたい場合は、こちらにコードを書いておく方がいいかもしれません。
ただし、テーマやエディターの仕様によっては、
編集画面にもCSSが反映され、対象のブロックが見えなくなることがありますので、注意しておきましょう。
まとめ
頻繁に使う方法ではありませんが、作り込んだブロックを一時的に外したいときには便利です。
削除するか迷ったときの選択肢として、知っておくのもいいかなと。
では、また次回。
編集後記
◇日記
昨日はラン、ブログサイトの改修、セミナー企画を中心に。
夏休み関係の予約も。
息子の塾関係で、消費者ホットラインに電話も。
◇ブログネタ経緯
実践したことを記事に。
◇1日1新
消費者ホットライン
