
左寄せ/ 中央合わせ/ 右寄せ
という意味の「位置合わせ」です。主にサイドバーに設置されたプラグインそれぞれの位置の指定について。FC2の仕様上のことも絡めてご説明します。
こういうの嫌じゃないですか?
「えー 別に (´・ω・`)」という方はスルーで(笑)
上記サンプル画像は私が公式のフリープラグインを利用してテキトーに作成したものですが、あるものは左に寄っており あるものはセンタリングされている状態。こっちの方が綺麗ではないかと。
全部同じ位置合わせ。
こうして位置を揃えるのにテンプレート側のソースであれこれやろうとしてもできない場合があります。何故ならCSSというのは優先順位というのが決まっていますので、強制力の強い内容が含まれていて書き換え(上書き)不能となる場合があるからです。そんな時に修正すべきはテンプレートソースではなくプラグイン側です。テンプレートではできない インラインCSS(style属性) を用いると、style属性でのCSS指定は強制力が強い(最強ではないが)ので上手くいくかもしれません。
まずはプラグインのソース内容を見ないことには始まりません。プラグインの設定 > 該当プラグインの「詳細」
赤く色づけした部分、これが「位置指定」です。大抵のコードは最初に <div> というのがくっついてます。あるいは <table> かもしれません。いずれにしても、style="text-align: 位置指定;" を追加します。div の後ろに半角スペースを入れてからstyle〜と続けます。divタグが無いよ という場合には付けてください。追加した場合には終了タグというのも必要ですので、文字列の最終に </div> を追加します。
<div style="text-align: 位置指定;">内容</div>
これを書くと挟まれている 画像 や テキスト がその指定に倣います。
いやそうじゃないんだ、外部プラグインを使っていて形がもうできていて、その全体像の位置を合わせたいんだ、と。その場合にはこの方法では動きません。text-align というのはdisplayプロパティの値がblockであるボックスの「中」にあるinline値を持つ要素にしか作用しません(専門的なのでスルーで良いです)
ブロックレベル要素を動かすには(つまりやってみてダメだった場合は)、margin を使います。
センタリング
<div style="margin: auto;">内容</div>
右寄せ
<div style="margin-left: auto;">内容</div>
これは例えば「Twitterのタイムライン表示」などのガジェット全体像の位置合わせなど、中に含まれるテキストは左寄せでガジェット全体像はセンタリング、とかそういう場合です。
左寄せはどうするか、なのですが、webの標準位置というのは「左寄せ」ですから書かなければ勝手に左寄せになります。ですから必然的に位置指定を行うのは「中央」と「右寄せ」ということになります。
プラグイン全体の位置合わせはテンプレート側の指定を残しておけば良いと思います。カテゴリ内にサンプルのような「画像」であったり、第三サービスのウィジェットだとかそういったものがある場合。やっぱり真ん中に位置していた方が見栄えが良いんですよね。それ以外のプラグイン、例えば「最新コメント」「カテゴリ一覧」といったものは『左寄せ』のままにしておく、だとか。そういったときの対処法でした。
There are no comments yet.