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

みんカラのスタイルシートの弄り方の紹介!(画像固定、背景の透明化、フォント変更)

みんカラのスタイルシートの弄り方の紹介!(画像固定、背景の透明化、フォント変更) どーも!みやちゃんです♪
先日は多くのコメントありがとうございました。
まさか「ネタ切れになったら投下しよう」と思って1ヶ月前に書いた日記があんなことになるとは・・・
((((;゚Д゚))))ガクガクブルブル


さて、今日はみんカラのスタイルシートの編集についてです。

スタイルシートの弄り方がわからなくて、調べまわってたときに他の方々の記事が大変参考になったので、ココは僕もいっちょ真似事のように・・・(笑


お陰様で、今現在はそれっぽい感じのブログになりました。
今回紹介する設定を行うと、PCで当ブログを見た時と同じ設定になります。





参考になれば幸いです。

----------------
???「な~に言ってだこいつ!こんなの常識や!」

ワイ「」
----------------


こんなカンジかもしれませんが・・・よろしくお願いします。

※PCでみんカラを見る事がほとんど無い方にとってはメシマズ記事になります・・・
すいません:(;゙゚'ω゚'):


今回のメニューとしては・・・

・最初の基本設定
・背景画像の固定化
・記事の背景(?)を透明にする
・ブログのフォント変更


の4点です。
捨てアカを作ったのでコレを僕のブログと同じ仕様にしていきます。(もう削除しました)



「みんカラブラック」というスタイルシートを基本設定にしてます。
クソPCで書き込んでるので皆のPCと表示が異なります(笑)
それでは、始めて行きます。

 
長ったらしいので、今回のBGM
------------
だんご大家族


<ようつべ>

いいゾ~これ
CLANNADは人生です(キリッ
ちなみに僕は藤林杏が好きです(半ギレ)
------------

[まず初めの初期設定]
・スタイルシートのスタイル選択を「カスタム」にします。



<簡易編集にて>
・みんカラブラックにします



・ヘッダー画像と背景画像の変更

ヘッダー画像は930×290(300kb以下)の画像の大きさにします。



背景画像は1280×1280(300kb以下)の画像の大きさにします。



'背景画像の位置'と'背景画像のリピート'はこのように設定します。






[背景画像の固定化]
ブログを見る時にスクロールすると背景も一緒に動いちゃいますよね・・・
そこで、背景を固定します。

マイページの「管理」項目にある『スタイルシート』をクリック -①


画面上部にある『詳細編集』をクリック -②


「ページの基本」項目にある『ユーザー領域』(上から5番目の場所)という場所を見てみてください。



この『ユーザ領域』の場所を見てみると

clear:both;
background-color:#000000;
color:#eee;
background-repeat:repeat;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/storage/2049741/style/2049741_2.jpg?ct=b97f3e99e845);;


こんな感じで書いてあると思います。

まずは上から二番目の『background-color:#000000;』という部分に注目してください。
この「#000000」となっている場所を『transrate』に変更します。つまり変更後は・・・

background-color:transrate;

このようになります。
さらに最後に一番下の場所の『display:block;』という部分がありますが・・・
その次の行に『background-attachment:fixed;』を追加してください。

つまり、最終的には



clear:both;
background-color:transrate;
color:#eee;
background-repeat:repeat;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/storage/2049741/style/2049741_2.jpg?ct=b97f3e99e845);
background-attachment:fixed;

このようになります。
以上で設定は完了です。後はページの一番下にある「保存」をクリックして終了です。
心配な人は「プレビュー」でちゃんと確認してから保存しましょう(笑

お疲れ様でした。

※簡易編集で設定を変更するとリセットされてしまうので、その度に同じ変更をしてください(笑)



[記事の背景(?)を透明にする]
さて、背景画像を設定したのにブログの記事が邪魔で折角の画像がよく見えないなんてことがありますよね・・・
そこで、ブログの記事の背景やプロフィールとか色々なパーツを透明にしていきます。

では始めます。


・ブログ記事背景の透明化





「共有コンテンツ」の「コンテンツ表示」を見てください。


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;


これを

margin:0px;
padding:10px 20px 8px 20px;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png);
background-repeat:repeat;

width:580px;


このように変更します。





透明化完了です。


・タブ部分の透明化

この部分を透明にします。




font-size:12px;
width:19.5%;
height:30px;
float:left;
display:block;
text-align:center;
background:#666;
margin:0 0.6% 0 0;
line-height:2.5;


これを



