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

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

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

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

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

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

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

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

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

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

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

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

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

さて今回は、ブログテンプレートをはじめとする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です更新は１２月２２日（月）の予定です。お楽しみに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「第７回　アメブロ用テンプレートについて」で少し触れた「読者になる」「ブログを作る」ボタン。「このボタンは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に関しては、表示させたい画像の大きさに合わせて数値を変えてくださいね！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

サイドバーのタイトルは
<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だけを編集して、デザインをかえてみましょう

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

記事の本文を表示させるタグは<$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>

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

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

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

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

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

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

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

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

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

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

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

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

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

それでは今回は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のテンプレートをちょっとだけ変更してみましょう
更新は９月２２日（月）の予定です。お楽しみに

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