記事を書く以上にブログのテーマをカスタマイズすることが好きなひとり情シスの暗黒卿ことアブラカタブラナカムラ (@sys_nakamura) です。なんか韻が踏めている感じなのでこれけっこう好きです。前回、 1 時間くらいで書き終わるかなと思い書きだした「私がはてなブログに施しているカスタマイズまとめ」ですが、全くそんなにサクッと書き終えることはできずに記事完成まで 4 時間もかかってしまい、そしてまだスマホ版へのカスタマイズまとめに着手できていないので着手しようと思います。
こちらが前回書いた記事です。 PC 版に施したカスタマイズのみをまとめています。
- 前提
- CSS を記述するための事前準備
- ページ下の「はてなブログをはじめよう！」などの非表示
- メニューが表示されているフッターの非表示
- 記事タイトル上に表示される日付のレイアウトを変更
- 見出しのレイアウトカスタマイズ
- グローバルヘッダーの色を変更する
- 目次のレイアウト変更
- ページ下にスクロールアップボタンを設置
- ページ上部にトグルメニューを実装
- トグルメニューの冒頭に Font Awesome のアイコンフォントを表示
- 記事タイトル下に記事を読む所要時間を表示
- まとめ
- こんな記事も書いています
前提
私ははてなブログPro を使っているので今回紹介するスマホ版へのカスタマイズは前提としてはてなブログpro を使っている環境に適用されるものになります。 (通常のはてなブログとはてなブログPro とでは多少カスタマイズ可能な箇所が異なるためです)
CSS を記述するための事前準備
はてなブログPro でスマホ版のテーマに CSS を記述してレイアウトをカスタマイズする際に必要な事前準備を予め紹介しておきます。スマホ版のレイアウトに CSS を記述したい場合にははてなブログダッシュボードから「デザイン設定」→「スマートフォン」→「ヘッダー」→「タイトル下」に「<style tyle=text/css> </style>」を記述して <style> で囲まれている行に CSS を記述することでレイアウトのカスタマイズが適用されます。
以下、「タイトル下」に記述するサンプルのコードを貼っておきます。
ページ下の「はてなブログをはじめよう！」などの非表示
スマホ版ではてなブログを見るときにページ下までスクロールされると表示される「はてなブログをはじめよう！」の表示や「はてなブログ開発ブログ」などへのリンクを CSS で非表示にしています。どれのことかというと、これのことです。
設定手順
以下のコードをはてなブログダッシュボードから「デザイン設定」→「スマートフォン」→「ヘッダー」→「タイトル下」に追加することで非表示にすることができます。
いつも楽しくブログを書かせていただいてはてなブログさんにはお世話になっているのですが、、ごめんなさい。ブログは極力シンプルにしたいので表示がごちゃごちゃになってしまうので消しています。引き続きはてなブログPro でブログをやるのでご勘弁を！
参考にさせていただいた記事
カスタマイズにあたってはこちらの記事を参考にさせていただきました！
メニューが表示されているフッターの非表示
スマホ版ではてなブログを見ているとページの一番最後に「ダッシュボード」「PC版」「ブログを報告する」といったメニューが表示されているフッターがあると思います。これのことです。
設定手順
私自身はスマホからダッシュボードを開いたり PC 版に表示を変えて見ることがまずないので、表示をよりシンプルにするためこのブログでは当該箇所を非表示にしています。このフッター部分の表示は以下のコードをはてなブログダッシュボードから「デザイン設定」→「スマートフォン」→「ヘッダー」→「タイトル下」に追加することで非表示にすることができます。
記事タイトル上に表示される日付のレイアウトを変更
スマホ版表示のデフォルト状態では記事タイトル上に表示される投稿日は特に装飾されていないシンプルなテキストで表示されますが、これだと少し味気ないような気がしたので CSS で背景をつけてみました。参考までにレイアウト変更前のスクリーンショットと変更後のスクリーンショットを貼っておきます。
CSS 適用前
記事タイトル上に表示されている投稿日はシンプルな黒字のテキストのみです。
CSS 適用後
日付のテキストにピンクの背景を適用してフォントカラーは白にしました。背景の色は自分のアイコン背景色に合わせています。
設定手順
上記の変更は以下のコードをはてなブログダッシュボードから「デザイン」→「スマートフォン」→「ヘッダー」→「タイトル下」に追加することで非表示にすることができます。配色についてそれぞれ好みのものがあると思いますので、コード内のカラーコードを変更してお使いください。 HTML カラーコード
参考にさせていただいた記事
カスタマイズにあたってはこちらの記事を参考にさせていただきました！
見出しのレイアウトカスタマイズ
このブログではテキストに「見出し」を適用した際のスタイルを CSS でこんな感じにしています。
大見出し
「私はヒトリジョーシスをやっています」の部分が大見出しです。
中見出し
「ひとり情シスの役割」の部分が中見出しです。
設定手順
上に貼ったスクリーンショットと同じ (このブログと同じ) 見出しのスタイルを適用するには以下のコードをはてなブログダッシュボードから「デザイン設定」→「スマートフォン」→「ヘッダー」→「タイトル下」に追加します。 ※カラーコードは変更すればお好きな配色で設定することができます。
見出しのカスタマイズをするにあたって参考になる記事
見出しのカスタマイズにあたっては以下の記事なども参考にさせていただきました！
グローバルヘッダーの色を変更する
グローバルヘッダーとははてなブログをスマホ版で見たときにページ最上部に表示されるこの部分です。デフォルトではクリアの透過設定になっています。
デフォルトの状態
CSS で配色を変更
私ははてなブログのダッシュボードから「デザイン設定」→「スマートフォン」→「アクセントカラー」の設定は変更せずにグローバルヘッダー部分だけ直接 CSS で配色をこのように変更しています。
設定手順
上に貼ったスクリーンショットのようにグローバルヘッダー部分の配色だけを変更するには以下のコードをはてなブログダッシュボードから「デザイン設定」→「スマートフォン」→「ヘッダー」→「タイトル下」に追加します。 ※カラーコードを変更すればお好きな配色で設定することができます。
目次のレイアウト変更
はてなブログでは記事中にはてな記法で [ : contents ] と入力することで目次を挿入することができます。
目次は長文記事を作成する際にユーザビリティを考慮する上でとても便利な機能です。しかしデフォルトの目次だとかなり味気のない感じなので少しレイアウトをカスタマイズしています。現在はこんなふうになっています。
設定手順
細かい手順については以前に個別の記事を書いたのでそちらもご覧ください。上に貼ったスクリーンショットと同じ目次のレイアウトを適用したい場合には、以下のコードをはてなブログのダッシュボードから「デザイン」→「スマートフォン」→「ヘッダー」→「タイトル下」に追加します。
手順を記載している記事
こちらの設定については個別に記事を書いたものがあるので詳しくはこちらもご覧ください。
参考にさせていただいた記事
カスタマイズにあたってはこちらの記事を参考にさせていただきました！
ページ下にスクロールアップボタンを設置
このブログではユーザビリティの向上として右下にスクロールアップボタンを設置してページを深くスクロールしていても一気にページトップまで戻れるようにしています。 PC や iPhone ならそれ単体の機能でページトップに戻ることができますが、私のように Android × Chromebook ユーザーだとサイト側で機能を提供してくれているとなかなか便利なのです。ちなみにスクロールアップボタンとはこれのことです。
PC 版とスマホ版両方に設置していますが、ここではスマホ版の設置方法について手順を紹介したいと思います。細かい手順については以前に個別の記事を書いたのでそちらもご覧ください。ここでは簡潔にこのブログと同じ状態でスクロールアップボタンを設置する手順について記載します。
設定手順 - headに要素を追加
まずは以下のコードをはてなブログのダッシュボードから「設定」→「詳細設定」→「headに要素を追加」に貼り付けます。これはボタンに使われているフォントが Font Awesome の Web フォントなのでフォントを表示できるようにするために必要な設定です。
設定手順 - フッタにコードを追加
次にはてなブログのダッシュボードから「デザイン」→「スマートフォン」→「フッタ」へ以下のコードを追加します。
設定手順 - タイトル下にコードを追加
最後にはてなブログのダッシュボードから「デザイン」→「スマートフォン」→「ヘッダー」→「タイトル下」へ以下の CSS を記述すれば設置手順は完了です。
手順を記載している記事
こちらの設定については個別に記事を書いたものがあるのでご覧ください。
参考にさせていただいた記事
このカスタマイズをするにあたって参考にさせていただいた記事はこちらです。
ページ上部にトグルメニューを実装
このブログではスマホ版のページ上部にこのようなトグルのメニューを実装しています。
メニューボタンをタップするとトグルでコンテンツメニューが表示されます。
設定手順
上記のトグルメニューを実装するには以下のコードをはてなブログのダッシュボードから「デザイン」→「スマートフォン」→「ヘッダー」→「タイトル下」へ追加することでメニューが表示されるようになります。コードに記載されている「<li><a href='リンク URL'>メニュー名</a></li>」の『リンク URL』部分をリンク先の URL に『メニュー名』をメニューの名前にすることでトグルボタンをタップした時に表示されるコンテンツメニューを設定することができます。
参考にさせて頂いた記事
このカスタマイズをするにあたって参考にさせていただいた記事はこちらです。
トグルメニューの冒頭に Font Awesome のアイコンフォントを表示
このブログでは上記の手順で設置したトグルメニューのコンテンツ冒頭に Font Awesome のアイコンフォントを追加してメニューの視認性を向上させてみました。現在はこんな感じで各メニューの冒頭にアイコンを表示しています。
設定手順 - headに要素を追加
まずは Font Awesome の Web フォントをブログ上で表示できるようにするために以下のコードをはてなブログのダッシュボードから「設定」→「詳細設定」→「headに要素を追加」に貼り付けます。 ※ 既に上で紹介したスクロールアップボタンの設置で要素を追加している場合にはこの作業は不要です。
Font Awesome のサイトから使用するアイコンのコードを取得
head 要素に上記コードを追加したら Font Awesome のサイトからメニューに使いたいアイコンフォントのコードを取得します。
上記のサイトにアクセスしたらページ上にある「Icons」をクリックします。
使いたいアイコンが見つかったらアイコンをクリックして個別のページを開きページ内の <i class= から始まるコードを全文コピーします。
そして取得したコードをトグルメニュー設置時に貼り付けたコードの中に以下のように追記すればメニューの冒頭にアイコンフォントが表示されるようになります。以下のコードをブログのダッシュボードから「デザイン」→「スマートフォン」→「ヘッダー」→「タイトル下」へ追加することでアイコンフォントが表示されるようになります。 ※ 以下、トグルメニュー設置時のコード全文に Font Awesome のコードを加えて貼っています。
記事タイトル下に記事を読む所要時間を表示
主に WordPress で書かれている記事を読むときに「この記事は○○分で読めます」といった表示が記事タイトル下にでていることがあります。このブログでも 1 分 400 文字換算で記事を読むための所要時間が表示されるようにしています。参考として実際に表示されているところを撮影したスクリーンショットを貼っておきます。
このカスタマイズも PC 版とスマホ版両方に施していますが、ここではスマホ版の設置方法について手順を紹介したいと思います。細かい手順については以前に個別の記事を書いたのでそちらもご覧ください。ここでは簡潔にこのブログと同じ状態で記事を読むための所要時間を表示する手順について記載します。
設定手順 - 記事上にコードを追加
以下のコードをはてなブログのダッシュボードから「デザイン」→「スマートフォン」→「記事」→「記事上」に貼り付けます。
設定は以上です。とても簡単です。
手順を記載している記事
こちらの設定については個別に記事を書いたものがあるのでご覧ください。
参考にさせていただいた記事
このカスタマイズをするにあたって参考にさせていただいた記事はこちらです。
まとめ
今回は前回よりかは文字数が少ないのですが (前回は 7913 文字で今回は 5862 文字) 結局、記事の作成時間はダラダラと他のことをやりながら書いたということもありますが、前回の 4 時間よりもトータルでかかってしまいました。基本的にこれを上から下まで 1 字足りとも見逃さず読むというのは疲れてしまうので、カスタマイズしたい TIPS ごとに目次からジャンプして使っていただくことが一番いい方法なのではないのかなと思います。カスタマイズについてはこれで終わりではなく、気が変わったらまたいろいろと弄る箇所が出てくると思うので自分自身の備忘としても定期的に情報を更新していければと思っております！
それではっ！
こんな記事も書いています
こちらの記事は先日書いた PC 版のテーマに施したカスタマイズをまとめたものです。 大変文量が多いので、こちらもカスタマイズしたい TIPS ごとに目次からジャンプして参考にしていただくと良いのではないかと思います。
PC 版のテーマでもスマホ版のようにアイキャッチ画像が角丸になるよう設定する手順を記載しています。あわせてトップページを自動で記事一覧表示してアイキャッチ画像がリストで表示されるようにする手順についても記載しています。