font-size:12px;
width:19.5%;
height:30px;
float:left;
display:block;
text-align:center;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png);
background-repeat:repeat;

margin:0 0.6% 0 0;
line-height:2.5;

このように変更します。



・プロフィール領域などの透明化





width:300px;
padding-bottom:10px;
background:#333;

これを

width:300px;
padding-bottom:10px;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png);
background-repeat:repeat;



このように書き換えます。








設定完了です。


取り敢えず『~~表示』と書いてある設定のところを見て

background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara~~~(ry

って書いてあるところを

background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png);
background-repeat:repeat;


これに片っ端から書き換えてみてください。いろんなところが透明になります。

※初期化不可避になっても当社は一切責任を負うことはできません(白目)

いろんなところが透明になりますが、多すぎて全部説明するのがめんどくさいので「プレビュー」を使いながら色々試してみてください♪

この透明化については、こちらのユーザー様を参考にさせていただきました。
m(__)m




[ブログのフォント変更]
通常は「MSPゴシック」というフォントになっていますが、コレを「メイリオ」フォントに変更します。

ちなみに「メイリオ」フォントはWindows Vistaから採用されたフォントです。

Windows Vista 日本語版のシステム用フォントとして開発された。フォントファイル中にビットマップを持たず、レンダリングの際 ClearType の使用を前提として作成された新規なフォントである。

※wikiより




text-align:center;
font-size:14px;
line-height:1.5;
color:#333333;
font-family:'MSPゴシック',Hiragino Kaku Gothic Pro,sans-serif;
background-color:#000000;


これを


text-align:center;
font-size:14px;
line-height:1.5;
color:#333333;
font-family:'メイリオ',Hiragino Kaku Gothic Pro,sans-serif;
background-color:#000000;


このように変更します。



完成です。ちょっと字が綺麗になりました。


ちなみに、初期設定の「みんカラブルー」で試してみたら・・・



文字が黒くなって見えなくなりました。これもう(なんて書いてあるか)わかんねぇな。


いかがでしたでしょうか。
なるべく画像をたくさん用意してみたんですが・・・
参考になれば幸いです。


大変になってきたのでこの辺で解説は終わりにしときますねー(挫折)
ブログ一覧 | お勉強記事 | 日記
Posted at 2013/11/27 19:11:38

イイね!0件



タグ

今、あなたにおすすめ

ブログ人気記事

足元が美しいと惚れてしまうよね~♪
神聖 ノンタマさん

伊勢志摩一人旅その3 伊勢の超レト ...
アライグマのアライさん

柳の下の2匹目のドジョウの巻・・・♬
漁労長補佐さん

旧車を買うと言う事・・・店が大ポカ ...
伽羅csさん

『ムッチリ』と『ポッチャリ』
GGEさん

30000㎞ キリ番GETのナイト ...
hiro-kumaさん

この記事へのコメント

2013/11/27 19:20:31
便座カバー~www

あ、こんばんは~w

こんな裏ワザがあるんですね~
僕はどの分野においても中途半端なヌルい野郎なので全く分かりませんw
コメントへの返答
2013/11/27 20:21:01
便座カバー⊂二二二( ^ω^)二⊃
俺の仲間はクラナドが原因でコチラの住人に・・・w

こんばんは(・∀・)

