はてなブログをカスタマイズしています。
CSS は、外部 CSS ファイルを使っています。
簡単にできて、メンテナンスも楽な外部 CSS ファイルを使ってみませんか。
目次
ブログをやっていると他のブログと差別化したり、あるいは自分なりの表現方法を取り入れたりするために、カスタマイズをする方も多いと思います。
私もテーマを使用した上にカスタマイズしています。
カスタマイズは新たに CSS を追加することになります。
一般的には、はてなブログのデザイン CSS に CSS を追加して実装します。
このデザイン CSS を編集するというのがちょっと嫌で、外部に CSS ファイルを持つようにしています。
外部 CSS ファイルを Google ドライブで持つ方法を紹介します。
◆外部CSSファイルを使う
外部 CSS ファイルを使うというのは、カスタマイズする CSS をファイルに用意して、そのファイルをブログの表示の時に読み込ませることです。
はてなブログに外部 CSS ファイルを保存する仕組みがないので、外部のオンラインストレージにファイルを保存します。
別の言い方をすると、はてなブログの編集画面のカスタマイズ CSS に追加していた内容をファイルにして持ち、オンラインストレージに保存して、ブログに読み込まれるように設定します。
◇設定場所 - head内タグ
作成した CSS ファイルをブログに読み込ませるには設定が必要です。
はてなブログの編集画面の詳細設定にある「
【操作】 購読リスト ダッシュボードhttps://blog.hatena.ne.jp ⇒ 設定 ⇒ 詳細設定 ⇒ head内タグ ⇒ 要素にメタデータを追加 に追加
設定後、画面の一番下の「変更する」をクリックします
▽設定する内容の例
<link rel="stylesheet" type="text/css" href="https://temp.com/temp.css">
▽操作画面
△この例では上にCSSファイルの指定を、下にGoogleアドセンスの指定を設定しています。
◇外部CSSファイルのメリット
メリットについてはよくまとめられた記事がありましたので引用します。
テーマCSSとの干渉を避けることが可能
外部CSSファイルは、はてなブログのテーマよりも後から効くことになります。CSSファイルの読み込みの順番が外部ファイルの方が後だからです。小さくて見にくい「デザインCSS」の窓ではなく使い慣れたテキストエディタが使用可能
デザインCSSの窓はとても小さく、新たにCSSを張り付ける際に苦労します。文字も小さく本当にすべてコピペできたのか不安になることもあります。
外部CSSファイルを使えば、普段使いのテキストエディタで見やすく、編集し上書きするのも簡単です。ファイルを更新するだけですぐにCSSが適用される
いちいち「設定を変更」ボタンを押したりする必要はありません。スピーディなCSS修正・カスタマイズが可能になります。
はるなぴログ
◇外部CSSファイルのデメリット
次の点が気になる方は使わない方が良いと思います。
ちなみにこの記事も外部 CSS ファイルを使っています。
私自身は許容範囲だと思っています。
表示が2段階に切り替わるように見える
はてな以外のサーバーからファイルを読むのでどうしてもタイムラグが見えてしまいます。
※私の場合、画像のサイズ変更など目に見えて変化する CSS を入れているのでこうなります。そうでない場合は気にならないと思います。ブログを表示する時に多少、遅くなることもある
オンラインストレージの応答時間によっては気になることもあります
表示速度については、表示が切り替わるところは気になりますが、切り替わった後に はてなスターが表示されたり、広告が表示されたりするので、全体の表示速度に対して影響は少ない気がします。
◆外部 CSS ファイルを Google ドライブに置く
外部 CSS ファイルを保存するオンラインストレージには Google ドライブを選択します。
ブログをやられている方は、きっと大体の方が Google アナリティクスもやられているのではないかと思います。
そうでなくてもほとんどの方が Google のアカウントをお持ちではないでしょうか。
Google のアカウントをお持ちであれば、Google ドライブを使えます。
Google ドライブは無料で 15GB まで利用できます。
ただし、この容量は、Google ドライブ、Gmail、Google フォトで共有しています。
使用容量は Google ドライブの画面の左下に常に出ているので適宜確認できます。
もし、容量が足りなくなっても既に保存したファイルはそのまま使えます。
◇Google ドライブへファイルをアップロードする
Google ドライブに外部 CSS ファイルを置く方法を説明します。
Google ドライブに CSS ファイルをアップロードし、共有し、アドレスを取得します。
アドレスを取得するのは最初だけで、後に CSS を変更する時はアップロードするだけです。
▷手順
- CSS ファイルを用意する
拡張子は「css」、文字コードは「utf-8」 - Google ドライブサイトを開く
- ファイルをドラッグ・アンド・ドロップする
- アップロードしたファイルをクリックして選択する
- リンクを取得アイコン()をクリックする
- 制限の方法を「リンクを知っている全員」にする
- 「リンクをコピー」をクリックする
▽画面操作
◇コピーしたリンク先の使い方
Google ドライブから取得したリンクはそのままだと Google ドライブのビューアで表示するためのリンクになっています。
ブログの外部 CSS ファイルとして使用するにはリンクをファイルそのもののリンクに変える必要があります。
元々のリンクから /view?usp=sharing を削除して、file/d/ を uc?id= に変えます。
▷リンクの変換例
▽ファイル共有にして取得したURL
🆖 https://drive.google.com/file/d/ファイルのID/view?usp=sharing
↓ 手修正
🆗 https://drive.google.com/uc?id=ファイルのID
これを先ほどの「
要素にメタデータを追加」に設定します◆サブブログのすすめ
はてなブログでは、無料版で3個、PRO版で10個のブログを持つことができます。
また、ブログの公開範囲を「自分のみ」にすることで非公開になり、テスト用ブログとして使えます。
なので、作成可能なブログ数に残りがあるのであれば、テスト用のブログを用意すると CSS のカスタマイズも安心して行えます。
もちろん、テスト用のブログで使う外部 CSS ファイルと公開しているブログで使う外部 CSS ファイルは別にする必要があります。
手間はそれだけです。
▷【新しいブログの作成方法】
- ダッシュボード ⇒ マイブログ ⇒ 「新しいブログの作成」をクリック
- URL、公開範囲を入力して、「ブログを作成」ボタンをクリック
公開しているブログとテスト用ブログのカスタマイズ CSS は、本来、一致するものです。
テストがうまくいって公開用に反映させたら中身は同じはずです。
でも、長く運用しているとテストはできたけど、公開用に反映するのに躊躇してしまうものができてきます。
だんだん差が多くなってくるのが悩みの種です。
ちなみに私のテスト用ブログは公開用のブログをすべてコピーしています。
自分で自分の記事を読むときはテスト用のブログで読みます。
こうしておくと Google アナリティクスの PV のカウントに自分のアクセスを最小限にできるし、Google アドセンスから不正なアクセスと誤認識されることもほぼないと思います。
◆さいごに
外部 CSS ファイルを使えば、テーマを変更してもカスタマイズした CSS はそのまま有効です。
もちろん元のテーマに依存したカスタマイズは効きません。
公式テーマであれば、編集画面でテーマのプレビューが見られます。
その時、カスタマイズ CSS の内容が反映されたままです。
テーマを切り替えていろいろなテーマのプレビューを見るのも楽しいですよ。