広く浅く

広く浅くをモットーに色々なカテゴリで情報を発信します

スポンサードリンク

【初心者向け】はてなブログでCSS!!!簡単なデザイン方法教えます!!

こんばんは。konta_01です。

 

今回は「はてなブログでCSSを利用してみよう」ということで記事を作成します!!!

 

突発的に思いついたので内容が少し薄い、簡単なものになっていますが初めてCSSを触る方にとっては丁度いい内容になるのかなと思います。

 

前回HTMLとCSSについて記事を作成しましたが結構反響がよかったですね!

もしまだ読んでないよーって方がいましたらこちらを読んでからのほうが理解できると思います。

そもそもCSSって?という部分から解説していますのでよかったら是非。 

www.hiroku-asaku.com

 

これを踏まえて今回は「はてなブログでCSSを触ってみよう!」という回です。

ちょっとだけ長いですがお付き合いください!!

ではスタート!!!

はてなブログでCSSを弄るには?

はてなブログでCSSを弄るには

「デザイン」→「スパナマーク」→「デザインCSS」と遷移して

デザインCSS内のテキストエリアにCSSを記述することで記事に反映することができます。

 

1.デザイン

はてなブログにログインし、赤枠のデザインという箇所をクリックします。

hatena_design

デザインの場所

 

2.スパナマーク

画面左に出てくるメニューからスパナのマークをクリックします。

hatena_spanner

スパナマークの場所

 

3.デザインCSS

デザインCSSという箇所をクリックし、開かれたテキストエリアをクリックします。

その後、テキストエリア内にCSSのコードを記入します。

hatena_design_CSS

デザインCSSの場所

 

文字を中央寄せにするには?

これは前回の記事でもやりましたね。

文字を中央寄せにする。「text-align:center」を使いましたね。

今回も同様で「text-align:center」を使って中央寄せにします。

前回CSSを利用するにはHTMLで指定してある範囲に対して適用しましたが今回の適用も完全に一緒です。

手順としては以下の通りです。

「執筆中の記事をHTML編集モードに変更する」→「適用したいpタグにidを付ける」→「CSSのコードを記入する」

 

1.執筆中の記事をHTML編集モードに変更する

今回は以下のテキストを中央寄せにしましょう。

 

『このテキストを中央寄せにしてやる!!!!』

 

中央寄せにしたいテキストが決まったらHTML編集でモードに変更します。

変更の仕方は下記の画像を参照してください!!

 

赤枠をクリックすると2枚目の画像のようにHTML編集モードに切り替わります。

hatena_html

HTML編集モードへ変更

hatena_html2

HTML編集モード

ちなみに現時点での『このテキストを中央寄せにしてやる!!!!』テキストはまだ左寄せですね。

 

hatena_preview

プレビュー

 

 

2.適用したいpタグにidを付ける

先ほど決めた中央寄せにしたい文字のpタグに対してidを付けます。

このpタグに対してidを付けないと任意の文字に対してCSSを適用させることが難しくなります。

HTML編集モードにした後にidというものを付けていきます。

文字の羅列の中から「『このテキストを中央寄せにしてやる!!!!』」という箇所を探し、それを覆っている<p></p>にidを付けるだけです。

idの付け方はこちらです。

<p id="任意の文字"></p>

 

今回は下の画像のように<p id="center"></p>とします。

 

hatena_CSS_id

idの付け方

これで「『このテキストを中央寄せにしてやる!!!!』」というテキストは

「centerと名前のついているpタグ」ということになりました。

この名前付きpタグをデザインCSSで中央寄せにしていきましょう。

 

3.CSSのコードを記入する

「はてなブログでCSSを弄るには」で説明した通りにデザインCSSまで遷移してください。

テキストエリアに

#center{
text-align:center;
}

上記のコードを記入して「変更を保存する」ボタンを押下してCSSの準備は完了となります!

hatena_design_CSS

CSSの記入

変更を保存するボタンを押下した後にプレビューを確認するときちんと中央寄せになっていますね!!

hatena_preview

CSS記入後のプレビュー

以上が「文字を中央寄せにするには?」でした!

 

