2008年11月アーカイブ

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

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

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

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

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

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

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

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

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

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

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

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

こんにちは！さいとうです
最近はあちこちでクリスマスの飾りつけがされてますね！
まだ見に行ってませんが、会社の近くのミッドタウンや六本木ヒルズでもクリスマスイルミネーションが始まっているそうです
気づけばもう２００８年もあと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に関しては、表示させたい画像の大きさに合わせて数値を変えてくださいね！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

livedoorブログの絵文字

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

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

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

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

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

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

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

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

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