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

どーも！みやちゃんです♪
先日は多くのコメントありがとうございました。
まさか「ネタ切れになったら投下しよう」と思って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:'ＭＳＰゴシック',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;


このように変更します。



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


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



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


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


大変になってきたのでこの辺で解説は終わりにしときますねー(挫折)