目次
非常に一般的なリクエストは、管理者側に独自のオン/オフ ボタンがない Web サイト上の特定の部分を非表示にすることに関連しています。フロントエンドの詳細ごとにテーマ管理ボタンを設けることはできないため、HTML コードの編集に慣れていない場合は、不要な部分をまったく削除する必要がない場合は、CSS を使用して不要な部分を非表示にすることができます。
削除する部品を見つけます
ブラウザの開発者ツールを使用すると、削除したい部分を正確に見つけることができます。
ブログ投稿の下にある日付と作成者の部分を削除したいとします。この部分を右クリックして要素を検査し、ブラウザー開発者ツールを開きます。
マウス カーソルをソース コード上に移動すると、マウス カーソルの下にあるソース コードの行を参照するページ上の強調表示されたセクションが表示されます。
このようにして、非表示にしたいパーを見つけることができます。たとえば、日付と作成者を含むすべてのセクション、日付セクションのみ、または作成者セクションのみの場合は、上のスクリーンショットを参照してください。
選択したセクションを非表示にする CSS を記述する
非表示にする部分を選択したら、選択した HTML タグの ID または CLASS 属性を独自の CSS スタイルで使用するか、このタグのテーマで使用される正確な CSS セレクターを使用します。テーマで使用される選択したタグの CSS セレクターは、ブラウザー開発者ツールの右側にあります。
たとえば、日付と作成者の部分全体を削除することにした場合、テーマで使用されるセレクターは次のとおりです。 .elm-posts-main .item .item-info
横のHTMLタグを非表示にするCSSスタイルは「display: none;」です。 ！重要 ステートメントを使用して、CSS スタイルが別の CSS でさらに上書きされるのを防ぎます。
したがって、日付と作成者の部分を非表示にする最終的な CSS スタイルは次のようになります。
.elm-posts-main .item .item-info { 表示: なし !重要; }
カスタム CSS コードをカスタマイザーに追加する
カスタム CSS コードを追加できます 外観 > カスタマイズ > 追加 CSS
公開後は、Web サイトで確認できます。
