Hyper MWSのブログ一覧

タイトルでお分りのように実技ネタがないので学科です。（自動車学校かよ！ｗ）

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


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

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

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




みんカラのカスタマイズできるスタイルシートは「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界ですよね？
もちろん、

人の諸々の
愚の第一は

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

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

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


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

では、また。

←これでお分りのように、
「FIFAワールドカップ」
のtotoを某ネット銀行で買いました。(^^)










↓13試合の結果を当てます。



↑の()内数字は6月5日現在のFIFA 世界ランキングです。（追記）
単純にこのランキングだけで予想しましたｗ
ネットで色んな予想が出てるようですが。

ランキングが近い試合は、
ホーム／引き分け／アウェイの全てを選択（マルチ）してます。
ということで、
３×３×３×３＝８１通り
買いました。
えーとー、日本は・・・(^^;


↓mini totoも買いました。
　こちらは5試合を当てます。
　A組は２×２×２×２＝１６通り
　B組は２×２×２＝８通り
　です。



↓入出金明細




ポイントを1,400使ったので、
購入費は実質\9,100です。

ジャンボ宝くじを全く買わなくなったので、
たまにはこんな夢を買わないとね。(^^)










↑みんカラなので、こんなのも入れておかないとｗ



↓ワールドカップtotoの販売期間です。



toto、mini totoが買えるのは今販売してる第702回で最後です。
夢をお一ついかがですか？(^^)
興味のある方はお早めにどうぞ！



次回予告）
某場所でISをパシャパシャ撮ってきました。（花も少しだけ）
400枚余り撮って、一次選考で200枚ほど残りました。
二次、三次、四次選考と続きますｗ
最終選考をして30枚程度をupする予定です。

↓一次選考通過サムネイルです。（ファイル容量順にソート）
　約半分です。



微妙なアングルに拘って選んでます。
誰がそこまで見るねん！
自己満足の世界ですｗ


では、また。

ヘッダー画像の作成を例に、画像のリサイズとトリミングの実演動画を撮ってみました。







↑等倍トリミングの参考です。
昨年の5月24日に自宅窓から撮った月です。
175mm（35mm換算350mm）、内部テレコン使用。
三脚＆リモートレリーズ撮りです。


フォトギャラや整備手帳、愛車紹介に画像をアップする時は、
自動画像変換（800×800ピクセル以内）が使えますが、
これを使うとかなり画質が悪化します。

具体的には、
同じ800ピクセルでリサイズした画像を、
自動画像変換しないでアップした場合と比べると、
ファイル容量が半分以下になります。
つまり、それだけ圧縮率の高いJPEGに変換されてしまいます。

せっかくデジイチで撮った1600万画素や2400万画素の画像なのに、
MAX.64万画素でアップしてたんじゃもったいないです。
せめて自動画像変換なしで、
容量制限（300KB）ギリギリにリサイズしてのアップをお勧めします。
経験上、1280×960ピクセル程度の画像がアップできます。


おっと、余談が長くなりましたｗ
リサイズとトリミングを使ったヘッダー画像の作成例です。

ＯＳ　　　　　　　：　WINDOWS-7（64ビット）
画像加工ソフト：　「PAINT」（WINDOWSに標準で入ってます。）

YouTubeサイトでの再生








↓元画像です。
　車の中からウィンドーを通して撮ってます。



↓リサイズ＆トリミング後（PAINTで文字を入れました。）






ついでにヘッダー画像の入れ方を書いておきます。

(1)マイページの左にある[スタイルシート]を選択



(2)[簡易編集]を選択



(3)ヘッダー＆タイトル項目のヘッダー画像にある[参照]をクリックし、作成したヘッダー画像ファイルを選択



(4)一番下の[保存]をクリック





ヘッダー画像更新まで30秒ぐらい掛かります。

このままだとヘッダー画像に”○○○のページ”という文字が出るので、消したい方は次の設定（追加）をして下さい。

(5)[スタイルシート] → [詳細編集]

(6)下のほうにある[ヘッダータイトル]の制御文の下に
　”ｄｉｓｐｌａｙ：ｎｏｎｅ；”を追加
　　（注　↑はHTMLの都合上、全角文字にしてあります。
　　　あと、コロンとセミコロンを間違えないようにして下さい。）



(7)[保存]をクリック

ヘッダー画像更新まで30秒ぐらい掛かります。
尚、ヘッダー画像を入れ替えると追加した文は消えるので、
再度追加する必要があります。




余談２）
リサイズ（縮小）のアルゴリズムには、
バイリニア補間、バイキュービック補間、Lanczos3等色々あるようですが、PAINTはバイキュービックに＋αしたようなアルゴリズムで、
画質はかなり良いようです。（ネット情報より）

「フォトショップ」はアルゴリズムを選べたはずです。

各アルゴリズムの詳細は、 「画像リサンプリングの比較検証」で。





[　おまけ　撮れたて　]

裏庭のサボテンの花が咲いたので撮りました。
綺麗に咲いた花を見れるのは１～２日間ぐらいらしいです。

カメラ　　　 　：　Panasonic GH3（ミラーレス一眼）
レンズ　　 　 ：　45mm/F1.8
撮影モード　：　絞り優先AE
画像ファイル：　RAW現像
画像サイズ　：　1280x960

※接写撮りにはクローズアップレンズを使ってます。

















※6/8追加





↓合成です。


↓昭和30年代の同じ棚田です。














以上、PAINTの基本操作その他について、
簡単に説明させてもらいました。
少しでも参考になれば嬉しいです。

画像つながりということで、
次はRAW現像（レタッチ）の実演動画にしようかな？
初心者レベルですが・・・(^^;

では、また。

まだ寒い日もありますが、徐々に春らしい陽気になってきましたね。

太平洋側はもう桜が満開の所もあるようです。
こちら日本海側はやっと開花したぐらいで、まだ蕾状態のところも多いです。





さて、花見やサクラ撮りを予定してる人も多いかと思いますが、
開花の状態って気になりますよね？
そこで、ネットの開花情報サイトを紹介します。

色々探してみましたが、このサイトが地点名も多く、情報も詳細です。

↓トップページ
http://season.tenki.jp/season/sakura/
　地図の上にマウスポインタを載せると地域を選択できます。
　都道府県でも選択できます。



↓みん友さんの多い東海地域を選択した画面
　地図の上にマウスポインタを載せると都道府県を選択できます。



↓静岡を選択した画面
　地図の上の花びらマークにマウスポインタを合わせると、
　地点名と開花状態を表示します。



↓下には地点の写真と住所の一覧があります。




↓「秋葉ダム千本桜」を選択した画面
　詳細な情報が見れます。

　(1)開花情報



　(2)特徴



　(3)地図
　　縮尺を変えられます。
　　地図の上の花びらマークにマウスポインタを合わせると、地点名と開花状態を表示します。





以上、参考までに。
開花状態をライブカメラで確認できれば間違いないですけどね。
（そんなところもあります。）



[　おまけ　newカメラ（Panasonic GH3）インプレ　]
まだ、newカメラでは”桜待ち”かつ天気が悪いこともあって、
窓からの風景とかテスト撮り程度しかしていません。
それでもoldカメラと比べると黒成分が強くなって、
引き締まった絵になったのは判ります。
ダイナミックレンジも広くなった印象です。

ただ、解像度という点では期待以下でした。
前回のブログで解像感が上がったと書きましたが、
室内の暗い場所で撮ったので勘違いしました。
oldカメラと比べると明らかにクリアなんですが、
高感度ISO（G2の800→GH3の3200）によるものでした。
残念ながら、このあたりはセンサー格付け通りなんでしょうかねぇ。
μ4/3のセンサーサイズでは限界？
ネットで見た写真では解像感もいい感じだったのですが・・・

やっぱり”RAW現像”しないとだめなのかな？
解像感が良く見える写真って大抵RAW現像なんですよねー
まぁ、解像感が良い＝良い写真とは限らないですが・・・
って自分を納得させてみるｗ

”RAW現像”って何？　っていう人もいるので一応説明を書いておきます。
まず、最近Myブログに書いてる「JPEG撮って出し」とは、
イメージセンサーのデータを画像処理した”RAWデータ”を
カメラ内でJPEGファイルに変換（”現像”という表現をします。）したものです。

これに対して「RAW現像」とは、
RAWデータをカメラ内でRAWファイルの形で保存し、
PC上で現像ソフトを使ってRAWファイル → JPEGファイルに現像したものです。

簡単に言うと、
カメラ内で自動現像するか、PC上でマニュアル現像するかの違いになります。

RAW現像のメリットは、画像毎に画質パラメータを変えて現像できることです。
自動現像でもある程度画質パラメータは変更できますが（撮る前にカメラで設定）、
マニュアル現像では現像した画像を見ながら細かくパラメータを設定することができます。
ちなみに、Panasonicのカメラには、
「SILKYPIX Developer Studio」
という現像ソフトが付属しています。


以上、今のところnewカメラの静止画についてはこんな印象です。
満足度は30％ぐらいって感じです。(^^;

次に動画ですが、こちらは期待通りいい感じです。
1280×720（17Mbps）→ 1920×1080（72Mbps）になったので当たり前ですけどね。
動画もたまに撮るHyperにとってはこちらも気になってました。

GH3の動画ってフルサイズ機も含めてトップクラスなんです。
価格.comのクチコミなんか見てると半分以上が動画についてで、
動画主目的でGH3を買う人も多いようです。

↓お見せできる短いテスト動画です。（実質２０秒）
　マニアック？ｗ






↑通常シャッターの音って、本当のメカニカル音なんでしょうか？
スピーカーから鳴ってない？（笑）

では、また。

フォトギャラ「ハザード」を見て頂いた方の中には、
「どうやって作ってるの？」と思う人もいるかもしれないので説明を書いておきます。

フォトギャラup時に書くつもりでしたが、昨日は試行錯誤したり、ヘッダー、プロフ画像も作成したのでみんカラエネルギー尽きましたｗ







画像の加工をする人やアニメーションGIFを作ったことのある人はお解りですね？
難しいことはしてません。(^^)

GIFとはGraphics Interchange Formatの略で、
JPEGと同じく画像ファイルフォーマット（圧縮）です。

JPEGと違うのは、”アニメーションGIF ”と言って、
複数画像を1つのファイルに収録してアニメーション表示する機能があります。

今回のハザード点滅は、JPEGファイルの代わりにこのGIFファイルをアップしています。


では、画像加工も含めて具体的に説明します。

まず、画像を用意します。
今回はハザード点滅なので、点灯、消灯状態それぞれの画像（近い構図）を用意します。

↓ [ 1 ]　点灯




↓ [ 2 ]　消灯




次に、[ 1 ]のファイルをコピーし、
↓ [ 2 ]の消灯部分をコピーして、[ 1 ]コピーファイルの同じ部分に貼り付けます。
　　画像サイズが大きいと、こんな加工がし易くなります。
　　サイズが違う場合は、縮小／拡大して合わせます。
　　（頑張れば傾きも合わせられますが）
　　WINDOWS標準の「PAINT」だけでできます。
　　※これは等倍画像です。




↓ [ 3 ]　出来上がった[ 1 ]の消灯版




あとは、[ 1 ]と[ 3 ]を交互に表示すれば点滅になります。

アニメーションGIF作成にはフリーソフト「Giam」を使いました。
WINDOWS-7(64ビット)でも動作します。

Giamのダウンロードは、こちら　からできます。、
※ダウンロード、使用は自己責任でお願いします。





↓ [ 4 ]　Giam起動画面です。




↓ [ 5 ]　上記[ 1 ]、[ 3 ]ファイルをドラッグ＆ドロップして読み込み、
　　　　　それぞれのウェイト（表示）時間を設定します。




↓ [ 6 ]　あとは実行確認した後、GIFファイル名を指定して格納すれば出来上がりです。



↓ [ 7 ]　ブログでもGIF動きます。
　　　　　小細工要りますが・・・
　　　　　この部分のソース表示を見れば解るかと。







みんカラでアップするには、
GIFファイルサイズを300KB以内にする必要があります。
なので、凝ったもの、大きな画像サイズのものは作れません。
ただし、ブログに貼る場合は大きなサイズでもいけるかもしれません。（未確認）

ちなみに、上記GIF（500x281）で226KB、ヘッダー画像GIF（930x268）で291KBです。

ヘッダー、プロフィール画像としてアップする場合は、
ファイル名の拡張子をGIF　→　JPGに書き替える必要があります。

それと、プロフィール画像、フォトギャラでは、
自動画像変換　○しない　をチェックしてアップします。

皆さんも遊んでみませんか？



[　番宣　]-----------------------------------------------------------------------

今夜は満月なので、いつもの番宣（４回目？）です。
今夜21:00～　からMOUMOONのスタジオ生（？）ライブがUSTREAMで配信されます。
ゆるゆる、gdgdなアコースティックライブです。
あ、J-POPですよ。

↓　これはカバー曲ですが、こんな感じのライブです。
　　（たぶん、ニコ生で配信されたライブ映像）






↓興味ある人は こちら で。
http://www.ustream.tv/channel/moumoon

-------------------------------------------------------------------------------


では、また。