• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ+
イイね!
2016年01月23日

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

スタイルシート講座 ~ あなた好みのスタイルにしてみませんか? ~ タイトルでお分りのように実技ネタがないので学科です。(自動車学校かよ!w)

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


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


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

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




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


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





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



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





1.カスタマイズ点

BEFORE




                          ↓



AFTER






①枠線上部を消去

②枠線右サイドを消去

③サイドメニューを縮小

④何シテル?を縮小

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

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







2.詳細説明

言語については、スタイルシートリファレンス(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:'MS Pゴシック',Hiragino Kaku Gothic Pro,sans-serif;


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

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


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





[ おまけ ]

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




眠そうでしょ?w

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



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




締めはちょっと小言をw

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

人の諸々の
愚の第一は

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

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

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


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

では、また。

ブログ一覧 | その他 | 日記
Posted at 2016/01/23 20:12:18

イイね!0件



今、あなたにおすすめ

ブログ人気記事

本田宗一郎の「夢」を私にも下さい
エイジングさん

御座爪切不動尊と志摩半島スポット一覧
伊勢さん

前回行くと行ってからだいぶ開きました
「かい」さん

1月第3日曜日の大黒
彼ら快さん

快適ドライブの必需品!DVD プレ ...
G-FACTORYさん

『ちょっくら茨城』常磐神社・義烈館
シン@009さん

この記事へのコメント

2016年1月23日 20:38
こんばんはぁ(^^)/

素晴らしい解説ですね~!!
使う時の為にクリップさせて頂きます(*-ω-)ウンウン♪

って・・・ それにしても・・ 

(#-∀-) で か い ・・(汗笑)
コメントへの返答
2016年1月24日 11:29
こんにちは晴れ

ありがとうございます。
詳細編集をしたことがない方にも理解してもらえるよう、丁寧な説明にしました。
感覚的には仕事でマニュアルを作ってるような?(笑)
Hiiroさんは言語部分だけで十分だと思いますが。(^^)

1280サイズですね?
今回の写真はここまで大きくしなくてもいいんですが、風景とか細かい部分まで見てほしいのはついつい大きくなります。(^^;
2016年1月23日 21:51
こんばんは★

今日はなかなかハイレベルな内容ですが、プリントアウトしてゆっくり見ながら私も挑戦してみようと思います。

⑥の空きスペースを広げるといつも1280×960のサイズでUPしていてもクリックしなくても大きくなるってことかな?
よく読んでトライあるのみ!!!!

そして明日お天気と月曜出勤の朝が気になるところですが、ゆっくり走って急がない運転を心がけたいものです。

おまけにはもったいない(*´▽`*)
宇宙の中に入っていけそうな入口にも見えます★
コメントへの返答
2016年1月24日 11:31
こんにちは晴れ

お堅いブログです。(笑)
今回の内容はスルーするー人が多いかもしれませんね。
英数字多過ぎです。

そうですね。
画面ではスクロールしないといけないので見づらいです。
プリントアウトして教材にしてください。(^^)

>⑥の空きスペースを・・・・大きくなるってことかな?
ざんねーん。
空きスペースを広げるのとは関係ないです。
その下の
「ブログに表示する画像サイズの変更」
になります。
説明メッセを入れます。

徐行で早めのブレーキ(エンジンブレーキ併用)が安全です。
時間に余裕を持って出掛けましょう。

>宇宙の中に入っていけそうな入口にも見えます★
HIDランプの部分かな?
面白い表現しますね。(^^)
宇宙のように暗い車庫です。(笑)
2016年1月23日 22:03
こんばんは🌸

ちょっとすぐにはできませんが参考にさせていただきます(#^.^#)

最高気温が1度なのですね(◎_◎;) 毎日雪ですか・・・何センチ積もりましたか? どうしても羨ましく思っちゃいます・・・
先週も海沿いはちょろと降っただけで、すぐに溶けました。朝起きたら銀世界✨ ってやっぱりステキ(๑˃́ꇴ˂̀๑)
後が面倒なのはわかっているんですけどね(^_-)-☆


IS君の中にクマさんを入れたくなっちゃいます(>_<)
コメントへの返答
2016年1月24日 11:36
こんにちは桜

「1ヵ所弄っては確認」を繰り返せば、「あ、こういうことね」と理解できると思います。
こういうプログラム的なのはとっつきにくいですが、すぐ慣れますよ。(^^)

今冬は雪がかなり少なく、晴れの日が多いです。
今日も気温は予報に近いみたいで寒いのですが、積雪は数cm程度で現在晴れ時々雪チラチラです。
白銀の世界をお見せするつもりでしたが、「春近し」のような風景です。(笑)

白銀の世界は冬らしい風景でいいのですが、多く積もると邪魔モノですよーん。(^_-)-☆
除雪車が朝早くから走るので道は通れますが、車庫の前に除雪した雪山ができるのですぐに出られません。
屋根の雪降ろしも大変です。
↓2006年に家の近所で撮影
http://cdn.snsimg.carview.co.jp/carlife/storage/1230241/style/1230241_1_d8231.JPG

リアルクマさんは勘弁して下さい。
「くまのさくら」さんならOKですが。(笑)

2016年1月24日 1:28
こんばんは☆

まだ余裕のあるF-sasukeです(笑)

実はスタイルシートのカスタマイズは、何度かトライしていて、その度になんだかよくわからずで、断念している過去があります(^_^;)
じっくりブログを読ませて頂きましたが、頑張ればトライできそう・・・
ただ、その代償として、ブログ更新がストップしそうです(笑)
コメントへの返答
2016年1月24日 11:37
こんにちは晴れ

深夜にコメントありがとうございます。
余裕があってよかったです。(笑)

私も最初そうでしたが、すぐに理解できなさそうな言語は弄る気がしないんですよね。
それでも、一つ一つ確認しながら弄ってたら、何とか理解できるようになりました。
こういうのは実技が一番です。(笑)

是非トライしてみて下さい。
解かる部分ならサポートしますよ。(^^)

確かに中途半端なスタイルでは見せられません。(笑)
2016年1月24日 15:20
こんにちは。

おお、とても勉強になりました!

私も以前スタイルシートに関してネットで調べつつカスタマイズしたのですが、
一夜漬けの悲しさ、一日で忘れてしまいました(笑)
でもやはり自分でやってみるのが一番ですね(^^)/

雪の方がいかがですか?
こちらは降雪はまだですが、今から降りそうな感じがします。
何卒お気を付けて下さいね。
コメントへの返答
2016年1月24日 16:09
こんにちは晴れ

Ron_S4さんはほぼ同じスタイルにされてるので、懐かしかったのでは?(^^)

もちろん私もネットで検索して弄り方を見つけてます。
ただ、コピペしただけでは面白くないので、言語がどういう機能なのか調べました。
忘れないうちにブログでメモしておかないと。(笑)

詳細編集をしたことのない方には、よい入り口になるんじゃないかと思ってます。(^^)

雪はですねー
全然降ってまぜん。(笑)
今朝数cm積もってましたが、ちらちらするぐらいでずっと晴れてます。
スポット予報とは言え、これだけ外れるのも珍しいです。
やはり、今冬は違いの分かる暖冬です。(^^)
油断してはいけませんが・・・

まだ数日寒気が続くようなのでRon_S4さんもお気を付け下さい。
2016年1月24日 17:06
こんばんみ~(✿◕‿◕)ノ


前に、
写真を大きくできたらイイナって思って
変更しようかと考えたのですが・・
シートの花の柄もお気に入りで
バックも黒が写真が引き立つので
どうしようかと考えてましたが結局
そのまんまです。。笑
ブログはバックを黒で
プロフは今のままでってできるのでしょうか?
コメントへの返答
2016年1月24日 18:47
こんばんは☆

試行錯誤で改造すると変な画面になったりします。
しっかり理解されてからのほうがいいです。

>シート
>バック
は解かるんですが、

>プロフ
はどういう意味かな?
シートのことでしょうか?

なんとなく改造イメージは理解できましたが、怪しいので確認メッセを入れます。
続きはそちらで。
言葉の定義を整理しないと。(笑)
2016年1月25日 0:14
Hyper教官たいへんです!小江戸が-4.4℃です!でこんばんは♪

相変わらず親切丁寧な指導のHyper教習所ですが、正直申し上げて学科は苦手ですw

CSSはチョット・ソコで・スベッちゃった♪の略だと思っていましたが、違うようですねw


冬眠ISクンの、眠たそうな眼がイイですね♪
ライト周りってピント合いにくい気がしますけどMFですか?




コメントへの返答
2016年1月25日 10:50
おはようございまするんるん

-4.4℃だと完全凍るどじゃないですか。
小江戸が冷凍保存状態になってますね。
こちらも今朝が一番息が白かったです。(半分ウソw)

実技が下手なので学科教官に回されましたw
こういう学科ブログ編集も意外と楽しかったです。
苦手な方が多いと思って入門レベルで書いたんですが、拒絶反応が出るんですね?w

DAI(SUKE)語、上手いですwish
チョット スベり気味で スミマセンw

ISクンの眼は露出補正してたら眠くなりましたw
手抜きのAFです。
暗くても何とか合いました。


ご存知なければ、ということで、
カメ余談)
α7兄弟には「設定効果反映ON/OFF」という設定があります。
AF時の(自動)絞りの設定です。

設定効果反映ON : 実絞り。 ただし、絞りが深い場合は実絞りにはならない。
設定効果反映OFF: 最初は開放で、シャッター押下時に設定まで絞られる(レフ機と同じ)
(初期設定はONです。)

暗い被写体ではOFFにするとAF速度や精度が上がります。

詳しくは、↓こちらで。
http://ganref.jp/m/maronushy/reviews_and_diaries/review/6036
2016年1月25日 0:21
こんばんは

とても優しい解説ですね。

出来そうな気がしましたが、車いじりと違って
間違うと迷宮入りの閉鎖になりそうなので様子見です(笑)

元に戻す自信の無いものには手を出さない。(汗)

もっとスキルをあげてからにします。
コメントへの返答
2016年1月25日 10:51
おはようございまするんるん

弄ったことがない人にも理解してもらいたいので丁寧な説明にしました。
仕事で仕様書やマニュアルを作ってたので、こういうのは慣れてるんです。(^^)

えー、様子見ですかー
akabaさんのオリジナルスタイルを見たいです。(^^)

凝ると迷宮入りするかもしれませんが、元のスタイルのCSSファイルを保存しておけばリセットできますよ。(笑)
少しづつ、確認しながら弄れば安心です。


↑の返信の「カメ余談」が参考になればと思います。
2016年1月27日 21:51
こんばんは☔

Hyper講座情報技術編ありがとうございます
スタイルシートってみんカラだけのものではなかったのですねw(無知)

私もマイページを所々弄ってますが、お友達任せなので方法を全く理解してませんでしたw
とても勉強になりましたm(_ _)m
今後のため、クリップさせて頂きますm(_ _)m

一つの気になるのが、大きい写真なのに劣化の少ない写真をアップされてる方がちらほら・・・この方法もいつか知りたいです
コメントへの返答
2016年1月28日 10:40
おはようございまするんるん

ネタが冬枯れ中、かつ寒くて外に出る気がしないので、どうしても机上(だけの)ブログになります。
写真が「大きいことはいいことだ」な方には参考になったんじゃないでしょうか?

HTML言語は少し知ってましたが、スタイルシートはみんカラ専門用語だと思ってましたw

もちろん、私もネットで検索したパクリですよw
ただ、コピペするだけだと満足できないので言語を調べました。
理解しておくと応用が効きますからね。
クリップありがとうございます。

>劣化の少ない写真をアップされてる方がちらほら
簡単ですよ。
外部サイトでアップロードして、その画像(jpg)URLを貼ってるだけです。
↓私もそうですが、「フォト蔵」にアップしてる人が多いです。
http://photozou.jp/
登録に必要な個人情報が少ないので安心なのと、624px/1024px/元画像サイズが選べるのが便利です。
アクセスの重さもみんカラと変わりません。

おすすめアイテム

プロフィール

「Hyperネット環境 ~ 備えあれば憂えなし ~ http://cvw.jp/b/1230241/44764266/
何シテル?   01/16 20:20
「的を射たコメント」、「当を得た返信」を心掛けたいと思います。 宜しくお願いします。
みんカラ新規会員登録

ユーザー内検索

<< 2021/1 >>

     12
3456789
10111213141516
17181920212223
24252627282930
31      

リンク・クリップ

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

愛車一覧

その他 SONY-α α7 (その他 SONY-α)
ミラーレス一眼α7Ⅲ(ILCE-7M3) and α7(ILCE-7) 片手持ちで撮れる ...
レクサス IS レクサス IS
2011年5月購入のレクサスCPO車です。 レクサスのパーツ選びではみんカラのパーツレ ...
ダイハツ ミライース ダイハツ ミライース
2017年6月に新車購入です。 主に買い物用、近距離用で、たまに狭い道用にも乘ってます。 ...
日産 ブルーバード 日産 ブルーバード
U12は前期と後期の2台乗ってます。 写真は後期(ハードトップ)です。 どちらもATT ...
ヘルプ利用規約サイトマップ
©2021 Carview Corporation All Rights Reserved.