redoブログ

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

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

f:id:redo5151:20200105175747p:plain

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

 

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

 

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

 

 

これからブログで収益化を考えている方へおすすめのアフィリエイトサービスを紹介しています。

redo5151.hatenablog.com

 

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の編集で困っている方への手助けに少しでもなれば幸いです。

 

大変ありがたいことに以下のはてなブログ公式さんから私の記事を紹介して頂きました。

blog.hatenablog.com

 

WEBデザインを学ぶのにおすすめなプログラミングスクール

TechAcademy(テックアカデミー)

TechAcademy

私も大学、大学院時代からFortranC言語などを学んできましたがやはり先生や教授に教えてもらうと格段に習得の速さが違うことを実感しています。

 

「Tech Academy」は厚切りジェイソンがChief Public Relations Officerになっているオンラインベースのプログラミングスクールです。

会社情報 
□企業名
キラメックス株式会社
□所在地
<本社オフィス> 〒150-0002 東京都渋谷区渋谷1-17-4 PMO渋谷8F
□事業概要
Tech Academy:プログラミング教育事業

これからの時代は「5G」が到来し、”AI(人工知能)”が制するとも言われています。ニーズが高まっている状況でプログラミングを学ぶことは、就職にも困らず良いことばかりで損はありません。

 

redo5151.hatenablog.com

 

WEBデザインはもちろんのこと以下の多くのプログラミングの学習が可能です。

 

現在提供中のコースの例
Webデザインコース 
Webマーケティングコース
はじめてのプログラミングコース
Javaコース
Pythonコース
WordPressコース
iPhoneアプリコース
・AIコース
・データサイエンスコース
・UI/UXデザインコース
・動画編集コース
・TechAcademy Pro(エンジニアへの転職を保証するコース)

 

TechAcademy(テックアカデミー)の特徴

全て現役のエンジニアが指導

基本的には質問は全てオンラインでのやり取りになりますが、回答者や個人メンターは全て現役のエンジニアになっています。スクールの卒業生をメンターとして採用しているスクールも多い中、全員が現役のプロの方というのは大きな魅力ですね。

 

質問に対しての回答のムラが少ないというのは、学習を進めていく中で大事な要素になりますので、「Tech Academy」の特徴の一つだと感じます。

オンライン完結型スクール

忙しい社会人や遠方の方にはありがたい「オンライン完結型スクール」になっています。場所や時間を問わず、パソコンとインターネット環境が揃えば、あとは自身のスケジュールを見て学習を進めることができます。

 

コロナ禍で家にいる時間も増え、気軽に学習できるという点では、「オンライン完結型」に勝るものはありませんよね。

 

まとめ

 

 

他にも多数の「ブログカスタマイズ方法」を紹介しています。

redo5151.hatenablog.com

 

redo5151.hatenablog.com

redo5151.hatenablog.com

redo5151.hatenablog.com

redo5151.hatenablog.com