2008年12月アーカイブ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

こんにちは！さいとうです あと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です更新は１２月２２日（月）の予定です。お楽しみに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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