はてなブログのカスタマイズでやらかした話

ブログのテーマを変更しました

はてなブログを初めて９ヶ月くらい経ち、すこーしずつ収益が出るようになってきました。
そして前回の記事でフォトショップを使えるようになり自分でヘッダー画像を作成してみたのですが、以前使っていたテーマが表示をスッキリさせることに特化していたためヘッダー画像が縮小されて画面上部の中央にちょこんと出ている状態でかなり地味なページに。
他の方のブログを覗いて見るとヘッダー画像がバーン！と大きく表示されていてかっこいいブログがちらほらとありましたので調べてみたところ、codomisu flat(コドミスフラット)というテーマに出会い早速インストール。

しかしやらかしが発覚

いいテーマに出会えてルンルンでブログを覗いて見ると

慌ててデザインのカスタムCSSを確認すると、今まで埋め込んでいたCSSが全部消えている！！！！！

と絶望していても仕方がないので、思い切ってデザインし直すことにしました。

この際だからごちゃごちゃになっていたCSSを後から見てもわかりやすくした

僕はCSSコードが全くわからないズブの素人なので有志でコードを公開してくれている方の記事を参考に興味を持ったコードを片っ端から導入しています。
自分のブログに新しい表示や仕掛けが増えていきいい感じにはなっていたのですが、気になったコードをどんどん詰め込んでいたためどれが何のコードなのか全くわからない状態に。
しかしコードによっては一番上の行に「/* */」←のような記号があり、この記号の中にコードのタイトルやメモが記入されているのを発見しました。
調べて見るとコードのコメントを残せるようで、デザインCSSにコードを入れるたびに「/* 見出しのカスタマイズ*/」などと入力することであとあとCSSをいじるときにとてもわかりやすくなります。

CSSコードはメモなどにバックアップを取っておくのすごい大事

幸いPCとスマホのデザインを統一するレスポンシブデザインにはしていなかったので、自分で入力していく必要がある吹き出しのCSSはスマホ用のコードが残っており１から作り直さずにすみました。吹き出しのキャラクターを１個づつ作っていくの大変ですよね・・・
テーマを変える時は

初心者がブログをカスタマイズする際に気をつけたいこと。

1. 新しいCSSコードを張る際は必ずメモ帳などに元のコードをコピペしておくこと
2. テーマを変更するとデザインCSSが全て消える
3. PCとスマホのレスポンシブデザインにしていなければスマホのコードが残っていることがある
4. 導入するCSSの先頭にはコメントを入れておくと後で救われる
5. デザインCSSはバックアップを取っておく
6. CSSは勉強しておいたほうがいい

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

posted with カエレバ

相澤 裕介 カットシステム 2016-10

Amazon

楽天市場

コピペさせていただいているコードを紹介。

はてなブログを初めてころはとりあえず片っ端からコードを入れていましたが、この機会で整理することができましたのでいつもお世話になっている記事を紹介していきます。