この記事は、はてなブログに外部CSSを導入する方法を「初心者が初心者に向けて」画像付きでご説明します。
外部CSSを導入してみたいけど、いまいち分からなくて放置してしまっている方！簡単ですのでぜひ一緒にやってみましょう。
レスポンシブ対応テーマでWindows前提のご説明します。Macでもほとんどやり方は変わらないはず。念の為、バックアップは取ってくださいね！
Contents
はてなブログに外部CSSを導入する方法を優しくご説明します
Dropboxの説明とインストール
外部にCSSを置く場所はDropboxを利用しました。
ファイルをネット上にアップロードすることで外出先など、どこでもアップロードしたファイルを開くことが出来る（共有）いわゆるクラウドです。
もっと簡単に言うと、SDカードやUSBを使って外に持ち出さなくてもネット環境があればどこでもファイルを開くことができるサービスです。
このDropboxにアップしたcssをはてなブログで読み込ませます。
こうすることで、はてなブログ内にCSSを記述しなくても、設定したデザインがブログに反映します。
まずはDropboxをPCにインストールします。基本利用は無料ですのでご安心を。
Googleアカウントを使ってもいいですし、新規登録でメールアドレスを入力してもOKです。インストールする方法はDropboxの指示に従うだけなので省略します。
まずは練習しましょう！テストブログの作成
失敗するとブログデザインが大きく崩れてしまいます。
テストブログを作成し、練習してからの方が無難です。「テストブログの作成方法は知っている」または「いきなり本番で大丈夫！」って方は次項目へ進んでください。
ダッシュボードの「+新しいブログを作成」をクリック。
次の画面で任意のブログURLを入力後、赤枠の「自分のみ」を選択することで非公開になり、テスト用ブログとして使えます。
はてなproは最大10個まで、無料版は最大3つまでサブブログを作成できます。
CSSファイルを作成する
DropboxにアップするCSSファイルを作成します。
テキストエディタを使った方が編集しやすいですが、とりあえずWindows標準搭載のメモ帳を利用しました。
デザイン⇒カスタマイズ（工具マーク）⇒デザインCSSを開きます。
赤枠のところはブログ全体のデザインなので、初心者は触らない方が良いです。今までカスタマイズしていた青枠以下のコードを、すべてをコピーしてメモ帳に貼り付けます。
メモ帳に貼り付けるとこうなります。
は？
ご安心ください。後で簡単に修正できますので今はこのままで！
名前を付けて保存をするのですが、保存先を最初にインストールしたDropboxにします。
ファイル名はご自身でわかりやすいファイル名にして拡張子は「.css」にします。「.txt」ですと、ただの文章なのでプログラムとして読み込みませんでした。
そして文字コードを「UTF-8」にした方が無難。「UTF-8」はスタンダードな文字コードで、どんな環境でも文字化けしにくいみたいです。
設定ができたら保存します。
保存ができたらDropboxで確認します
ブラウザでDropboxを開くと、先ほど保存したCSSファイルがアップされているはずです。
これをクリックするとメモ帳にコピペしたCSSが確認できます。
メモ帳では改行が削除されていましたが、Dropboxで確認すると、はてなブログのデザインCSSのままでした。
これをコピーしてメモ帳に再度貼り付け直します。
改行ありでメモ帳に記載できましたね。これで見やすくなりました。ファイル⇒上書き保存をします。
次は、はてなブログからCSSファイルを読み込ませる方法です。
はてなブログからCSSファイルを読み込ませる方法
まずはアップしたCSSファイルが置いてある場所のURLを取得します。
共有をクリックします。
リンクをコピーをクリックすると、CSSファイルのURLが自動的にクリップボードにコピーされます。
次はこのURLをはてなブログに読み込ませます。
テスト用ブログのダッシュボード⇒設定⇒詳細設定⇒headに要素を追加に
<link type="text/css" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/あなたがコピーしたURLの後半部分>を貼り付けます。
そして画像の下URLにある赤枠の部分をURL後半に貼り付けます。（上のURLが完成形）
必ずdl=0は削除してくださいね。
これで、はてなブログからDropboxにアップしたCSSファイルを読み込ませることができます。
URLを参考にさせていただきました！ありがとうございます！
テストブログで確認してみよう
目次や見出し、蛍光マーカーを使ってみて反映されるか確認します。
テストブログなのでデザインCSSが空っぽです。しかしデザインが反映されているので、DropboxからしっかりCSSを読み込んでいることが確認できました。
（画像内のcontents(目次)がおかしいのは無視してください）
外部CSS導入本番です
ここまでの流れが確認できたら、いよいよ外部CSS導入本番です。
先ほどのテストブログのheadに要素を追加に挿入したURLをコピーしてから削除して保存します。そして本ブログの「headに要素を追加に」そのままペーストします。
<link type="text/css" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/あなたがコピーしたURLの後半部分">↑これです。読み込み順を考えると一番上に挿入するのが良いみたいです。
デザイン⇒カスタマイズ⇒デザインCSSの中身をデザインのメインコード以外を全部消します。（消す前に念の為、バックアップを取っておきましょう）
※テストブログで練習をしなかった場合はメモ帳などにコピペする手順を実施します。
テーマのコード以外を削除した表示の確認をします
デザインCSSを全部消したのにグローバルメニューが正常に表示されていたり、ヘッダ画像がキレイに収まっていたら、Dropboxから読み込めた証拠なので外部CSS導入は成功です！
ブログ全体も確認してみましょう。
CSSの編集方法
ちなみにCSSの編集方法ですが、Dropbox内のメモ帳の中身を編集して上書き保存すれば勝手にDropbox内のCSSファイルが反映されます。
僕の場合ですと「attack」を開くとメモ帳が開き、その中身を編集します。※やっぱりメモ帳よりテキストエディタの方が便利なのであとで導入します。
デメリットとしてはカスタマイズ時にプレビューでデザインの反映が確認できないこと。つまり、表示が崩れてしまっているか分からないまま公開をします。
ですのでブログ開始直後よりも、ある程度カスタマイズが終わってからの方が良いかもしれませんね。
さいごに
はてなブログに外部CSSを導入したいと思っていましたが、初心者にはどうしたらいいのか意味がわからなくて放置していました。
初心者の僕が導入してみてよく分からなかったた点、困ったところをもっと詳しく解説させていただきました。意味が分かれば意外と簡単なので是非チャレンジしてくださいね。
