この記事は、はてなブログに外部CSSを導入する方法を「初心者が初心者に向けて」画像付きでご説明します。
外部CSSを導入してみたいけど、いまいち分からなくて放置してしまっている方！簡単ですのでぜひ一緒にやってみましょう。
レスポンシブ対応テーマとWindowsを使っている前提でご説明します。Macでもほとんどやり方は変わらないはず。念のため、バックアップは取ってくださいね。
はてなブログに外部CSSを導入する方法を優しくご説明します
Dropboxの説明とインストール
外部にCSSを置く場所はDropboxを利用しました。
ファイルをネット上にアップロードすると、別のPCや外出先など、どこでもアップロードしたファイルを開ける（共有できる）いわゆるクラウドです。
もっと簡単に言うと、SDカードやUSBを使って外に持ち出さなくても、ネット環境があればどこでもファイルを開くことができるサービスです。
このDropboxにアップしたCSSをはてなブログで読み込ませます。
こうすることで、はてなブログ内にCSSを記述しなくても、設定したデザインがブログに反映されます。
>>Dropbox
まずは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ファイルを読み込ませることができます。
テストブログで確認してみよう
目次や見出し、蛍光マーカーを使ってみて反映されるか確認します。
テストブログなのでデザインCSSが空っぽです。しかし、デザインが反映されているので、DropboxからしっかりCSSを読み込んでいると確認できました。
外部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が便利です。
さいごに
はてなブログに外部CSSを導入したいとずっと考えていましたが、初心者にはどうしたら良いのか意味がわからなくて放置していました。
初心者の僕が導入してみてよく分からなかったた点、困ったところを詳しく解説させていただきました。
意味が分かれば意外と簡単なので、是非チャレンジしてくださいね。
