こんにちは。
2017年9月になって、スマホから自分のブログを見ていると、「あれ？なんか表示がいつもと違うぞ。」ということに気が付きました。個別の記事ページに「はてなブログをはじめよう！」の表示がいつの間にかに追加されていました。
元に戻すのに、だいぶ時間がかかった・・・。同じ悩みを持っている方に短時間で解決してもらうため、CSSカスタマイズ方法をお伝えします。
優秀なエンジニアに教えてもらいました。
CSSカスタマイズ前後の比較
カスタマイズ前後のイメージ画像をつけています。カスタマイズ後を目標とします。
カスタマイズ前は、図1でした。「はてなブログをはじめよう！」が表示されています。
図1
一方、カスタマイズすると、図2のように非表示となります。
図2
前提条件
カスタマイズ前の私のはてなブログの使用条件について、まとめています。
- デザインのテーマは、レスポンシブを使用
- はてなブログPROを使用
以前は、デザインのテーマにおいて、レスポンシブにした場合、「はてなブログをはじめよう！」の部分は表示されていませんでした。
カスタマイズ方法
- はてなブログにログインする。
- ダッシュボードの「デザイン」をクリックする。
- 「カスタマイズ」をクリックし、「｛｝デザインCSS」をクリックする。（図3）ここに下記のコードを入力する。「変更を保存する」をクリックして完了です。
図3
<style>
/* はてなブログをはじめようを非表示にする */
.footer-action-wrapper{
display:none;
}
/* はてなブログ開発ブログ等のリンクを非表示にする */
.touch-item-list{
display:none;
}
.guest-footer-content{
display:none;
}
</style>
スマホからの表示を確認しましょう。
このカスタマイズをオススメしたい人
- 自分のはてなidをできるだけ表示させたくない人
- 自分のブログから離脱（別の外部のページに移動）されたくない人
この表示では、「○○さんは、はてなブログを使っています。」とはっきりとはてなidが表示されています。普段から何かの理由でidを非表示にしている人は、困ってしまうでしょう。そんな人は、このカスタマイズを使用してはいかかでしょうか。
この表示では、「はてなブログをはじめる（無料）」や「はてなブログとは」のリンクが表示されています。この場所にこのリンクがあり、はてなブログに興味がある人は、あなたのブログから離脱するでしょう。
そうすると、それよりも下に掲載されている自分の記事リンクが見られなくなります。なるべく、自分のブログ記事を多く見てほしい人は、このカスタマイズを使用してはいかかでしょうか。
まとめ
カスタマイズできましたでしょうか？
正直、私はCSSに詳しくありません。ワードプレスならわかる（笑）。でも知り合いにエンジニアがいるので、その人に頼っています。言われるがままにいじってます。
私と同じようにCSSが苦手な人に役に立てたら幸いです。
では、また！