はてなブログにインストールしたテーマのcssの内容が変更ができない?!
はてなブログにインストールしたテーマのcssの内容が変更ができない?!
ってなった人、いますか~?
あ、こんにちは、たうびーです。
こんな単純なことを、記事に上げてしまうのかって思われるかもですが、記録としてとっとく意味もあり、書いておきます。
はてなブログに、テーマをインストールすると、以下のような状態になってます。
私は、この赤角丸枠印の下に、CSSをコピペしようとしてました。(ノ´∀`*)
それではCSSの変更はできません。
それで、検索したところ、こちらのブログ記事を見つけました。
はてなブログ|インストールしたデザインテーマ(CSS)をカスタマイズする方法 - 晴れ時々晴天なり
意味がなんとなくですがわかったような気がして、以下のようにしたら、短時間でできたので、メモしておきます。
まず、この上記の赤角丸枠印の中身をコピペしますね。
私の今の、
はてなブログのダッシュボード → デザイン → カスタマイズ → {}デザインCSS
の内容がこれ↓↓
/* <system section="theme" selected="8599973812333959601"> */
@import url("https://blog.hatena.ne.jp/-/theme/8599973812333959601.css");
/* </system> */
これって、
『インストールしたテーマのCSSが外部にあり、その外部にある8599973812333959601のテーマのCSSを、このブログで使っている』
って感じの意味みたいです。
で、
「http://hatenablog.com/theme/〇〇〇〇〇.css」
〇〇〇〇〇の部分に、自分の使っているテーマの番号(私の場合は)8599973812333959601を入れて、そこにブラウザを使用してアクセスします。
私の場合は、「http://hatenablog.com/theme/8599973812333959601.css」ですね。
(「」の中身を、ブラウザで検索してやる。)
そうすると、私はブラウザはMicrosoft Edgeでやったのですが、自動的に
ダウンロードできる画面になるので、『開く』をクリックすると、以下の画面がパソコンのウインドウ上に出てきます。
(お使いのブラウザによって、表示の仕方・形が違うかもしれません。)
そしたら、上記を 全てコピーして、
自分のはてなブログのダッシュボード → デザイン → カスタマイズ → {}デザインCSS
に、ペタッと貼り付けます。
もともとあった
/* <system section="theme" selected="8599973812333959601"> */
@import url("https://blog.hatena.ne.jp/-/theme/8599973812333959601.css");
/* </system> */
は、消してしまいます。(上書き保存ですね。)
これで、この中のCSSを書き換えることで、自分の好きなデザインにカスタマイズすることができますね!
(cssは、変更するたびに保存しておこうと思います。
また、CSSを変更する場合は、「事前にバックアップを取ってからする。
変更箇所が明確にわかるように紙のメモもしておく。」
を遵守したい思っています。)
(ここは丁寧に慎重にやっておかないと、特に私は初心者なので、なにがどーなってどーなったのか迷路に入ってしまう可能性大です。)
以下のブログ記事を参考にさせていただきました。
ありがとうございました。