主婦、時々フリーランス

2児の子育て中の主婦が、育児、節約、仕事について記録。

【初級~中級編】ディベロッパーツールを使ってオリジナルなカスタマイズを目指そう

 

WEB関係の仕事をしておきながら、この手のジャンルはあまり触れてきませんでした。

なぜなら、自分のブログすらカスタマイズできていないので「WEBデザインなんて語る資格ないね私・・」と思っていたからです。

(とにかく1記事更新する事が時間も気力も精いっぱい)

 

でも今回はたまにはWEBっぽいこと、ということで

「初心者だけどカスタマイズしてみたい!」

という方に少しでも参考になればと思いこちらを書いてみました。

 

今回の記事はこんな人におすすめ

  • ブログのカスタマイズに興味がある
  • でもHTML・CSSの勉強するのはちょっと・・・
  • でも他人のブログやWEBサイトで、「おしゃれ!カッコいい!」と思った部分を参考にしてみたい

カスタマイズの基礎情報

前提ですが、カスタマイズ(WEBデザイン)をする時HTMLCSSを修正する必要が出てきます。

  • HTML:ブラウザに表示させたいものを書いたソースコード
  • CSS:HTMLに装飾等を付けるサブコード

はてなで言うと、「記事を書く」で文字を書いている部分がHTMLファイルに反映され、「デザイン」の「デザインCSS」などに追記しているのがCSSファイルに反映されています。

 

はてなやAmebaブログ、WordPressなんかはある程度のことは勝手に(ボタンひとつで)編集してくれるサービスなので、HTML/CSSなんて意識しなくてもがりがりブログを書いていけるんですね。便利!

 

HTML/CSSの知識があるとこんな事が出来る

  • オリジナルの見出しやその他デザインを作れる
  • 表(テーブル)を挿入できる(データをまとめる時など便利)
  • ブログ各パーツの配置、余白、サイズなどの微調整ができる

などなど。

とにかく自由自在です。 

 

カスタマイズする時の注意点

注意①

はてなブログはWordPressに比べ、非常にアクセスに時間がかかりますよね。ページ読込速度が遅いと感じる方も多いはず。

カスタマイズし過ぎると更に遅くなるという噂もありますので、ほどほどが良いかと思います。

注意②

「デザインCSS」部分を修正する場合は必ずバックアップを取っておきましょう。

気付かないうちにコードの一部や他カスタマイズ部分を削除してしまったり、修正途中にパソコン消えちゃったり。「 } 」(カッコ)がないだけで反映されなくなりますからね。

アクシデントはつきものです。必ずメモ帳やテキストエディタなどにバックアップしましょう。

逆にバックアップとっておけばまた戻せるので、怖がらずに挑戦してください。

注意③

他人のブログやWEBサイトのソースコードのまるぱくりはダメです!著作権に引っかかる場合があります。

「無料配布」「コピペOK」などの素材は大丈夫です。

 

あなたはどっち?無料で調達or自力でトライ

はてなでカスタマイズする方法は、コピペOKのサイトを参考にするか、自力でカスタマイズするかになるかと思います。

1.無料で使えるおしゃれ素材を調達する

見出しやボックスなど、既に先人の知恵がありますし無料公開されています。

皆さん既に使われているかもしれませんが、サルワカさんのサイトにいけば何でも揃います。

【サルワカさん公式サイト】コピペOKのデザイン集はこちら

 

2.Chromeの「ディベロッパーツール」で確認

Googleのブラウザ、Chromeのディベロッパーツールを使うと、気になるWEBデザインのソースコードを覗き見ることができます。

私はこれを使って「これどうやって作っているのかな??」と参考にして自分のサイトでも試してみます。

 

ディベロッパーツールでできること

機能の一部を紹介するとこんな感じです。

  • 他の人のデザイン(カスタマイズ)のソースコードを見ることができる
  • カスタマイズのテストができる

 

例えば、WEBサイトや他の人のブログなどで、

  • この見出しとかリストボックスおしゃれだなぁ~
  • この背景の色、何色使ってるんだろう?
  • このフォント(書式)自分も使ってみたい!

という時にその画面上でディベロッパーツールを開けば、そのサイトのデザイン(HTMLとCSS)が丸裸になって見ることができる、とても便利なツールなのです。

 

ディベロッパーツールを開いてみる

Chromeのブラウザ右上のメニューアイコン>「その他ツール」>「ディベロッパーツール」を選択します。

または、ブラウザの画面上で右クリック>「検証」でもOKです(こっちが早い)。

f:id:yumekuro789:20180801233009j:plain

 

 

すると、このような画面が出てきます。

f:id:yumekuro789:20180802095155j:plain

ソースコードがドバーっと出てきて、画面もいくつか分けられています。

これがディベロッパーツールです。

 

【カスタマイズテスト例】はてなブログで無駄な余白を消してみる

私のブログで、ディベロッパーツールを使ってカスタマイズのテストをしてみます。

「こんな使い方もあるよ」という参考のひとつとして読んでください。

 

サイドバーの「プロフィール」と「最新記事」の間の妙な余白を消してみたいと思ったとしますね。(下画像の赤四角部分)

f:id:yumekuro789:20180802101205j:plain

1.カスタマイズしたい部分を選択 

ディベロッパーツールの下記画像①のアイコンをクリックします。

画面上でカスタマイズしたい部分にマウスのカーソルを合わせると、②のように選択モードになり、色つきの四角で囲われます。

f:id:yumekuro789:20180802101701j:plain

 

この状態でマウスを画面上で動かすと、選択されたエリアに対応したソースコード(画面右側)が青く選択されていますね。

今回は②の部分の余白を調整したいので、②のあたりをクリックして選択しておきます。

 

2.余白の数値を変更してテストしてみる

では余白を調整してみます。

先ほど選択した時に、ディベロッパーツールの下部分にボックスの絵が出てきます。

このオレンジ部分がこのエリアの余白(margin)です。

 

サイズを60から5に変更してテストしてみたいと思います。

60という数値を直接ダブルクリック>5を入力>Enter で決定です。

f:id:yumekuro789:20180802103420j:plain

 

すると、あら不思議!余白が小さくなりました

f:id:yumekuro789:20180802103255j:plain

 

こんな風に、ディベロッパーツールを使うとカスタマイズのテストができるんです。

あくまで画面上だけでのテストなので、この変更に書き変わったわけではありません。

元に戻したい時は「F5」キー(画面再読み込み)で戻せますので、どんどん試してみてください。

 

じゃぁ、実際にこの変更を反映させたい!という時はどうするか?、ですが中級~上級編になるのと長くなりそうなので次回にまとめたいと思います。

(すいません、書くのに力付きました、、)

 

是非ディベロッパーツール利用してみてください♪

 

合わせて読みたい▼