Simplicityの特徴 › フォーラム › 要望・機能追加など › タイル系スタイルの最初だけ大きなエントリーカードその下にタイルスタイルにしたい
- このトピックには3件の返信、1人の参加者があり、最後に
nisiにより10年、 2ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年4月7日 11:26 PM #38820
nisi
ゲストお世話になります。
タイル系スタイルに最初だけ大きなエントリーカード
その下にタイルスタイルをお願いします。 -
2016年4月8日 12:14 AM #38827
Hidekichi
ゲスト2つ目以降のタイルスタイルのアイテムを下に持っていくのはカスタマイズでできます。が、もしかするとmasonryのやり方で別途方法があるかも知れません。そこらは調べてないのでわかりませんが、まず、親テーマjavascript.js内の、
function doMasonry() { jQuery('#list').masonry({ //<!-- #listは記事一覧を囲んでる部分 --> itemSelector: '.entry', //<!--.entryは各記事を囲んでる部分--> isAnimated: false //<!--アニメーションON--> }); }この部分の
itemSelector: '.entry',
をitemSelector: '.entry:not(:first-child)',
と変更します。続いて、子テーマjavascript.jsに以下のスクリプトで#mainの中に新しく.firstItemと言うブロックを先頭に作り、その中にリストの最初のアイテムを移動させます。
リストアイテムには、様々なクラスがついているんですが、面倒臭いので全部classを取り除いて、.entryを新たにつけます。これは好きに変更しても構いません。どうせhtmlの構造自体は変わってるんですからcssは好きにいじくれます。
(function($){ $(function(){ $("#main").prepend("<div class='firstItem'>"); $("#list .entry:first-child").prependTo( $("#main .firstItem")); $("#main .firstItem .entry").removeAttr("class").addClass("entry"); }); })(jQuery);で、後は子テーマstyle.cssにて、
#main .firstItem { width: 100%; } #main .firstItem .entry { float: none; width: 100%; margin: 20px 0; border: 1px solid #ddd; border-radius: 5px; }などとしてスタイルします。中身はいじってないので好きにスタイルして下さい。
もちろん、スマホでも他の端末でも、動作してしまいますので、任意の環境では動作してほしくない場合はその条件を書く必要があります。
また、cssでメディアクエリー等を考慮しないとスマホの時などに表示が崩れる可能性もあるので気をつけて下さい。ガッツリ崩れるというわけではなく、おそらく他のリストアイテムとサイズ感が違うとかそういう感じで統一性が無いような見え方をする場合があるということです。逆に、PCなどの表示の時は、最初のアイテムだけ大きくさせたいぐらいのことですから、何かしら目立たせるスタイルをしても良いと思います。
できるだけ色々な端末でテストを重ねて、問題が無いようなスタイルをしてみて下さい。 -
2016年4月8日 12:20 AM #38829
Hidekichi
ゲストちなみに親テーマのjavascript.jsの部分はアップデートで元に戻ってしまいます。
ここらはアップデートごとに再設定をする必要があります。またレスしたコードはわいひらさんの修正があるまで、クォートやその他諸々がコード化して読み難いと思いますがbbpressのデフォルトの動作なので、わいひらさんの修正を待つか、以下のように修正して下さい。
&#039; は ' シングルクォート
&quot; は " ダブルクォート
&gt; は >
&lt; は <シングル・ダブルはどちらでも良いです。ただし閉じ間違いをしないように。シングルの時はシングルで閉じる、ダブルの時はダブルで閉じると言うことです。これぐらいでしょうか。
-
2016年4月8日 1:38 AM #38837
nisi
ゲストHidekichi さん有難うございます
試行錯誤してなんとか表示はされました。
勉強になります。
また何かありましたら宜しくお願いします。
-
-
投稿者投稿
- トピック「タイル系スタイルの最初だけ大きなエントリーカードその下にタイルスタイルにしたい」には新しい返信をつけることはできません。