はてなブログのCSSをDropboxに置けなくなったのでGitHub Pagesを使うようにした

2017/03/22追記

「Dropboxに置けなくなった」というのは私の誤認でした。ごめんなさい。

というのも、id:c-miyaさんからブコメを頂きました。

はてなブログのCSSをDropboxに置けなくなったのでGitHub Pagesを使うようにした - なか日記

ちょっとURL変えればDropboxで大丈夫ですよ。<a href="https://dl.dropboxusercontent.com/s/8h9zwdwle12phz6/nakaji.hatenablog.com.css" target="_blank" rel="noopener nofollow">https://dl.dropboxusercontent.com/s/8h9zwdwle12phz6/nakaji.hatenablog.com.css</a>

2017/03/21 15:18

な、なんだってー

URLの取得方法はもちろん、Dropbox上のファイルを参照することのデメリットなど、id:c-miyaさんがブログに詳しく書かれていますので確認してみて下さい。

www.foxism.jp

以下、本文

はてなブログのCSS編集が使いづらいので、CSSファイル自体をDropboxに置いてそこを参照させれば色々と嬉しいことがあるよ。ということで、下の記事を書いたのが去年の1月でした。

気がつくと

もちろん、自分もそれで運用していたのですが、ふと気がつくとCSSが摘要されなくなってました。

あれ？タイトルが白くなってる…

試しに、ヘッダに指定している下記リンク先へアクセスしてみると…

• https://dl.dropboxusercontent.com/u/2771162/HatenaBlog/nakaji.hatenablog.com.css

アクセスできんなっとるやないか＼(^o^)／

原因

多分これだと思います。

2017 年 3 月 15 日より、Dropbox アカウントの Public フォルダは通常のフォルダと同じになります。デフォルトでは、このフォルダは非公開になります。今回の移行操作は自動的に行われます。

Public フォルダ – Dropbox ヘルプ

あー、そういえば、案内のメールが来てたかもしれない。

共有し直せばいいじゃない

じゃぁ、共有し直せばいいじゃないかということになりますが、共有した結果が以前と変わっちゃうのでダメでした。

https://www.dropbox.com/s/8h9zwdwle12phz6/nakaji.hatenablog.com.css?dl=0

の様な共有リンクへアクセスすると、下のようにDropboxのサイトにくるまれて表示されます。

以前はcssファイルそのものがべたっと取得できたんですけどね。

このおかげでExcel形式のファイルなどはダウンロードしなくても、ブラウザ上で何となくプレビューが見れたりするんですけど、今回はそれが仇となっています。

Dropboxさようなら

というわけで、Dropboxに置くのをやめて他の方法で共有することにしました。

OneDriveはどうよ

Dropboxと同じ理由でダメでした。

GitHubはどうよ

raw形式での表示を行うと、ぱっと見はすっごいいい感じなのですが、よくよくソースを見るとhtmlのタグでくるまれてました。残念

GitHub Pagesならどうよ

CSSファイルの内容そのものを返してくれて、それなりにお手軽な方法はと5分ほど考えた結果、GitHub Pagesを使ってみることにしました。

結果としてはこれでCSSファイルを外部におくことができるようになりました。

ã‚„ã‚Šæ–¹

上記のGitHub Pagesサイトに詳しいやり方は載っていますが、簡単にやり方を紹介しておきます。

中に書いてる具体的なパスやファイル名は適宜読み替えてもらえばと思います。

1. [ユーザ名].github.io のリポジトリを作成する
   GitHubのアカウントは持ってる前提で、ユーザ名に応じたリポジトリを作成します。
   私の場合だと、 nakaji.github.io ですね。
2. cloneする
   gitコマンドなり、SourceTree等のツールなりでローカルにcloneします。
3. cssファイルをaddしてcommitする
   私は css 配下に blog.nakajix.jp.css というファイルを置いてみました。
4. pushする
5. 確認する
   https://nakaji.github.io/css/blog.nakajix.jp.css にアクセスしてCSSが取得できるか確認します。
6. はてなブログに設定する
   5の確認ができれば、はてなブログの設定でCSSへのリンクを設定します。
   「設定」メニューから「詳細設定」タブにある「headに要素を追加」に下のような記述を追加します

<link rel='stylesheet' href='https://nakaji.github.io/css/blog.nakajix.jp.css' type='text/css' media='all' /> 

できた！でもね…

これでブログのCSSが反映されるようになったぜ！ と鼻息を荒くしていたのですが、よくよく考えると、 Dropboxの「ローカルで修正すると自動的にはてなブログに反映される」から、 「編集したCSSファイルをGitHubにpushすれば自動的にはてなブログに反映される」に変わってます。

「pushする」という一手間が増えただけですけど、これってちょこちょこっとCSS修正して確認したいだけの時にはかなり面倒くさいですね。

なら、はてなブログのCSS編集でも変わらないのでは・・・・

おしまい。

2017/03/21追記

ブコメでこんな指摘を頂きました。

はてなブログのCSSをDropboxに置けなくなったのでGitHub Pagesを使うようにした - なか日記

“raw形式での表示を行うと、ぱっと見はすっごいいい感じなのですが、よくよくソースを見るとhtmlのタグでくるまれてました” 開発者ツールでの表示とview-sourceの表示は違うのでこれは誤り

2017/03/18 14:11

確かにご指摘の通りでした。適当なこと書いてごめんなさい。

少し調べた内容等含めて、別記事にまとめました。

blog.nakajix.jp