コトサワに聞いとけ

コトサワに聞いとけ

そうだそうだ、聞いとけ聞いとけ

【はてなカスタマイズ】記事内の不要な要素を消す方法|CSS・HTMLコピペ可!

f:id:zinseimurige:20220327020557p:plain

 

こんにちは、コトサワです

 

今回は、当ブログのトップページにも活用している「記事内の不要な要素を消す方法」をご紹介します

 

この方法を使うと

  • 記事タイトル
  • 更新日
  • カテゴリ
  • スターボタン
  • はてなID

等の記事の上下に表示されている要素を、個別に非表示設定することができます(一括設定も可能)

 

注意!

ブログのカスタマイズを行う際には、事前に必ずバックアップをとっておいてください

当記事を参考にカスタマイズをした場合のデザイン崩れや反映不足は全て自己責任でお願い致します

記事内の不要な要素を消す方法

 

記事内の不要な要素を消すには「display:none;」というコードを使います

日本語に訳すとそのまま「表示:なし」ってことですね

 

この「display:none;」を消したい要素にくっつけて、コードの貼り付けるべき場所に貼り付ける、作業はそれだけで完了です

 

具体的な記述例はこんな感じです

/*記事タイトル非表示*/
.entry-title
{display:none;}

 

entry-titleの部分を入れ替えると、消える要素が変わります

 

タイトルとカテゴリ

タイトルやカテゴリ・投稿日等を記入後に「display:none;」で指定した場合…

プレビュー・記事公開後の画面では、設置場所もろともキレイに消えます…が、入力した内容は記事の一部として保存されています

 

ダッシュボードでは、全ての記事にタイトルやカテゴリがついていた方が管理しやすいと思うので、非表示にするとしても、タイトル・カテゴリは入力しておく方がいいかもしれません

 

私のブログを例に出すと…

この「トップページ」という記事は、ダッシュボード上ではタイトルが確認できます

f:id:zinseimurige:20220327022520p:plain

ダッシュボード「記事の管理」

タイトルがついているおかげで、探しやすく管理しやすいです

 

でも、この記事のタイトルは「display:none;」で指定しているので、公開後のページでは非表示になっています

f:id:zinseimurige:20220327022601p:plain

公開後の「トップページ」

 

全ての記事に反映させたいときは「デザインCSS」に貼りつけよう

作成した「display:none;」のコードを、全ての記事に反映させたいときは、デザイン設定の「デザインCSS」に貼り付けてください

 

具体的な場所は「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」です

f:id:zinseimurige:20220327024609p:plain

カスタマイズ内「デザインCSS

 

コード入力後は、必ず「変更を保存する」をクリックして、内容を保存してください

f:id:zinseimurige:20220327024635p:plain

「変更を保存する」

 

特定の記事に反映させたいときは「styleタグ」を活用して記事に直接貼りつけよう

作成した「display:none;」指定のコードを、特定の記事にだけ反映させたいときは、各記事のHTML編集画面で「styleタグ」を活用してください

 

記事作成画面の「HTML編集」にstyleタグで囲んだコードを入力します

f:id:zinseimurige:20220325090627p:plain

HTML編集

 

入力する際のコードはこんな感じです

<style>
/*記事タイトル非表示*/
.entry-title{display:none;}
</style>

 

styleタグで囲んだコードは、その記事だけのCSSデザインコードになります

 

この方法の注意点等は、↓にまとめています

 

コピペOK!はてなブログの記事要素削除コード一覧

 

要素名とかコード入力とかいちいちめんどくさすぎ…という方のために、コピペOKのCSSコードを一覧で置いておきます

 

ご自由にご活用ください

 

余談ですが…

Komeさんの↓の記事が、要素名を調べるのにとっても参考になりますよ~

1つ1つ調べていたのがバカみたい…この記事にもっと早く出会いたかった…!

 

ヘッダー(記事上部分)

 

/*記事ヘッダー非表示*/
.entry-header{display:none;} 

 

記事本文の上にある要素を一括で全消ししたいときに使ってください

 

フッター(記事下部分)

 

/*記事フッター非表示*/
.entry-footer{display:none;} 

 

