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

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

 

一歩踏み出せばお洒落なサイトが作れます。

 

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

 

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

 

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

 

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

 

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

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

 

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

 

   

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

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

 

CSSとは、簡単に言うとページのデザインを設定するファイルのことです。
Cascading Style Sheets(カスケーディング・スタイル・シート)の略称となります。

 

私たちが普段書いている記事は、ブログの内容にあたるものですが、こちらはその見た目を設定するものです。
デザインのきれいなサイトは記事も読む気になりますし、動きのあるページは見ていても楽しいですよね。

 

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

 

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

 

CSSの設定方法

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

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

 

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

 

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

 

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

 

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

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

 

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

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

 

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

 

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

  

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

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

 

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

 

【デザインを整えたら収益化も】

アフィリエイトは自分のサイトに広告を表示し、申込の件数によって報酬がもらえる仕組みです。メディアを持っていれば、働かなくても収入が得られるビジネスとして、根強い人気があります。
興味のある方は下記のリンクからご覧ください。

 

【バリューコマース】

【もしもアフィリエイト】

 

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

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