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

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

f:id:izumi-aktk-info:20170605160822j:plain

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

codomisu flat(コドミスフラット)はこちらからどうぞ

hitsuzi.hatenablog.com

しかしやらかしが発覚

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

シェアボタンが表示されていない!!!

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

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

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

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

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


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

必ずデザインCSSのバックアップを取っておきましょう

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

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

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

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

コンテンツスライダー

www.tairakenji.com

フォローボタン・シェアボタン

www.ituore.com

www.ituore.com

パンくずリスト

bulldra.hatenablog.com

目次の自動生成

qiita.com

見出し

www.nxworld.net

読み終わるまでの時間表示

www.tsubasa-note.blog

吹き出し

TJ

吹き出しはこちら

shiromatakumi.hatenablog.com

アドセンス広告自動生成

www.kanamalu.com

スマホ用カスタマイズ

www.ituore.com

おまけの震える文字

www.tairakenji.com

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)