PC版のデザインをかなりカスタマイズしたんですが、それでもスマホでの表示はスマホ版のレイアウトがいいなあと思うでででーさん(@d3_dayo)です！
というわけで、PCでみた時とスマホでみた時とでは、だいぶ雰囲気の違うブログになってきましたが、個人的にはてなのスマホ版レイアウトは好きです。シンプルでみやすいし、そして弄りがいもありますしね(^^)
今回もそんなはてなブログのスマホ版レイアウトのカスタマイズについて手順を紹介したいと思います！
最初に
この記事で紹介する手順で非表示にできる箇所は…
1. ここと…
2. ここです！
カスタマイズ手順
まず最初に 1. の記事下に表示される「新しい記事」と「過去の記事」へのリンク非表示から紹介します。うーん、別にあっても良いとは思うのですが、このブログの場合は雑記ブログなので(最近は割とこういったカスタマイズなどの記事に偏ってるけど)恐らく、検索流入で入ってきた人は記事テーマに一貫性もないため、別にこのページャーを使って「新しい記事」や「過去の記事」を読んだりはしないと思うんですよね…(^_^;)
しかも、記事タイトルが途中で切れちゃってますしね。。これよりも記事下に貼ってある関連記事からテーマに結びつきのある記事の中で回遊して頂けたらと思うので、不要なものは非表示することにしました！
非表示にする手順は、はてなブログの管理画面を開き「デザイン設定」→「スマートフォン」→「ヘッダ」→「タイトル下」に以下のコードを挿入します。
<style type="text/css"> /*ページャー非表示*/ .pager-permalink .pager-permalink-wrapper { display: none; } </style>
冒頭と末尾の「style～/style」の部分は既にスマホレイアウトをカスタマイズしている場合には挿入していると思うので記述不要です。
上記CSSを追加すれば、記事下にあるこの部分は非表示となります。
続いて 2. のページ最下にある「上へ」を非表示にします。この部分はタップするとページトップまで自動で戻してくれるという便利な機能がついているわけですが、正直、目立たないし…ここをタップすればトップに戻るということもわかりにくいし、このブログでは既に別途「ページトップへ戻る」ボタンを実装しているので、これも不要と思い、非表示にしています。
非表示にする手順は、先ほどの手順と同じくはてなブログの管理画面を開き「デザイン設定」→「スマートフォン」→「ヘッダ」→「タイトル下」に以下のコードを挿入します。
<style type="text/css"> /*デフォルト上へボタン非表示*/ .pagetop a { display: none; } </style>
このコードを追加するだけです！
もし、両方いっぺんにコピペしちゃいたいという場合にはこちらを貼り付ければOKです！
<style type="text/css"> /*ページャー非表示*/ .pager-permalink .pager-permalink-wrapper { display: none; } /*デフォルト上へボタン非表示*/ .pagetop a { display: none; } </style>
手順は以上となります。
おわりに
今回は、手順としては非常に簡単、そして非表示にすると少しだけスマホ版レイアウトの雰囲気や使い勝手も変わるかもしれない？という簡単カスタマイズ手順を紹介しました！このブログを今スマホで読んでいる方は、もちろん今回紹介した表示のカスタマイズ、このブログでも採用していますのでページの下のほうまで確認してみてくださいね！
もし、実際に手順を試してみる中で何かわからない点などあれば、コメントやツイッターなどでお気軽にご質問ください！(内容がわかりづらい記事となってしまい申し訳ないですΣ(´∀｀；))
はてなのスマホ版レイアウトカスタマイズにはきっとこれが役立つと思います！
d3dayo.hateblo.jpでででーさん
d3dayo.hateblo.jp