「はてなブログ」である程度の期間ブログ運営していると徐々にカスタマイズが増え、CSSが長文化してしまい使いにくいことは無いでしょうか。
特に「はてなブログ」では色分けがされておらず行数などもわからず編集がしにくいんですよね。
そんな時にオススメしたいのは「DropboxやOnedriveなどの外部共有ファイルを使って、共有フォルダ上でCSSを編集する方法」になります。
- CSSとは
- Dropboxとは
- CSSをDropboxとリンクする方法
- CSSファイルのリンクURLを修正
- 「head」に要素を追加しましょう
- 「CSS」にimportを記載しましょう
- WEBデザインを学ぶのにおすすめなプログラミングスクール
- まとめ
これからブログで収益化を考えている方へおすすめのアフィリエイトサービスを紹介しています。
CSSとは
CSSとは簡単にいうとプログラミング言語の一種でHTMLと組み合わせて使うことで、ブログデザインを編集することができます。
例えば、強調したい部分にマーカーを引いたり、枠で囲ったり、色を付けたりとレイアウトを個別に設定する際に使います。
Dropboxとは
Dropboxは仮想(ネットワーク上)のデータストレージサービスです。これを使うことでネットワーク上に仮想の容量フォルダを置くことができ、写真や動画、音楽、テキストファイルなどを他の人と共有することが出来ます。
私も登山や旅行に行った際にはDropboxなどを使って友人と写真の共有を行っています。
最近ではLineに送ってる人も多いのですが、Lineで送ると勝手にデータが圧縮されてしまうといったデメリットもあります。
Dropboxの他にもストレージサービスとしてはマイクロソフト社が提供している「Onedrive」などもあります。
CSSをDropboxとリンクする方法
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)の前にカーソルを合わせると共有というボタンがふわっと現れるので、選択します。
すると上のような画面が表示されます。右下の「リンクを作成」を選択してください。
画面右下の「リンクをコピー」を選択します。
すると上のように「リンク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」に要素を追加しましょう
はてなブログの管理画面→設定→詳細設定→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の編集で困っている方への手助けに少しでもなれば幸いです。
大変ありがたいことに以下のはてなブログ公式さんから私の記事を紹介して頂きました。
WEBデザインを学ぶのにおすすめなプログラミングスクール
TechAcademy(テックアカデミー)
私も大学、大学院時代からFortranやC言語などを学んできましたがやはり先生や教授に教えてもらうと格段に習得の速さが違うことを実感しています。
「Tech Academy」は厚切りジェイソンがChief Public Relations Officerになっているオンラインベースのプログラミングスクールです。
キラメックス株式会社
□所在地
＜本社オフィス＞ 〒150-0002 東京都渋谷区渋谷1-17-4 PMO渋谷8F
□事業概要
Tech Academy：プログラミング教育事業
これからの時代は「5G」が到来し、”AI(人工知能)”が制するとも言われています。ニーズが高まっている状況でプログラミングを学ぶことは、就職にも困らず良いことばかりで損はありません。
WEBデザインはもちろんのこと以下の多くのプログラミングの学習が可能です。
・Webマーケティングコース
・はじめてのプログラミングコース
）・Javaコース
・Pythonコース
・WordPressコース
・iPhoneアプリコース
・AIコース
・データサイエンスコース
・UI/UXデザインコース
・動画編集コース
・TechAcademy Pro（エンジニアへの転職を保証するコース）
TechAcademy(テックアカデミー)の特徴
全て現役のエンジニアが指導
基本的には質問は全てオンラインでのやり取りになりますが、回答者や個人メンターは全て現役のエンジニアになっています。スクールの卒業生をメンターとして採用しているスクールも多い中、全員が現役のプロの方というのは大きな魅力ですね。
質問に対しての回答のムラが少ないというのは、学習を進めていく中で大事な要素になりますので、「Tech Academy」の特徴の一つだと感じます。
オンライン完結型スクール
忙しい社会人や遠方の方にはありがたい「オンライン完結型スクール」になっています。場所や時間を問わず、パソコンとインターネット環境が揃えば、あとは自身のスケジュールを見て学習を進めることができます。
コロナ禍で家にいる時間も増え、気軽に学習できるという点では、「オンライン完結型」に勝るものはありませんよね。
まとめ
・「はてなブログ」で長文化したCSSを外部リンク化する方法を紹介
・外部CSSで作業効率が断然アップ
・「Dropbox」を使えば無料で外部リンクを作成できちゃいます
他にも多数の「ブログカスタマイズ方法」を紹介しています。
