「W600white」:大きめの画像を表示するスキン-2


黒(W600black)が先に出た、「大きめの画像を表示するスキン」の白版。「画像一覧」を愛用する方向け^^、リンク色をあえて変えずに作成しました。
メニューフォントは「Jinky」。
「class="w598"」で細いグレイの枠がつきます。「class="l"」で左寄せ、「class="r"」で右寄せ。「クラス」の使い方は、前記事(W600black)に書いたとおり。
「class="p560"」で両側に20pxの余白をとります。
グルっぽにて、配布を開始しました。
memo《Ameba》の限界文字数
長すぎる文章を入力すると、
「
保存ができませんでした。
下記のエラー内容をご確認ください。
記事内容は半角40000文字以内で入力してください。
エラーが確認できない場合は、記事内容を他に保存して、
しばらく時間をおいてから、記事を投稿して下さい。
」
というメッセージが出る。400文字づめ50枚程度か。
「
保存ができませんでした。
下記のエラー内容をご確認ください。
記事内容は半角40000文字以内で入力してください。
エラーが確認できない場合は、記事内容を他に保存して、
しばらく時間をおいてから、記事を投稿して下さい。
」
というメッセージが出る。400文字づめ50枚程度か。
「W600black」:大きめの画像を表示するスキン

今回グルっぽで配布する「W600black」は、「幅600pxの画像を記事に置ける」ようにカラムレイアウトを配分しています。特にメッセージボードを非表示にすると、ブログトップアクセス時の最新記事表示スペースが大きいので、画像ブログさん向き(のつもりで、作ったw)。(SSは、GoogleChrome/テーマ:Grayscale)大きな画像の周囲に白枠線を引くCSSを、スキンCSSに仕込んであります(幅598px以上の画像を想定)。imgタグの(自動で入っている)「border="0"」を消して、「class="w598"」を入れてください。
▽例
<img src="[画像URL]" alt="[ブログ名]" border="0" />
↓
<img src="[画像URL]" alt="[ブログ名]" class="w598" />
(例はこの記事の最初の画像。オリジナルのサイズは幅800pxです。「class="w598"」を入れると自動的に画像が記事からはみ出さないよう縮小します。クリックすると画像一覧ページに飛び、画像一覧ページでは原寸表示されます。ただしブラウザの縮小機能ですので、画像加工ソフトで縮小するより、画質は劣ります)
「class="l"」で左寄せ、「class="r"」で右寄せになります。白枠線は引きません。
▽タグの表示って?という方は、
(1)投稿画面の画像ボタンをクリックして、(2)「オリジナルで表示」をチェックしてから「画像を使う」をクリック、(3)HTMLタグを表示をクリック、(4)タグが表示されます。


【おまけ】シンプル&ヘッダ小さめの公式スキンデザイン
(画像ブログ向きだと思うもの)▽スイッチャー.02:7colors[AmeLab]
http://blog.ameba.jp/ucs/skin/srvskinpreview.do?skin_code=sss_02_sevencolors
▽スイッチャー.02:7dark[AmeLab]
http://blog.ameba.jp/ucs/skin/srvskinpreview.do?skin_code=sss_02_dark
▽スイッチャー.04[AmeLab]
http://blog.ameba.jp/ucs/skin/srvskinpreview.do?skin_code=sss_04
▽スイッチャー.05[AmeLab]
http://blog.ameba.jp/ucs/skin/srvskinpreview.do?skin_code=sss_05
▽ラビットペーパー
http://blog.ameba.jp/ucs/skin/srvskinpreview.do?skin_code=rabbit_paper
◆スイッチャーシリーズリンク
(ヘッダ大きめ)
▽スイッチャー.01[AmeLab]
http://blog.ameba.jp/ucs/skin/srvskinpreview.do?skin_code=sss_01
03影絵が見つからない^^;