SORE, OINTOYADE.

You love money? I love money.

はてなブログのデザインを整える前準備。Dropboxを使ってCSS編集を楽にする方法

f:id:kenixi:20170315020135p:plain

ブログのデザインは、コンテンツ以上に重要だ。

見た目が酷いブログに長時間滞在したいとは思わないだろう。少なくとも僕は、見た目が悪いと読まずに離脱することが多々ある。せっかくいい記事を書いたとしても、見た目から来る「読みにくさ」があると離脱されてしまう。これは非常にもったいない。

僕はid:c-miya氏作のZENO-TEALを愛用している。このテーマは某有料Wordpressテーマに非常によく似ているインスパイアされたテーマで非常に見た目がいいのだが、当然ながら「ここはもっとこうしたい!」という欲望が湧き出てくる。

なので、これからちゃんとデザインを自分好みにカスタマイズしていくのだが、皆さんご存知のように、はてなブログのCSS編集は非常に使いづらい。特に僕はエンジニアなので、手に馴染んだエディタで編集したい欲がある。なので、今日はその方法をお伝えする。

快適にCSS編集をするためのSTEP

非エンジニアの方からすれば、「え?はてなブログのCSS編集以外でも編集できるの?」と驚かれるかもしれない。それが出来るのだ。今まではてなブログのCSS編集で頑張って来た方、お疲れ様。今後はもっと楽にCSS編集しよう。

ITに疎い方でも、名前くらいは聞いたことがあるかもしれない。今回紹介する方法で使用するのは、Dropbox。Dropboxはクラウド上でファイルを共有することができるツールだ。そこまで難しいシロモノではない。ただ、本エントリではDropbox自体の詳細は割愛するので、使ったことがないという方はググるなりして調べてほしい。

ここで紹介する方法では無料版の機能で十分だが、もっとゴリゴリにDropboxを使いたい!という方は、Dropbox Plusを使うのがいいだろう。有料版であれば容量を気にすることなく様々なファイルをクラウド上に保存できるのでオススメだ。

話が少しズレてしまった。はてなブログで快適なCSS編集をするには、以下の手順を踏む。

  • DropboxをPCにインストールする
  • CSSファイルをDropbox上に作成する
  • 共有リンクを取得する
  • 共有リンクを一部書き換える
  • 確認用のブログを作成する
  • 確認用ブログの設定内、headに要素を追加に読み込み設定をする
  • 完成したら、はてなブログ側のCSSに貼り付ける

もちろんDropbox以外でも「WEB上から見える場所」にさえ置いてあれば、どこでもいい。ただ、一番手軽なのがDropbox。エンジニアであればGithubPagesやGistを使うのもいいかもしれないが、ここでは言及しない。

Dropboxのファイルを読み込ませる方法の詳細

奇遇にも本ブログで使用しているテーマの作者である、id:c-miya氏が既に詳細を公開してくれていたので、こちらを紹介させていただく。

www.foxism.jp

つまり、https://www.dropbox.comhttps://dl.dropboxusercontent.com に変更し、?dl=0を取り払います。

はてなブログのcssをDropboxに保存して編集しやすくしよう - FOXISM

続いて、はてなブログの設定→詳細設定からheadに要素を追加に以下のコードを追加します。 <link href="取得・変更したcssファイルのURL" rel="stylesheet">

はてなブログのcssをDropboxに保存して編集しやすくしよう - FOXISM

この通りにやれば問題ない(僕は問題なかった)が、どうしてもわからない場合は、気軽にTweetしていただければお答えする。

本番のブログで使うのはNG!

なぜわざわざテスト用のブログを作って、最終的にはてなブログのCSSにコピペする必要があるのかについてお伝えしておく。

理由は2つ。

  • 未確認のものを本番のブログに適用すべきではない
  • Dropboxからの読み込みだと(若干)表示速度が遅くなる

まず1つ目の「未確認のものを本番のブログに適用すべきではない」だが、まぁ普通に考えれば未確認のものを人様の目に見えるところに置くのはダメだよねってことはわかると思う。なので、当たり前のようにこれはやってほしい。本番を未確認でガンガン書き換えるなんて、狂気の沙汰としか言いようがない。

2つ目の「Dropboxからの読み込みだと(若干)表示速度が遅くなる」は、最初のうちはそこまでネガティブに考える必要はないかもしれない。だが、はてなブログ自体、表示は速くない。むしろ遅い。なので、少しでもネガティブ要素は取り除いておく方がいいだろう。特に有料版のDropbox Plusでないと詳細なアクセス制限が使えないので、下手な操作でDropboxの中身が全部漏れてしまった…なんてことにもなりかねないので、特に初心者がDropboxに置いたCSSを本番のブログに適用することはオススメしない。

おわりに

Dropboxに置けば、CSS編集が劇的にやりやすくなる。特にデザインに拘っている人にとってはその生産性は雲泥の差であろう。僕も今日この設定をしたので、明日以降どんどんCSSを書いていくつもりだ。エンジニアの方であれば、PostCSSなんかを使って、SCSSをビルドしたファイルを読むようにすれば、より生産性があがることはいうまでもないだろう。

そいぎんた!