WordPressのタグは限りなく投稿が可能。
でも、デフォルトの状態だと登録名順でしか表示されないので、どれだけたくさん入力しても、最初に登録した30個しか表示されない。
これをランダムで表示させるようにしたい。
これで、使用頻度の高い順に50個抽出して、それをランダムに並べなおして表示。
とすることができる。
ただし、これだと、使用頻度が低いモノまで含めて50個をランダムに抽出して並べることはできない。
number を 0 にして無制限に全部抽出してからランダムに並び替える。
wp-includes/category-template.php
に wp_tag_cloud() のソースが書いてあるので、その辺をいじくって、出力する個数を50個にする。
で抽出。
とする必要がある。
WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが参加することになる。
WordPressに慣れていない人が使うことも想定できるので、ややこしいSEOモノや、使わないトラックバックなどのメタボックスは全て非表示にしておきたい。
↓↓↓
ついでに、上の「表示オプション」のチェックボックスもいらないので消えてほしい。
↓↓↓
//投稿画面の削除
頭に「//」がついている場合は、コメントアウトされて非表示にならないので、上のコードで、例えば「コメント」も非表示にしたい場合は、
頭の
の//を消しておく。
“管理者”でもメニューを削除したい場合は、一番上と一番下の
を削除すればいい。
これでデフォルトであるものや、Sangoで追加されるメタボックスのオプションは非表示にできる。
その他、プラグインで追加されるものに関しては、別途非表示にしなきゃいけない。
その時指定する、ID(key)はページソースで class や ID から推測するか…
を使って調べる必要がある。
結論から言おう。実現可能だ。
一般にこの方法を実現したいならdivを使ってやる方がいいと言われている。その通りで、最初から作るならdivでやるべきだ。
でも、フォームのソースが元々あって、そこをどうしても変更できない場合や、CSSだけで対応する必要がある場合もあるだろう。
なので、今回はCSSだけで実現する方法を紹介。
手軽なやつだと、position absoluteを使う方法と、 display blockを使う方法がある。
table, tbody, tr, th, td {
display: block;
}
これだけ。
ちなみに、tfootやtheadを使っている場合は、それも含めてdisplay block してやるといい。
IE6,7,8まで含めて対応したい場合はtableのブロック要素化が効かないかもしれない。
そんな時には、
IE6,7,8,9だけCSSで違う記述を反映させる方法
この辺を参考に。
テーブルを縦並びにするだけなら先ほどの display blockだけで大丈夫だが、PCでは普通のテーブル、スマホでは縦並びにしたい場合の対応も考えよう。
まず、レスポンシブデザインを考えるに辺り、メディアアンカーを覚えなければならない。
・PCで適用されるCSS
@media screen and (min-width:601px) { /*601px以上*/
この間にPC用のCSSを書く。
}
・スマホで適用されるCSS
@media screen and (max-width:600px) { /*600px以下*/
この間にスマホ用のCSSを書く。
}
という感じ。
「スマホ用」「PC用」と言っているが、本来の意味は、
「画面サイズが600以下の時はこのCSSだよ」
「画面サイズが601以上の時はこのCSSだよ」
という事だ。
数字は自分で勝手に変えてもいい。タブレットも分けたい場合などには、3つにしたりすることもできる。
@media screen and (min-width: 500px) and (max-width: 800px) {
画面サイズが500～800の間適用されるCSS。タブレット用とか？
}
でも、昨今のスマホの画面サイズからいくと、600pxで分けるのがおすすめ。
今回のスマホ時にだけテーブルを縦に並べたいなら、
@media screen and (max-width:600px) { /*600px以下(スマホ用)*/
table, tbody, tr, th, td {
display: block;
max-width: 98%; /*スマホ画面ほぼ一杯に広がる感じ*/
}
}
としてやれば、
こうなる。PC版はそのまま。
ちなみに、 max-width:98%; とかは自由に変えてくれ。
overflow:hidden; なんかも使えるかもしれない。
メディアアンカーの外にテーブルの幅を指定している場合は、上記スマホ用CSSを追加しても効かない場合がある。その場合は
@media screen and (min-width:601px) { /*601px以上(PC用)*/
table {
width: 680px; /*PC版の横幅*/
}
という風に、PC用メディアアンカー内に移動すること。