背景に色を付けるには?

こちらも簡単ですね。

前述と同様デザインCSSでコントロールします。

手順としては「文字を中央寄せにするには?」で行った手順とほぼ同じです。

「執筆中の記事をHTML編集モードに変更する」→「適用したい範囲を設定する」→「CSSのコードを記入する」

 

「執筆中の記事をHTML編集モードに変更する」

こちらについては前述した内容と全く同じなので省略させていただきますね。

 

HTML編集モードに入った状態からのスタートとさせていただきます。

 今回はSTARTからENDまでの範囲に背景色を適用させますね。

 

「START」

 

 1.執筆中の記事をHTML編集モードに変更する

省略

 

 2.適用したい範囲を設定する

今回は「背景に色を付けるには?」という題材の内容にだけ、背景色を適用させるので

背景に色を付けるには?というテキストの始まりから説明終了の終わりの部分までを一括りとして範囲を設定します。

hatena_div_id

idの付け方

今回はSTARTからENDまでに背景色を適用するということなのでそこを一括りにするようにdivで括りました。

このdivタグはpタグと違い段落を作りません。

基本的に範囲を指定して括りたいときはdivタグを用いて範囲指定をしてくれて大丈夫です。

idの付け方は前述した内容と同じです。

 

<div id="bgc">
<p>「START」</p>

<p> END</p>
</div>

 

STARTの前からdivを宣言してENDの後でdivを終了させていますね。

今回のid="bgc"は「back ground color(背景の色)」の頭文字からとっています。

idの名前は自分が分かれば何でもいいのです!!

 

 END

 

3.CSSのコードを記入する

この記事が出来上がるころには既に背景色が適用されていると思いますが、それはここで記載する内容のCSSコードを記入しているからなんですね。

 

例のごとくデザインCSSでコントロールします。

 

デザインCSSの中に下記のコードを記入します。

#bgc{
background-color:#F6CEEC;
}

 

#F6CEEC

これはカラーコードと言って16進数で色を表現しています。

カラーコードについては調べればカラーコード表が出てくるのでそちらを参照してください。

 

CSS記入の画像はこちらです。

hatena_design_CSS

CSSの記入

 「変更を保存する」ボタンを押して完了です。

 

プレビューで確認するとSTARTからENDまでの範囲で淡いピンク色の背景色がついていることが分かりますね。

 

hatena_preview

CSS記入後のプレビュー

以上で、背景色の変更が完了となります。

 

おまけ

今回「文字を中央寄せにする」「背景色を付ける」ということでCSSを弄ってみました。

これらを組み合わせる+αでちょっとおしゃれな見出しを作ってみましょう。

 

まず見出しとなるテキストを決めます。

 

今回は『CSSは楽しいよ!!』というテキストを見出しとして扱いましょう。

 

CSSは楽しいよ!!

↑これが実行結果です。

 

さておさらいです。

まずpタグにidを付けます。今回はid="nice_midashi"にしましょうか!(クッソださいw)

 

そのあとに中央寄せと背景色を付けます。

余談ですがカラーコードを調べてくださいと前述しましたが、実は「blue」とか「red」とかそんな感じの直接的な色の指定もできます。

今回は「skyblue」にしましょうか。

 

ではCSSを書いていきます。

 #nice_midashi{
text-align:center;
background-color:skyblue;
}

 

nice_midashiという名前のついているものに対して、

テキストを中央寄せ、背景を空色にというCSSを書きました。

ここまでは今回の内容ですね。

 

そしてここからが+αです!!

 #nice_midashi{
text-align:center;
background-color:skyblue;
border: dashed #FFBF00;
}

 

このborderというのが枠線を付けるときに使うものでこのようにちょっとおしゃれにデザインすることができます。

 

今回はdashed(点線)を使いましたがsolid(1本線)やthick double(2重線)というように好きなように変更ができます。

 

もしはてなブログでちょっとCSS触ってみたいなという方がいましたら本記事を参考にしてみてはいかがでしょうか!!!!

 

以上、はてなブログでCSSを触ってみるでした^^♪

 

おやすみなさい。