ブロプー Blog

こんにちは！さいとうです
３連休が終わってしまいましたね・・・
３連休はどこにも出かけなかった私ですが・・今週末は北陸に旅行にいってきます
北陸初上陸なのでとっても楽しみです

それでは今回は、livedoorテンプレートのカスタマイズ、今度はメインである記事部分のCSSを変えてみましょう

記事部分のHTMLは
<div class="article-outer hentry">～～～<!-- articleOuter End -->
です。この部分と対応するCSSを編集していきます。

これは第１３回　livedoorのテンプレートをカスタマイズ～３と同じような形です。
今回ベースとしたテンプレートには、記事全体を囲うdivが３つ（div.blog-title-outer, div.blog-title-outer-2, div.blog-title-outer-3）あります。この３つを上手くつかって画像を指定しましょう

右の画像のように記事のタイトルの前に、可愛いひよこの画像をつけようと思います

記事のタイトル部分のHTMLは<div class="article-title-outer">～～～</div>です。
.article-title-outerにひよこの画像を表示させて、h2のmarginで文字の位置を整えます。

今回ベースとしたテンプレートのソースには、使われていないdivが沢山含まれています。他の人が書いたソースはわかりづらいですが、がんばりましょう

「なんだかわかりにくいなぁ・・・」「もっと自由にテンプレートを作りたいのに」と思ったら、１から自分でHTMLとCSSを作ってしまうことをオススメしますその方がHTML&CSSの知識がある人には作りやすいと思いますょ。

ちょっと知識に自信がない人は、まずはCSSだけを編集して背景や色、大きさを変えるだけが良いでしょう。そうやって少しずつ勉強していけば、１から作れるようになりますよ

次回は、私が作成したテンプレートに見つかったバグと修正方法をお伝えします。
更新は１０月２１日（火）の予定です。お楽しみに

ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