はてなでインストールしたテーマデザイン、変更できないんだけど!?ブログ初心者のカスタマイズ

f:id:monakaa:20171020131936j:plain

はてなでブログを始めて半月ほど。インストールしたテーマデザインを使ってコツコツブログ製作をしてきました。

しかし、ブログを書くなら自分の好きなデザインのサイトにしたい!カスタマイズしたい!

けど、ブログに関してはドのつく素人…。

CSSってなに?アメリカのニュースサイトっぽい」 「HTMLってあれよね、パソコンのどっかにあるやつ!」

みたいな状態だったのでホント大変でした。 その中でも、困ったのがインストールしたテーマのデザインが変更できないことでした…。

インストールしたテーマデザインが変更できない件

はてなのテーマとっても便利ですよね!色々なテーマがあって楽しんでいたのですが、使い続けているうちにだんだん

「書体が自分の好みとズレている」 「文字大きくしたい」

など思うことが増えてきました。 しかしいざ、ネットで調べてCSSを書き換えても、デザインが変わらない!?

なんでだ!と何回呟いたことか…。

仕方なく放置していたのですが、この度、こんな記事を発見しました!

www.aritai.net

なるほど、CSSが外部ファイルに保存されているから、反映されないのか…。 検索してもあまり記事が見つからなかったので、これ、相当普通のことなんだろうな…。

ということで、これに沿ってデザインを変更していこうと思います! デザイン変更できないじゃん!って方は、このやり方で解決です。

変更方法

まず記事管理画面のデザイン→カスタマイズ→デザインCSS

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

f:id:monakaa:20171020125901p:plain

この画面が開けたら、テーマを適応した際に初めから書かれているCSSをチェック。 そこに
http://hatenablog.com/theme/~~~~.css
というURLが記載されています。それをネットで検索してみましょう。
(~~~部分はインストールしたテーマによって違います)

検索URLはココ!

f:id:monakaa:20171020130104p:plain

すると、こんな感じでCSS画面が開けます!

検索結果はこんな感じ

f:id:monakaa:20171020131308p:plain

すごい!知らなかった!

あとはこのCSSをコピペして、自分のデザインCSSに落とし込むだけ。 外部で保存されていたため、変更できなかった部分も、自分のCSSに落とし込むことで変更が可能になりました。

自分の変更したい部分を書き換えて好みのブログにカスタマイズしていきましょう!