はてなブログに外部cssを導入します。初心者が初心者に向けて画像付きでご説明しますので大変わかりやすいと思います。外部cssを導入してみたいけど、いまいちわからなくて放置してしまっている方！簡単ですのでぜひ一緒にやってみましょう。
レスポンシブでWindows前提でご説明します。Macでもほとんどやり方は変わらないはず。念の為、バックアップは必ず取ってくださいね！
Contents
はてなブログに外部cssを導入する方法を優しくご説明します
Dropboxの説明とインストール
外部にcssを置く場所はDropboxを利用しました。
ファイルをネット上にアップロードすることで外出先など、どこでもアップロードしたファイルを開くことが出来る（共有）いわゆるクラウドっていうサービスです。もっと簡単に言うとSDカードやUSBを使って外に持ち出さなくてもネット環境があればどこでもファイルを開くことができるサービスです。
このDropboxにアップしたcssをはてなブログで読み込ませます。こうすることではてなブログ内に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は削除してくださいね。貼り付けれたら画像の下URLは削除してください。これではてなブログから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以外全部消します。
（消す前に念の為、バックアップを取っておきましょう）
表示の確認をします
こんな感じですね。cssを消したのにグローバルメニューが正常に表示されていたり、ヘッダ画像がキレイに収まっていたら読み込めた証拠なので外部css導入は成功です！
ブログ全体も確認してみましょう！
ちなみにcssの編集方法ですが、Dropbox内のメモ帳の中身を編集して、上書き保存すれば勝手にDropbox内のcssファイルが反映されます。僕の場合ですと『attack』を開くとメモ帳が開きますのでその中身を編集します。
※やっぱりメモ帳よりテキストエディタの方が便利なのであとで導入します。
さいごに
はてなブログに外部cssを導入したいと思っていましたが、初心者にはどうしたらいいのか意味がわからなくて放置していました。初心者の僕が導入してみてよくわからなかった点、困ったところをもっと詳しく解説させていただきました。
意味がわかれば意外と簡単なのでぜひチャレンジしてくださいね。
