• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ+
.

ユダ会長のブログ一覧

2009年04月23日 イイね!

みんから 新スタイルシート(CSS)のカスタマイズ 詳細編集

/*/---
みんから 新スタイルシート(CSS)のカスタマイズ 詳細編集

スタイルシートの編集方法が変わり、以前までのものが使えなくなったのでとりあえず適当なデザインを選択していましたが、やはり気に入らないので昨日から暇を見て少しずつカスタムしてみました。
今回の改悪でデザインの自由度は、かなり制限されました。
まぁ今までが何でも出来過ぎたってのもありますが。

基本的にはマイページスタイルシート詳細編集スタイルの操作
で行います。
テキストボックスにいちいち入力するのが面倒ですので・・・。

CSSやHTMLの知識の無い方には、お勧めできません。
また知識がある場合でも自己責任での編集お願いいたします。

さてまず簡単な説明ですが、最初に読み込む原型となるスタイルシート.cssファイルが必要となりますが、これは手っ取り早くスタイル選択で適当なスタイルを選択して「プレビュー」で別画面を表示させてソースを見ると
link rel="stylesheet" href="/user/css/○○○/user.css" type="text/css" media="screen, projection"
というのがあります。
これが使用されているスタイルシートの.cssファイルです。
相対パスで書かれているので絶対パスに変更しますが、その際に
https://minkara.carview.co.jp/の後にuser/css/○○○/user.cssをコピペしてブラウザに直接アドレスを入力して、任意の場所に保存しましょう。
現在位置からの相対パスではありませんので気をつけて。
このファイルをカスタマイズしていきます。(ALUMINIUMを選択)
変種後はCSSファイル読み込みで読み込んだ後に保存
保存後は「スタイルの選択」カスタムスタイルを適用してください

今回は基本的に簡単に変更できる部分。
次回は暇を見てカレンダーやテーブルの変更をやる予定です。


まず簡単なところから背景画像の変更です。
これは背景に使いたい画像を「スタイル用画像」にアップして、そのアドレスを指定します。
---/*/
/*/------------ここから変更------------------/*/
/*/--
変更前
div#MinkaraBody {
clear:both;
width:100%;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/037/background.gif);
background-position: 0px 7px;
}
----/*/

/*/--変更後----/*/
div#MinkaraBody{
clear:both;
background:url(アップした画像のアドレス);
/*/background-attachment: scroll;背景スクロールの場合/*/
background-attachment: fixed;/*/背景固定/*/
background-position:0px 7px;
display:block;/*/指定要素をブロックレベルで表示/*/
margin:0;
padding:0;
width:100%;
}


/*/--
ヘッダーの画像を変更します。
変更前
div#BodyBlockHeader {
height:148px;
width:898px;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/037/header.gif);
margin-top:10px;
padding:52px 0px 0px 32px;
}
----/*/

/*/--変更後---/*/
/*/------------ヘッダー画像------------------/*/
div#BodyBlockHeader{
width:930px;/*/横/*/
height:159px;/*/縦50~290px/*/
background-image:url(アップした画像のアドレス);
background-repeat:no-repeat;/*/画像を繰り返し表示しない/*/
overflow:hidden;
display:block;
padding:0;
margin-top:10px;
margin-bottom:0;
margin-left:0;
margin-right:0;
}

/*/--尚、タイトルは表示したくないので---/*/
div#BodyBlockHeader h2{
font-size:1px;
}
/*/-を指定しています。---/*/

/*/--ブログ等のタイトル画像
変更前
div.contentsTitle {
clear:both;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/037/contentstitle_back.gif) no-repeat;
margin:0px 0px 10px 0px;
padding:9px 0px 0px 12px;
font-weight:bold;
color:#fff;
font-size:18px;
height:40px;
}
---/*/

/*/--変更後---/*/
/*/---------コンテンツタイトル部分の画像(ブログ等のタイトル)------------/*/
div.contentsTitle{
clear:both;
background:url(アップした画像のアドレス) no-repeat;
margin:0px 0px 10px 0px;
padding:9px 0px 0px 12px;
font-weight:bold;
color:#202020;/*/文字色/*/
font-size:18px;
height:40px;
}

