redoブログ

redoブログ

現役スピーカー設計者によるお役立ち情報発信ブログ

「はてなブログ」で長文CSSをDropboxを用いて編集を簡単にする方法を紹介

f:id:redo5151:20200105175747p:plain

はてなブログ」である程度の期間ブログ運営していると徐々にカスタマイズが増え、CSSが長文化してしまい使いにくいことは無いでしょうか。

 

特に「はてなブログ」では色分けがされておらず行数などもわからず編集がしにくいんですよね。

 

そんな時にオススメしたいのは「DropboxやOnedriveなどの外部共有ファイルを使って、共有フォルダ上でCSSを編集する方法」になります。

CSSとは

CSSとは簡単にいうとプログラミング言語の一種でHTMLと組み合わせて使うことで、ブログデザインを編集することができます。例えば、強調したい部分にマーカーを引いたり、枠で囲ったり、色を付けたりとレイアウトを個別に設定する際に使います。

Dropboxとは

f:id:redo5151:20200105174942p:plain

Dropboxは仮想(ネットワーク上)のデータストレージサービスです。これを使うことでネットワーク上に仮想の容量フォルダを置くことができ、写真や動画、音楽、テキストファイルなどを他の人と共有することが出来ます。

 

私も登山や旅行に行った際にはDropboxなどを使って友人と写真の共有を行っています。

 

最近ではLineに送ってる人も多いのですが、Lineで送ると勝手にデータが圧縮されてしまうといったデメリットもあります。

 

Dropboxの他にもストレージサービスとしてはマイクロソフト社が提供している「Onedrive」などもあります。

 

CSSDropboxとリンクする方法

CSSを外部リンクした場合のCSSのイメージ

現在私のCSSには3行しか記載していません。実際は1行目はコメントアウトなので、必要なのは2行です。はてなブログの「デザインテーマ」と修正を加えた自分の「CSS」のインポートのみになっています。

 

Dropboxなどの外部リンクを使う一番のメリットはCSSの色付けが可能になり見やすくなり、編集もしやすくなることです。

DropBoxをインストールしましょう

Dropboxのサイトでインストールしましょう。登録は無料で、容量は3G以内まで自由にデータ保存ができます。

CSSファイルを作成しましょう

「メモ帳」を開きます。

メモ帳が見つからなければウィンドウズ画面左下の検索で「メモ帳」と入力して下さい。新規保存の際にファイルの種類は「すべてのファイル」、文字コードは「UTF-8」を選択してください。

最初の一行に「@charset "utf-8";」を記入し、元のCSSファイルを全文コピー

メモ帳を開いてまず最初に「@charset "utf-8";」を追記しましょう。さらにはてなブログ上で保存してあるデザインCSSのコードを全てメモ帳に貼り付けましょう。

メモ帳を保存する際に「ファイル名.css」に変更して保存します。

私は「base.css」という名前で保存しました。極力ファイル名は英数字にしましょう。日本語の場合エラーとなる場合がある為です。

共有リンクを作成する

ファイル(今回はbase.css)の前にカーソルを合わせると共有というボタンがふわっと現れるので、選択します。

 

すると上のような画面が表示されます。右下の「リンクを作成」を選択してください。

f:id:redo5151:20200105171803p:plain

画面右下の「リンクをコピー」を選択します。

 

f:id:redo5151:20200105171834j:plain

すると上のように「リンクURL」が出てきます。こちらをコピーします。

 

CSSファイルのリンクURLを修正

先ほどコピーしたURLは下記のようになっています。

https://www.dropbox.com/s/xxxxxxxx/base.css?dl=0

個別IDはxxxxに変更しました。ただし、このURLだと直でリンクを読み込むことができません。そこで、下記のように「」内を編集しましょう。

「www.dropbox」→「dl.dropboxusercontent」

?dl=0を削除します。

 

https://dl.dropboxusercontent.com/s/xxxxxxxx/base.css

 「head」に要素を追加しましょう

f:id:redo5151:20200105173200p:plain

はてなブログの管理画面→設定→詳細設定→headに要素を追加に先ほど修正した直リンクを貼り付けましょう。

  <link href="修正したURL" rel="stylesheet">

 

 「CSS」にimportを記載しましょう

headにコードを追加すれば基本的にはOKなのですが、たまにレスポンシブルデザインにしているとうまく反映されない場合があります。その場合はデザインCSSに下記コードを追加することで回避できます。

 

デフォルトデザインをインポートするコード

@import url("https://blog.hatena.ne.jp/-/theme/xxxxxxxx.css");

 

Dropboxのリンクをインポートするコード
@import url("https://dl.dropboxusercontent.com/s/xxxxxxx/base.css");

 

青字の部分は人によって異なるので、それぞれのリンクコードを貼り付けましょう。

 

以上で設定は完了です。とくにテーマを作るときやレイアウト設定するときには「はてなブログ」上ではなく、cssファイルとして別で編集できる方が間違いも減り、効率が断然違います。

 

CSSが長文化して、編集がしにくいとお困りの方は「Dropboxを活用した外部CSS」による方法で解決しましょう。

 

作業時間も約15分程度で簡単にできますので、おすすめの方法です。現在、はてなブログでのCSSの編集で困っている方への手助けに少しでもなれば幸いです。

 

 

CSSでサイトデザインを整えたら収益化も検討してみましょう

redo5151.hatenablog.com

「ブログカスタマイズ方法」も紹介しています。

redo5151.hatenablog.com

redo5151.hatenablog.com

redo5151.hatenablog.com

redo5151.hatenablog.com

まとめ