えふまび雑記
オンラインゲーム・FF14のプレイ雑記や攻略、他マビノギ等色々なゲームのこと、ラーメンのこと、日々の出来事などなど。
プロフィール

勇吹(いぶき)

管理人:勇吹(いぶき)
FF14FF14FF14
メインキャラ:Mina Harker
サーバー:Gungnir
マビノギマビノギ(休止中)マビノギ
メインキャラ:勇吹
メインサーバー:キホール→タルラーク

のんびり、マッタリ、なんとなく、適当、器用貧乏、らーめんと剣と楽器演奏が好き。
いつまでもへっぽこから抜け出せなくても、楽しければそれでいいのだ!

☆MMLのUPは無期限停止中☆
 >>MML置き場へ行く

☆MML講座あります☆
 >>MML講座を見る

☆マビ演奏動画あります☆
 >>演奏Link

☆実況プレイやってます☆
とろろという名前でやってます。
 >>気ままに実況プレイ 一覧
>>ブログ

説明当ブログについて説明

Chromeが一番綺麗に見えます。
不定期更新です。

いぶきにゃ。
ご報告頂けるととても嬉しいです!

トラックバックやコメントの内容によっては、予告無しに削除することがあります。ご了承ください。

FF14クラス表
マビノギスキル表
2013/3/12更新
※Ababill/聖典群のブログ様(閉鎖)の
ブログパーツを参考にしています。
来訪者数
延べ来訪者数
最近の記事
コメント
カテゴリ
月別アーカイブ


ブログ内検索
スポンサーサイト
--------(--) --:--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

あまり役に立たないブログ講座
2010-07-09(Fri) 23:59
日頃色んなブログさんを巡回しているのですが・・・
残念なことに、なんだかレイアウトが崩れてしまっているブログさんを結構見かけます。
ブラウザによってはキレイに表示されるので、管理人さんが気づいていないんだと思います。

原因はわかっているので、仲のいい人ならすぐ知らせるのですが、そうでないとなんだかいちいち指摘するのもなぁ・・・と思って、スルーしてしまっています。

・・・が、やっぱり気になるので、記事にしてしまうことにしました。

私はFC2ブログしか使ったことがないので、あくまでFC2ブログでのお話です。
そして、ぶっちゃけ素人話なんで、間違ってたら申し訳ないです。
私の場合はこれでうまくいってますよ、という程度に思ってもらえたらと思います。


ブログでは「テンプレート」というものを使用して個性を出すことができます。
このテンプレート、自分で作ることもできれば、別の人が作成して公開されているものを使用することもできます。
大多数の人が、他の人が作成したものから選んで使用しているのではないかと思います。
(テンプレートごとに決められているルールを守る必要があります)

テンプレートには、「2カラム」や「3カラム」といった種類があります。
2カラムというのは、

ブログ

という風に、サイドメニュー部分+記事部分の2つで構成されているもの。

3カラムというのは、

ブログ

という風に、サイドメニュー部分2つ+記事部分の3つで構成されているものです。
他にも種類がありますが、大体はこの2つかと思います。


さてこのテンプレートですが、全体・サイドメニュー・記事部分それぞれに、横幅が指定されています
まび雑記を例に挙げると、

ブログ

こんな感じで指定されています。
205+430+205は850にならないですが、これはサイドメニューと記事部分の間に少し余白を設けているためです。
余白部分も合計すると、ちょうど850になる計算です。
(間隔を開けないように指定することも可能です)


ブログは、文字だけでなく、画像や動画を挿入することもできますよね。
ゲームのプレイ日記なら、スクリーンショットを加工して表示させている方が多いかと思います。
この画像にも当然横幅というものが存在していることはご存知だと思いますが・・・

サイドメニュー、記事部分それぞれに指定されている横幅を、画像の横幅が超えてしまうと、レイアウトが崩れます

どんな風になるかというと、

ブログ

こんな感じ。

何故こうなるかというと、画像の横幅が各カラムに指定されている横幅を超えてしまったために、サイドメニューの横幅+記事部分の横幅が、全体に指定されている横幅を超えたからです。
全体に指定されている横幅以内に収まるよう表示させようとすると、上下に分けて表示せざるを得なくなるわけです。

ブラウザによっては、キレイに修正して表示してくれるものもあるかもしれませんが、ブラウザによってはばっちり崩れて表示されるので、画像の横幅は、サイドメニューならサイドメニュー、記事なら記事に指定されている横幅より下であることが望ましいです。

まび雑記の場合、少し余裕をもたせて、サイドメニューに表示させる画像の横幅は180以下に、記事に表示させる画像の横幅は400以下にしてあります。