/*/---
メニューボタンの画像(3種類)
変更前
ul#MainNav li.nav {
width:19.5%;
height:30px;
float:left;
display:block;
text-align:center;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/037/navi_off.gif);
margin:0 0.6% 0 0;
line-height:2.0em;
}
ul#MainNav li.navOn {
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/037/navi_on.gif);
color:#fff;
text-decoration: none;
}
ul#MainNav li.navOn a {
color:#fff;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/037/navi_on.gif);
text-decoration: none;
}
ul#MainNav li.navOn a:visited {
color:#fff;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/037/navi_on.gif);
text-decoration: none;
}
ul#MainNav li.navOn a:hover {
color:#fff;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/037/navi_on.gif);
text-decoration: none;
}
ul#MainNav li.navEnd {
width:19.4%;
margin:0px;
}
ul#MainNav li a {
color:#fff;
display:block;
height:30px;
}
ul#MainNav li a:visited {
color:#fff;
}
ul#MainNav li a:hover {
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/037/navi_off.gif);
color:#fff;
text-decoration: none;
}
ul#MainNav li a:active {color:#000;}
div#AdPrimeDisplay {
width:100%;
text-align:right;
margin-bottom:10px;
}
---/*/

/*/---変更後---/*/

/*/基本の状態/*/
ul#MainNav li.nav{
width:19.5%;
height:30px;
float:left;
display:block;
text-align:center;
background:url(アップした画像のアドレス);
margin:0 0.6% 0 0;
line-height:2.0em;
}
ul#MainNav li a{
color:#363636;
display:block;
height:30px;
}
/*/訪問済み/*/
ul#MainNav li a:visited{
color:#363636;
}
/*/マウスオーバー/*/
ul#MainNav li a:hover{
background:url(アップした画像のアドレス);
color:#363636;
text-decoration:none;
}
/*/アクティブな状態/*/
ul#MainNav li a:active{
background:url(アップした画像のアドレス);
color:#363636;
text-decoration:none;
}
/*/メニュー選択中/*/
ul#MainNav li.navOn{
background:url(アップした画像のアドレス);
color:#363636;
text-decoration:none;
}
/*/メニュー選択中/*/
ul#MainNav li.navOn a{
color:#363636;
background:url(アップした画像のアドレス);
text-decoration:none;
}
/*/メニュー選択中 訪問済み/*/
ul#MainNav li.navOn a:visited{
color:#363636;
background:url(アップした画像のアドレス);
text-decoration:none;
}
/*/メニュー選択中 マウスオーバー/*/
ul#MainNav li.navOn a:hover{
color:#363636;
background:url(アップした画像のアドレス);
text-decoration:none;
}
/*/メニュー選択中 アクティブな状態/*/
ul#MainNav li.navOn a:active{
color:#363636;
background:url(アップした画像のアドレス);
text-decoration:none;
}
ul#MainNav li.navEnd{
width:19.4%;
margin:0px;
}

Posted at 2009/04/23 22:10:30 | コメント(1) | トラックバック(0) | スタイルシート(CSS) | 日記
2008年06月05日 イイね!

スタイルシート「何シテル?」のデザイン変更

スタイルシート→カスタマイズ [ 上級者用 ]→スタイル編集より


現在スタイルシートを編集している場合は新しいクラスを追加する。

/*/---------------プロフィール:ふきだし-----------------/*/
.ProfileBalloon
{
color: #444444;/*フォントの色*/
font-size:10px;/*フォントのサイズ*/
background: url('https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/846359/p7.jpg') no-repeat;/*背景画像*/
}

なお、背景色を変更したい場合は
background: url
をコメントアウトして
background-color: カラーコード;
で色を変更

padding:は使えますが
margin:のtopを使うとレイアウトが崩れます。

変更の詳細はここから

Posted at 2008/06/05 11:18:53 | コメント(0) | トラックバック(1) | スタイルシート(CSS) | パソコン/インターネット
2008年04月03日 イイね!

スタイルシートでブログページの編集

ブログのページのデザインの変更

書き換えに関しての詳細は「スタイルシートについて考える」を御参照ください。
赤い文字の部分が編集項目です。
/*/~/*/はコメントアウト
あくまで自己責任でお願いします。


以下書き換え例です。
/*/--------------------------------------------------------------------/*/
/*/-------------------------------ブログ-------------------------------/*/
/*/--------------------------------------------------------------------/*/

/*/----- ブログの各テーブル上と下のマージン -----/*/
.BlogPlate
{
margin-top: 0px;
}


/*/-----------------------------------------------------------------
border-left:
border-right:
border-top:
border-bottom:
でテーブルの上下左右のラインの色と幅を指定
-------------------------------------------------------------------/*/

/*/----- 各ブログの日付テーブル(ブログテーブルの上の部分) -----/*/

.BlogDate
{
/*/テーブルの周りのライン/*/
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
border-top:1px solid #ffffff;
border-bottom: 0px solid #ffffff;
height:23px;
color: #FFFFFF;
font-size: 15px;
margin: 0px 0px 0px 0px;
padding:2px 0px 2px 3px;
/*/日付テーブルの背景画像/*/
background-image: url('http://~アップロードした画像のアドレス');
}

/*/----- 各ブログの内容 テーブル-----/*/
.BlogBody
{
/*/テーブルの周りのライン/*/
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
border-bottom: 1px solid #ffffff;
color: #FFFFFF;
padding: 2px 6px 0px 6px;
line-height: 130%;/*/タイトル下のアンダーラインの位置/*/
word-break: break-all;/*/表示範囲に合わせて改行/*/
/*/ブログ内容テーブルの背景画像/*/
background-image: url('http://~アップロードした画像のアドレス');
}
/*/----ブログのタイトルと「この記事へのトラックバックURL」の文字列 ----/*/
.Title
{
height:30px;
/*/ background-position: 0px 0px 0px 0px;/*/
background-position: left;/*/タイトル見出しの画像の位置/*/
/*/ margin: 1px 0px 9px 0px;/*/
margin: 0;/*/タイトル見出しの画像の開始位置/*/
/*/ padding-left: 19px;/*/
padding: 8px 0 0 35px;/*/タイトル開始位置/*/
font-weight: bold;
letter-spacing:2px;
font-size: 14px;
/*/タイトル見出しの画像/*/
/*/ background-image: url('/styles/black/point.gif');/*/
background-image: url('http://~アップロードした画像のアドレス');
vertical-align: middle;
color: #FFFFFF;
background-repeat: no-repeat;
/*/ background-color: transparent;/*/

}
/*/----- ブログの内容-----/*/
.BlogText
{
font-size: 14px;
padding-bottom: 20px;
color: #ffffff;
}

/*/----- ブログテーブルの下 Posted at ・・・(ブログのトップページ)-----/*/
.BlogPosted
{
padding-right: 0px;
padding-left: 0px;
font-size: 12px;
padding-bottom: 8px;
color: #ffffff;
padding-top: 8px;
text-align: right;
}

