koblog

高校生のWEBデザインブログ

【裏技あり】はてなブログのCSSを編集する方法

サムネイル

文字の装飾や背景色などブログのカスタマイズで必須のCSSですが、はてなブログは他のブログサービス(特にWordpress)と比べてCSSの編集が分かりづらい・やりづらいと言われています。そこで今回は初心者向けと上級者向けに2通りのCSSの編集方法を紹介します。

 

CSSを編集しても反映されない方はこちらの記事をどうぞ。

 

 

CSSの編集方法【初心者編】

デザイン設定→カスタマイズ→デザインCSS

はてなブログの設定ページを開き、上の順に進んでいくと「デザインCSS」という欄が見つかると思います。そこがはてなブログCSSを記述する場所です。 

キャプチャー1

 

デザインCSSの入力欄をクリックすると下のようにエディターが現れます。CSSのコードは基本的に/* </system> */よりもあとに書いてください。そうしないと反映されないどころか、全体のデザインが崩れてしまいます。

(テーマによって異なります。)

キャプチャー2

 

CSSの記述についてですが、正直はてなブログのエディターはとても使いづらいです。

具体的にはエディターを表示させたままにしておくことができず、コードをコピペするときに再スクロールする必要がでてきます。

 

そのため他のエディターで書いたコードをコピペするほうが良いと思います。僕のオススメのエディターはAdobeBracketsです。動作も軽く提供先も安心できるので使っています。

Bracketsはこちら

 

また余談ですがヘッダーやフッターなどいくつかコードを書ける場所がありますが、CSSではなくHTMLを記述する場所なので、間違えて記述しないように注意してください。(デザインに影響はありませんが、動作が重くなります。)

  

CSSの編集方法【上級者編】

ここからは上級者向けの編集方法を紹介します。先に言うとそこまで裏技ではありませんが、気づかないとかなり苦戦すると思います。

 

はてなブログではテーマをインストールするとCSSが直接書き込まれるのではなく、外部から読み込ませます。

/* 実際の表示 */
/* <system section="theme" selected="8599973812270629022"> */
@import "https://blog.hatena.ne.jp/-/theme/8599973812270629022.css";
/* </system> */

そのためユーザーが直接編集することは基本的にできません。しかしこれから紹介する方法を使うことで、自分で自由に編集することができるようになります。

使いみちとしては...

・文字の大きさを自由に変えられる

・背景色など細かい編集ができる

・テーマ制作の見本になる

・配布されているテーマを自分の好みに

ここで注意点ですが、編集後消してしまったコードは復元できないので必ずコピペなどでバックアップしておいてください。またテーマによってはコードの改変を禁止している場合もあるので確認してみてください。ほとんどの場合はてなのテーマストアに書かれていると思います。

 

さて、前置きが長くなりましたが、ここから編集方法を紹介します。

まずデザインCSS

/* <system section="theme" selected="8599973812270629022"> */
@import "https://blog.hatena.ne.jp/-/theme/8599973812270629022.css";
/* </system> */

のURLの部分(https://~~~.css)をコピーしてください。URLはテーマによって違います。(はてな純正のテーマにはURLがありません。)

 

今回は例として「Minimalism」を使わせていただきます。コピーできたらブラウザー上でURLを開いてください。そうすると下のような画面になると思います。

キャプチャー3

 

これを全選択+コピー( ctrl+A / command+A)してエディターなどにペーストすれば、あとはCSSを自由に編集するだけです。編集したCSSを使うときは、元々あるCSSの読み込み用リンクを消してからペーストしてください。

キャプチャー4

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる