koblog

高校生のWEBデザインブログ

【はてなブログ】トップページの記事を非表示にする方法

サムネイル

はてなブログの無料版では固定ページをつくることも、トップページの記事を一覧形式にすることもできません。基本的に記事の全文が表示されてしまいます。

 

それでも、どうしても固定ページを作りたいという人はたくさんいると思います。そんな人に向けて今回は「トップページの記事を非表示にする方法」を紹介します。固定ページとどう関係があるのかと疑問に思うかもしれませんが、トップページの記事がなくなれば、あとは自分でコンテンツを作るだけでオリジナル固定ページが作れるようになります。

 

 

使いみち

使いみちですが、これは完全に人を選ぶと思います。僕の場合はトップページを1から自分で作りたかったので実装しました。他にもブログをホームページ風にしたい人にはかなり使えると思います。

 

非表示にするためのコード

下のコードを「デザインCSS」に追加してください。注意点ですが、CSSの編集をする前にバックアップを取っておいてください。

.page-index article.entry {
  display: none
}

これで反映されると思います。

反映されない場合は下の記事の【上級者編】を参考にしてみてください。 

 

仕組みですが、トップページの記事には「article」というクラス(id?)が付いています。そこでCSSの「display:none」を使い非表示にすることで、任意のコンテンツだけを表示できるようにしています。javascriptjQueryを使わないのde

比較的動作を軽くしたまま実装できます。ポイントですが、トップページの表示記事を1記事にすることで更に動作が軽くなります。

 

次にページャーを消します。ページャーは記事の下にあるこれです。

f:id:somethingreview:20190212163309p:plain

ここで注意しなければいけないのが、トップページのときだけ非表示にするということです。記事のページで非表示にすると不便なので、下のコードで消します。

.page-index .pager {
  display: none;
}

仕組みは先程と同じで、トップページのときだけページャーを非表示にしています。念の為、記事のページでページャーが消えていないか確認してみてください。

 

今回紹介した方法ですがこのブログでも導入しているので、良かったらトップページも見ていってください。有料版にトップページデザインに比べると出来栄えはあまり良くありませんが、僕自身かなり満足しています。

koblog-トップページ
 

 

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる