本記事ではSimplicity2においてタイトルの下に表示される,記事投稿日と更新日,そしてカテゴリーの部分を消す方法を説明します.上のアイキャッチ画像では上側のBEFOREが記事投稿日などが入っている状態で,下側はそれを非表示にしている状態です.この設定をスタイルシートから行ないます.
タイトル下の記事投稿日,更新日,カテゴリーを消したい
Simplicity2をそのまま使用していると,タイトル下に記事投稿日と更新日,カテゴリーが以下の図のように表示されています.
ですが,記事投稿日や更新日はそこまで表示したくないこともあるかと思います.
とても新しい記事であれば好印象ですが,古い記事はなんか古いなと思われるのが嫌です.
またカテゴリーもタイトルの左上にパンくずがあって表示されているので,2重で表示されて無駄に感じます.
ここを非表示にすることでサイトがすっきりします.
そこで今回はスタイルシートを編集してこの部分を消したいと思います.
本記事は中級者向け以上の内容になっているので,初心者用の説明のようにこのコードをスタイルシートに貼り付ければ良いですよ~という説明ではなく,応用能力がつくように私が行なった試行をきちんと説明したいと思います.
まずこの部分の表示を消すためには,ここがどんなクラスという要素で書かれているのかを調べ,何を非表示にすれば良いのかを知る必要があります.
①サイトを開き,調べたい要素の部分をドラッグします.そして右クリックしてGoogle Chromeであれば検証を,Firefoxであれば要素を調べるを選択します.するとサイトと,サイトのコードが表示される画面になるます.そしてコード部分にマウスを持っていくと,そのコードがサイトのどの部分に対応するのかが,サイト画面に表示されます.そして今回消したい部分のコードを探すと,p.post-metaであることが分かります.
スタイルシートに変更を反映する
次にこのp.post-metaを表示にするよう,スタイルシートにコードを足します.
②管理画面から「外観→テーマの編集」を選択します.
③子テーマのスタイルシートになっているのを確認し,以下のコードを貼り付けます.
1 2 3 4 |
/*タイトル下の更新日やカテゴリを消す*/ p.post-meta{ display:none; } |
最初のp.post-metaは.post-metaでも大丈夫です.
④以上の操作で,下図のように該当部分を消すことができます.
追記
現在はカテゴリーだけを消去するようにしました.
CSSを以下のように変更しています.
1 2 3 4 |
/*タイトル下のカテゴリを消す*/ p.post-meta .category{ display:none; } |
以上,タイトル下の投稿日,更新日,カテゴリーを非表示にして消す方法についての説明でした.