とらやぎ日記

とらやぎ日記

健康、習慣・時間管理、お金、ブログ、小さなことからコツコツ勉強中。

【はてなブログカスタマイズ】デザインcssを、自分で自由にカスタムしよう。

f:id:k-k-a-k-s-k-t-n-t:20170411164537j:plain

とらやぎです。

 

僕が今まで悩んでいた事が解決しましたので、その内容を

 

紹介したいと思います。

今回紹介することで何ができるのか?

自分のページの、編集したい場所のデザイン設定がどうなっているかが分かります。

(どんなidやclassで指定されているのか分かります。)

 

cssの何行目をいじれば良いのか分かります。

(いじる場所が分かるので、数字だけ変えれば良いこともあります。)

 

これを覚えれば、初心者でもわりと簡単にデザインをいじれますので、この機会にチャレンジしてみてはいかがでしょうか。

変更したい所のidが分からない

そもそもidやclassなんていう言葉すら知りませんでしたし、検索してそれを知ったのまでは良かったです。

 

ですが、自分が今変えたいと思っているのはどのidやclassで指定されているのか分からないのです。

 

なので、自分の変更したい事を検索して、コードをコピペさせて頂いていました。

(コードを載せてくれている方々、ありがとうございます。)

 

解決方法

Google Chromeの拡張機能「Web Developer Tools」で解決できました。

 

僕の行った内容を紹介致します。

1.「Web Developer Tools」をインストールする

Web Developer Tools - Chrome Web Store 

2.「Web Developer Tools」で、自分のブログページのcssを表示する。

3.全選択してコピーする。

4.はてなブログのデザインcssに上書きする。

 

以上です。

 

これを行うことで、 「Web Developer Tools」で表示されるcssコードと、はてなブログカスタマイズ画面に表示されるcssコードが同じになります。

 

そうすると、 

「Web Developer Toolsで、いじりたい場所のcssコードと行数を確認して、はてなブログのcss編集画面で同じ行数の所をいじる」

ということができるようになります。

具体的なやり方

 「Web Developer Tools」をインストールした状態で、自分のページを右クリック→「検証」を押します。

 (今回は記事下の余白部分で右クリックしています。)

f:id:k-k-a-k-s-k-t-n-t:20170411145255p:plain

するとこの画面になります。

f:id:k-k-a-k-s-k-t-n-t:20170411150947p:plain

ここで右上の「style」タブのとなり→「computed」を押します。

f:id:k-k-a-k-s-k-t-n-t:20170411150116p:plain

右側の窓に赤い字で「margin-bottom」と書いてある部分があるので、その左側の三角を押します。

 

するとさらに行が表示され、右側に出てきた青字をクリックすると、このページの全cssの中で、この余白が設定されているコードの場所が表示されます。

f:id:k-k-a-k-s-k-t-n-t:20170411202840p:plain

このコードを全選択してコピーし、はてなブログに貼り付ければOKです。

はてなブログへの貼り付け方法

はてなブログのダッシュボードから、「デザイン」を選択。

f:id:k-k-a-k-s-k-t-n-t:20170411153933p:plain

さらに「カスタマイズ」→「デザインcss」を選択し、ここに先程のコードをコピペします。

f:id:k-k-a-k-s-k-t-n-t:20170411154019p:plain

【参考】アーカイブページの余白を変更する場合

今回の場合は、コードの1139番目に「margin-bottom」が設定されていました。

f:id:k-k-a-k-s-k-t-n-t:20170411203054p:plain

cssを全部コピペした後は、デザインcssの1139番目にも「margin-bottom」の設定があります。

 

その部分の数値を変更すると、余白を変更できます。

 

数字をいじるだけです。

 

これなら初心者の僕でもなんとかなりそうです。

 

前回、余白をいじる方法を紹介させて頂きましたが、あれはデザインテーマに上書きしていました。

【はてなブログカスタマイズ】アーカイブページ 記事下の余白を調整する - とらやぎ日記

こんな風に、同じコードを重ね書きしているイメージです。

/* archive ページ */
.page-archive .archive-entries .archive-entry {
margin-bottom: 48px;
margin-bottom: 16px;  /* こちらが優先 */
}

もし既にcssの設定があれば、直接編集する方が重ね書きよりシンプルで、管理もしやすいのでオススメです。 

 

どうして今までできなかったのか?

できなかった理由はデザインテーマにありました。

 

僕はブログを始めてすぐにデザインテーマを設定しており、cssにこのコードが書かれていました。

/* <system section="theme" selected="6653586347155924442"> */

@import "http://hatenablog.com/theme/6653586347155924442.css";

/* </system> */

こうして見ると10行もないコードですが、「Web Developer Tools」で表示すると、この中に1500行以上の設定が組み込まれていました。

 

「Web Developer Tools」で表示したcssは、このデザインテーマのコードを全て生データとして表示してくれます。

 

それをそのまま、自分のcssにコピペします。そうすると、

 

今までと同じデザインを維持しつつ、テーマの設定内容もいじれるようになりました。

 

まとめ

注意点として、変更する前にcssの元データは別の場所に保存しておいたほうがいいです。

 

これをしていないと、デザインが元に戻せなくなるかもしれません。

 

はてなブログのカスタマイズ画面で保存しない限り、「Web Developer Tools」でいくらいじってもデザインは保存されませんので、いろいろ試してみることをオススメ致します。

 

以上っ!