WordPress固定ページのタイトルをCSSで非表示にする方法【Simplicity】

 

この記事では、CSSを使って固定ページの記事タイトルを非表示にする方法を紹介します。

ブログのホーム画面やプロフィール、問い合わせページなど、固定ページを使って自作するときに記事タイトルを消したいと思ったことはありませんか?

通常のコンテンツ記事ならタイトルは必要ですが、ホーム画面などでは邪魔じゃまに感じることもあります。

記事のタイトルを消す方法は、PHPファイルを編集、Wordpressプラグインを使うなどいくつか方法がありますが、今回は最も簡単にできる、CSSを使った方法を紹介します。

taks
特定ページのみを指定して非表示にする方法も紹介します。

CSSを記述する場所

WordPressのCSS記述きじゅつ場所は、テーマによっていくつか用意されていることもありますが、ここではどのテーマでも使える記述場所「テーマの編集」を紹介します。

WordPressメニュー 外観(①) テーマの編集(②) を開きます。

CSS記述場所

使用するテーマを選択(③)して、「スタイルシート(Style.css)」(④)を選びます。

追加するCSSを記述し、最後に ファイルを更新(⑤)を押すと反映はんえいされます。

taks
コピペで外部エディタを使ったりバックアップしやすいので、コード追加はいつも「テーマの編集」を使っています。

記事タイトルを非表示にする方法

記事タイトルのクラス属性ぞくせい「entry-title」を指定して、非表示にするCSS設定をします。


/*******************************
 固定ページ記事タイトルを非表示
********************************/
.page 
.entry-title {
  display: none;
}

「.page」は、Simplicity2で固定ページにつけられるクラス属性です。「.page」半角スペース「.entry-title」とすることで、固定ページのタイトルを指定しています。

taks
「.page」をつけ忘れると、すべての記事タイトルが表示されなくなります。

メタ情報を非表示にする方法

公開日や更新日、カテゴリーなどのメタ情報を非表示にする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」と「,(カンマ)」で区切ってあげましょう。

page-idの調べ方

「固定ページ一覧」で、番号が知りたいページのタイトルにマウスをおくと、ブラウザーの下部にそのページのURLが表示されます。

page-id調べ方

表示されたURLの「POST=〇〇〇〇」の〇の部分がpage-idです。

このpage-idは、パーマリンクを手動で変更していても変わりません。

まとめ

固定ページで独自ホーム画面などを作るとき、タイトルなどが表示されていると邪魔になります。

他にもPHPファイルを編集したり、プラグインを使ったりする方法がありますが、CSSを追加するだけで簡単に消す事ができる方法を知っておくと便利です。

テーマが変わってもID属性やクラス属性を変えるだけで、タイトルとメタ情報を消すことができます。

Amazonでお得に買う方法

ネット通販の代表格Amazon。Amazonプライム会員に登録すると送料無料の他にも様々な特典がついてきます。

そんなAmazonでの買い物を、さらにお得にするなら、Amazonギフト券への購入チャージをおすすめします。

 

現金でチャージするたびに、チャージ額 × 最大2.5%分のポイントがもらえます。

Amazonプライム会員の方なら是非活用して、更にお得に利用しましょう。

CHARGE NOW

コンビニ・ATM・ネットバンクが対象

1円単位で購入可能

スポンサーリンク

フォローする