デザインテーマをカスタマズする前に【第2次ブログ改造計画】

みなさんこんばんわ

というのもなんか変ですね

実はこの記事はお昼に書いたものになります。

今日から仕事の出勤時間が午後になるからです。

そのため記事を早めに書き上げて

みなさんに読んでいただける時間に予約投稿しました。 

デザインテーマのカスタム前の下準備

 昨日からブログ記事に見出しを付け加えるなど

ブログをより読みやすくカッコよくスタイリッシュに

改善する作業を始めてみました。

今回はこのブログに使用しているデザインテーマである

「ZENO-TEAL」の一部を私好みにカスタマイズして

オリジナリティを出してみたいと思います。

そのためには二つの下準備をしないといけません。

CSSのバックアップをとる

ブログのデザインテーマすなわちCSSを編集していくことになるのですが

編集していく過程で誤入力により

不具合などのエラーが発生する恐れがあります。

編集前にリカバリできるように

現在のCSSのバックアップを取ってみたいと思います。

はてなブログの「ダッシュボード」にアクセスしたら

左側の一覧にある「デザイン」をクリックします。

この中のレンチのマークである「カスタマイズ」をクリックします。

その中に「｛デザインCSS｝」があるので

ボックスの中にあるコードを全て選択してコピーします。

コピーしたら「Sublime Text」などの

テキストエディタなどにペーストして保存します。

これでCSSのバックアップは完了です。

CSSのコードを調べるために

バックアップをしたのでCSSを実際に編集しても失敗するリスクは防げましたが

肝心のCSSのコードを読み取る準備ができてません。

「Safari」において閲覧しているページのコードを調べるための

設定をしていきたいと思います。

「Safari」のウィンドウを開いたら左上にある

「Safari」の一覧の中から「環境設定」をクリックします。

画像のウィンドウが開かれるので

上部にある「詳細」をクリックします。

この中の一番下にある

「メニューバーに”開発”メニューを表示」の左隣にある

チェックボックスにチェックを入れてあげます。

これでページを右クリックするだけで

コードを表示させることができるようになりました。

実際に試してみます。

私のブログのページのサイドバーにある色が気なるので

プロフィールをドラッグした状態で右クリックします。

その中の「要素の詳細を表示」をクリックします。

クリックすると画像のようにページの下部に

コードが表示されドラッグしてた箇所に当たるコードを

青でハイライト表示してくれます。

準備万端

これでCSSを編集する準備ができました。

CSSの編集する前に大切なことは次の二つです。

CSSのバックアップをとる

ブラウザでコードが表示できるようにする

ここまでしておかないと

ページのコードが分からなかったり

CSSの編集で取り返しのつかないことに

なりかねないので準備はきちんとしましょう。

次回からいよいよCSSに手を加えていきます。

CSSの編集でよりオリジナリティあるブログに仕上げるためにも

より身を引き締め取り組みんでいきます。

ここまで読んでいただきありがとうございます。

次回の記事の更新もお楽しみに。