カスタムCSSとCSSによるウェブサイトの一部非表示

非常に一般的なリクエストは、管理者側に独自のオン/オフ ボタンがない Web サイト上の特定の部分を非表示にすることに関連しています。フロントエンドの詳細ごとにテーマ管理ボタンを設けることはできないため、HTML コードの編集に慣れていない場合は、不要な部分をまったく削除する必要がない場合は、CSS を使用して不要な部分を非表示にすることができます。

削除する部品を見つけます

ブラウザの開発者ツールを使用すると、削除したい部分を正確に見つけることができます。
ブログ投稿の下にある日付と作成者の部分を削除したいとします。この部分を右クリックして要素を検査し、ブラウザー開発者ツールを開きます。

開発者ツールを開く

マウス カーソルをソース コード上に移動すると、マウス カーソルの下にあるソース コードの行を参照するページ上の強調表示されたセクションが表示されます。

ソース内の要素を検索

このようにして、非表示にしたいパーを見つけることができます。たとえば、日付と作成者を含むすべてのセクション、日付セクションのみ、または作成者セクションのみの場合は、上のスクリーンショットを参照してください。

選択したセクションを非表示にする CSS を記述する

非表示にする部分を選択したら、選択した HTML タグの ID または CLASS 属性を独自の CSS スタイルで使用するか、このタグのテーマで使用される正確な CSS セレクターを使用します。テーマで使用される選択したタグの CSS セレクターは、ブラウザー開発者ツールの右側にあります。
たとえば、日付と作成者の部分全体を削除することにした場合、テーマで使用されるセレクターは次のとおりです。 .elm-posts-main .item .item-info

タグの CSS セレクター

横のHTMLタグを非表示にするCSSスタイルは「display: none;」です。 !重要 ステートメントを使用して、CSS スタイルが別の CSS でさらに上書きされるのを防ぎます。

したがって、日付と作成者の部分を非表示にする最終的な CSS スタイルは次のようになります。

.elm-posts-main .item .item-info { 表示: なし !重要; }

カスタム CSS コードをカスタマイザーに追加する

カスタム CSS コードを追加できます 外観 > カスタマイズ > 追加 CSS

公開後は、Web サイトで確認できます。

適用済み_css_style