テンプレートの一部を非表示にして、もっと自由なレイアウトに！― display:none活用術

2025年8月5日

PAGEKitのテンプレートには、メニューやフッターなど、あらかじめ便利なパーツがレイアウトされています。

ですが、自分で構成を工夫したいときや、ページによって要素を削りたいと感じる場面もあるでしょう。

そんなときに便利なのが、CSSの display: none; を使った非表示テクニックです。テンプレート構造を壊さず、柔軟に見た目を調整することができます。

たとえば、このような希望はありませんか？

・メニューは使わず、自作のリンクボタンだけでナビゲーションしたい

・ヘッダーやフッターを削ってスッキリさせたい

このように、必要に応じて一部を取り除いたほうが、伝えたいことに集中できるケースもあります。

display: none; を使うと、対象の要素はページ上に一切表示されなくなります。

見えなくなるだけでなく、スペースも占有しないため、すっきりとした見た目に。

ただし、要素のIDやクラスを正確に指定しないと、意図しない表示崩れを起こすこともあるので注意が必要です。

Google Chromeの「検証」機能を使い、対象パーツ（例：メニュー、フッターなど）の id や class を調べましょう。

「背景・カラー」→「オリジナルCSS」タブ →「編集」ボタンをクリックします。

#header {
display: none;
}

必要に応じて複数の要素をまとめて非表示にできます。

「設定」で保存し、「オリジナルCSSを利用する」にチェックを入れて「変更を反映する」をクリックすれば完了です。

影響を与えるのはそのページの全体構成。変更する場合は他ページへの影響も要確認。

PCとスマホの両方で表示崩れがないか確認するのが安心。

元に戻す場合はCSSの記述を削除するだけでOKです。

テンプレートは便利ですが、すべてのページに対して万能とは限りません。

必要なときに「一部を非表示にする」という選択肢を持つことで、もっと自由なページ設計が可能になります。

特に、社内用ページやイベント用ページなど、自分仕様に整えたい場面ではとても役立つテクニックです。

ホームページを作るのは、むずかしそう。そう思っていた方も、PAGEKitなら「意外とカンタンだった」と感じていただけるはずです。専門知識がなくても、必要なページがすぐに揃うテンプレートと、やさしい操作画面。まずは一度、実際の使いやすさを体験してみませんか？