俺も中途半端ですよー(ToT)
さなきちさん絶対知ってると思ってましたww
是非お試しください笑
2013/11/27 21:26:04
('A`)マンドクセ

色々やろうと思っててもね・・・

全ては('A`)マンドクセ

人生も('A`)マンドクセ

こんな人間にならないようにしようなw
コメントへの返答
2013/11/27 21:28:45
('A`)日記書くの('A`)マンドクセ

マンドクセ━━━━━━('A`)━━━━━━!!

入院するまではこんな僕だったんですが、改めまして・・・

今では暇人乙のクソ野郎です
\(^o^)/

元々こういう作業が大好きって性格もあるんだと思います
(´∀`)
2013/11/27 22:39:01
はじめまして。ヽ(( . .*)ペコッ
さっそく、【メイリオ】フォントに変更してみました。

もし、ご存知でしたら教えて頂きたいのですが…
アニメーションカーソルに変えたいのですが、
どこをいじったら変えられますでしょうか(‥?)

用意したカーソルファイルは、【 cooky01cur.ani 】と言うファイルで
http://www008.upp.so-net.ne.jp/ta1123/cooky01cur.ani
のHP上に【うp】してあります。

m(__)m m(__)m m(__)m。。。
コメントへの返答
2013/11/27 22:55:06
はじめまして。コメントありがとうございます♪
ページ見てみました!やはりメイリオは綺麗です♪
( ´∀`)


さて「アニメーションカーソル」についてなのですが、コレはWindows上のマウスポインターの変更でよろしかったでしょうか??
(;・∀・)

もしそうだとしたら、現在諸事情により「windows XP」を使用しているので参考になるかわかりませんが・・・
:(;゙゚'ω゚'):

それでもよろしいでしょうか??
(;´Д`)
2013/11/28 00:07:57
変更できましたヽ(^o^)ノ お手数おかけしました(;^_^A。。。

【参考URL】
http://minkara.carview.co.jp/userid/132758/blog/13276976/
コメントへの返答
2013/11/28 00:13:02
おつかれです。
こんなのもあるんですねー!
ありがとうございます。大変参考になりました
(^^)d
2013/11/28 08:02:35
おはようございます。

いつも訪問してもらったり
イイねを付けて頂きまして
ありがとうございます。

もうすぐ、登録まる2ヶ月になりますので、
参考にちょっと、いじってみようかと、
思います。
コメントへの返答
2013/11/28 13:39:54
おはようございます。

こちらこそ、イイネありがとうございました
m(__)m

かなり手抜きの説明になってしまいましたが、リンク先も参考にして色々試してみてください
( ´∀`)
2013/11/28 15:47:32
初コメ失礼しますm(_ _)m

ちょうどやりたかったので自分も試してみます♪~θ(^0^ )
コメントへの返答
2013/11/28 18:39:55
コメントありがとうございます
(´∀`)
先日の御山では勉強になりました。

参考になれば嬉しいです♪
画像編集についても書いてけばよかったです・・・
_| ̄|○
2013/11/29 21:18:05
へへへのへ(ノ°д°(; ̄Д ̄)オリはガラケー1000デスらw



コメントへの返答
2013/11/29 21:37:59
まさかのガラケー!?

スマホのみんカラアプリは使いづらいような気がします
(;・∀・)
2015/09/10 21:51:44
初めまして!
とても参考になりました♪

今度やってみますb
コメントへの返答
2015/09/12 06:27:39
初めまして。
参考になって幸いです\(//∇//)\

なかなかやる気が出ないけど、やり出すと止まりません(笑)是非是非!
愛車カッコいいですね(^O^)
2015/12/12 11:40:36
みんカラ初心者です。
このような細かいカスタムを見て自分もやってみたいと思い、google先生に訊ねてみたらこのページに着きました。
是非参考にさせていただきますね。
2016/02/13 20:29:31
参考にさせて頂きました。有り難う御座いました。
現在価格を調べてみる

おすすめアイテム

 
 

プロフィール

「コストコ行ってきました└(՞ةڼ◔)」」
何シテル?   09/10 20:22
車のチューニングは進んでも、肝心の人間はデチューンされていきます。

ハイタッチ!drive

みんカラ新規会員登録

ユーザー内検索

<< 2018/9 >>

      1
2345678
9101112131415
16171819202122
23242526272829
30      

リンク・クリップ

TEIN MONO SPORT DAMPER 
カテゴリ:その他(カテゴリ未設定)
2017/04/12 21:33:08
11.13 ゴキミ第15戦 
カテゴリ:その他(カテゴリ未設定)
2016/11/24 22:07:20
ゴキミ第15戦 No14 
カテゴリ:その他(カテゴリ未設定)
2016/11/24 22:07:09

お友達

何回かやり取りしてからお願いしますm(__)m
100 人のお友達がいます
KANKIKANKI * チビともチビとも *
TEC-DB8TEC-DB8 * かずやん!かずやん! *
deep3104deep3104 * 龍仁P龍仁P *

ファン

49 人のファンがいます

愛車一覧

ホンダ インテグラタイプR ホンダ インテグラタイプR
[走行距離] 2012年4月22日納車 52000Km ・間瀬サーキットタイム 1分 ...
スズキ セルボ・モード ぼっこれセルボ (スズキ セルボ・モード)
人生初のマイカーです。 当時は大学生で、普通車は買えなかったので軽自動車を探していたら ...
その他 画像保存庫 コンデジとスマホ (その他 画像保存庫)
cyber shot DSC-TX9で撮影した写真をうpします。 たまにスマホ画像もう ...

過去のブログ

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月
2009年
01月02月03月04月05月06月
07月08月09月10月11月12月
ヘルプ利用規約サイトマップ
©2018 Carview Corporation All Rights Reserved.