主婦がゼロからアフィリエイト

アラフィフの普通の子育て中の主婦 (特技資格無し・普通の高校卒業) アフィリエイトに挑戦するブログ。超初心者、今はアフィじゃなくても別の事でも稼げるようになりたい。ゆるくて地味な人です

はてなブログにインストールしたテーマのcssの内容が変更ができない?!

 はてなブログにインストールしたテーマのcssの内容が変更ができない?!

 

ってなった人、いますか~?

 あ、こんにちは、たうびーです。

 こんな単純なことを、記事に上げてしまうのかって思われるかもですが、記録としてとっとく意味もあり、書いておきます。

 はてなブログに、テーマをインストールすると、以下のような状態になってます。
 私は、この赤角丸枠印の下に、CSSをコピペしようとしてました。(ノ´∀`*)

  それではCSSの変更はできません

 それで、検索したところ、こちらのブログ記事を見つけました。

はてなブログ|インストールしたデザインテーマ(CSS)をカスタマイズする方法 - 晴れ時々晴天なり

 

 意味がなんとなくですがわかったような気がして、以下のようにしたら、短時間でできたので、メモしておきます。

f:id:taubii:20180928123411p:plain

まず、この上記の赤角丸枠印の中身をコピペしますね。

 

 私の今の、
はてなブログのダッシュボードデザインカスタマイズ{}デザイン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でやったのですが、自動的に
ダウンロードできる画面になるので、『開く』をクリックすると、以下の画面がパソコンのウインドウ上に出てきます。

 (お使いのブラウザによって、表示の仕方・形が違うかもしれません。)

 

f:id:taubii:20180928115605p:plain

  そしたら、上記を 全てコピーして、
自分のはてなブログのダッシュボードデザインカスタマイズ{}デザインCSS
に、ペタッと貼り付けます。

 もともとあった
/* <system section="theme" selected="8599973812333959601"> */
@import url("https://blog.hatena.ne.jp/-/theme/8599973812333959601.css");
/* </system> */ 
は、消してしまいます。(上書き保存ですね。)

 これで、この中のCSSを書き換えることで、自分の好きなデザインにカスタマイズすることができますね!

 (cssは、変更するたびに保存しておこうと思います。
 また、CSSを変更する場合は、「事前にバックアップを取ってからする。
 変更箇所が明確にわかるように紙のメモもしておく。」
 
を遵守したい思っています。)

(ここは丁寧に慎重にやっておかないと、特に私は初心者なので、なにがどーなってどーなったのか迷路に入ってしまう可能性大です。)


以下のブログ記事を参考にさせていただきました。
ありがとうございました。

www.aritai.net