無料のオンラインプログラミング家庭教師サービスはじめました。

はてなブログ デザインCSS サヨナラ

ブログ運営
スポンサーリンク
ブログ運営
Info
最新のブログ運営(PV&収益)についてはTwitterで報告しています。
#クロヤギの運営報告
読了時間 挨拶

記事は約 4 分で読めます。

くろやぎ
くろやぎ

みなさん、こんにちは!
くろやぎ(kuroyagikuncom)です。
よろしければ、Twitterの方にも遊びに来てください。

前回の記事で、Dropboxを使ってCSSファイルをホスティングする方法について解説しました。今回の記事は、この内容の続編になっていますので、まだ記事を読んでいない方は下のリンクから設定を始めてください。
Dropboxでファイルをホスティングする方法

それでは改めまして、この記事では、はてなブログのデザインCSSをいじらずに、サイトのデザインをカスタマイズする方法を紹介します。

対象読者
  • はてなブログのデザイン編集画面に使い辛さを感じている方

はてなブログの「デザインCSS」って使い辛いですよね。シンタックスハイライト機能が微妙だったり、変更を保存するごとにテーマ選択をする画面に戻ってしまったり…
そんなはてなブログのデザイン編集に煩わしさを感じている方に朗報です!煩わしいはてなブログのデザインCSSを使うのは今日で最後です。Dropboxを利用することで、はてなブログのデザインCSSを使わずにはてなブログのデザインを簡単に編集することができます。「もう、はてなブログのデザイン編集で手間取りたくない!」という方は、この記事を参考にして設定をしてみてください。

内容
  • Dropboxを使って簡単にCSSファイルをホスティング
  • はてなブログで外部ファイルを読み込む方法
  • Visual Studio Codeでコード編集

それではこれから、DropboxではてなブログのデザインCSSにサヨナラする方法について解説していきます。

実行環境
  • Windows10
  • Dropbox
  • Visual Studio Code
スポンサーリンク

簡単な仕組みの説明

具体的な手順の説明に入る前に、どうやってデザインCSSをいじらずにサイトのデザインをカスタマイズするのか、簡単に説明します。
一言でいうと「はてなブログにおいて、外部のサーバーでホスティングされているCSSファイルを読み込む」という仕組みになっています。Dropboxを使えば、ファイル単体での共有が可能なため、面倒な設定なしで簡単にCSSファイルをホスティングすることができます。それに加え、Dropboxのデスクトップ版ソフトウェアには、PC上のローカルフォルダとクラウド上のリモートフォルダを自動同期する機能があります。これを使うと、ローカルなCSSファイルを編集して保存すると、リモートなCSSファイルが変更され、それを読み込んでいるはてなブログに変更が自動で反映されます。
若干実装までの工数が多いですが、一度設定してしまえば金輪際デザインCSSからイライラをもらうことはなくなるので、それをお望みの方は以下の手順に従って設定してみてください。

DropboxでホスティングされているCSSファイルを読み込む

具体例なしで解説を終えるのは不親切なので、実際にDropboxでホスティングされているCSSファイルを読み込む方法を解説します。
基本的な流れは前述したとおりです。まずは、ホスティングされているCSSファイルのリンクを取得します。リンクの取得方法は次の記事で解説しています。
Dropboxでファイルをホスティングする方法
今回は「https://dl.dropboxusercontent.com/s/hogefuga/style.css」というCSSファイルを読み込んでみます。
はてなブログの管理画面にアクセスし、【設定】→【詳細設定】→【検索エンジン最適化】→【headに要素を追加】に、次のコードを入力します。

Visual Studio Codeでの変更をホスティングファイルに反映

では、実際に【style.css】を編集してみましょう。VS Codeを起動し、【style.css】を開きます。前回の記事の都合で、pタグのcolor属性の属性値が”red”になっていますが、これを”blue”に変更してみましょう。

本文の色が変更されたことが確認できると思います。

まとめ

設定までの工数が多くて面倒だったかもしれません。ただ、今後はローカルなCSSファイルを編集するだけではてなブログのデザインをカスタマイズすることができるようになるので、いつかその努力が報われる日が来るはずです!お疲れ様でした。

初心者ブロガーが登録すべきASP ベスト3

初心者ブロガーが登録すべきASP ベスト3

A8.net

A8.netは広告主数が豊富で、初心者ブロガーでも簡単に登録できるためアフィリエイトを手軽に始めることができます。
また、A8.netは「セルフバック」が充実していて、レビュー記事にはもってこいです。

もしもアフィリエイト

もしもアフィリエイトは、Amazonアソシエイトと楽天アフィリエイトを一緒に管理できるため余計な手間がかかりません。
さらに、W報酬制度やプレミアム報酬などの、他のASPにはない魅力的な報酬制度があります。

バリューコマース

バリューコマースは、スマートフォン向けのオーバーレイ広告が掲載できる点が特徴です。
また、バリューコマースにしかない広告案件があり、漏れをなくすためのサブののASPとして登録しておいて損はないです。

ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

3人の購読者に加わりましょう

スポンサーリンク
ブログ運営
シェアする
クロヤギ

コメント

タイトルとURLをコピーしました