ブロプー Blog

みなさん、はじめまして。Webデザイナー見習いのさいとうと申します

ところでみなさんは、ブログのオリジナルテンプレートを作りたいと思ったことはありませんか？
「配布されているテンプレートでは、気に入ったデザインがない」
「自分でデザインしたテンプレートを作りたい」
そう思ったら、ぜひオリジナルテンプレート作りにチャレンジしてみましょう

・・・ということで、私の開発ブログをスタートいたします
お楽しみに・・・

こんにちは！さいとうです
それではいよいよ、私の開発ブログをスタートします

ブログのテンプレートを作るには、最初にどんなブログを作りたいのかデザインを考えるところからスタートしましょう
それでは、まずはブログがどのような構造になっているか考えてみます

ブログで重要なのはヘッダー、メイン、メニューの３つでしょう。
フッターはデザインに合わせて、あってもなくても良いと思いますよ

• ヘッダー

  ヘッダーにはブログのタイトルと説明文を記述します

• メイン

  ブログで一番大事な本文を書くスペースです。
  記事のタイトル、投稿日時、本文、コメント、トラックバック、タグ、キーワードなど。

• メニュー

  ブログの最新記事一覧や、コメント・トラックバックリスト、リンク、プロフィール、プラグインなど。

ブログはこのように主に大きく３つのパートから成っているので、その辺をふまえてデザインを考えると大変作りやすくなります。
デザインに自信がない人は、レイアウトから考えていきましょう

レイアウトのお話については次回の更新で書いていきます
次回の更新は７月２２日（火）の予定です。お楽しみに

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

こんにちわ！さいとうです
最近ホントに暑い日が続いていますね
そんな中、２～３日前まで普通に動いていた、私の家のクーラーが壊れてしまいましたよりによってなんで夏本番ってときに・・・クーラーの有難さを感じる毎日です

それでは、今回はブログのレイアウトについて考えてみましょう?。

フッターを含めないで考えると、次の５つのレイアウトが一般的かなぁと思います。
このレイアウトはブログだけでなくWebページ制作の解説でもよく見られますね

２カラム ３カラム

フッターがつくとこのような形になります。

２カラム＋フッター ３カラム＋フッター

使い勝手が良くないかもしれませんが、次のようなレイアウトもありますね

アメブロの場合はレイアウトが決まってしまっているので、このレイアウトは使うことができません

【２カラム】

メインの幅が広くとれるので、沢山文章を書いたり、写真を載せたりする場合に向いているのではないでしょうか？
メニューに載せるコンテンツが多い場合には縦に長くなり、メニュー内のプラグインを見る為にスクロールしなければいけないのが難点です

【３カラム】

メニューがみやすくなり、全体的ににぎやかな印象になります
アメブロの芸能人ブログはほとんどが３カラムですね。

レイアウトを決めたら、配色やフォント、イラスト・写真などのグラフィックを考えます

レイアウトにとらわれすぎると、面白くない普通のテンプレートになってしまいます
レイアウトを考えずに見た目重重視で考えると自由なデザインができるので良いと思うのですが、コーディングをするのが大変になってしまいます。。難しいところですね・・・

次回はブログのデザインを考えるときの注意点などなどを書こうと思います！
更新は７月２８日（月）の予定です。お楽しみに

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

毎日暑いですね夏バテしてませんか
こんにちは！斉藤です
昨日うちのクーラーが１週間ぶりに復活して、汗だらだらの生活から開放されましたクーラーってすばらしいなぁと思いながら使っています

それでは、今回はブログのデザインを考えるときの注意点について書いていきます。
まず、ブログのデザインと一般的なWebサイトとのデザインで異なる点は、構造を考えてデザインしなければならない箇所が多いというところではないでしょうか

通常のWebサイト制作でも、縦幅（height）はコンテンツの量によって左右されるので、どれだけ縦に長くなってもいいように背景画像を考えて作りますが、ブログの場合はブログ全体の背景以外にも構造を考えてデザインしなければならない箇所があります

それは、メニュー内のプラグインと記事を囲んでいる枠です。プラグインと記事を囲んでいる枠は、何度も繰り返し使用され、縦幅がコンテンツの量によって変わってきます

