読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

CSSを外部ファイルにする方法-はてなブログ編

はてな
スポンサーリンク

今日は実験ではてなブログCSSCascading Style Sheets、カスケーディング・スタイル・シート)を外部ファイルにして読み込んでみました。

はてなブログCSSって設定しにくい

以前から感じていたのですが、はてなブログCSSって設定しにくいですよね。

CSSを書いている途中で「ちょっと調べものを」と他の画面に行ったりすると編集用のボックスが消えてたり。

またCSS編集するの押してから書いて、他の画面に行くとボックス消える・・・これの繰り返し。

しかも、テーマ変えるとCSS無くなったり(最近テーマ変更してないので今もそうなるのかは不明)するし、簡単にはテーマ変更できないような気がしてました。

CSSは基本外部ファイルにできるはず

そこで今回はCSSを外部ファイルにして、少しでもテーマの変更やCSSの変更の入力のしにくさを解消するために、別ファイルにして、それを読み込む方法を試してみました。

はてなブログにはファイルアップロードない・・・

しかし残念なことに「はてなブログ」にはファイルをアップロードできる機能がない・・・。なんで?

仕方がないのでここは「はてなPro」ということを生かしてはてなダイアリーの方にアップロードして管理します。
はてなダイアリーも「Plus」でないとファイルアップロードできません。「はてなPro」の方は「はてなダイアリーPlus」と同等の機能が使えるのでそのまま行けます。)

手順1

いままで設定していたCSSの部分をコピーしてファイルに保存します。
わたしは今回「hatena_main.css」と言う名前にしてPC上に保存します。
内容はCSSそのままをコピーすればいいです。
ただし、現在利用中のテーマ用CSSの読み込み

@import url("http://hatenablog.com/theme/8454420450080713961.css");

は消しちゃダメです。
(実際に実験はしてませんが、これは残しておきましょう。)

手順2

はてなダイアリーの「管理」→「ファイル」を選択して保存したファイルをアップロードします。

アップロードが完了したらファイル名の横に「確認」というリンクが出ていると思うのでそこをクリックします。

転送したCSSの内容が表示されるはずです。
そのページの一番上に「CSS、画像など直接ファイル指定する場合のアドレスを表示」ってのが出てるはずなのでそれをクリックします。
クリックすると「http://d.hatena.ne.jp/[ユーザーID]/files/hatena_main.css?d=y」のようにURLが表示されるのでそれをコピーします。
([ユーザーID]はご自分のIDになっていると思います。)

手順3

はてなブログの「デザイン」→「ヘッダ」の先頭行にアップロードしたCSSの読み込みを入れます。

<link type="text/css" rel="stylesheet" href="http://d.hatena.ne.jp/[ユーザーID]/files/hatena_main.css?d=y">

これを保存するとこれまで「CSS」で設定していたのと同じようにCSSが有効になっていると思います。
(見た目が今までと変わらなければOKです。)

注意事項

必ず現在の設定をローカル環境にファイルなどを作成してバックアップしてから行ってください。
設定がおかしくなっても戻せなくなります。

万が一ここに書かれてある方法で何らかの障害が発生しても責任は負えませんのでご了承ください。