Change Forward

「かわる」をアシストする

【保存版】はてなブログで自由なデザインを設定する方法【CSS】

【保存版】はてなブログで自由なデザインを設定する方法【CSS】

 

【保存版】はてなブログのデザインCSSを設定する方法

 
他のブロガーさんのサイトを巡っている中で、「どうやってこのページをデザインしているんだろう」と思うようなおしゃれなサイトや、「どうしたら動きが付くんだろう」と不思議に思われることはないでしょうか。

 

デザイン性がよいと目にもとまるもの。ついサイトに長居してしまうこともあるかと思います。

 

ブログのデザインテーマはある程度決まっていて、本来は動きもないものですが、そのような設定を可能にする方法があります。

 

CSSの設定です。

 

今回ははてなブログでブログデザインを自由に設定できる、CSSの編集方法をご紹介します。 

 

【この記事を読むメリット 】

  • CSSとは何かがわかる
  • ブログのデザインを自分の好みに変更できるようになる
  • WEBデザイナーへの一歩目を踏み出せる

 

手順は簡単。画面イメージ付きでご説明します。

 

それでは今回のコンテンツです。

 

   

CSSはデザインの設定ファイルである

CSSとは、簡単に言うとページのデザインを設定するファイルのことです。

Cascading Style Sheets(カスケーディング・スタイル・シート)の略称となります。

 

私たちが普段書いている記事は、ブログの内容にあたるものですが、こちらはその見た目を設定するものです。

 

デザインのきれいなサイトは記事も読む気になりますし、動きのあるページは見ていても楽しいですよね。

 

自分のサイトをより魅力的にするために、CSSのアレンジに挑戦してみましょう。

 

見出しの色を変えたり、文字にマーカーを引いたりするデザインもCSS。

 

 

CSSの設定方法

まずはCSSコードを入力する画面に向かいます。

ダッシュボードから「デザイン」アイコンをクリック。

 

【保存版】はてなブログのデザインCSSを設定する方法

 

「カスタマイズ」アイコンをクリック。

 

【保存版】はてなブログのデザインCSSを設定する方法

 

左のメニューエリアで一番下に表示されているのがCSS設定エリアです。

クリックすると枠が広がり、編集ができるようになります。

 

【保存版】はてなブログで自由なデザインを設定する方法【CSS】
 

【保存版】はてなブログで自由なデザインを設定する方法【CSS】

 

【保存版】はてなブログのデザインCSSを設定する方法

 

これでブログのデザインCSSが編集できます!

  

 

デザインの大海原へようこそ!

CSSの設定ができるようになると、サイトのデザインの自由度が格段に上がります。

 

ぜひオリジナリティのある、素敵なサイトデザインを作ってみていただければと思います。

 

今回もご覧くださり、どうもありがとうございました。

 

↓CSSの見方・設定方法入門はこちら↓ 

CSSを編集するときの書き方入門 - Change Forward