例えば、プラグインのタイトルの背景をこのような画像にしたとします。

プラグインタイトルの文字数が少ない場合は問題ないのですが、文字数が多い場合は、画像からはみ出してしまいます

CSSで横幅を指定して黒い線の外にはみ出さないようにすると、今度は文字が２列になり、下側がはみ出してしまいます

このような状態を回避するために、文字数が多くなっても良いように作らなければなりません。
右の図のように画像を３つにわければ、文字数がどんなに増えようと、真ん中の背景画像が繰り返されるので、文字が画像からはみ出すことがなくなります

アメブロの場合はカテゴリー、トラックバック、などプラグインのタイトルごとに背景画像をかえることができるので、文字を画像にすれば、画像を３つに分ける必要はありません。FC2やlivedoorではプラグインごとに背景を変えることはできないので、このように画像を３つに分ける必要があります

次回もブログのデザインを考えるときの注意点について書きます！
更新は８月４日（月）の予定です。お楽しみに

ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ
近々新しいテンプレートが追加されるとかされないとか・・・

こんにちは！斉藤です
８月になりましたねみなさんはどこか旅行にいく予定はありますか？
私は先日、長野にいってきました
おそばがおいしかったですよ

それでは、今回はブログのデザインを考えるの注意点！のつづきです。
ブログのデザイン考える（３）で、文字数が増えても対応できる方法を紹介しましたが、実はあの画像では意図した通りにはなりません

繰り返し表示させるとこのようになってしまいます
繰り返し表示部分の画像の上下の色が違うから、繋がらなくなってしまってるんですね。。

右の画像のように繰り返し表示させても画像が繋がるように、３つに分けた画像の真ん中の画像は、縦方向に変化するグラデーションや模様を付けない方が良いでしょう

メニューエリアの横幅

メニューエリアの横幅（width）を170px以下にしてしまうと、右の図のようにプラグインがメニューエリアからはみ出てしまい、ブログのデザインが崩れることがあります（プラグインの横幅が170pxを超えるものもあります）デザインが崩れないよう、メニューエリアの横幅は170px以上とっておくとよいでしょう

ブログのデザインを考える（１）～（４）を踏まえてデザインを考えれば、テンプレート作成がスムーズに進むと思います

次回はテンプレート制作の流れについて書きます！
更新は８月１１日（月）１３日（水）の予定です。お楽しみに
（※多忙の為、更新日を変更しました）

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

こんにちは！斉藤です
私はお仕事がありますが、世間はお盆休みですね！この時期は通勤電車がちょっとだけ空いているのでなんとなく嬉しいです

それでは今回は、ブログテンプレート制作の流れを簡単にご説明しようと思います

ブログテンプレートの制作には、まずベースをなるHTMLとCSSのソースを用意します。FC2とlivedoor用のテンプレートを作る場合、HTMLとCSSをよく理解している人はベースとなるソースを用意する必要はありません。１からどんどん自分でソースを書いていっちゃってください

HTMLとCSSがよくわからない場合と、アメブロのテンプレートを作るときは、ベースにしたい既存のテンプレートからHTMLとCSSのソースをコピーしてきます

ソースをどこからコピーしたらいいのかわからない人は、ブロプーのマニュアルにあるテンプレートの適用ページを見てください。ブロプーのテンプレートを貼り付けるテキストボックスに表示されているテキストをコピーしてくればOKです

アメブロのHTMLの場合はベースにしたいテンプレを適用させたブログを開いて、
Windowsなら右クリックで「ソースを表示」、Macなら上にある「表示」から「ソースを表示」をクリックするとアメブロのHTMLソースが表示されるので、全選択してコピーしてください。

用意したHTMLとCSSソースをDreamweaverなどで編集して制作していきます
HTMLやCSSについて、詳しくは書きませんので書籍や他のサイトをご覧下さい。

次回はコーディングの注意点など書きます
次回の更新は８月１８日（月）１９日（火）の予定です。お楽しみに

新作テンプレートが追加されました！ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料です

こんにちは！斉藤です
最近、日が落ちるのが早くなってきたり、虫の音が聞こえてきたり・・・
秋の訪れを感じますね
といいつつ、まだまだ暑い日が続くので油断はできません

