仮想サーファーの波乗り

仮想化エンジニアの日常

プログラミング・SNS分析・仮想通貨・自動化などに関してよく書く雑記ブログ

コピペから脱却!非エンジニアでもブログのデザインを自分好みに編集できるようになる具体的な方法


f:id:virtual-surfer:20180918221139j:plain

こんにちは!都内でWebエンジニアとして働いている仮想サーファーです!

今回は、はてなブログのデザインを自分好みに変更するときに使える方法を書いておきます!

「はてなブログのこの表示気にくわないから非表示にしたいなぁ...。」とか「はてなブログのデフォルトのヘッダーの余白ってなんであんなに広いの?もっと狭くしたい!」など、自分なりに変更したい時ってありますよね。

そんなときに自分好みに変更していく具体的な方法を紹介していきます〜!


そもそもHTMLとCSSとは?

前提として、軽くHTMLとCSSに関しておさらいをしておきます。


HTMLとは、主に文章データを表現するものです。「あ」とブラウザに表示させたければ、以下のようなHTMLを追加すればいいことになります。

<p id="example"></p>


CSSとは、主に文章データを装飾するためのものです。「あ」という情報に、文字は赤色で、文字の大きさは20pxにしたい場合には、CSSに以下のように記入すればいいです。

#example {
    color: red;
    font-size: 20px;
}

ちなみに「#example」という指定で、「exampleというidがついているhtmlに対して、装飾を行う」ということを明示することができます。


このように、HTMLは文章データを表現するためのもの、CSSは文章データを装飾するためのものとざっくり認識しておきましょう。


はてなブログのデザインを自分好みに変更する方法

それでは、はてなブログのデザインを自分好みに変更する方法を書いていきます。


変更したい箇所を決める

まずは、どこのデザインを変更したいのかを決めます。今回は例として、ヘッダーの余白部分を狭くしたいとします。

f:id:virtual-surfer:20180917131555p:plain


検証ツールを開いてhtmlとCSSを確認

変更したい箇所が決まったら、その箇所のhtmlとcssをみて現状どのような設定がされているのかを確認します。現状のコードを確認する方法としては、Google Chromのブラウザの方の場合は、「ページ上で右クリック > 検証(Inspect) > 要素(Elements)」というふうに操作をしていきます。

(※Google Chromを使っている場合、右クリックをしなくても「Command + option + I」というショートカットキーで「検証」ページを開くことができます。)


Image from Gyazo

要素の画面を開くことができたら、上の画像のように左上の「↖︎」ボタンをクリックし、自分の変更したい箇所でクリックをします。ここでは、「仮想化エンジニアの日常」というブログのタイトル部分を選択します。


f:id:virtual-surfer:20180917133628p:plain

「仮想化エンジニアの日常」という箇所でクリックすると、上の画像のように<header id="blog-title" data-brand="hatenablog">...以下略というhtmlにカーソルが当たっていることがわかります。

このことから、「仮想化エンジニアの日常」という文章は、<header id="blog-title" data-brand="hatenablog">...以下略というhtmlで表示されていることがわかりました。


次に、CSSを確認してみます。

f:id:virtual-surfer:20180917133739p:plain

画面右端の「Styles」と表示されている小画面に、先ほど確認したhtmlの「#blog-title」が表示されています。ここで、該当のhtml部分のCSSが表現されていることがわかります。

#blog-title {
    text-align: center;
    margin: 0 0 50px;
}

「text-align: center;」で、「画面の中央に寄せる」ということを示し、「margin: 0 0 50px;」で、「仮想化エンジニアの日常」という文章の書かれたHTML部分の下に50px分の余白をあけることが示されています。


以上で、変更したい箇所の現状のHTMLとCSSを確認することができました。


検証ツール上でHTMLとCSSを編集する

次に、変更したい箇所のCSSを変更してみましょう。

変更したい箇所のCSSにカーソルを当て、クリックすることでその箇所のCSSを編集することができます。
(※編集しても自分のWebページ上でしか反映されないし、再度ページを読み込むと編集した内容は戻るので、気にせず編集してOKです。)

Image from Gyazo

「仮想化エンジニアの日常」という文章の下にある空白をなくしたいので、「margin: 0 0 50px;」の箇所を「margin: 0;」に変えます。変更してEnterをクリックすると、余白が消えてくれました。


以上のことから、もともとあった以下のようなCSSを...

#blog-title {
    text-align: center;
    margin: 0 0 50px;
}

下のようなCSSに変更すればいいことがわかりました!

#blog-title {
    text-align: center;
    margin: 0;
}


はてなブログのデザインCSSでCSSを追加する

ここまでの作業で、どこのCSSを変更すればいいのかがわかったので、はてなブログのデザインCSSを変更していきます。

Image from Gyazo

今回の場合「text-align: center;」の部分は、はてなブログのデフォルトの設定で設定済みなので、以下のCSSを追加しするだけでCSSが上書きされます。

#blog-title {
    margin: 0;
}


あとは、「変更を保存する」をクリックすれば、自分の理想通りにデザインを変更することが完了!おつかれさまでした〜。


まとめ


以上、

自分の変更したい箇所のHTMLとCSSを確認してはてなブログのデザインCSSを変更するところまでを見ていきましたが、いかがでしたか?

この方法を使えば、はてなブログ上のどこの箇所でも自分の思い通りに編集することができるようになります。他の人が用意したコードをコピーするだけの状態よりも、自分の思い通りに編集できた方が楽しいと思うので、ぜひ他の箇所でも色々とさわってみてください!!


HTMLとCSSに関して少しでも興味が出てきたなら、progateのHTMLとCSSもやってみるのおすすめです。

僕自身も2年前にコードを見たこともなかった状態から、progateを触り始めて、気づいたらエンジニアのインターンをして、気づいたらエンジニアとして就職してましたw

prog-8.com


では!