これまで調べた内容を元にランキングタグの基本設定をしてみるか。さて、どうすればいいものかな……。
※ランキングタグ内では改行が無視されるので改行したい人は<br />をいれましょう。
まずは、ランキングタグ欄の範囲を分かりやすくするために背景を黒地にして表示してみる。
<div style="color:#fff;background:#000;">ランキングタグ</div>
そうするとこうなる。
・PC
・スマホ
PC版だと画面いっぱいに広がる。
スマホ版だと横にmarginがかかる。
そして両方とも中央寄せになる。
これが基本。
これがまず問題で、背景を付けるとPCでは画面幅いっぱいに広がるし、スマホだとmarginがかかる。
あとすべてが中央寄せになるのも困ったもの。
基本的に中央寄せは短文、見出しなどに適用するもので、全体に適用するべきではない。長文にして改行してみると分かるけどとても見苦しい。
通常は左寄せで、見出しとして使う部分だけ中央寄せがいい感じ。ということでまずはtext-align:leftを指定してみるか。
はい、こんな感じですね。
・PC
・スマホ
おっと、スマホでは左側が詰まってますが、まだ許容範囲、適当にpaddingでも入れておけばいいでしょう。
ただし問題なのはPC版ですね。んー、画面の左側に来るのはいいのですが、画面幅によっては非常にデザインが狂いますね……。
さて、どうするか……。
とりあえず、幅を制限してみることにしましょう。そうすればいい感じになるでしょう。
例えば720pxに設定してみようか。width:720pxを追加します。あと端っこに寄るのを防ぐためにmargin:0 autoも追加しておきましょう。
おおいい感じですね。これでPCはよさそうです。さて、スマホはというと……。
はみ出ます。
あぁ、あれですね……
max-widthがないので、画面が広がリングのようです。うぅ、max-width:100%をかけておいてくださいよ……他のclassから持ってこようとしてもclassがつかえないのですよね……。
はぁ、どうしましょう。
仕方ないです。スマホの画面サイズの最小幅を基準にして決めることにしましょう。
スマホの最小画面サイズは横320pxなのでそれに合わせます。iPhone5/SEのサイズで、使っている人はそこまで多くないので、切り捨てて、その一回り大きい360pxに合わすのもありです。（アンドロイドだと基本のサイズになるのでこれ以上は無理）
ついでにスマホにかかってるmargin 20pxもこの場で切り落とします。
ということでまずは基準ができます。
<div style="margin:20px auto;width:280px;">
<div style="text-align:left;margin:0 -20px;padding:.5em;">
ランキングタグ欄
</div>
</div>
これが外枠の基本になります。
2つに分けているのは、外側にmargin:20px auto;でPC用に中央寄せをして、次のmargin:0 -20px;でスマホのmarginを打ち消すためです。
両方ともmarginを指定しないといけないので2つに分けざるをえないのです。
width:280px;は
320px - 40px(スマホにかかっているmargin分) = 280px
から来ています。もし最大を360pxにしたい場合は
360px - 40px(スマホにかかっているmargin分) = 320px
width:320px;に設定すればいいでしょう。
padding:.5emはお好みで。入れなくてもいいですが、左端に詰まった印象になります。
ここで背景を設定したり枠線を引いたりすればランキングタグであることが分かるでしょう。
2番目のブロックに入れてください。
なおPC版で全体にかけたい場合はさらに外側にブロック要素を用意してそこにも背景色を指定しましょう。
<div style="margin:20px auto;width:280px;">
<div style="text-align:left;margin:0 -20px;padding:.5em;background:#282828;color:#f7f7f7;">
ランキングタグ欄 背景変更版
</div>
</div>
<div style="margin:20px auto;width:280px;">
<div style="text-align:left;margin:0 -20px;padding:.5em;border:1px solid #ddd;">
ランキングタグ欄 枠線追加版
</div>
</div>
これで基本的な設定が終わりましたね。
PC版
スマホ版
まぁPC派の人には若干物足りない幅かもしれませんが、スマホのことを考えると仕方ないのですよね……。これ以上大きくできないし。
あぁ、今のままで中央寄せというならそのままコード書いてください。結構不格好になりますが致し方ないです。
フォームやら段組み、チャット風とか凝ったランキングタグにしたい場合はこのやり方にしてください。一番外枠を厳密に決めておかないと後で困るので
んー、それにしてもなかなか難易度が高いですねぇ。活動報告とは別の方向で苦労しました。
Classが使えればよかったんですけどね。
ということで基本的な設定が終わったので次から活用法です。
ちなみにですが、活動報告と違ってこちらではclassがつかないのは、classを指定してJavascriptが動いている部分があるからだと推測しています。
評価の部分、やブクマなど、こちらで使っているのもの邪魔をさせないためにclass指定ができないようになっているんだと思います。
活動報告の方はIDで結構やっているっポイのと、評価とかがないのでclass指定が可能っぽいですね。
ランキングタグ欄は厳しいですねぇ……。
