プログラムでおかえしできるかな

定年を過ぎて何かの役に立てないかなと始めた元SEのブログです

最終更新日

はてなブログのカスタマイズは外部CSSファイルで

ブログ CSS シニア
このエントリーをはてなブックマークに追加

はてなブログをカスタマイズしています。
CSS は、外部 CSS ファイルを使っています。
簡単にできて、メンテナンスも楽な外部 CSS ファイルを使ってみませんか。

2024/01/13現在、Google Drive からのデータの読み取りができなくなっています

Google Bard （生成 AI からなる AI チャット）で問い合わせてみました。
ブラウザを介さずにファイルをダウンロードする方法は、セキュリティ上の脆弱性があったため、廃止されたそうです。 具体的には Google Drive API の一部が廃止されたそうです。
Google ドライブにアクセスするための URL の ?export=download&id=<file_id>（?id=<file_id>も同じ？）というパラメータは今後使用できなくなるそうです。
今後と言っていますが、既に使えなくなっています。
理由が脆弱性の対応なので再開する見通しは薄いと思います。

生成 AI の回答で裏は取っていませんが、状況から見てあっている気がします。
真偽の判断はご自身でしてください

外部 CSS ファイルを Google ドライブに置くのは、今後使えないと思います。

対策としてGitHub を使う方法⤵を記事に追加しました


目次

ブログをやっていると他のブログと差別化したり、あるいは自分なりの表現方法を取り入れたりするために、カスタマイズをする方も多いと思います。

私もテーマを使用した上にカスタマイズしています。

カスタマイズは新たに CSS を追加することになります。
一般的には、はてなブログのデザイン CSS に CSS を追加して実装します。

このデザイン CSS を編集するというのがちょっと嫌で、外部に CSS ファイルを持つようにしています。

外部 CSS ファイルを Google ドライブで持つ方法を紹介します。

◆外部CSSファイルを使う（はてなブログ設定）

外部 CSS ファイルを使うというのは、カスタマイズする CSS をファイルに用意して、そのファイルをブログの表示の時に読み込ませることです。

はてなブログに外部 CSS ファイルを保存する仕組みがないので、外部のオンラインストレージにファイルを保存します。

別の言い方をすると、はてなブログの編集画面のカスタマイズ CSS に追加していた内容をファイルにして持ち、オンラインストレージに保存して、ブログに読み込まれるように設定します。

◇設定場所 - head内タグ

作成した CSS ファイルをブログに読み込ませるには設定が必要です。
はてなブログの編集画面の詳細設定にある「要素にメタデータを追加」に外部 CSS ファイルを読み込ませるコードを設定します。

【操作】
 ダッシュボードhttps://blog.hatena.ne.jp ⇒ 設定 ⇒ 詳細設定 ⇒ head内タグ ⇒ 「<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 ファイルを GigHub に置く

2024年１月、急に Google ドライブから CSS ファイルを読み取れなくなりました。
そこで、急遽、GitHub から CSS ファイルを読み込めないか調査し、対応しました。
以下に対応方法を説明します。
説明は、既に GitHub を使用している方向けの内容です。
GitHub からファイルを読めるようにするには、GitHub Pages の機能を使用します。
以前より簡単に設定できるようになっているようです。

【手順】

  1. 任意のリポジトリを用意する
    新規でも、既存でもよいですが、新規の方が混乱しないでしょう
  2. リポジトリをローカルにクローン
  3. ブランチを作成
    ブランチ名は任意（以前は gh-pages に指定されていたようです）
  4. 作成したブランチに切り替え
  5. CSS ファイルを追加
  6. コミット
  7. プッシュ
  8. Github でリポジトリの設定
    1. リポジトリで Settings をクリック
    2. 左側の選択肢から Pages をクリック
    3. 「Build and deployment」の「Branch」で作成したブランチを選択
    4. Save をクリック