それでは今回は、ブログをコーディングする際に注意するポイントを挙げます

カレンダーのテーブル（table）の横幅もプラグイン同様、メニューエリアよりも広くなると、ブログのデザインを崩す場合があります。
カレンダーのテーブルの横幅はメニューエリアよりも小さくしておきましょう

また、テーブルの横幅がメニューエリアよりもかなり小さい場合があります。
デザインが崩れるといったような問題はありませんが、見栄えをさらに良くする為にも、カレンダーのテーブルの横幅は忘れずに指定しておいた方がいいと思います

a:hover, a:visited

ブログのデザインに合わせて<h1>の文字色を変えたい場合、<h1>のCSSのcolorを変更すればよいのですが、<h1>には<a>が含まれているため、<h1>のcolorを変更しても色は変わりません。
そこで、CSSでh1のaとa:hoverとa:visitedのcolorの設定もしておく必要があります。
また、<h1>以外に<h2><h3>の中にも<a>が含まれていることがあるので、気をつけてください

次回はアメブロでの注意点です
次回の更新は８月２５日（月）の予定です。お楽しみに

新作テンプレートが追加されました！ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料です

こんにちは！斉藤です
最近、雨ばかりで涼しい日が続いていますね！
もうこのまま秋になってしまうんでしょうか・・・
そろそろ秋服の準備が必要かな？と思っている今日この頃です

それでは今回は、アメブロ用テンプレートについて書いていきます

アメブロはCSSしか変更することができません

• CSS編集方法

  CSSの編集方法は、アメブロのスキンの中からベースとするスキンを選択し、編集していきます。セレクタ名は選択したスキンのものを使用することになります。

• カラムの選択

  アメブロはHTMLを編集することができないので、スキンを選択する時点で２カラムか３カラムか選ばなければなりません。そして、２カラム用のCSSと３カラム用のCSSに分けて制作することになります

  
  
• スキンの選択

  「読者になる」「ブログを作る」という画像ボタンはCSSではなく<img>で表示させています。このボタンはCSSで他の画像に差し替えることもできるのですが、CSS初心者には難しいかもしれません。このボタンの画像はこのまま使ったほうが良いと思います。（この画像を変更できるぐらいのCSSの知識があればこのブログを見る必要はないと思います）

  自分の考えたデザインと合うイメージの画像ボタンを探すのは大変です。スタンダードスキンの中にある「グレイ」などがシンプルで使いやすいと思うので、「グレイ」をベースとしてプロパティを編集していけば良いでしょう

  
  
• CSS編集時に使用するHTMLソース

  CSSしか編集できませんが、HTMLソースがないとローカルで表示させて確認することができません。そこで、ベースとなるテンプレートを反映させたブログからHTMLソースをコピーしてきて、それを使ってローカルで確認しながら作業します。

  このときにトップページだけでなく、「コメント」ページと「記事一覧」ページのHTMLソースも保存してください。つまり３つのHTMLソースが必要なのです。コメント入力欄や記事一覧のデザインは忘れがちになっていましますが、細部まで拘ることが大切です！

次回はFC2とlivedoor用テンプレートについて書きます
更新は９月１日（月）の予定です。お楽しみに

新作テンプレートが追加されました！ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料です

こんにちは！斉藤です
ここのところほんとに雨ばかりです・・・
そして雷もよくなりますね
特に先週の雷は、家が震えるぐらい凄まじいものでした

それでは今回は、FC2とlivedoor用テンプレートについて書いていきます

FCとlivedoorは、アメブロとは異なり、HTMLとCSSの両方を自由に編集することができます

自由度が高いので、HTML&CSSのスキルに自信のある人は１から自分で作っていくことが可能です。自信がない人はシンプルな公式テンプレートをベースとして編集していくと良いでしょう。

そしてこの２つはほぼ同じCSSを使うことができます。どちらかのサービス用のCSSを作成すれば、ほとんど修正することなく、そのままもう片方のサービスに適用させることができるのです
それではポイントを少しだけ