記事本文の下にある要素を一括で全消ししたいときに使ってください

 

ページャー

 

 /*ページャー非表示*/
.pager{display:none;}

 

記事投稿日

 

 /*記事上投稿日非表示*/
.entry-date{display:none;} 

 

この要素は、記事上表示の要素です

 

記事タイトル

 

 /*記事タイトル非表示*/
.entry-title{display:none;} 

 

記事カテゴリ

 

/*記事カテゴリ非表示*/
.entry-categories{display:none;} 

 

投稿者(はてなID

 

 /*投稿者・はてなID非表示*/
.fn{display:none;} 

 

投稿時間

 

/*記事下投稿時間非表示*/
.entry-footer-time{display:none;} 

 

この要素は、記事下表示の要素です

 

はてなスター

 

 /*はてなスター非表示*/
.hatena-star-container{display:none;} 

 

【デザイン画面で一括設定も設定可能】SNSボタン

記事の上下に表示されるSNSのシェアボタンは、ブログのデザイン設定で一括設定を行うことができます

f:id:zinseimurige:20220327024724p:plain

カスタマイズ内「記事」

 

デフォルトでは表示しておいて、特定の記事のみ非表示にしたいという場合は、以下のコードを記事のHTML編集に貼り付けてください

 

<style>
/*SNSボタン非表示*/
.social-buttons{display:none;}
</style>

 

HTMLに貼り付ける前提のコードなので、styleタグがついています

 

【全記事への反映のみ可能】コメントボタン

(私のブログだけの話かもしれないですが…)

正しいコードを入力しても、コメントボタン(デザインは「コメントを書く」)は消えません

 

デフォルトのコメントボタンは↓のように表示されます

f:id:zinseimurige:20220327050123p:plain

デフォルトコメントボタン

このコメントボタンを非表示にするために

↓のコードを記事編集画面の「HTML編集」に入力しました

<style>
/*コメントボタン非表示*/
.leave-comment-title{
  display: none;}
</style>  

 

すると、入力後のプレビュー画面では、コメントボタンが跡形もなく非表示に…!

よーしこのまま公開するぞ、と公開ボタンをクリックします

f:id:zinseimurige:20220327045945p:plain

プレビューではボタン消えてる

しかし、いざ公開し、記事ページを確認すると、コメントボタンはなぜか復活…ドユコト…

f:id:zinseimurige:20220327050239p:plain

公開後画面で復活しているボタン

 

その後…

どうしてもコメントボタンを消したかった私は、ダッシュボード内の大元の設定からコメント受付を全オフにするという暴挙に出ました

→すると、全ページでコメントボタンが消えました

 

一連の流れから

ダッシュボードで表示設定をすることができる要素は、ダッシュボードの設定が最優先で適応になり、プラスでコードを書き加えても、要素が消えない仕様になっている

といったようなことが考えられます(あくまでもコトサワ考察です、間違ってたらスミマセン)

 

コトサワと同じく全記事反映でいいから、とりまコメントボタン消したいわねという方は

ダッシュボード→「設定」→「基本設定」→「コメント設定」→「なし」で非表示の設定ができます

f:id:zinseimurige:20220327045900p:plain

「なし」

なし」を選択した後は、必ず「変更」をクリックしてください

 

ただしこの方法は、コメントボタンの表示だけでなく、コメント受付そのものがOFFになってしまいますので、設定は自己責任でお願いします

 

まとめ

今回は、記事内の不要な要素を消す方法をご紹介しました

 

私はプロの開発者などではなく、ただのブログカスタマイズ趣味女なので、至らない点は多々あるとは思います

が、この記事が、私と同じようにブログカスタマイズ好きの方の参考になれば嬉しいです

 

ちなみに今回の「display:none;」は、当ブログの「無料版はてなの”有料風トップページ”」にも活用しています

 

”有料風”トップページの作り方は↓の記事にまとめているので、お時間のある方は是非こちらもどーぞ

 

当記事の内容はブログのカスタマイズにご自由に利用していただけます

ただし当記事のカスタマイズ内容をご自身のブログで”紹介”される場合は

コピペではなく、当記事のリンクを貼っていただくようにお願い致します