この記事では、CSSを使って固定ページの記事タイトルを非表示にする方法を紹介します。
ブログのホーム画面やプロフィール、問い合わせページなど、固定ページを使って自作するときに記事タイトルを消したいと思ったことはありませんか？
通常のコンテンツ記事ならタイトルは必要ですが、ホーム画面などでは邪魔に感じることもあります。
記事のタイトルを消す方法は、PHPファイルを編集、Wordpressプラグインを使うなどいくつか方法がありますが、今回は最も簡単にできる、CSSを使った方法を紹介します。
taksもくじ
CSSを記述する場所
WordPressのCSS記述場所は、テーマによっていくつか用意されていることもありますが、ここではどのテーマでも使える記述場所「テーマの編集」を紹介します。
WordPressメニュー 外観（①） テーマの編集（②） を開きます。
使用するテーマを選択（③）して、「スタイルシート（Style.css）」（④）を選びます。
追加するCSSを記述し、最後に ファイルを更新（⑤）を押すと反映されます。
taks記事タイトルを非表示にする方法
記事タイトルのクラス属性「entry-title」を指定して、非表示にするCSS設定をします。
/*******************************
固定ページ記事タイトルを非表示
********************************/
.page
.entry-title {
display: none;
}
「.page」は、Simplicity2で固定ページにつけられるクラス属性です。「.page」半角スペース「.entry-title」とすることで、固定ページのタイトルを指定しています。
taksメタ情報を非表示にする方法
公開日や更新日、カテゴリーなどのメタ情報を非表示にするCSS設定です。メタ情報のクラス属性「post-meta」を指定して、非表示設定にします。
/*******************************
固定ページのメタ情報を非表示
********************************/
.page
.post-meta{
display: none;
}
特定ページのみ非表示にする方法
上記の方法では、すべての固定ページで表示されなくなります。自身で作ったホーム画面など特定ページのみ表示させたくない場合は、page-idを指定して非表示にします。
/*******************************
特定ページのみタイトル・メタ情報を非表示
********************************/
#post-1234 .entry-title,
#post-1234 .post-meta {
display:none;
}
投稿したページにはすべてpage-idが自動的に割り振られています。投稿したページのhtmlコードには、ID属性「post-[page-id]」として記述されています。
上記のコードの「#post-1234」が、ID属性を指定している部分です。「#post-1234」半角スペース「.entry-title」とすることで、特定ページのみのタイトルを指定しています。
タイトルとメタ情報両方に非表示設定をするときは、「#post-1234 .entry-title, #post-1234 .post-meta」と「,（カンマ）」で区切ってあげましょう。
「固定ページ一覧」で、番号が知りたいページのタイトルにマウスをおくと、ブラウザーの下部にそのページのURLが表示されます。
表示されたURLの「POST＝〇〇〇〇」の〇の部分がpage-idです。
このpage-idは、パーマリンクを手動で変更していても変わりません。
まとめ
固定ページで独自ホーム画面などを作るとき、タイトルなどが表示されていると邪魔になります。
他にもPHPファイルを編集したり、プラグインを使ったりする方法がありますが、CSSを追加するだけで簡単に消す事ができる方法を知っておくと便利です。
テーマが変わってもID属性やクラス属性を変えるだけで、タイトルとメタ情報を消すことができます。