では横幅の指定数値をオーバーしないようにするにはどうすればよいか、といいますと。
アップロードする画像を予め縮小してやるのもいいのですが、縮小してしまうとなんだか見えにくいといったこともあると思います。
そこで便利なのが、サムネイル表示というものです。

ファイルをアップロードする画面に、下記設定項目があると思います。

ブログ

「同時に作成する」にチェックを入れて、横幅を指定数値以下に、縦幅はまぁ適当な感じに指定してやると、自動的にちょうどいい大きさで画像が表示されるようサムネイルを作成してくれます。

ブログ

記事を書く時に、この「サムネイルで記事を書く」ボタンで画像を挿入すると、サイズ調整されたものが表示されます。


では、いくつ以下に横幅を指定すれば良いのかを調べる方法ですが・・・
それはテンプレートごとに異なることため、ちょっと説明が難しいです(^-^;

まず、ブログ管理画面の環境設定から、「テンプレートの設定」を開くと、テンプレートの編集が可能になります。
その中の「スタイルシート」というところのどこかに、横幅の指定サイズが記載されています。

まび雑記のテンプレートだと、

.all{
width:850px;
border:0px;
margin:0px;
padding:0px;
}

という風に記述されているところの width:850px; が全体の横幅です。
同様に、

.entry_body{
width:430px;
border:0px;
margin:5px 0px 20px 0px;
padding:0px;
}

と記述されているところの width:430px; が記事部分の横幅で・・・

.side_line_body{
width:205px;
vertical-align:top;
border:0px;
margin:0px;
padding:0px;
}

と記述されているところの width:205px; がサイドメニュー(多分左側)の横幅です。

(ちなみに製作者からカスタマイズ許可されているテンプレートなら、このあたりの数値をいじって、好みに変更することもできます)


と、つらつら書いてみましたが、テンプレートごとにスタイルシートの記述方法は違いますし、よくわからない場合は、とりあえずサイドメニューは180以下、記事部分は400以下くらいのサムネイル表示にしておけば、ほぼ大丈夫なのではないかなと思います。

尚これは、動画や、アクセスカウンターやブログパーツを使う場合なども同様のことが言えます。

ちなみにニコニコ動画の場合、script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/smxxxxxx?w=320&h=240" みたいに記述するケースが多いと思いますが、この w=320 が横幅で、h=240 が縦幅です。
この w の数値を例えば160にするなら、hは120にしてやる(比率を一緒にする)と、ちょうど縦横半分のサイズで表示可能になります。

自分のブラウザで見てずれてなくても、メニューや記事の横幅から画像部分がはみでていたら、それは別のブラウザではレイアウトが大きく崩れて見えている可能性が高いですので、修正をオススメします。


というわけで、あまり役に立たない気がしつつ書いてみました。
疑問・質問は私の知識レベルが追いつかないと思うので、受け付けません!w
自分で色々調べてみるのも面白いですよ!



コメント
はじめまして、楽文謙ともうしますヾ(・ω・`)
以前よりちょこちょこと拝見させてもらっておりました!

自分も4月に楽天からFC2に引っ越したんですが
レイアウト崩れには相当悩まされました。

「これでレイアウト完璧!」と思うも、念のため
開設の時に読者さんに問題点を指摘してもらうよう
お願いした所、物凄い数のコメントがついたという
前科(?)がありますわ。
IEと火狐でも全然違うみたいですしな・・・w

サムネイルの機能は使った事がなかったので
参考にさせてもらいますわ。

これからも更新を楽しみにしておりますよ(´∀`*)
| 楽文謙 #-
2010-07-10 10:16(Sat) [編集]

初めてコメントします。
参考になる記事をありがとうございます^^
『画像アップするときのこのサムネイルとはなんぞ?』と思いながら放置してましたが、改めて自分のブログ確認してみたいと思います。
ありがとうございました~(⌒▽⌒)
| 瑞迦 #mB.BT9Ic
2010-07-12 09:00(Mon) [編集]

>楽文謙さん
なんかお見かけしたことあるお名前と思ったら金ぴかジャイさんじゃないですか!
はじめましてです~。

ブラウザによってCSSが反映されたりされなかったりする箇所があって厄介ですよね。


>瑞迦さん
はじめまして!
お役に立てたならば何よりでした。
更新がんばってください~。
| 勇吹 #ADJD0lrw
2010-07-14 14:00(Wed) [編集]

コメントの投稿












管理者にだけ表示を許可する

トラックバックURL
http://ibuki27.blog76.fc2.com/tb.php/1103-7411deab
...この記事にトラックバックする(FC2ブログユーザー)


カレンダー
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Twitter
各種リンク
巡回サイト

++管理者ページ++
Flash Player

FLASH

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。