FC2とlivedoorには独自タグというものがあります
独自タグはHTMLソース中で使用するもので、記事内容や投稿されたコメントの数などを表示させるものです。そして独自タグはFC2とlivedoorで異なります。
例えば本文を表示させる独自タグは、livedoorでは<$ArticleBody$>、FC2では<%topentry_body>となります。
HTMLを組んでから、それぞれの独自タグを入れていけば、livedoorとFC2テンプレート用のHTMLがすぐできちゃうのです

livedoor Blogには特殊タグというものがあります。
特殊タグを使用すると、予め組まれたHTMLのセットが出力されます。
例えば、<$PluginList_A$>と記述した場合、ブログのHTMLでは
<div class="sidetitlebody">
<div class="sidetitle"> プラグインのタイトル < /div>
</div>
<div class="sidetop"> < /div>
<div class="side">
<div class="sidebody"> プラグインの内容 < /div>
</div>
<div class="sidebottom"> < /div>
と書き出されます。

特殊タグの内容は変更することができないので、FC2のHTMLをlivedoorに合わせて組んでいけば、ほとんど同じＣＳＳを使うことができるのです

次回はlivedoor用テンプレートについて書きます
更新は９月８日（月）の予定です。お楽しみに

新作テンプレートが追加されました！ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料です

こんにちは！斉藤です
みなさん！今週末は３連休ですよ
暑さもちょっと和らいだこの時期は、お出かけするのにちょうどいい時期ですね
ちなみに私は北海道に行く予定です

それでは今回は、livedoor用テンプレートについて書いていきます。

必須タグ

livedoor Blogには必須タグがあります。
$BlogHeader$, $Advertise$, $LDServices$ の３つです。

詳しくはこちらに書いてあります → DesignTemplate/Tag/必須タグ

独自タグ
TrackBackForm ／ TrackBacksList ／ CommentForm ／ CommentsList

これらのタグを使用するとコメント、トラックバックの機能を簡単に埋め込むことができます
CommentAuthor : コメント記入者名
CommentEmail : コメント記入者のメールアドレス
など、細かく指定できるタグもありますが、技術に自信のない人やそこまでこだわらない人にはこのタグを使うと良いでしょう

詳しくはこちらに書いてあります → カスタマイズのまとめWiki

プラグインの表示

PluginList_A :「A」設定のプグイン表示
PluginList_B :「B」設定のプグイン表示

この二つのタグを使用するとプラグインが表示され、HTMLでは以下のように書き出されます。

<div class="sidetitlebody">
<div class="sidetitle">～～</div>
</div>
<div class="sidetop">～～</div>
<div class="side">
<div class="sidebody">～～</div>
</div>
<div class="sidebottom">～～</div>

.sidetitlebody, .sidetitle, .sidetop, .side, .sidebody, .sidebottom
この６つのclass名は変更することができません。
どのクラスの背景を繰り返しにして、どのクラスの背景にボックスの上部と下部の画像を表示させたらいいのか考えながらコーディングする必要があります

HTML

livedoorのHTMLは４種類用意する必要があります

• トップページ： 最新の記事がいくつか表示されます。表示される記事の数は、設定によって変わります。
• 個別記事ページ：１つの記事とコメント欄、トラックバック欄が表示されます。コメントとトラックバックを禁止にしている場合には、記入フォームは表示されません。
• カテゴリアーカイブ：あるカテゴリーの記事のみが表示されます。
• 月別アーカイブ：ある月の記事のみが表示されます。

一つのページでしか使われないCSSセレクタもあるので、それも忘れずに設定してくださいね

javascript

個別記事ページだけに使用されているjavascriptがあります。<title>～</title>の下に記述されている２行のところです。

<script type="text/javascript" src="http://parts.blog.livedoor.jp/js/emoji.js"><script>
<script type="text/javascript" src="http://parts.blog.livedoor.jp/js/misc.js"></script>

このスクリプトを削除してしまうと、絵文字とトラックバックが使えなくなってしまうので気をつけてください

次回はFC2用テンプレートについて書きます
更新は９月１６日（火）の予定です。お楽しみに

新作テンプレートが追加されました！ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ

