2008年8月アーカイブ

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

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

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

• CSS編集方法

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

• カラムの選択

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

  
  
• スキンの選択

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

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

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

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

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

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

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

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

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

カレンダーのテーブル（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>が含まれていることがあるので、気をつけてください

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

メニューエリアの横幅

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

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

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

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