ブロプー 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;を記述すればです

clear:both;を記述するとこんな感じに・・・

これで<br clear="all" />を記述しなくてもデザインがくずれなくなります

私は「imgタグ内にalign="left"が入る」ということを知らなかったので、テンプレートを作って画像を入れてみたら、デザインが崩れてしまいビックリしました

次回もテンプレート作成時の注意点です。更新は１０月２７日（月）の予定です。お楽しみに

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

こんにちは！さいとうです
最近は暗くなるのが早いですよねもう17時には暗くなってます
冬が近づいてきている感じがしますね・・・！

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

記事内の画像と動画のサイズ

最近は記事内に動画をいれこむことのできるブログがとても多いですね
携帯カメラの機能も向上して、大きくて鮮明な画像をブログに載せている人もたくさんいます

私自身は画像も動画もブログに載せたことがあまりなかったので、画像・動画のサイズなんて気にしてなかったんです
サイズを気にせずにテンプレートを作っていたら・・・

こんなことになってしまいました
動画が大きくて記事の枠からはみ出し、プラグインが見えなくなってしまってます・・これでは困ります

とりあえずどんなサイズの動画を載せてもプラグインにかぶらないようにするため、記事を囲うdivにoverflow:hidden;を記述してみました。
プラグインはみえるようになりましたが、動画が切れてしまっています・・・

これ以上はどうすることもできないので、「このテンプレートは～px以下の動画に対応しています」と注意書きを付け加え、大きな動画を入れないようにするしかありません

ブロプーでは不具合情報ページに対応している画像・動画の情報を記載しています。

動画を例に挙げて説明しましたが、写真やイラストといった画像でも同じことが言えます。写真やイラスト、動画をたくさん載せるブログを作りたい場合は、２カラムなどにして、記事のボックスの横幅を広くとるデザインにすると良いでしょう

次回もテンプレート作成時の注意点です。更新は１１月４日（火）の予定です。お楽しみに

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

こんにちは！さいとうです
昨日まで３連休でしたが、１１月はなんともう１度３連休があります
みなさんはどこかお出かけの予定はありますか～
私は九州に旅行に行く予定ですよ

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

livedoorブログの絵文字

livedoorブログには、推奨タグというものがあります。推奨タグは必ず記述しなければいけないというものではないのですが、記述しなかった場合不具合を起こす可能性があります。

私は必須タグだけあれば大丈夫だと思っていたので、３つの推奨タグを記述しなかったら、コメント欄で使う絵文字機能が使えないというバグが起きてしまいました

調べてみたら・・・コメントで絵文字機能を利用するには、絵文字機能のタグが必要だということが書いてありました
個別記事ページのHTMLに絵文字機能の推奨タグを記述したら、すぐ絵文字機能が使えるようになりました

推奨タグは３種類あります。
は<$HeadSectionCommon$>です。
このタグはメタタグやブログのスタイルシート（CSS）や共通CSS、OpenID、拍手機能など、ブログのテンプレートに欠かせない必要な機能が含まれている重要なタグです全てのHTMLのhead内に記述します。

は<$EmojiJsUrl$>です。
これがコメントの絵文字機能を利用するJavaScriptを記述してくれる推奨タグです。個別記事ページHTMLのhead内に記述します。

は<$MiscJsUrl$>です。
コメントのログイン認証やクイックトラックバックといった機能を利用するための推奨タグです。個別記事ページHTMLのhead内に記述します。

<$EmojiJsUrl$>、<$MiscJsUrl$>はコメント機能を使わない場合は必要のないタグですね。<$HeadSectionCommon$>は"推奨"タグではありますが、必ず入れたほうが良いタグだと思います

次回はテンプレート制作で忘れがちなポイントについてです。更新は１１月１０日（月）の予定です。お楽しみに

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

こんにちは！さいとうです
最近本当に寒くなってきましたね・・・
急に寒くなってしまうと、何を着たらいいのか困ってしまいます
そろそろ手袋を出さなくては・・・

今回は、ブログのテンプレート制作で忘れがちなポイントについてです。
背景、ヘッダー、記事を囲むボックス、記事のタイトル、メニューなどなど・・・とブログにはデザインしなければいけない箇所がたくさんあります。
それだけ設定する箇所が多いと、ついつい忘れてしまうところも出てきます
ようやくテンプレートが完成したぞ！と思っていたのに「あ、ここの設定忘れてた・・・」なんてことがないように、テンプレート制作で忘れがちなポイントを挙げていきます

ヘッダーやメニュー、記事の設定は忘れないと思いますが、コメント欄は最後に制作することが多いと思うので、ついつい忘れてしまう箇所ではないでしょうか？？？

コメント・トラックバック欄のタイトルにも画像を入れたり、余白をあけたりすると、それだけで見栄えがかわります
１つのコメント・トラックバックの下に線を表示させたり、タイトルの色を変えたり、文字を大きくしたりすると、どこまでが１つのコメント・トラックバックなのか境がハッキリして使いやすく、また見栄えも良くなりますよ

記事のボックスには、タイトル、本文のほかに投稿日時、コメント数、トラックバック数などを表示させるタグを記述しますね。これらのほかに、記事のボックス内に表示させると、もっとブログを充実させることができる機能があります。
それは、カテゴリやジャンル、テーマ、記事のタグ、拍手機能、ブックマーク機能などです。機能はブログサービスによって異なるので、サービスごとに紹介します。機能を表示させるためのタグについては、公式サイトのマニュアルをご覧ください

• ・カテゴリー：自分のブログ内での記事の分類
• ・ジャンル：登録しているブログジャンル
• ・テーマ（スレッド）：記事を掲載するテーマ（スレッド）
• ・ユーザタグ：その記事のキーワード

※拍手とブックマーク機能は自動で表示されます。

• ・livedorクリップ：ブログのブックマーク
• ・拍手
• ・プロフィール画像
• ・記事を投稿したlivedoor ID
• ・評価アイコン
• ・共通テーマとタグ
• ・参加している共通テーマ
• ・同じカテゴリの最新記事

アメブロはCSSしか変更できないので省略します

次回はアメーバブログの「読者になる」「ブログを作る」ボタンを変更する方法を書きます。更新は１１月１７日（月）の予定です。お楽しみに

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

こんにちは！さいとうです
最近はあちこちでクリスマスの飾りつけがされてますね！
まだ見に行ってませんが、会社の近くのミッドタウンや六本木ヒルズでもクリスマスイルミネーションが始まっているそうです
気づけばもう２００８年もあと1ヶ月半で終わりです
この間秋が来たと思ったのに、月日が経つのは本当に早いものです

さて今回は、アメーバブログの「読者になる」「ブログを作る」ボタンを変更する方法です。

「第７回　アメブロ用テンプレートについて」で少し触れた「読者になる」「ブログを作る」ボタン。「このボタンはCSSで他の画像に差し替えることもできるのですが、CSS初心者には難しいかもしれません」と第７回で書きました
今回はこのボタン画像の変更方法について書いていきます

CSSしか編集ができないアメブロ。CSSだけでどうやってこのボタン画像を変更するかわかりますか？？
画像を変更させる手順は
<img>で表示されている画像を隠して
表示させたい画像をCSSを使って表示させる
だけです
こうやって聞くと簡単そうに思えるかも知れませんが、CSS初心者にはちょっと難しいかもしれませんでは「読者になる」ボタンを例にして解説していきましょう

表示されている画像を隠す

<div id="readerList">内の<img alt="読者になる" src="～～～btn_reader.gif"/>この<img>のCSSにdisplay:none;を追加します。

#readerList dt img { display: none; }

こんな感じです。
すると右の図のようになるはずです
「読者になる」ボタン画像が消えましたね！！

ボタン画像を表示させる

デフォルトの画像が消えたら、表示させたいボタン画像を表示させましょう

今度は<div id="readerList">内の<a>タグのCSSを編集します。

#readerList dt a:link {
background-image:url(http://~~~~/btn_reader.jpg);
}

#readerList dt a {
display: block;
width: 152px;
height: 30px;
}
こんな感じです。すると右の図のようになるはずです見事、ボタンを変更することができました
widthとheightに関しては、表示させたい画像の大きさに合わせて数値を変えてくださいね！

「読者になる」ボタンの変更方法はお分かりいただけたでしょうか？同じような感じで「ブログを作る」ボタンも変更することができます。ぜひチャレンジしてみてください

次回はオリジナルのブログ用画像を作ろう！です。更新は１１月２５日（火）の予定です。お楽しみに

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

こんにちは！さいとうです
寒くなればなるほど、お鍋やラーメン、おでんといった温かいものが食べたくなりますね お鍋は今シーズンはまだ食べてないのですが、最近ラーメンばかり食べています 冬は食べ物がおいしくて、さらに太りやすい時期でもあるので注意が必要ですね・・・！

さて今回は、オリジナルのブログ用画像の作り方についてです。

せっかくブログをカスタマイズしてオリジナルなブログテンプレートを作るんですから、使う画像もオリジナルなものにしたいですよね？？

でも絵は上手く描けないし・・・
という方のために、Photoshopを使ってオリジナル画像を作る方法を説明します

ボックスの背景にはよく角丸が使われますね。角丸はPhotoshopを使えば簡単に描くことができますが、右の図のような単色の角丸ボックスではちょっと物足りないですよね？？
でもPhotoshopを使うと、あっという間にカッコイイ角丸ボックスが作れちゃうのです

Photoshopの「レイヤースタイル」という機能をご存知でしょうか？「レイヤースタイル」は視覚効果をレイヤー上のオブジェクトに適用する機能です。

先ほどの青い角丸ボックスのレイヤーを選択して、"つや消しメタル"のスタイルを選択すると・・・

なんと、ただの青い角丸がメタルの角丸になってしまうのです！メタルだけではありません

クリックするだけで、ガラスのようになったり、枠線だけになったり、宝石のようになったりするのですすごい機能ですよね

Photoshopのデフォルトでさまざまな「レイヤースタイル」が用意されていますが、この他にも無料でレイヤースタイルを公開しているサイトがあるので、ダウンロードしてきてスタイルを追加することができます。右の例の図の一番下のスタイルはダウンロードしてきたスタイルを適応させたものですとってもキレイですね

次回はこの「レイヤースタイル」を使って実際にボックス用の画像を作ってみましょう更新は１２月１日（月）の予定です。お楽しみに

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

こんにちは！さいとうです
寒くなってきて空気が乾燥するこの季節。みなさん、風邪は大丈夫ですか？
私はさっそく風邪を引いてしまいました
インフルエンザもそろそろ流行りだす頃でしょうか・・・
もう風邪を引かないように、手洗い・うがい・マスク・睡眠・栄養に気をつけて生活しようと思います

さて今回は、「レイヤースタイル」でボックス用の画像を作ろう！です。
前回説明したPhotoshopのとっても便利な機能「レイヤースタイル」を使って、実際にオリジナルな画像を作っていきましょう

まず新規作成画面を開きます。
「ファイル」＞「新規」で作成できます。

開いたら、レイヤーパレットの右下にある「新規レイヤーを作成」ボタンを押してレイヤーを増やします。レイヤーパレットが表示されていない場合は、「ウィンドウ」＞「レイヤー」もしくは[F7]キーで表示させてください。

レイヤーが１つ増えました。

ツールバーの中の「長方形ツール」を左クリック長押しするとさまざまな図形を選ぶことができます。この中から「角丸長方形ツール」を選択。

自分の好きな大きさの角丸長方形を作ります。
色はレイヤースタイルで変更されてしまうので、何色でも構いません

角丸長方形ができたところで、ちょっと長くなってきたので続きは次回にします

次回は「レイヤースタイル」でボックス用の画像を作ろう！の続きです。いよいよレイヤースタイルを適用させてステキな画像ができあがりますよ更新は１２月８日（月）の予定です。お楽しみに

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

こんにちは！さいとうです
もう気づけば１２月も半ばに入ろうとしています・・・
みなさんはもう年賀状の準備はしていますか？
私はオリジナルのイラストを描いているところです
来年２００９年は・・・ウシですよ

さて今回は「レイヤースタイル」でボックス用の画像を作ろう！の続きです。

前回は角丸ボックスを描くところまでやりました→
今回はいよいよ「レイヤースタイル」を使って、無地の角丸ボックスをカッコよく仕上げていきます

ではスタイルを選択してみましょう。今回はPhotoshop CS3にデフォルトで入っている「Web スタイル」の中の「タキシード」というデザインにしてみようと思います。 スタイルパレットが表示されていない場合は、「ウインドウ」＞「スタイル」で表示させてください。

スタイルパレットの右上、×印の下にある▼≡をクリックします。クリックすると、メニューが表示されます。その中から「Web スタイル」をクリックします。

「現在のスタイルをWeb スタイル.aslのスタイルのスタイルで置き換えますか？」ときかれるのでＯＫをクリックします。

スタイルパレットが初期設定のものから、Web スタイルに変わりました。この中の「タキシード」を選択します。すると・・・

さっきまで真っ赤だった角丸ボックスが、カッコいいグレーのストライプのボックスに変身しました本当にスゴイ機能ですよね色々着せ替えできてしまうので、他のもクリックして楽しんでください

カッコいいボックス画像が作れたら、それをトップ・繰り返し部分・ボトムと３つにわけてスタイルシートで背景画像を設定すれば、オリジナル画像を使ったボックスの完成です

次回はちょっと役立つtips特集です更新は１２月１５日（月）の予定です。お楽しみに

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

こんにちは！さいとうです あと10日でクリスマスですよ
今年こそはクリスマスツリーが欲しい！欲しい！と思っていたのですが、今年もあきらめてしまいました
私の家にはまったくクリスマスらしさがありません・・・

さて今回は、ブログテンプレートをはじめとするHTML＆CSSに関するちょっと役立つ？tipsです

Firebug

FirebugというFirefoxのアドオン（Firefox に新たな機能を追加したり、デザインを変えるための小さなプログラム）をご存知でしょうか？Firebugは現在閲覧しているサイトのHTMLとCSSを表示してくれます。

「思った通りに表示されないのはなぜだろう？？」と頭を抱えてしまったときは、ぜひFirebugを使ってみてください

こんな感じで、サイトの構造と適応されているCSSがまる分かりですCSSの適用を簡単にオン・オフできるので、「この記述はいらないかな？」と思ったところがチェックできたり、「どうしてここのデザインだけがくずれちゃうんだろう？」というところも原因が見つけやすくなりますよ

こんなに素晴らしいツールが無料で使えるんですから、使わない手はありません

Firefoxのリンク

続いてもFirefoxに関連した話題です。

Firefoxを使っている方はご存知だと思いますが、Firefoxではクリックした際にリンクが点線で囲まれるようになっています。

この点線、普通のテキストや画像リンクのときはそれほど気にならないのですが、text-indentプロパティでテキストを表示させないようにしている場合、Firefoxでは右の図のようにリンク外の部分まで点線で囲まれてしまうんですIEだと大丈夫なんですけどね・・・

Firefoxでもリンク部分だけに点線が囲うようにするには<a>タグに
overflow: hidden;を付け加えればOKですリンク部分以外で点線があると何か気持ち悪いですよね・・・
また、<a>タグにoutline:none;を記述すれば、点線が表示されないようになります。

次回もちょっと役立つ？tipsです更新は１２月２２日（月）の予定です。お楽しみに

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

こんにちは！さいとうです
実は・・・重大なお知らせがあります
６月５日からスタートしたこのブロプーBLOG。
今回の第24回をもちまして、終了とさせていただきます

私はブログのテンプレート制作に関して知識がなかったので、このブログを書きながら少しずつ勉強してきました。

そんな大したWebの知識も持たない私が書いてきたブログですが、少しでも誰かのお役に立てれたら幸いです

さてそんな最終回は、前回に引き続き「ちょっと役立つ？tips」です。

画像を上下の真ん中に表示させる

右の図のように、記事やプラグインのタイトルの背景に画像を表示させたい場合、文字数が１行で収まる場合は特に問題ないのですが・・・

2行3行となると、真ん中に表示させたかった画像が上に行ってしまいます

この例のデザインの場合は画像が上にいってしまっても気になりませんが、画像が枠線の場合は、枠から文字がはみ出てしまいます

右の図のように文字の真ん中に画像が表示されるようにするには、背景を表示している要素にbackground-position: left center;を記述します。

これだけでは文字数が少ない場合、画像が切れてしまうので高さを指定しなければいけません。

単純にheightで高さを指定すると、文字数が多くて指定した高さ以上になった場合、次の要素と表示がかぶってしまいます。そこでpaddingで上下に余白を持たせ、画像が全て表示されるように高さを作ります。

これで文字が大きくなっても、文字数が増えても、背景の画像が文字の上下の真ん中に表示されるようになりました！

６月から半年間という短い間でしたが、どうもありがとうございました。ブロプーBLOGは今回で終了となってしまいますが、ブロプーは今後もどんどん新作テンプレートを公開していきますので、みなさま今後ともブロプーをよろしくお願い致します

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