こんにちは！斉藤です
私はこの３連休で北海道にいってきましたー
天気がとってもよくて最高でした
北海道は半そでだと寒いかな？？と思ってたんですが、
ちょっと暑いぐらいでしたよ

それでは今回はFC2用テンプレートについて書きます

• 独自タグ

  livedoorと同様に、FC2にも独自タグがあります。

  詳しくはこちらに書いてあります →テンプレート中に使える変数一覧

• プラグインの表示

  FC2の場合は
  <!--plugin_first(second,third)-->～<!--/plugin_first(second,third)-->
  がプラグインを表示させるタグです。
  この中に
  <%plugin_first(second,third)_title>
  <plugin_first(second,third)_content>
  などを入れこんで、プラグインのタイトルやコンテンツを表示させます

  <%plugin_first(second,third)_title>
  <plugin_first(second,third)_content>
  などのクラス名をlivedoorの
  .sidetitlebody ／ .sidetitle ／ .sidetop ／ .side ／ .sidebody ／ .sidebottom
  と同じものにすれば、livedoor用につくったメニュー部分のCSSをFC2でもそのまま使えますよ

• 広告の表示

  広告を表示させるタグ
  <%ad> <%ad2>
  がテンプレート中に含まれていないとテンプレートを更新することができません 必ず記述してください

次回はlivedoorのテンプレートをちょっとだけ変更してみましょう
更新は９月２２日（月）の予定です。お楽しみに

新作テンプレートが追加されました！ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ

こんにちは！斉藤です
だんだんと涼しくなってきてますね・・・
みなさん、もう秋服の準備はしましたか？？
私は先日、ジャケットを購入しました
これでいつ寒くなっても大丈夫です

それでは今回はlivedoor Blogを例にして、ＣＳＳをちょっとだけ変更して、カスタマイズしていこうと思います

今回ベースにするテンプレートは「デフォルト2008（桃,2カラム）」にしました。ベースにするテンプレートはシンプルな方が作りやすいと思いますよ

まずは、ベースにするHTMLと CSSのソースを用意しましょう

CSSは「カスタマイズ/管理 」＞「デザインのカスタマイズ」ページからコピーしてきます。

HTML は独自タグが使われているため、実際にどのように反映されるのかローカルでは確認しづらくなっています
確認用として、ベースとしたテンプレートを反映させた実際のブログからソースをコピーしてきましょう。トップページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブの４つを用意してください。

カテゴリ分けをした記事を投稿していないとトップページ以外は表示されないので、まだ記事が投稿されてない場合には適当にテストページを投稿してからコピーしてください

今回はCSSだけを編集していくので、確認用のHTMLだけあれば良いのですが、HTMLも編集していく場合には、「カスタマイズ/管理」＞「デザインのカスタマイズ」から、HTML４種類（トップーページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブ）もコピーしてきましょう

CSS１つとHTML４つが用意できたでしょうか？
準備が整ったら、次回はいよいよCSSを編集していきます

更新は９月２９日（月）の予定です。お楽しみに

新作テンプレートが追加されました！ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ

こんにちは！斉藤です
今日は寒いですねみなさん風邪をひいたりしていませんか？？
寒いのは苦手なんですが、買ったばかりのジャケットが着れるので、ちょっとうれしいです

それではlivedoorの公式テンプレートからコピーしてきたソースをベースにして、自分のオリジナルのテンプレートを作っていきます
今回は簡単にCSSだけを編集して、デザインをかえてみましょう

記事の文字を小さくしてみましょう。

記事の本文を表示させるタグは<$ArticleBody$>です。このタグを囲っているclass".article-body-inner"のfont-sizeを12pxに変更してみましょう
現在のCSSにはarticle-body-innerというクラス名は存在しないので、
.article-body-inner { font-size:12px; }
をCSSに追加してみてください。

追加したら再構築します。どうですか？文字が小さくなりましたよね？？

livedoorのプラグインは
第９回　ブログのコーディング（４）livedoorについて
でお話ししたように

<div class="sidetitlebody">
<div class="sidetitle">～～</div>
</div>
<div class="sidetop">～～</div>
<div class="side">
<div class="sidebody">～～</div>
</div>
<div class="sidebottom">～～</div>

