スポンサーサイト

一定期間更新がないため広告を表示しています

  • -
  • -
  • -

JUGEMユーザーテンプレートを公開します。

『無印白品』

コンセプトはタイトル通り。
無印○品のなような…ではなくて…(笑
必要最低限のメニュー※1にしてデザインも極力シンプルにして
見やすくしています。

また今回からエラスティックレイアウトにしています。前回のテンプレートから
文字をem指定にしてましたが今回はさらにもう一歩踏み込んで文字サイズが
可変した場合の可読性を考慮してレイアウト自体も文字サイズの変更に合わせて
拡大、縮小するようにしました。(こちらは今後の使い勝手を判断してこれから
作るテンプレートにも徐々に盛り込んで行きたいと思います。)

※1 削除部分
.レンダー
▲瓮縫紂爾料択エントリーを除いています。
Recommendのタイトルを繰り返さないで一回だけにしている。
じ〆の削除

基本は以前作ろうとした春向け、初夏向け※2を改良しています。

※2これらはレイアウトに少し問題があり制作を中止(すみません)。
見た目のシンプルさと裏腹に構造が複雑でSEO的に自信がありませんでした。
今回は叩きしているものの、全体的に見直しを図ったのでその辺の問題は
クリアしています。


無印白品


サンプル ダウンロード

ブラウザチェックはIE5.0,5.5,6.0,7.0とFirefox、IE用のsafari、Operaは
それぞれの最新版で行っています。

nobのその他のテンプレート

JUGEMテーマ:テンプレート

スポンサーサイト

はじめまして!”無印白品”を使わせて頂いています。
とてもキレイでお気に入りなのですが、本文の文字が少し小さいので^^;、もう少し大きくしたいのですが、どうしたらいいでしょうか?
それと文字の種類をnobさんのブログと同じようにするにはどうしたらよいですか?ブログタイトルやサイドバーの英数字はできれば、今のままが好きなのですが・・

いろいろいじってみたのですが、初心者で全然わかりませんでした。
お時間あるときに回答くださるとありがたいです。よろしくお願いします!
  • nocco
  • 2011/01/28 8:52 PM
noccoさんはじめまして、テンプレート使っていただいてありがとうございます☆
早速ですが、修正のCSSを作りました。CSSのソースを入れ替えてみてください。

/*-------------------------------------------------
__全体設定
-------------------------------------------------*/

html{
font-size: 62.5%;
}

body{
font-family:"Palatino Linotype","Palatino","MS UI Gothic","ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
margin-bottom:10px;
line-height:1.5;
text-align: center;
color:#666;
}

h1{
font-size: 2em;
}

/*-----------------------------------------------
__header
----------------------------------------------*/

#header .h_top .description{
font-size:0.9em;
padding-bottom:10px;
color:#999;
}

※header部分は途中ソースです。

↑上を消して
↓下に入れ替える。

/*-------------------------------------------------
__全体設定
-------------------------------------------------*/

* {
margin: 0;
padding: 0;
line-height: 1.6;
font-size: 100%;
font-weight: normal;
font-style: normal;
}

body{
margin-bottom:10px;
line-height:1.5;
font: 13px/1.231 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ", Meiryo,"MS Pゴシック","MS P Gothic", sans-serif;
line-height: 1.6;
*font-size: 81.25%;
*font: x-small; /* for IE in quirks mode */
text-align: center;
}

h1{
font-size: 2em;
font-family:"Palatino Linotype","Palatino","MS UI Gothic","ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
}

/*-----------------------------------------------
__header
----------------------------------------------*/

#header p.description{
font-family:"Palatino Linotype","Palatino","MS UI Gothic","ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
padding-bottom:10px;
color:#999;
}

これで文字はそのままでサイズを標準サイズに出来ます。
もし、私の解釈が間違っていたり(汗)、分かりづらかったりしたら、再度コメント頂けたらと思います☆
  • nob
  • 2011/01/29 2:03 AM
私の拙い説明にこんなに早く、こんなに詳しく説明してくださってありがとうございました!(感激)
早速、適用してみたのですが、このテンプレートの素敵な雰囲気がくずれてしまった気がしたので、教えていただいたものを参考に1つ1ついじってみました。

サイドメニューや記事の幅、フォントの大きさは数字をいじっただけなので大丈夫だと思うのですが、全体設定を下記のようにしました↓↓ 

問題ありますでしょうか?

/*-------------------------------------------------
__全体設定
-------------------------------------------------*/

* {
margin: 0;
padding: 0;
line-height: 1.6;
font-size: 100%;
font-weight: normal;
font-style: normal;
}

body{
margin-bottom:10px;
line-height:1.5;
font: 12px/1.231 "Palatino Linotype","Palatino","MS UI Gothic","ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
*font-size: 81.25%;
*font: x-small; /* for IE in quirks mode */
text-align: center;
color:#666;
}

それと偶然発見したのですが、最初お願いした感じは全体設定を下記のようにすると、できるようでした。↓↓

/*-------------------------------------------------
__全体設定
-------------------------------------------------*/

