• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ＋
■ナビゲーション
  1. 車・自動車SNSみんカラ
    2. >
  2. ブログ
    3. >
  3. ブログ一覧 [Hyper MWS]

Hyper MWSのブログ一覧

2016年01月23日 イイね！

スタイルシート講座　～ あなた好みのスタイルにしてみませんか？ ～

スタイルシート講座　～ あなた好みのスタイルにしてみませんか？ ～タイトルでお分りのように実技ネタがないので学科です。（自動車学校かよ！ｗ）

今回はスタイルシートをどうカスタマイズしてるかの説明ブログにしました。


私の場合は写真の表示を大きなサイズにするためですが、応用すれば自分好みにカスタマイズできます。

安心してください。
英数字たっぷりでも、よーく見てもらうと全然難しくありません。
みんカラで見かけるどの説明よりも丁寧にしたつもりです。

かなり長くなってますが、ついてきて下さいね。(^^)




みんカラのカスタマイズできるスタイルシートは「CSS」という言語で作られています。
詳しくは、こちら。


まずは、カスタマイズする前に現状のスタイルをファイルに保存します。
↓スタイルシートの[詳細編集]-[スタイルの操作]にある「書き出し」でできます。





↓書き出しはこんなTEXT形式のCSSファイルです。
　全736行あり、詳細編集の内容が全て入っています。



カスタマイズは詳細編集画面でするより、
このファイル（コピーしたもの）を編集して、
「読み込み」するのが簡単です。
プレビュー機能もあるので安心して読み込みできます。





１．カスタマイズ点

BEFORE




　　　　　　　　　　　　　　　　　　　　　　　　　 ↓



AFTER






①枠線上部を消去

②枠線右サイドを消去

③サイドメニューを縮小

④何シテル？を縮小

⑤コンテンツ領域を移動、拡大

⑥空きスペースに画像貼り付け







２．詳細説明

言語については、スタイルシートリファレンス（ABC順）を参照して下さい。

以下、

打消：　消去
太字：　変更
下線：　追加

の意味になります。



①枠線上部を消去


[ コンテンツ表示上部 ]
div.contentsHeader{
margin:0px;
padding:0px;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/contentsHeader.gif) no-repeat bottom left;
height:4px;
width:620px;
clear:both;
}


background:url()内の罫線gif画像指定を削除することで消去されます。
このgifは、↓こんな画像です。


黒い部分はコンテンツの背景色です。
上端の薄い線が罫線です。





②枠線右サイドを消去
⑤コンテンツ領域を移動、拡大

[ コンテンツ表示 ]
div.contents{
margin:0px;
padding:10px 20px 8px 20px;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/contents.gif) repeat-y;
width:580px;
}

　　　　　↓

div.contents{
margin:0px 0px 0px -120px;
padding:10px 20px 8px 20px;
background:url(https://cdn.snsimg.carview.co.jp/carlife/storage/1230241/style/1230241_1_1eaa8.jpg) repeat-y;
width:700px;
}



background:url()内の罫線gif画像を、↓このように替えてます。

サイズが違いますが、右サイドの罫線を消してるだけです。
repeat-yでこの画像がy方向、つまり下方向に繰り返し表示されます。

コンテンツ領域を
margin:0px 0px 0px -120px;
で左に120px移動させ、

width:580px → 700px
で幅を120px拡大してます。


※margin;上 右 下 左
　マージンは領域間のスペース、パディングは領域内のスペース





③サイドメニューを縮小


BEFORE



　　　　↓


AFTER




[ サイドメニュー領域 ]
div.sideMenu{
width:300px;　→　180px
padding-bottom:10px;
background:#333;
}


width:300px → 180px
で幅を120px縮小してます。

ただ、これだけでは、↓広告部分がコンテンツを上書きしてしまいます。




そこで、「⑤コンテンツ領域を移動、拡大」用として、

div#BodyBlockMain{
float:right;
overflow:visible;
display:block;
position:relative;
z-index:1;
width:620px;
}


position:relative;　→　相対位置への配置
z-index:1;　→　上書き
を追加してます。






④何シテル？を縮小


[ 何シテル？領域 ]
div#Nanisiteru{
width:250px;　→　130px
margin:0 auto;
padding:5px;
background:#000 url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/nanisiteru.gif) repeat-y center;
font-size:12px;
color:#999;
}


[ 何シテル？ヘッダー ]
div#NanisiteruHeader{
width:260px;　→　140px
margin:0 auto;
height:16px;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/nanisiteruheader.gif) no-repeat top center;
}


[ 何シテル？フッター ]
div#NanisiteruFooter{
width:260px;　→　140px
margin:0 auto;
height:5px;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/nanisiterufooter.gif) no-repeat top center;
}


各幅サイズを120px縮小してます。





⑤コンテンツ領域を移動、拡大
⑥空きスペースに画像貼り付け

[ タブ ]
ul#MainNav{
width:100%;
list-style-type:none;
margin:10px 0;
padding:0px;
clear:both;
height:30px;
float:left;
}

　　　　　↓

ul#MainNav{
width:100%;
list-style-type:none;
margin:10px 0;
padding:0px;
clear:both;
float:left;
height:240px;
background:url(https://cdn.snsimg.carview.co.jp/carlife/storage/1230241/style/1230241_1_02698.jpg) no-repeat;
}



height:30px　→　240px
でコンテンツ領域を下に210px下げてます。

