(Microsoft Word - \203u\203\215\203O\215\354\220\254.doc)

Size: px

Start display at page:

Download "(Microsoft Word - \203u\203\215\203O\215\354\220\254.doc)"

ことことこたに
7 years ago
Views:

1 ブログをカスタマイズ! ~HTML HTML CSS を使ってブログを自分の好みにしちゃおう ~

2 ブログを登録しよう! ブログってなんだろう? ブログとはインターネット上で管理者が記事を投稿する私的ニュースサイトあるいは日記的なもののこと個人のホームページを持たなくても簡単に自分が書きたいことを作って載せることができる (ただしブログ提供会社の規約に違反するものはダメ!)HTML CSS を知らない人でも簡単にブログデビューできますブログの登録をしよう! ブログは誰でも簡単に始められますインターネット上では無料でブログを作って載せることができるサイトは多くありますブログデビューまでのながれ気に入ったブログサイトに登録をしよう自分のパスワードや管理者名を決めてメールアドレスなど必要事項を記入するブログのジャンルを決めたりタイトルを決める次に自分好みのテンプレートを選ぶまたは自分で製作して登録するブログを書いてみる - 1 -

(ただしブログ提供会社の規約に違反するものはダメ!)HTML CSS を知らない人でも簡単にブログデビューできますブログの登録をしよう!

3 ブログをカスタマイズするをカスタマイズする! ブログのレイアウトを自分好みにアブログをカスタマイズするという意味はブログのレイアウトをレンジするンジするいうことブログは HTML HTML CSS CSS を使って書くことができますでは実際にブログをカスタマイズしてみよう! このようなレイアウトで最初に登録していましたここから自分好みにレイアウトを変更していきますレイアウトに必要なことはもちろん HTML と CSS です - 2 -

4 タイトル部分に加工した画像を入れ込みますココ! <h1><a href="<%url>" accesskey="0" title="<%blog_name>"><img src="タイトタイトル画像のパス" width=" 画像の幅 " height=" 画像の高さ" alt=" 画像が表示されない場合の代替テキスト"></a></h1> この文法を HTML の<body>~</body>の間に挿入する <div id="container"> <h1><a href="<%url>" accesskey="0" title="<%blog_name>"><img src=" imgs-27.fc2.com/p/o/c/poccharihi 27.fc2.com/p/o/c/poccharihitsuji/happy_wedding2.jpg" width="750" height="241" alt="ぽっちゃりひつじの部屋 "></a></h1> </div> - 3 -

が表示されない場合の代替テキスト"></a></h1> この文法を HTML の<body>~</body>の間に挿入する <div id="container"><!

5 次のように加工画像に変更になりました! 今度はここの空間をなくします HTML に <div id="branding"> <h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1> <p><%introduction></p> </div> と入力されています CSS に div#branding {width : 760px; height : 250px;} と入力されています - 4 -

6 CSS の height の値を変更します div#branding {width : 750px; height : 60px;} 次のように空間がなくなりました枠で囲った記事タイトルタイトルカレンカレンダーなどダーなどコンテンツに変更を加えます - 5 -

7 最初の CSS 部分の記述 body {color : #333;( 文字の色 ) background: url(" ") top left repeat; ( 背景画像の繰り返し) background-color : #fff; ( 背景の色 ) text-align : center; ( 古い IE でセンタリングする) line-height : 1.5; ( 行間 ) font-size : x-small!important; ( 古い IE の文字サイズ) voice-family : "\"}\""; ( 音声の種類を設定 ) 優先させる記号 voice-family : inherit; ( 音声の種類を設定 ) font-size : small!important; }(ブラウザ用の文字サイズ) 赤色の部分を削除しますこの部分は背景画像を繰り返し表示すると命令されていました消すと下のように青っぽい背景が消えました! - 6 -

$important; ( 古い IE の文字サイズ) voice-family : "\"}\""; ( 音声の種類を設定 ) 優先させる記号 voice-family : inherit; ( 音声の種類を設定 ) font-size :$

8 background-color : #fff; は背景の色です赤色の部分を消したので命令されている白が反映されています他の色に変えます Background ackground-color:# color:# に変更しました茶色のような色に背景全体が変更されました <body>~</body>の中に <div id="container">~</div><! </div>が記述されています container はサイト全体を包含するブロックですサイト全体の幅の調整やレイアウトのセンタリングなどはこのブロックに対してスタイルを設定する事で行いますこの中には記事の記述コメントの記述カレンダーなどコンテンツのレイアウトがこの中で更に細かく記述されています - 7 -

id="container"><!-- container -->~</div><! </div><!

9 最初の CSS 部分の記述 div#container {width : 760 px; margin-left : auto; margin-right : auto; background-color : transparent ; text-align : left;} 赤いで囲った中に変更を加えます div#container {width : 750px; margin-left : auto; margin-right : auto; background-color : #ffffff ffffff; text-align : left;} 赤い部分が変更された部分です - 8 -

った中に変更を加えます div#container {width : 750px; margin-left : auto; margin-right

10 次のように変更されました! 今度はで囲っている部分の背景を変更します - 9 -

11 * 記事のタイトル部分 * div.section h2 {margin-bottom : 10px; background : url(" /sample_bk_articles_title.gif") top left t repeat;(サンプル画像 ) font-size : small; ( 古い IE の文字サイズ) border-bottom : 1px solid #333; voice-family : "\"}\"";( 音声の種類を設定 ) voice-family : inherit; font-size : medium;} (ブラウザ用の文字サイズ) 赤い文字部分を消して代わりに div.section h2 {margin-bottom : 10px; border:solid:1px, r:solid:1px, width:50px; height:20px; background-color:#f5f5f5 color:#f5f5f5; font-size : small; border-bottom : 1px solid #333; voice-family : "\"}\""; voice-family : inherit; font-size : medium;} と変更します

inherit; font-size : medium;} (ブラウザ用の文字サイズ) 赤い文字部分を消して代わりに div.

12 背景の画像がなくなりましたまだ変更されていない部分同じようにして secondary-column に最初から設定されているサンプル画像を削除し新たに設定していきます div#secondary-column h2 { border:solid:1px, width:50px; height:20px; background-color:#f5f5f5; color:#f5f5f5; font-size : x-small; border-bottom : 1px solid #333; text-align : center; voice-family : "\"}\""; voice-family : inherit; font-size : small;} 赤い部分を記述しなおしたようにコンテンツの後ろの画像を全て変更します

$"\"}\""; voice-family : inherit; font-size : small;} 赤い部分を記述しなおしたようにコンテンツの後ろの画像を全て変更します$

13 下のように設定が変わりました! このように画像を入れたり背景の色を変えたりとあなた好みのレイアウトをしてブログをさらに楽しみましょう!

HTML5&CSS3 レッスンブック

HTML5&CSS3 レッスンブック STEP 7-6 Chapter 7 FINISHING & ARRANGE style.css STEP 7-6 で置き換えた style.css の設定です DESIGN POINTS デザインのポイント Google Fontsの Bowlby One で表示ナビゲーションメニューの各リンクは四角形にデザインコンテンツは罫線で囲まないメインコンテンツの