一覧リスト(タイル3列 画像縦横比保存)について

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など 一覧リスト(タイル3列 画像縦横比保存)について

  • このトピックには27件の返信、2人の参加者があり、最後に僕も気になるにより4年、 1ヶ月前に更新されました。
27件の返信スレッドを表示中
  • 投稿者
    投稿
    • #45271 返信
      og
      ゲスト

      はじめまして。
      simplicityが気に入ってしまって、日々愛用させていただいております。
      今後もよろしくお願いします。

      タイトルにもありますように、当方、一覧リストをタイル3列にしているのですが、この最初の(最新の)記事のみ「大きなエントリーカード」にできないものでしょうか。
      もしできるのであれば、最初だけ「エントリーカード(デフォルト)」にする方法も教えていただきたいのですが、いかがでしょうか。
      いろいろ検索してみたのですが見つからず、諦めかけております。

      よろしくお願いいたします。

    • #45275 返信
      わいひらわいひら
      キーマスター

      はじめまして。

      そのカスタマイズに関しては、やろうと思えば、かなりの時間をかければできないこともないかもしれませんが、やるとしたらかなり難しいものになると思います。
      タイルは、MasonryというjQueryプラグインで後から強制的にいろいろなスタイルを変更しています。
      そういった強制的に変更されているスタイルを、「Masonryよりも高い優先度のCSSセレクタ」を使ってスタイルを上書きすれば出来るのかもしれませんが、結構難しいものになると思います。
      あとPHPの編集も必要になるかもしれません。
      なので、サポート対象外のものにもあるように、僕自身もどのようにしていいのかパッと思いつかず詳しい作業の見通しが立たないので、詳しい方法はご勘弁いただければと思います。

    • #45277 返信
      hidekichi
      ゲスト

      masonryを使わず、タイルでなくてもよかったら最初だけ大きく、残り3列というのはまぁそこそこ簡単にできますよ。

      サンプル: 最初だけ大きく3列 カード表示 | codepen
      ※ scssで書いてます。scssのままでは正しく動作しませんので、css欄の下向き三角からview compiledを選びcssに変換した後、それをコピペして必要な箇所は修正してください。

      ちなみにリストスタイルはデフォルトでOKです。サンプルは最後も大きくなってますが表示する数を調整すれば正しく表示されます。

    • #45725 返信
      og
      ゲスト

      わいひらさん

      ご返答ありがとうございます。
      ご返答いただいていることに気づかず、今頃のお礼となりました。
      失礼いたしました。

      なるほど。
      ややこしいのですね(笑)
      自分なりに模索してみます!

      わざわざありがとうございました。

    • #45726 返信
      og
      ゲスト

      hidekichiさん

      ご返答ありがとうございます。
      ご返答いただいていることに気づかず、今頃のお礼となりました。
      失礼いたしました。

      私のイメージするものとかなり近いです!
      素晴らしいの一言です!

      さっそくコピペしていろいろやってみるのですが、ワタクシ記事を書く方が専門でして、CSSの編集等に関しては素人ゆえになかなかうまいこといきません。
      大変厚かましいのですが、この場を利用させてもらって細かなところまで教えていただくことは可能でしょうか?
      これ以上は勘弁!ということであれば、ご遠慮なくおっしゃってください(笑)

      どうぞよろしくお願いいたします。

    • #45727 返信
      og
      ゲスト

      ちなみに当方のサイトは
      http://hiroshimap.info/
      こちらになります。

      図々しくフライングで貼るようですみません。
      このままで、最初だけ大きくしたいと考えております。

      どうぞよろしくお願いいたします。

    • #45728 返信
      hidekichi
      ゲスト

      まずはリストスタイルをカスタマイザーでデフォルトにして、 #45277 の通りにやってみてください。

      子テーマを導入されていないようなら、子テーマを導入してから、すでにされているようなら子テーマのstyle.cssに上記のレスの手順でやってみて、何かしらわからないことがあったらまた質問してください。

      例えば何がうまく行かないのかを、リストのタイトル部分の色が変わらないとか、.post-metaの背景色を変更したいとか、なるべく具体的に伝わるように書いてもらえれば回答できるものは答えます。

    • #48114 返信
      ヌル
      ゲスト

      わたしも同じように表示方法を変更したいと思い、
      スレッドを見て回っていたらこのスレッドを発見したので早速実施してみました。

      SCSSからCSSにコンパイルしてから子テーマのstyle.cssに貼り付け、
      キャッシュをクリアしてから確認しましたが表示方法が変わらずです。。

    • #48121 返信
      Hidekichi
      ゲスト

      > ヌルさん

      > リストスタイルはデフォルトでOKです

      リスト表示をデフォルトにされましたか?
      またスキンとか利用されてませんか?

    • #48127 返信
      ヌル
      ゲスト

      Hidekichiさん

      デフォルトには戻しましたが、スキンの利用していますね・・・(⌒-⌒; )

      現在は付属のMonokaiスキンを利用していますが、
      やはり難しいでしょうかレイアウトの変更というのは。

      理想としては最新記事1件のみ大きなサムネイル、あとは
      2列カードのように並べて、トップページの情報量を増やしたいなと
      思っています。

    • #48147 返信
      kazu
      ゲスト

      Hidekichiさん

      こちらの投稿内容とはちと違うのですが、

      >サンプル: 最初だけ大きく3列 カード表示 | codepen

      について教えて頂ければ・・・。

      私のサイトでも3列カードにしているのですが、
      タイトルの文字数の増減でタイルの高さが変わってしまいます。
      Hidekichiさんのサンプルではタイトルの文字数に関係なくタイルの高さが統一されていますが、この表示方法はどうすれば宜しいのでしょうか?

      よろしくお願い致します<(_ _)>

    • #48154 返信
      Hidekichi
      ゲスト

      おかしい、レスしたのに反映されてない。
      とりあえずわいひらさんの救援待ちです。
      今しばらくお待ちください。

    • #48156 返信
      みき
      ゲスト

      Hidekichiさん
      少し前からなりましたよね
      postIDだけついて反映されないという感じですかね
      長文書いて反映されないと悲しくなります 笑

    • #48136 返信
      Hidekichi
      ゲスト

      ヌルさんのサイトってバイクのやつでしたっけ?

      Simplicity2の場合はスキンのcssより子テーマstyle.cssのが後で読み込まれるのでcss自体はスキンよりも優先されるはずですが、カスタマイザーで色やら何やらされている場合はその設定はstyle.cssを上書きします。

      ただカスタマイザーの設定では色やらだけなので、リストスタイルがデフォルトであればサンプルのでいけると思うんですよ。

      3列ではなく2列なら別のサンプルもあります。やってることは同じですけども。

      サンプル: トップのリスト一覧をflexで並べる-デザイン例-2列 | codepen
      サンプル: リスト2列デザイン レスポンシブ対応 | codepen

      他にも色々あります。

      条件的にはリストスタイルはデフォルトというだけなので、おそらくキャッシュが効いているように思うんですけどね。
      なんせ、サンプルのcssは公式から取得しているので、最新のデフォルトの親テーマstyle.cssなのです。それを上書きしているので、実質子テーマstyle.cssに書いてるのと同じことなのです。
      なので、たいてい適用されると思うんです。

      プライベートウィンドウやシークレットウィンドウで確認してもらってできないようなら、子テーマstyle.cssにcssを適用してる状態でレスしてもらえればサイトを見に行きますけれども、サンプルで動作しているのでそれが動作しない他の理由としてはキャッシュやらしかないかなぁと思うんですけども。

      確かX-SERVERと言われていたように思うので、他に考えられるのはmodPagespeedとかですかねぇ。

    • #48153 返信
      Hidekichi
      ゲスト

      実は色々返信してたんですが、投稿が反映されないので、現在はわいひらさんの対応待ちです。レスが無くなっているようならまた書きます。

      > kazuさん

      #45277のサンプルはタイトルは特別揃えてませんが、これとはまた違うサンプルですかね?

      タイトルの高さを揃えるためには、高さを設定してoverflow: hiddenを設定すればタイトルは切れますが高さは揃えられます。

      あ、タイルですか、つまりはそれぞれの.entryの高さを揃えるということならcssのflexが勝手にやってます。heightなどは必要ありません。

      flexは親になる要素に設定して子は特別何もしないでも揃います。

      サンプル: flexの自動的に高さを揃えるサンプル | jsFiddle
      ※ベンダープレフィックスをつけてないのでfirefoxかchromeで見てください

      それぞれのulの子要素の3つ目のliに改行をした文字を入れてます。3つ目の要素の要素の高さに高さが揃いますよね?
      折り返しが発生する場合は、隣り合う要素に対して高さが揃います。
      逆にheightやwidthを入れると要素のサイズが固定されてしまうので上手く動作しなかったりします。

    • #48176 返信
      わいひらわいひら
      キーマスター

      #48136
      #48153
      や、その他トピックのhidekichiさんの返信が「保留」になってしまっていました。
      とりあえず、全てを公開にしておきました。
      ただ、僕が公開した時間で、返信が表示されてしまうので、時系列的にちょっとおかしいかもしれませんがご了承ください。

    • #48182 返信
      ヌル
      ゲスト

      Hidekichiさん

      死ぬほど感動しましたw

      今書き換えて確認したところ、思い通りのことが出来ています!!

      デフォルトスキンに戻した後、
      子テーマに頂いたサンプルコードを記入して、その後スキンを適用したら無事に
      色の体裁が元に戻って良くなりました。

      あと少し気になったのですが、サムネイルの画質が所々劣化している部分が
      出ているのですが、これはサムネイル画像の縦横比処理の問題でしょうか?

    • #48183 返信
      ヌル
      ゲスト

      Hidekichiさん

      URLを張るのを失念しておりました。

      http://www.centrum.jp/wordpress

    • #48184 返信
      僕も気になる
      ゲスト

      最後のカードも1/3に
      ならないんですかね?

    • #48185 返信
      ヌル
      ゲスト

      僕も気になるさん

      それは記事の表示件数を揃えれば大丈夫ですよ。

    • #48188 返信
      ヌル
      ゲスト

      えっと、普段使わないIE ver11で確認するとレイアウトが崩れてますね(⌒-⌒; )
      IEのバージョンの問題でしょうかねぇ・・・edgeで見るとちゃんと再現されているようですが。

    • #48189 返信
      みき
      ゲスト

      IEのバージョンの問題でしょうかねぇ・・・edgeで見るとちゃんと再現されているようですが。

      edgeとIEは別物ですからね・・・
      IEは結構デザインが崩れます
      chromeとかで確認して
      やったーできたーとか言っていたらIEではデザインが崩れていてテンションがた落ちというね・・・

      違いについて
      https://blogs.msdn.microsoft.com/osamum/2015/08/07/edge-iewindows-10-web-12395/
      メジャーなモダンブラウザーとの相互運用性を高めたからなんですかね
      IEの独自機能をカットしたりしています

    • #48190 返信
      ヌル
      ゲスト

      みきさん

      レスありがとうございます。

      IEもEdgeも使いにくいので私はOperaしか使っていないです。

      【昔はIE,Netscapeで動作確認しています】

      なんて文言がどこのHPでも見られましたが、今ではそんな
      のけ者的文言も無くなってきたというのは喜ばしい事ですが、
      現状としては1ヶ月のアクセスを確認したところ、
      IEを使用しているユーザー数が全体の15%程を占めているので
      なかなか無視も出来ないのが辛いです。。

    • #48191 返信
      Hidekichi
      ゲスト

      > IE ver11
      > IEのバージョンの問題でしょうかねぇ

      いえIEだからです(笑)
      うちはOSがlinuxなのでIE環境でどうなるかは再現できません。どうすれば直るかも見てないし触ってないのでわかりません。

      参考: flexboxのバグに立ち向かう(flexboxバグまとめ)| Qiita

      一応色々方法はありますがIEユーザーが一定数いて無視できないなら対応する必要がありますし、それほどでもという場合は無視しててもいいんじゃなかろうかと。IEのflexへのバグやらは少なくとも2014年頃には言われててMSが修正しないのが問題なだけです。
      IE直すのあれなんでedgeを作ったんでしょうけどね。

      世の中にはpolyfillというものもあります。古いブラウザの未対応部分をjavascriptで補おうというようなものです。
      例えば、Modernizr | githubとか。どこまで対応できるかは何とも言えませんけれども。

      caniuseではie11以外の全てのブラウザでflexは対応されていて、IE11のみ一部対応となってます。どこに問題があるかわかれば手を入れられる可能性もありますが、IE11のためだけに何かするのもアレなので、いつまでIE使ってんだタダでfirefoxなりchromeなりを使えるんだからそっち使えよと促せるといいんですけどね。

    • #48197 返信
      kazu
      ゲスト

      Hidekichiさん

      #45277のサンプルのやつです。
      私もタイル3列を使っているんですが、タイトルが長くなった場合、記事一覧で横並びの高さがズレるので、毎回タイトルの文字数をある程度合わせていました。

      サンプルを見たときタイトルの文字数がオーバーしても記事一覧の高さが揃っているので、どうするのかなぁって思ってたんです。

      ご説明ありがとうございます。
      ちょっと試してみます。

    • #48255 返信
      ヌル
      ゲスト

      Hidekichiさん

      返信がやっとみれました!

      せっかくご教授頂いたコードを無駄にしたくないので、
      ぜひ使いたくて色々とIEだけは別のレイアウトで表示できる方法を探したのですが
      あまりにも情報が多すぎてどれがどれやら・・・といった感じです。

      個人的な理想としては、レイアウトが崩れてしまうIEだけは
      デフォルトのレイアウトを読み込んで、それら以外は
      子テーマに書き込まれたスタイルシートを読み込むという事が
      出来ればと思っています。

      ブラウザごと(IEだけ)に読み込むCSSを切り替える方法を調べてみます!

      有難う御座いました

    • #48258 返信
      Hidekichi
      ゲスト

      > 僕も気になるさん
      #48184 はヌルさんの言うように数を調整するのが手っ取り早いです。

      パッと思いつく方法はあと2つあり、1つはjQueryで不足分をダミーとして入れるというのと、最初のアイテム以外にmax-widthを仕込むという方法です。この場合、justify-content: space-betweenではなく、flex-startという値になるかと思います。ただし不足が出る場合はそこにスペースができるためあまり良い方法とはいえません。
      ※ページは続くのに不要なスペースができるということで。

      また最初を大きくするという事は、ページを遡って最後のページを表示した時に、やはり質問のような事態になるかも知れません。
      なので、最初を大きくするという部分はこれらも解消するという意味合いでは、.homeの時最初を大きくして、それ以外は全てのアイテムを3列なり2列にするというのが正しいのではなかろうかと思います。

    • #48262 返信
      僕も気になる
      ゲスト

      どうもどうもどうも
      僕です
      わざわざご回答有難うございます

      Hidekichi殿が以前に提示された
      http://codepen.io/Hidekichi/pen/OyGxmL
      黙ってコピペしてますm(_ _)m

      今回のコードは
      リストの末端カードが気になり
      思わず書き込んでしまいました

      IE11だって無問題ですヨ

27件の返信スレッドを表示中
返信先: 一覧リスト(タイル3列 画像縦横比保存)について
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)