週刊とっしーぱんち

昭和生まれのブロガーが綴る、全力脱力系雑記帳

はてなブログのデザインCSSをスッキリさせたくて【前編】

おはよーございます。

 

以前から少しずつこのブログにCSSを追加したりして楽しんでいるのですが、問題発生。

 

 

デザインCSSに何書いてるかわけわかんなくなってきた!

 

画像だとスクロールバーが消えててわかりづらいですが、勢いのままに追加してきた歴代のCSSがずらずらと書いてあります。。

 

ということで、このCSSをどうにかしてスッキリさせたくなってきた話、前編です。

 

 

デザインCSSをスッキリさせる方法。外部からCSSを読み込むようにする。

ブログのデザインテーマを変更できる機能を使うと、デザインCSSに以下のような記述が増えます。

/* <system section="theme" selected="26006613659732769"> */
@import url("https://usercss.blog.st-hatena.com/-/theme/26006613659732769.css?version=bdaceee57494969dc4a1bd79b362fcb23b062607");
/* </system> */

@import urlの後ろに書いてるある、なんたらかんたら.cssというのが、実際のCSSファイルが記述されている場所で、http://からなんちゃらかんちゃ62607までをコピーして、ブラウザのアドレバーに貼り付けて移動すると、CSSの内容が表示されることがわかります。

 

ということは自分用のアドレスを用意して、そこに自分用のCSSを置けば、デザインCSSにはimport urlの行だけ追加すれば良さそうです。これはスッキリす。

どうやって外部からCSSを読み込めるようにするか?

デザインCSSに直書きしている内容を、なんとかCSSというファイルにして、外部のサーバに置いてしまえばできそうです。

 

まず思いついたのは、Webサイト制作やらRubyの練習やらで使っているレンタルサーバ。

ここにCSSファイルを置いてしまえば話は早そうです。

 

なんですが、レンタルサーバを立てるには、お金を払う必要があったり、サーバ借りても、そこにWebサーバをセットアップしたりと色々と大変です。

 

せっかくこのブログを読んでくれている方もいらっしゃるので、無料で、もうちょっとお手軽にできる方法はないかを探してみました。

 

GitHub Pagesというサービスを使うと無料でWebサイトが作れるようです。

色々とぐぐってみた結果、GitHubPagesというサービスを使えば、無料かつサーバ構築の手間もかからずCSSを設置できそうです。というわけで、早速登録をしてみることにしました。

 

続きはこちらです。

 

osio-toshimasa.hatenablog.com