【URL】

 https://アカウント名.github.io/リポジトリ名/ファイル名
 URL は、「Your site is live at」に表示されています。

▽操作画面

追加：2024-01-16

◆外部 CSS ファイルを Google ドライブに置く（2024年１月以降使えません）

2024年１月以降、Google Drive に CSS ファイルを置く方法は使用できなくなっています。

セキュリティ上の脆弱性が原因で使用できなくなったようです。
理由が脆弱性の対応なので再開する見通しは薄いと思います。

外部 CSS ファイルを保存するオンラインストレージには Google ドライブを選択します。

ブログをやられている方は、きっと大体の方が Google アナリティクスもやられているのではないかと思います。
そうでなくてもほとんどの方が Google のアカウントをお持ちではないでしょうか。
Google のアカウントをお持ちであれば、Google ドライブを使えます。

Google ドライブは無料で 15GB まで利用できます。
ただし、この容量は、Google ドライブ、Gmail、Google フォトで共有しています。
使用容量は Google ドライブの画面の左下に常に出ているので適宜確認できます。
もし、容量が足りなくなっても既に保存したファイルはそのまま使えます。

◇Google ドライブへファイルをアップロードする

Google ドライブに外部 CSS ファイルを置く方法を説明します。

Google ドライブに CSS ファイルをアップロードし、共有し、アドレスを取得します。

アドレスを取得するのは最初だけで、後に CSS を変更する時はアップロードするだけです。

▷手順

  1. CSS ファイルを用意する
    拡張子は「css」、文字コードは「utf-8」
  2. Google ドライブサイトを開く
  3. ファイルをドラッグ・アンド・ドロップする
  4. アップロードしたファイルをクリックして選択する
  5. … ⇒ 共有 ⇒ 共有　をクリックする
  6. 制限の方法を「リンクを知っている全員」にする
  7. 「リンクをコピー」をクリックする

▽画面操作

◇コピーしたリンク先の使い方

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

これを先ほどの「<head>要素にメタデータを追加」に設定します

◆サブブログのすすめ

はてなブログでは、無料版で3個、PRO版で10個のブログを持つことができます。
また、ブログの公開範囲を「自分のみ」にすることで非公開になり、テスト用ブログとして使えます。

なので、作成可能なブログ数に残りがあるのであれば、テスト用のブログを用意すると CSS のカスタマイズも安心して行えます。

もちろん、テスト用のブログで使う外部 CSS ファイルと公開しているブログで使う外部 CSS ファイルは別にする必要があります。
手間はそれだけです。

▷【新しいブログの作成方法】

  1. ダッシュボード ⇒ マイブログ ⇒ 「新しいブログの作成」をクリック
  2. URL、公開範囲を入力して、「ブログを作成」ボタンをクリック

公開しているブログとテスト用ブログのカスタマイズ CSS は、本来、一致するものです。
テストがうまくいって公開用に反映させたら中身は同じはずです。
でも、長く運用しているとテストはできたけど、公開用に反映するのに躊躇してしまうものができてきます。
だんだん差が多くなってくるのが悩みの種です。

ちなみに私のテスト用ブログは公開用のブログをすべてコピーしています。
自分で自分の記事を読むときはテスト用のブログで読みます。
こうしておくと Google アナリティクスの PV のカウントに自分のアクセスを最小限にできるし、Google アドセンスから不正なアクセスと誤認識されることもほぼないと思います。

◆さいごに

外部 CSS ファイルを使えば、テーマを変更してもカスタマイズした CSS はそのまま有効です。
もちろん元のテーマに依存したカスタマイズは効きません。

公式テーマであれば、編集画面でテーマのプレビューが見られます。
その時、カスタマイズ CSS の内容が反映されたままです。
テーマを切り替えていろいろなテーマのプレビューを見るのも楽しいですよ。

あわせて読みたい 📄フラグメントを利用した画像の中央寄せ(右寄せ・左寄せも)【CSS】🔗

◆参考

投稿： 、更新：