background:url()
で、↓この画像を貼ってます。






ブログに表示する画像サイズの変更


みんカラでアップロードした画像はデフォルトで500pxになります。
編集画面で画像を貼り付けた時に、
”WIDTH: 500px”
の部分を表示したいサイズに書き替えます。





ついでにフォトギャラ（整備手帳も共通）のカスタマイズ説明もしておきます。



BEFORE



　　↓


AFTER





[ ギャラリー写真 ]
div.galleryPhoto{
width:50%;　→　112%
overflow:hidden;
float:left;
margin:0 0 15px 0;
}


112%＝705pxになります。
これを弄れば大きくなります。


[ ギャラリー本文]
div.galleryMemo{
width:50%;
float:right;
margin:0 0 15px 0
}

　　↓

div.galleryMemo{
width:100%;
margin:0 0 60px 0;
font-size:16px;
line-height:130%;
}




それと、シートのフォント設定はこれです。
CSSファイルの頭のほうにあります。


font-family:'ＭＳ Ｐゴシック',Hiragino Kaku Gothic Pro,sans-serif;


例えばこんな設定にできます。

font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS
PGothic',sans-serif;


フォントの種類はカンマ（ , ）で区切って複数の候補を並べることができます。
複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択されます。
指定したフォントがユーザーの環境にインストールされていない場合には、
ブラウザで設定されたデフォルトのフォントで表示されます。





[　おまけ　]

↓車庫で冬眠中のIS君
　F1.8、1/60秒、ISO-320、-1.3EV、AWB（手持ち、ノーレタッチ）




眠そうでしょ？ｗ

Hyperタウンの明日の天気予報は、↓こんなだし、長い冬眠になりそうです。



全国的にかなり気温が下がって、日中でも凍結したままの可能性があります。
車の運転や歩いての移動にお気を付けください。




締めはちょっと小言をｗ

礼儀あってのSNS界ですよね？
もちろん、

人の諸々の
愚の第一は

他人に完全を
求めるということだ

は心得ているので自分の中ではゆるーいレベルですが、
それでも残念な部分を感じてたりします。

小さな事、些細な事でも、溜まると堰を超えるんですよ。（名言っぽいｗ）
つまり、いつかは圏外扱いにするということです。


たまには、こんなフィルタリングアラームも。(^_-)-☆

では、また。

Posted at 2016/01/23 20:12:18 | コメント(9) | トラックバック(0) | その他 | 日記

プロフィール

「【 Le Mans 24 Hours 2025 】　
今夜23時スタートです。　
TOYOTA GAZOO RacingのOnBoardライブ配信は見れそうです → http://youtu.be/OVumk-lwycI」
何シテル？   06/14 22:53
「的を射たコメント」、「当を得た返信」を心掛けたいと思います。 宜しくお願いします。
みんカラ新規会員登録

ユーザー内検索

<< 2016/1 >>

日 月 火 水 木 金 土
     12
3456789
101112131415 16
171819202122 23
242526272829 30
31      

ブログカテゴリー

リンク・クリップ

いつもの場所でお花見してきました 
カテゴリ：その他（カテゴリ未設定）
2014/04/27 10:52:13
2013年総集編 
カテゴリ：その他（カテゴリ未設定）
2014/01/02 15:45:29
明けましておめでとうございます 
カテゴリ：その他（カテゴリ未設定）
2013/04/01 13:57:59
[ 他のクリップをチェック ]

愛車一覧

日産 オーラ e-POWER 日産 オーラ e-POWER
2023年3月28日に納車されました。 Mazda2からの乗り替えです。 電動車には全 ...
その他 SONY-α α７ (その他 SONY-α)
ミラーレス一眼 α７Ⅲ（ILCE-7M3） α7RⅢ（ILCE-7RM3） 片手持ちで撮 ...
ダイハツ ミライース ダイハツ ミライース
2017年6月に新車購入です。 主に買い物用、近距離用で、たまに狭い道用にも乘ってます。 ...
マツダ MAZDA2 マツダ MAZDA2
ブラックトーンエディションの加飾や装備が気に入り、決めました。 ホイールとドアミラーのブ ...
[ 愛車一覧 ]

過去のブログ

2025年
01月02月03月04月05月06月
07月08月09月10月11月12月
2024年
01月02月03月04月05月06月
07月08月09月10月11月12月
2023年
01月02月03月04月05月06月
07月08月09月10月11月12月
2022年
01月02月03月04月05月06月
07月08月09月10月11月12月
2021年
01月02月03月04月05月06月
07月08月09月10月11月12月
2020年
01月02月03月04月05月06月
07月08月09月10月11月12月
2019年
01月02月03月04月05月06月
07月08月09月10月11月12月
2018年
01月02月03月04月05月06月
07月08月09月10月11月12月
2017年
01月02月03月04月05月06月
07月08月09月10月11月12月
2016年
01月02月03月04月05月06月
07月08月09月10月11月12月
2015年
01月02月03月04月05月06月
07月08月09月10月11月12月
2014年
01月02月03月04月05月06月
07月08月09月10月11月12月
2013年
01月02月03月04月05月06月
07月08月09月10月11月12月
2012年
01月02月03月04月05月06月
07月08月09月10月11月12月
2011年
01月02月03月04月05月06月
07月08月09月10月11月12月
ヘルプ｜ 利用規約｜ サイトマップ
© LY Corporation