このような構造になっています。ここのスタイルシートを変更して、背景をつけます
ちょっと長くなったので、次回に続きます

次回はプラグインのタイトルに背景を表示させる方法の、続きです！
更新は１０月６日（月）の予定です。お楽しみに

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

こんにちは！斉藤です
今週末は１ヶ月ぶりの３連休です みなさんはどこか旅行にいかれますか？？
私は、友達と買い物にいって、あとは家でゆっくりと・・・

今回は第１２回の続きです。
それでは、プラグインのタイトルに背景をつけてみましょう

まずはどのようなサイドバーのデザインにするか考えましょうどのようなデザインでも、プラグインの内容によって縦の長さが変わってきます。ですから、第３回　ブログのデザインを考える（３）で書いたように、縦の長さの変化にも耐えられるように作らなければいけません

サイドバーのタイトルは
<div class="sidetitlebody">
<div class="sidetitle">～～</div>
</div>
この部分です。簡単に済ませるなら.sidetitlebodyに背景画像を表示させ、.sidetitleのmarginを指定して文字の位置を整えるだけです。でもこの方法ですと、文字数が多くなったときや文字を拡大したときに画像からはみ出してしまう可能性があります

第３回　ブログのデザインを考える（３）のように画像を３分割にすればいいのですが、プラグインタイトルのセレクタは.sidetitlebodyと.sidetitleの２つしかありません。さてどうしたらいいでしょうか・・・

プラグインのソースにはあと.sidetop, .side, .sidebodyが残っています。この中から.sidetopを使って、.sidetitlebody, .sidetitle, .sidetopの３つをタイトル部分に使ってしまいましょう。

今度はプラグインコンテンツ部分だけに背景画像を表示させます。コンテンツ部分はボックス画像を３つにわけて.sidetop, .side, .sidebodyのそれぞれに背景を表示させるだけなので、わかりやすいですね。

ここまでで、タイトル部分のみ、コンテンツ部分のみ、背景を表示させる方法を説明してきましたが、タイトル部分とコンテンツ部分、それぞれに背景を表示させたい場合はどうしたらいいのでしょうか？

答えは簡単です。上から順に、.sidetitlebody, sidetitle, .sidetopはタイトル部分に使います。そして残りの.side, .sidebody, .sidebottomの３つをコンテンツ部分に使うのです

全体の場合も同じように背景画像を３つにわけます。
.sidetitlebodyまたは.sidetitleに上部の画像、
.sidetop, .side, .sidebodyには真ん中の画像、
.sidebottomには下部の画像を表示させます。

次回もlivedoor用テンプレートのカスタマイズ方法の続きです
更新は１０月１４日（火）の予定です。お楽しみに

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

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

それでは今回は、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だけを編集して背景や色、大きさを変えるだけが良いでしょう。そうやって少しずつ勉強していけば、１から作れるようになりますよ

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

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

こんにちは！斉藤です
先週ブログで書いたとおり、土日で北陸に行ってきました～
海がキレイで海の幸がおいしくて最高でした～！！

さて今回は、テンプレート作成時の注意点についてです。
実際に私の作ったテンプレートで見つかったバグと、
そのバグをどうやって修正したのかを書きますので、参考にしてください

livedoorブログでは、本文に画像を挿入すると自動でimgタグ内にalign="left"が入るようになっています。これはどういうことかといいますと・・・

こんな風に勝手に文字が回りこみ、画像が左、文字が右になるということです。この回り込みは解除するまでずっと回り込みになります

回り込みを解除しないと下の図のような状態になってしまうことがあります

デザインが崩れていますね・・・ひよこの画像が次の画像にかぶって、しかも外の枠線が切れてしまっています

回り込みを解除するには、記事内の回り込みを解除したいところに<br clear="all" />を記述すればいいのですが、毎回記述するのも面倒ですし、テンプレートを使ってくださる方にHTMLの知識がない場合、この方法は適当とはいえないでしょう

この場合は、記事の次の要素、例えば「続きを読む」や「投稿日時や投稿者が表示される欄」（この図では「さいとう」と書いてある灰色のボックス）のCSSにclear:both;を記述すれば