Macky1991’s blog

ブログを始めて3週間、アドセンスが合格しました!今後ともよろしくお願いいたしますm(__)m

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

f:id:Macky1991:20190727113303p:plain

 

みなさんこんばんわ

 

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

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

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

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

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

 

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

 

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

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

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

 

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

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

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

 

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

 

CSSのバックアップをとる

 

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

 

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

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

 

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

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

 

f:id:Macky1991:20190727113056p:plain

 

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

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

 

f:id:Macky1991:20190727113107p:plain

 

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

 

f:id:Macky1991:20190727113141p:plain

 

その中に「{デザインCSS}」があるので

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

 

f:id:Macky1991:20190727113137p:plain

 

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

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

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

 

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

 

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

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

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

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

 

f:id:Macky1991:20190727113200p:plain

 

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

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

 

f:id:Macky1991:20190727113233p:plain

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

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

 

f:id:Macky1991:20190727113218p:plain

 

この中の一番下にある

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

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

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

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

 f:id:Macky1991:20190727113311p:plain

 

実際に試してみます。

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

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

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

 

f:id:Macky1991:20190727113303p:plain

 

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

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

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

 

 

 

準備万端

 

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

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

 

CSSのバックアップをとる

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

 

ここまでしておかないと

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

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

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

 

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

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

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

 

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

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