Macky1991’s blog

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

デザインテーマの"色"を変える【第3次ブログ改造計画】

f:id:Macky1991:20190727113342p:plain

みなさんこんばんわ

 

今日は夜7時に投稿してみました。

日曜日はほとんどの方にとって休日だと思われるので

夕方過ぎで外出や用事を済まされている時間帯に投稿して

より多くの方々に読んでいただければと思いました。

今日も引き続き仕事が遅番なので

帰宅して30分以内に記事を作るのは非常に難しいです(汗)

 

デザインテーマの"色"を変える

 

昨日に引き続き今日もブログを改善していきますが

準備も終えたので実際にCSSを編集していきたいと思いますが

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

ZENO-TEAL」に使用されている"色"を変えていきたいと思います。 

 

その前に昨日の予習となりますがCSSの編集をするときは

必ず編集前のCSSのバックアップを取りましょう。

 

f:id:Macky1991:20190727113303p:plain

 

昨日からの続きとなりますが

ブログの右にあるサイドバーの緑色を変えていきたいので

「プロフィール」をマウスで囲った状態で右クリックして

表示された一覧の中の「要素の詳細を表示」をクリックしておきましょう。
画像のようにページの下部にコードが表示されたら

編集の準備が完了しましたので作業を始めていきます。

 

コードを別ウインドウで表示する

 

f:id:Macky1991:20190727113326p:plain

 

その前にコードが表示される範囲が狭いので

別のウィンドウとして開いてみます。

コードが表示されているボックスの左上に

「別のウインドウに切り離す」のアイコンがあるのでクリックします。 

 

f:id:Macky1991:20190728041149p:plain

 

クリックすると画像のようにページのコードが表示されてある

「Web インスペクタ」ウインドウが表示されます。

プレビューとして実際のページと並べたいので

「Web インスペクタ」ウインドウと半々になるように

ブラウザを調整してみました。

ZENO-TEAL」はレスポンシブWebデザインに対応しているため

ウインドウの幅を狭めると画像のように

サイドバーがページの下に移動してしまい

肝心の色の確認ができません。

 

f:id:Macky1991:20190727113342p:plain

 

対処のしようがないので大人しくページの下まで

スライドしてあげましょう。

 

スタイルを見るために

 

では早速CSSを編集してみたいのですが

「Web インスペクタ」ウインドウには

HTMLのコードしか表示されてません。

CSSのスタイルも表示されるように

「Web インスペクタ」ウインドウの表示設定を変えましょう。

 

f:id:Macky1991:20190727113411p:plain

 

「Web インスペクタ」ウインドウの右上あたりに

長方形の中に右寄りの縦線があるアイコンがあるので

クリックします。

 

f:id:Macky1991:20190727113422p:plain

 

クリックすると画像のようなサイドバーが表示されます。

マウスでコードをクリックするとそれに適用している

スタイルが表示されます。

 

スタイルで"色"を変える

 

f:id:Macky1991:20190727113443p:plain

 

ページのプロフィールを選択しているので

背景の色や大きさが記されているスタイルが表示されてます。

その中で変えたいのは"色"なので「background:〜」の

隣にある#009688をクリックします。

 

f:id:Macky1991:20190727113455p:plain

 

クリックするとカラーホイールが表示されます。

テストがてらに弄ってみたいと思います。 

 

f:id:Macky1991:20190727113526p:plain

 

カラーホイール上部の適当な箇所をクリックしてみると

デザインテーマの色が変わりました。

カラーチャートで色を変えると

スタイルのカラーコードも変わります。

しかしこの色は私の求める色ではありません。

 

 

f:id:Macky1991:20190727113541p:plain

 

私はグレーが好きなのでGoogle検索をしてみたところ

#B2B2B2が理想のグレーに近いということがわかりました。

このカラーコードをスタイルに書き加えると

画像のように変化しました。

 

直接CSSに書き加える

 

しかしこれで完了ではありません。

変わったのはブラウザ上だけであり

Webではなんの変化もありません。

 

ブログにこの変更を反映させるには

はてなブログ側で直接設定をしなければなりません。

そのためにはこのスタイルが欠かせません。

この変更後のスタイルを丸ごとコピーします。

 

 

f:id:Macky1991:20190727113622p:plain

 

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

「デザイン」の「カスタマイズ」にある

「{}デザインcss」の中にペーストしましょう。

ペーストしたら忘れずに「変更を保存する」をクリックしてください。

 

f:id:Macky1991:20190727113611p:plain

 

すると画像のようにサイドバーの文字の背景がグレーに変わりました。

続けて同じ要領でヘッダーの色も変えてみます。

 

f:id:Macky1991:20190727113600p:plain

 

ご覧の通りページが落ち着いた雰囲気になりました。

しかし思ってたより地味になり過ぎてしまいました。

後日より視覚的にいいページに編集してみたいと思います。

 

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

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