* {
margin: 0;
padding: 0;
line-height: 1.5;
font-size: 100%;
font-weight: normal;
font-style: normal;
}

body{
font-family:"Palatino Linotype","Palatino","MS UI Gothic","ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
margin-bottom:10px;
line-height:1.5;
text-align: center;
color:#666;
}
body{
margin-bottom:10px;
line-height:1.5;
font: 11px/1.231 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ", Meiryo,"MS Pゴシック","MS P Gothic", sans-serif;
line-height: 1.5;
*font-size: 81.25%;
*font: x-small; /* for IE in quirks mode */
text-align: center;
}

bodyが二つあるのは、感覚的に変だと思ったのですが、nobさんの使用されているフォントの感じをbody1つで入れ替え、差し替えしてみてもうまく表現できませんでした。

ソース?って難しいですね。あらためてnobさんはすごいなぁと実感しました。
  • nocco
  • 2011/01/29 10:05 AM
立て続けにすみません(>_<)

サイドメニュー(profileの次)に、最新記事を8つくらい表示させるにはどうしたらいいでしょうか?

あとサイドメニューのRecommendの使い方(リンクの貼り方?)を教えてください(;_;

本当にいつでも構いませんので、よろしくお願いします。
  • nocco
  • 2011/01/29 11:39 AM
noccoさんこんにちは☆

>bodyが二つあるのは、感覚的に変だと思ったのですが…
大丈夫だと思いますよ。その時は下が優先され、上は下にないものが適用されます。

それとエントリー記事の件ですね、profileとcategoryの間にselected_entryのソースを入れください。
これで最新の記事がでます。(但し8記事にするには、基本設定のブログの表示設定の記事の表示件数の数を8にしてください。)


<!-- BEGIN profile -->
<div class="menu_title"><p>Profile</p></div>
<div class="menu_text">{user_list}</div>
<!-- END profile -->

<!-- BEGIN selected_entry -->
<div class="menu_title"><p>Selected Entries</p></div>
<div class="menu_text"> {selected_entry_list}</div>
<!-- END selected_entry -->

<!-- BEGIN category -->
<div class="menu_title"><p>Category</p></div>
<div class="menu_text">{category_list}</div>
<!-- END category -->

Recommendは管理者ページの『データ管理』→『おすすめ商品リスト』で登録して『サイドバー表示』を表示にすれば登録できます。

何分、昔のテンプレート(ベースが4年前)なので、今となってはソースはとても恥ずかしい点が多いです(汗
  • nob
  • 2011/01/29 2:56 PM
nobさん!エントリー記事の表示できました!!ありがとうございます♪
ただRecommendの商品登録がうまくできませんでした(;_;
Managementの境界線を越えちゃうしで、あれ?ってかんじです。私がサイドメニューの幅を小さくしたせいかと思い、規定値の23.5emに戻してみたのですが、同じ結果でした。
しばらく表示させておくので、よかったら見ていただけませんか?
よろしくお願いします。

P.S.4年前のものなんですね!でもこのテンプレートのピアノやピアスの繊細さ感じさせる雰囲気(特にタイトル)は普遍的キレイ!だと思います♪
  • nocco
  • 2011/01/29 11:21 PM
noccoさん、こんばんは☆

Recommendの件、すぐに対応できずすみませんでした。(汗
今見たら、変わっていたのでnoccoさん自身で修正したのかな?

文字の数が多いものを表示させるとオーバーフローした分
フロートがうまく行かなくなっていたみたいでした。
マークアップにミスがありました…
(大変お手数おかけいたしました。。)

>P.S.4年前のものなんですね!でもこのテンプレートの…
とても嬉しいお言葉ありがとうございます♪
  • nob
  • 2011/01/31 5:23 PM
ご連絡遅くなり申し訳ありません。
実は先ほど修正が完了しました。(nobさんがご覧になったのは途中でした。)

他に同じ質問がくることもあるかもしれませんので、一応変更したものを以下に載せておきます。

【修正後CSS】
#menu .menu_text,#menu .menu_recommend{
float:left;/*★追加*/
clear:right;
width:120px;
}
#menu .menu_recommend img{
float:left;/*★rightから変更*/
margin-right:10px;
margin-bottom:0px;
}

参考:https://secure.jugem.jp/support/bbs/alldis.php?id=3567

  • nocco
  • 2011/01/31 10:31 PM
あ・・ここも修正しました↓(CSS)
#menu .menu_recommend img{
float:left;
margin-right:10px;
margin-bottom:0px; /* ★画像の下の余白を削除 */

}

細かいことですが、あとは幅を修正したような気がします。
何度もすみません、お邪魔しました★
  • nocco
  • 2011/01/31 10:37 PM
noccoさん
色々とお手数お掛けいたしました。ありがとうございます。

Rercommendの所は左にテキスト右に画像が入るようにしていました。
制作時、長いテキストに対しての確認は不十分でした。。ポリポリ。。


  • nob
  • 2011/02/02 12:32 PM

It comments.










Track back Url of this Article
http://wing-of-heart.jugem.jp/trackback/993
Track Back