a.LinkPosted
{
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
a.LinkPosted:link
{
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
a.LinkPosted:visited
{
text-decoration: none;
font-weight: bold;
}
a.LinkPosted:active
{
font-weight: bold;
}
a.LinkPosted:hover
{
color: #FFFFB9;
text-decoration: underline;
font-weight: bold;
}

/*/----- トラックバックURLの文字(http://~) -----/*/
.TrackBackUrl
{
color: #ffffff;
font-size: 12px;
font-weight: bold;
margin: 10px 0px 15px 15px;
}

/*/----- トラックバックのテーブル -----/*/
.TrackBackBlock
{
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
border-bottom: 1px solid #ffffff;

margin-bottom: 10px;
margin-left: 0px;
margin-top: 10px;

padding-right: 9px;
padding-left: 10px;
padding-top: 7px;
padding-bottom: 3px;

background-color: #484848;
}
/*/----- トラックバック本文 -----/*/
.TrackBackBody
{
font-size: 12px;
color: #ffffff;
line-height: 135%;
}
/*/----- トラックバック下 トラックバックしているブログのタイトルとメインタイトル -----/*/
.TrackBackPost
{
color: #ffffff;
font-size: 10px;
text-align: right;
}

a.LinkTrackBack-post
{
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
a.LinkTrackBackPost:link
{
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
a.LinkTrackBackPost:visited
{
text-decoration: none;
font-weight: bold;
}
a.LinkTrackBackPost:active
{
font-weight: bold;
}
a.LinkTrackBackPost:hover
{
color: #FFFFB9;
text-decoration: underline;
font-weight: bold;
}
Posted at 2008/04/03 13:17:28 | コメント(0) | トラックバック(0) | スタイルシート(CSS) | パソコン/インターネット
2008年04月01日 イイね!

スタイルシートでリンクの色を変える

各画面のリンク色の変更

ここで編集しているもの以外にもリンク色の変更が出来るものもありますが(カレンダーなど)リンクが無い場合(テキスト)と一緒に編集できるようになっているので、別の機会があれば。

書き換えに関しての詳細は「スタイルシートについて考える」を御参照ください。
赤い文字の部分が編集項目です。
/*/~/*/はコメントアウト
あくまで自己責任でお願いします。

クラス:link /*/ 通常のリンクの状態 /*/
クラス:visited /*/ 訪問済みのリンクの状態 /*/
クラス:active /*/ クリック時のリンクの状態 /*/
クラス:hover /*/ onmouseover(カーソルがリンクの上にある状態) /*/

○属性color:
■値
□カラーコード
16進数(#000000など)
カラーネーム(Black)など

○属性
text-decoration: テキスト文字の特性
■値:
none     何も無い状態(初期値)指定していない状態と同じ
underline   文字の下に線が付きます。
overline   文字の上に線が付きます。
line-through 文字に打ち消し線が入ります。

以下書き換え例です。

/*/----------------------------------------------------------------------/*/
/*/------------------------------リンクの編集----------------------------/*/
/*/----------------------------------------------------------------------/*/

/*/---CSSで指定されていない文字---/*/
/*/■プロフィールのページ/オークション一覧の文字列 県リンク・お友達 ■ブログのページ/コメント内のリンク トラックバックリンクのリンク■愛車紹介/車種名■フォトギャラリー/タイトル等/*/
a
{
color: #ffffff;
text-decoration: underline;
}
a:link /*/ 通常のリンクの状態 /*/
{
color: #ffffff;
text-decoration: underline;
}
a:visited /*/ 訪問済みのリンクの状態 /*/
{
color: #F1F0C2;
text-decoration: underline;
}
a:active
{
color: #ffffff;
}
a:hover /*/ onmouseover(カーソルがリンクの上にある状態) /*/
{
color: #FFFF66;
text-decoration: underline;
}

/*/-----ヘッダーのタイトルのリンク-------/*/
#Header a
{
color: #000000;
text-decoration: none;
}
#Header a:link
{
color: #000000;
text-decoration: none;
}
#Header a:visited
{
text-decoration: none;
}
#Header a:active
{
}
#Header a:hover
{
color: #EEEEEE;
/*/ text-decoration: underline; リンクのアンダーラインはコメントアウトでtext-decoration: underline;と同じ意味です。/*/
}

/*/---------- ブログタイトルのリンク --------/*/
a.LinkTitle
{
color: #EEEEEE;
/*/ text-decoration: underline;/*/
}
a.LinkTitle:link
{
color: #EEEEEE;
/*/ text-decoration: underline;/*/
}
a.LinkTitle:visited
{
color: #EEEEEE;
/*/ text-decoration: underline;/*/
}
a.LinkTitle:active
{
}
a.LinkTitle:hover
{
color: #FF0000;
/*/ text-decoration: underline;/*/
}

/*/-----プロフィールページの最新ブログ、最新パーツレビュー、最新整備手帳 ブログやお友達一覧などのメニュー項目での自分の名前と県名、なぜかプロフィールの写真にも など-----/*/
a.LinkMenu
{
font-size: 11px;
color: #ffffff;
text-decoration: none;
}
a.LinkMenu:link
{
font-size: 11px;
color: #ffffff;
text-decoration: underline;
}
a.LinkMenu:visited
{
font-size: 11px;
color: #ffffff;
text-decoration: underline;
}
a.LinkMenu:active
{
}
a.LinkMenu:hover
{
font-size: 11px;
color: #FF0000;
text-decoration: underline;
}

/*/----- プロフィールページ以外のリンクタブ文字 --------/*/
a.LinkTabActive
{
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
a.LinkTabActive:link
{
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
a.LinkTabActive:visited
{
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
a.LinkTabActive:active
{
}
a.LinkTabActive:hover
{
color: #FFFFFF;
text-decoration: underline;
font-weight: bold;
}

/*/----- プロフィールページのリンクタブ --------/*/
a.LinkTabInactive
{
color: #F8F8F8;
text-decoration: none;
font-size: 12px;
}
a.LinkTabInactive:link
{
color: #F8F8F8;
text-decoration: none;
font-size: 12px;
}
a.LinkTabInactive:visited
{
color: #F8F8F8;
text-decoration: none;
font-size: 12px;
}
a.LinkTabInactive:active
{
color: #F8F8F8;
text-decoration: none;
font-size: 12px;
}
a.LinkTabInactive:hover
{
color: #F8F8F8;
text-decoration: underline;
font-size: 12px;
}
Posted at 2008/04/01 12:47:05 | コメント(0) | トラックバック(0) | スタイルシート(CSS) | パソコン/インターネット
2008年03月31日 イイね!

スタイルシートで背景画像やスクロールバーなど基本設定

前回紹介した画像のアップロードで背景画像も変更する事ができます。

その他bodyクラス内では、色々な設定を変えることが出来ます。
スクロールバーの色やフォント、カーソル(説明が面倒なので省略)の変更など。

body部分を書き換えます。
書き換えに関しての詳細は「スタイルシートについて考える」を御参照ください。
赤い文字の部分が編集項目です。
/*/~/*/はコメントアウト
あくまで自己責任でお願いします。

以下がソースです。


/*/--------------------------------------------------------------------/*/
/*/----------------------------基本設定--------------------------------/*/
/*/--------------------------------------------------------------------/*/

/*/---CSSで指定されていない文字---/*/
/*/---------自分の名前 お友達募集メッセージ 自己紹介のタイトル(現住所等)最新ブログの日付 愛車紹介コメント フォトギャラリーのコメント等-----------/*/

body
{
color: #ffffff;
padding-right: 6px;
padding-left: 2px;
padding-top: 8px;
padding-bottom: 2px;
background-image: url('http://~アップロードした画像のアドレス');
margin: 0px;
text-align: center;
line-height:1.4;/*/行間設定/*/

/*/スクロールバーの色/*/
scrollbar-3d-light-color: #AAA9A9;
scrollbar-arrow-color: #000000; /*/矢印の色/*/
scrollbar-base-color: #423E3D; /*/外枠/*/
scrollbar-face-color: #423E3D;/*/スクロールバーの色/*/
scrollbar-highlight-color: #AAA9A9; /*/右と上の色/*/
scrollbar-shadow-color: #423E3D;/*/左と下の色/*/

/*/その他オプション(コメントアウトしてあります。)
// background: #000000;//背景色
//font-family:sans-serif;//フォントの種類
//font-size:12px; //フォントサイズ
//font-weight: 400; //フォントの太さ100~500までは変わらない?
//text-indent: 20%; //インデント
/*/
}
Posted at 2008/03/31 11:39:34 | コメント(0) | トラックバック(0) | スタイルシート(CSS) | パソコン/インターネット

プロフィール

「残念ながら雨が降ってきました。
来週に繰り越しかなぁ…」
何シテル?   06/21 07:58
ヒストリックカークラブ95(HCC95)  会長やってます。 旧車,クラシックカー全般を対象としたクラブ  横浜を中心に関東全域。 ロータス,トライアン...
みんカラ新規会員登録

ユーザー内検索

<< 2020/8 >>

      1
2345678
9101112131415
16171819202122
23242526272829
3031     

リンク・クリップ

■かわさき楽大師まつりでクラシックカーパレード★! by AUTOWAY 
カテゴリ:その他(カテゴリ未設定)
2014/04/21 22:22:30
ヒストリックカー・ランチ・ミーティング 2014 
カテゴリ:その他(カテゴリ未設定)
2014/02/04 20:25:48
HCC95 
カテゴリ:旧車関係
2008/04/23 17:01:37
 

愛車一覧

MG MGB MG MGB
MGB MK1 元石原軍団の某氏の車 エンジンは絶好調 カフェレーサーとして生まれ変 ...
フィアット フィアット500 (ハッチバック) フィアット フィアット500 (ハッチバック)
八重洲出版「オールドタイマー」にてレストアを連載中。 倉庫と物々交換から始まった企画。 ...
アメリカその他 その他 アメリカその他 その他
通勤用に使ってます。 月平均500Kmくらい走ってるかも。
ピアジオ ベスパ ピアジオ ベスパ
足に購入。 黄色ナンバー。 これから色々と手をかけていきます。
ヘルプ利用規約サイトマップ
©2020 Carview Corporation All Rights Reserved.