上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ソフトコントラスト・パールグレー

 ソフトコントラスト、第2弾です。
 真珠+ライトグレーをイメージした色に、深いグレーのアクセントを付けました。
 もちろん、視認性、ユーザビリティーは前作そのままです。300pxブログパーツ挿入の場所もそのまま。左右カラム変更も簡単です。
 あくまで、書き手の記事が主役の主張しない(?)テンプレートです。


テンプレートサイズ

●ヘッダー
900px
●メインカラム
540px
●サイドバー
300px(280px)
●フッター



ブロック構造

<div id="conteinar">
コンテナ
<div id="header">
ヘッダー
</div>
<div id="cate_bar">
カテゴリーバー
</div>
<div id="main">
メインカラム
</div>
<div id="side">
サイドバー
</div>
<div id="footer">
フッター
</div>
</div>


■カテゴリバーが崩れてしまう場合は?
カテゴリバーの編集



強調文字のスタイル変更

文字種タグ表示結果
引用<blockquote> ~ </blockquote>
サンプル




カスタマイズしてみよう


 最低限のテンプレート最適化は施してあります。あとは、自由にテンプレートを改造していくだけ。
 簡単にできるカスタマイズから始めてみよう!

①大きなブログパーツや、300pxサイズの広告を美しく表示してみよう。
②サイドバーを左右交換してみよう。
③タイトルロゴで、他のブログに差を付けよう。
④ランキングボタンやブックマークボタンを配置しよう。

 これらのヒントは、カスタマイズカテゴリーの項目にヒントが隠されています。

テンプレート簡単カスタマイズ
シンプルテンプレートのHTMLカスタマイズ詳細
世界のブログパーツ




ヘッダー画像・ロゴをオリジナルに

 このテンプレートには、あえてヘッダーに画像を入れていません。
 オリジナルのロゴ画像を挿入し、他のブログに差を付けることを考慮に入れてデザインしています。

■ロゴ作成のチュートリアル
ロゴをデザインしてみよう
CUTIE PHOTOSHOP・キューティーフォトショップアート
 ロゴ | CUTIE PHOTOSHOP・キューティーフォトショップアート

■素材探し
無料写真素材・もみじローカル
きらきらフォントコレクション




テンプレートのダウンロード方法


テンプレートダウンロードは、FC2管理画面の共有テンプレート検索「作者」で

 で、一覧が表示されます。

☆FC2ログイン画面へ
FC2ID


■全テンプレート一覧はこちらから。
テンプレート一覧


 このテンプレートに関してのご質問、不具合は、必ず以下のコメント欄からお願いいたします。FC2サポートやヘルプ等では、恐らく個別のテンプレートに関しての質問は受け付けていないと思いますので…
このエントリーをはてなブックマークに追加
Mon.04.26.2010
Comment
54
始めまして。
FC2でsoft-pearl-grayのテンプレートをDLしたものです。

メイン記事の文字サイズを小さくしたく、色々といじったり(font-sizeの数字やfont-family)調べたりもしたのですが、いまいち理解できないで文字を小さくすることが出来ません。

希望としては、サイドバーとメイン記事の文字の大きさを揃えたいです。
お忙しいところ恐縮ですが、文字サイズについてご指南くださるよう、お願いいたします。

57
Re: タイトルなし
 フォントサイズは
「font-size:○○;」
 と言う「○○」の数値部分を変更します。

 一番手っ取り早い方法は、スタイルシートの編集画面を開いて、
「Ctrl」+「F」キーで、画面内検索バーを出し、「font-size:」と入力してみてください。

 検索バーの隣の矢印のようなものを押すと、次々に「font-size:~~」と言うものが検索に引っかかってきます。それを、好みの数値に変えれば、基本的にはいろいろな箇所のサイズを変えることが出来ます。

 当サイトのテンプレートの場合は、

#main …メインカラム
#side …サイドバー

 となっています。
 メインカラムは文字サイズを指定していませんので、新たに、ソフトパールグレーの場合は
「font-size:78%;」
 と、書き加えてみてください。
 コメントボックス、トラックバック表示部分は、若干文字サイズを小さく設定してあります。メインカラムを小さくすると、さらに小さくなりますが、小さすぎるようでしたら、

/*コメント・トラックバックエリア
----------------------------------*/

 以下のフォントサイズも、任意の大きさに調節してみてください。

59
メインカラムにfont-size:78%;を追加したことで、問題を解決することが出来ました。
また一つ勉強にもなって一石二鳥にもなり、早い対応もありがとうございました。

ますますのご活躍を祈っています。
重ね重ねこの度はありがとうございました。

60
Re: タイトルなし
 とんでもないです、お気遣いありがとうございます。
 逆にこういった、次の方へと繋がっていくような質問はこちらからお願いしたいほどです。どうもご質問、ありがとうございます。またどうぞ、お気づきの点がありましたら、ヨロシクお願いします。

187
斜体文字タグ
はじめまして。高橋と申します。
こちらのテンプレートでは、斜体文字は使用できないのでしょうか?
タグを押してもブログのほうには反映されません。投稿画面の試し見?ではちゃんと斜体になっているのですが…
検索で調べる限り、テンプレートのCSSに原因があるのかなと思い、質問させていただきました。

188
斜体について
 テンプレートの文字の斜体についてなんですが、このテンプレートではフォントに「メイリオ」を指定しているため反映されなくなっています。
 メイリオのフォント自体に斜体が含まれないため(だったような?確か…)です。

 もしもどうしても斜体が必要な場合は、CSSのフォント部分を修正します。

 スタイルシートの編集画面で、以下の記述を探すか、画面内検索で検索します。


///////////////////////

/* レイアウト
------------------------------------------------------------ */
body{
text-align:center;
background:#eee;
color:#666;
font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",HiraKakuPro-W3,"Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro","メイリオ";
}
/* 全体のフォント指定はここ ↑ */

///////////////////////

 ここの、

,"メイリオ"

 この記述を削除すれば、windowsに対するフォント指定を解除できます。
 これを解除すれば、OSやブラウザ側で斜体に対応したフォントを使用していれば(たとえば「MS ゴシック」など)斜体部分が斜体として表示されるはずです。

 念のため、テンプレートのバックアップを取ってから、修正をお試しください。
 ちなみに、スタイルシートのフォント指定に関してほかにもさまざまな指定方法がWEB上で紹介されています。
 フォント指定は、訪問者のブラウザ、OSなどさまざまな要素が関連してくる難しい部分にもなります。いろいろ検討のうえお試しください。

Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。