読者です 読者をやめる 読者になる 読者になる

デジカメと電子玩具に戯れる日々

ブログ模様替え…CSSめんどい^^;

f:id:dualmoon:20151203234041j:plain:w700
Nikon D4S + AF-S NIKKOR 80-400mm f/4.5-5.6G ED VR 2015/05/04 呉 護衛艦いなづま
ドックで整備中の護衛艦いなずま。全長151mの4400トン型護衛艦

見ておわかりの通り先週、日曜日にブログの大規模な模様替えを行った。
background-colorを前と同じカラーにしたので、見た目、前とあんまし変わらないかもしれない。
ブログ内容は写真をメインとしているので、背景は黒に近い方が写真をひきたてるような感じがするからだ。
ただ、背景色が暗いとなんとなくダークな感じもしてしまう。

写真は今年の5/4に、岩国FSDの翌日に呉を観光したときのもの。
(港内の見学船に乗って撮ったもの)
f:id:dualmoon:20151203234538j:plain:w900
Nikon D4S + AF-S NIKKOR 80-400mm f/4.5-5.6G ED VR 2015/05/04 呉 JMU
ドックに書いてあるとおり戦艦大和が建造されたドック。

昼間、カスタマイズしている最中は一時的に背景色は白だったのだが
貼ってある写真が、戦車とか兵器ばかりなので^^;なんか重厚感が半減してしまう感じがした(笑)
やっぱり黒に近い感じが落ち着くか…。

f:id:dualmoon:20151203234738j:plain:w900
Nikon D4S + AF-S NIKKOR 80-400mm f/4.5-5.6G ED VR 2015/05/04 呉 JMU

私は記事を折りたたまない方なのと、最近、写真を大量に貼り付ける感じになってきたので
2カラムでサイドバーが横に付いている感じに移行したかった。
ただ、2カラムのデザインで初期設定の記事幅が900ピクセルとれないものがほとんどなので
めんどくさいがCSSをいじることになる…。

f:id:dualmoon:20151203235043j:plain:w700
Nikon D4S + AF-S NIKKOR 80-400mm f/4.5-5.6G ED VR 2015/05/04 海上自衛隊呉地方総監部
古いレンガの建物が目を引く感じ…。

カスタマイズはGoogle Chromeに搭載されているデベロッパツールでソースを解析しながら、CSSを書き換えてゆく。
仕事でたまに集中的にいじってるけど、未だdivとclassの関係よくわかってなかったりするもんなぁ(汗)
CSSでビジュアル的に組めるソフトって、adobeMUSE CCぐらいしか知らないし…。
www.adobe.com
CSS対応ソフトって、結局コードを組んでプレビューするような感じのものがほとんどなので非常に使いづらい。
初心者向けのは、見づらく複雑なコードを吐きまくるので、不具合が出るとトレースしづらかったり…。
私の仕事的には、フォトショップイラストレーターを使用するのがメインなので^^;

f:id:dualmoon:20151203235323j:plain:w900
Nikon D4S + AF-S NIKKOR 80-400mm f/4.5-5.6G ED VR 2015/05/04 呉 おおすみ

そんな感じで、あちこちのカスタマイズページを参考にしながらデザインCSSの箇所にタグを適当に書いていく。
タグはせめてDreamweaverのコードヒントのようなものを実装して欲しいなぁ。
(一文字打ったらタグの候補が自動的に出たり、挿入してくれたりする)

…と、文句たらたらなのだが、3カ所ほど修正箇所を残して今日のカスタマイズはおしまいにする(苦笑)
レイアウト確認は、Chromeでしか行ってないので、狐とかIEOperaで崩れてたらゴメンなさい^^;

f:id:dualmoon:20151205205359j:plain:w900
Nikon D4S + AF-S NIKKOR 80-400mm f/4.5-5.6G ED VR 2015/05/04 呉 潜水艦 おやしお型
見学船のアナウンスによるとディーゼルエンジンを回して、蓄電池に充電しているところだそうです。
なかなか見れないとのことなので、ラッキーだった。

f:id:dualmoon:20151205213129j:plain:w700
Nikon D4S + AF-S NIKKOR 80-400mm f/4.5-5.6G ED VR 2015/05/04 呉 護衛艦せとゆき

細かい修正箇所は

・ブログのスキンを左右2カラムのものに入れ替えた。

・記事の幅を900ピクセルぐらいにした。
 記事幅が広がったので少しセンターをずらした。

・記事内の写真の角を丸くしてドロップシャドウを入れた。
(背景が黒くなったのでドロップシャドウが見えなくなった…^^;)

・元々スキンが背景色の白をベースにしているものだったので、黒文字をすべて白系に書き換えた。

・サイドバーのカテゴリをスタックしていくタイプのものにカスタマイズ。
 掲載している過去記事のリンクをJava scriptを使ったものにカスタマイズした。

・アマゾンリンクも800ピクセルぐらいの横幅にした。

おおざっぱに以上の部分をカスタマイズした。

f:id:dualmoon:20151205205141j:plain:w700
Nikon D4S + AF-S NIKKOR 80-400mm f/4.5-5.6G ED VR 2015/05/04 呉 護衛艦いなづま

問題な箇所は日付の横に入っている白いボーダーの要素がどこにあるかわからん…^^;
Chromeデベロッパツールで追ってどこにあるかわからんなぁ…たぶん見落としてるんだろうけど。
これだから、CSSは非常にメンドイわ…ほんと。

しかし、カスタマイズして横幅が広くなったおかげで、変に短く改行しなくて済むのはありがたい。
サイドバーの●は背景黒用のものに作り直したパーツを置かないといけないな…^^;
自宅のノートにはフォトショいれてないから、クリスタでつくるか…。
そのうちフォトショも購入して入れておこう…。

平成27年度 自衛隊観艦式 [DVD]

平成27年度 自衛隊観艦式 [DVD]