ブログをカスタマイズ! ~HTML HTML CSS を 使 ってブログを 自 分 の 好 みにしちゃおう ~
ブログを 登 録 しよう! ブログってなんだろう? ブログとはインターネット 上 で 管 理 者 が 記 事 を 投 稿 する 私 的 ニュースサイト あるいは 日 記 的 なもののこと 個 人 のホームページを 持 たなくても 簡 単 に 自 分 が 書 きたいことを 作 って 載 せることができる (ただし ブログ 提 供 会 社 の 規 約 に 違 反 するものはダメ!)HTML CSS を 知 らない 人 でも 簡 単 にブログデビューできます ブログの 登 録 をしよう! ブログは 誰 でも 簡 単 に 始 められます インターネット 上 では 無 料 でブログを 作 って 載 せるこ とができるサイトは 多 くあります ブログデビューまでのながれ 気 に 入 ったブログサイトに 登 録 をしよう 自 分 のパスワードや 管 理 者 名 を 決 めて メールアドレスなど 必 要 事 項 を 記 入 する ブログのジャンルを 決 めたり タイトルを 決 める 次 に 自 分 好 みのテンプレートを 選 ぶ または 自 分 で 製 作 して 登 録 する ブログを 書 いてみる - 1 -
ブログをカスタマイズする をカスタマイズする! ブログのレイアウトを 自 分 好 みにア ブログをカスタマイズするという 意 味 は ブログのレイアウトを レンジする ンジする いうこと ブログは HTML HTML CSS CSS を 使 って 書 くことができます では 実 際 にブログをカスタマイズしてみよう! このようなレイアウトで 最 初 に 登 録 していました ここから 自 分 好 みにレイアウトを 変 更 していきます レイアウトに 必 要 なことはもちろん HTML と CSS です - 2 -
タイトル 部 分 に 加 工 した 画 像 を 入 れ 込 みます コ コ! <h1><a href="<%url>" accesskey="0" title="<%blog_name>"><img src="タイト タイトル 画 像 のパス" width=" 画 像 の 幅 " height=" 画 像 の 高 さ" alt=" 画 像 が 表 示 されない 場 合 の 代 替 テキスト"></a></h1> この 文 法 を HTML の<body>~</body>の 間 に 挿 入 する <div id="container"><!-- container --> <h1><a href="<%url>" accesskey="0" title="<%blog_name>"><img src="http://blog-imgs 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 -
次 のように 加 工 画 像 に 変 更 になりました! 今 度 はここの 空 間 をなくします HTML に <div id="branding"><!-- branding --> <h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1> <p><%introduction></p> </div><!-- /branding --> と 入 力 されています CSS に div#branding {width : 760px; height : 250px;} と 入 力 されています - 4 -
CSS の height の 値 を 変 更 します div#branding {width : 750px; height : 60px;} 次 のように 空 間 がなくなりました 枠 で 囲 った 記 事 タイトル タイトル カレン カレンダーなど ダーなど コンテンツに 変 更 を 加 え ます - 5 -
最 初 の CSS 部 分 の 記 述 body {color : #333;( 文 字 の 色 ) background: url("http://templates.blog.fc2.com/template/sample_2/sample_bk_body.gif ") 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 -
background-color : #fff; は 背 景 の 色 です 赤 色 の 部 分 を 消 したので 命 令 されて いる 白 が 反 映 されています 他 の 色 に 変 えます Background ackground-color:#663333 color:#663333 に 変 更 しました 茶 色 のような 色 に 背 景 全 体 が 変 更 されました <body>~</body>の 中 に <div id="container"><!-- container -->~</div><! </div><!-- /container -->が 記 述 されてい ます container はサイト 全 体 を 包 含 するブロックです サイト 全 体 の 幅 の 調 整 やレイアウトのセンタリングなどはこのブロックに 対 してス タイルを 設 定 する 事 で 行 います この 中 には 記 事 の 記 述 コメントの 記 述 カレンダーなど コンテンツのレイアウト がこの 中 で 更 に 細 かく 記 述 されています - 7 -
最 初 の 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 -
次 のように 変 更 されました! 今 度 は で 囲 っている 部 分 の 背 景 を 変 更 します - 9 -
* 記 事 のタイトル 部 分 * div.section h2 {margin-bottom : 10px; background : url("http://templates.blog.fc2.com/template/sample_2 /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;} と 変 更 します - 10 -
背 景 の 画 像 がなくなりました まだ 変 更 されていない 部 分 同 じようにして 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;} 赤 い 部 分 を 記 述 しなおしたように コンテンツの 後 ろの 画 像 を 全 て 変 更 しま す - 11 -
下 のように 設 定 が 変 わりました! このように 画 像 を 入 れたり 背 景 の 色 を 変 えたりと あなた 好 みのレイアウトをして ブログをさらに 楽 しみましょう! - 12 -