HP作成やブログで『はてなブログ』を使用している方、結構多いですよね。
何にしても他のブログコンテンツと比べて圧倒的にSEOが強い…！
僕はHPの下書きや試し書き、みたいな形で使うことが多いのですが、なにしろやはり自分自身のことを書くので、万一知り合いに見られて、あっこれもしかしてあの人…
って特定されないかちょっと気になっていました。
日付が無ければどの出来事か特定されないので、ブログ記事や一覧に表示される『作成日時』と『更新日時』を非表示にしようと考えました。
はてなブログってあらゆる項目に時間を表示しようとするから…
日付が消せない原因を探してみる
一般的には、ブログの設定画面にカスタムCSSみたいな項目がどのブログにも用意されていて、そこでdisplay: none;で非表示にしますよね。（設定箇所とコードはのちほど…）
はてなブログにももれなくカスタムCSSがあり、そこにCSSを記載したのですが、なぜか全く反映されない。
デベロッパーツールで見ても、CSSが打ち消されているのではなく、反映されていないんですよね。
この場合はCSSのコード記述方法にエラーが出ているか、はてなブログ側の設定に原因があるかのどちらか。
コードの記述は何度も見直したので後者を疑います。
はてなブログのCSSの記載箇所は2カ所ある
はてなブログでは、実は追加のCSSを記載できる場所が以下の2カ所あります。
一般的な『カスタムCSS』を記載する箇所
■まずはデザインページに移動
■続いて①スパナタブを開き、②カスタムCSSをクリックするとカスタムCSSを入力するページになります。
このデザインCSSへの追記が一番一般的ですが、僕が試した時にはなぜか反映されませんでした。
これは僕が見ていたのはスマートフォンの画面で、スマホの設定は別の個所で設定をしていたからなんですね。
後で検証したところ、PC版では問題なくCSSが反映されていました。
ちなみに記述方法は
.className {
background: red;
}
のようにstyle.cssに直接書くような方式で記述します。
スマホ限定で追加設定を記載するヘッダー箇所
それではもう一つのスマホ限定CSSの記載箇所を見ていきます。デザインタブを開くところまでは一緒です。
■今度はスパナタブではなく、⓵スマホタブを開き、②ヘッダを選択します。
■少し下にスクロールすると『タイトル下』というところがあるのでここで設定を行います。
このタイトル下の設定では
- PCと同じHTMLを表示する
- スマートフォン用にHTMLを設定する
という2つの項目がありますね。
この設定、おそらく『スマートフォン用にHTMLを設定する』がデフォルトになっている。
そしてこれを選択していると、先ほどのデザインCSSに記載したCSSは無視され、スマートフォン用のCSSを記載しなくてはいけなくなります。
正直かなりのトラップといえるのではないでしょうか…。
モバイルフレンドリーなレスポンシブ対応が当たり前になっている昨今、デバイスによって全く違うCSSを記載することもあまりないと思いますが。
何にしてもここにCSSを追加することで無事、スマートフォン側にも反映されました。
記述方法ですが、このヘッダーはスタイルシートではなくHTMLに記述することになるので書き方は先ほどと異なり以下のように<style>タグで囲ってやる必要があるのでご注意を。
<style>
.className {
background: red;
}
</style>
日付を消すためのCSS
これはおそらく皆様試されていたCSSがあると思うので答え合わせのような感じになるかと思いますが参考までに記載しておきます。
.date {
display: none;
}
.urllist-date-link {
display: none;
}
.list-entry-article .entry-footer {
display: none;
}
一番上が個別の各記事ページに表示される時間全般を消すためのCSS。…①
2番目が記事ページフッターに表示される『関連記事』『注目記事』のような記事の一覧に表示されている日付を消すCSS。…⓶
一番下が、スマホ表示の場合ははてなブログは記事一覧になっているかと思いますが、この記事一覧に表示されている日付を消すCSSです。…③
まとめ
これではてなブログの記事ページ、記事一覧ページから日付が削除されます。
わかってしまえば簡単なのでぜひ試してみてくださいね。
