タイル系スタイルの最初だけ大きなエントリーカードその下にタイルスタイルにしたい

Simplicityの特徴 フォーラム 要望・機能追加など タイル系スタイルの最初だけ大きなエントリーカードその下にタイルスタイルにしたい

  • このトピックには3件の返信、1人の参加者があり、最後にnisiにより10年、 2ヶ月前に更新されました。
3件の返信スレッドを表示中
  • 投稿者
    投稿
    • #38820
      nisi
      ゲスト

      お世話になります。
      タイル系スタイルに最初だけ大きなエントリーカード
      その下にタイルスタイルをお願いします。

    • #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などの表示の時は、最初のアイテムだけ大きくさせたいぐらいのことですから、何かしら目立たせるスタイルをしても良いと思います。
      できるだけ色々な端末でテストを重ねて、問題が無いようなスタイルをしてみて下さい。

    • #38829
      Hidekichi
      ゲスト

      ちなみに親テーマのjavascript.jsの部分はアップデートで元に戻ってしまいます。
      ここらはアップデートごとに再設定をする必要があります。

      またレスしたコードはわいひらさんの修正があるまで、クォートやその他諸々がコード化して読み難いと思いますがbbpressのデフォルトの動作なので、わいひらさんの修正を待つか、以下のように修正して下さい。

      &#039; は ' シングルクォート
      &quot; は " ダブルクォート
      &gt; は >
      &lt; は <

      シングル・ダブルはどちらでも良いです。ただし閉じ間違いをしないように。シングルの時はシングルで閉じる、ダブルの時はダブルで閉じると言うことです。これぐらいでしょうか。

    • #38837
      nisi
      ゲスト

      Hidekichi さん有難うございます
      試行錯誤してなんとか表示はされました。
      勉強になります。
      また何かありましたら宜しくお願いします。

3件の返信スレッドを表示中
  • トピック「タイル系スタイルの最初だけ大きなエントリーカードその下にタイルスタイルにしたい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)