- このトピックには27件の返信、2人の参加者があり、最後に
により1年、 11ヶ月前に更新されました。
-
投稿
-
-
はじめまして。
simplicityが気に入ってしまって、日々愛用させていただいております。
今後もよろしくお願いします。タイトルにもありますように、当方、一覧リストをタイル3列にしているのですが、この最初の（最新の）記事のみ「大きなエントリーカード」にできないものでしょうか。
もしできるのであれば、最初だけ「エントリーカード（デフォルト）」にする方法も教えていただきたいのですが、いかがでしょうか。
いろいろ検索してみたのですが見つからず、諦めかけております。よろしくお願いいたします。
-
はじめまして。
そのカスタマイズに関しては、やろうと思えば、かなりの時間をかければできないこともないかもしれませんが、やるとしたらかなり難しいものになると思います。
タイルは、MasonryというjQueryプラグインで後から強制的にいろいろなスタイルを変更しています。
そういった強制的に変更されているスタイルを、「Masonryよりも高い優先度のCSSセレクタ」を使ってスタイルを上書きすれば出来るのかもしれませんが、結構難しいものになると思います。
あとPHPの編集も必要になるかもしれません。
なので、サポート対象外のものにもあるように、僕自身もどのようにしていいのかパッと思いつかず詳しい作業の見通しが立たないので、詳しい方法はご勘弁いただければと思います。 -
masonryを使わず、タイルでなくてもよかったら最初だけ大きく、残り3列というのはまぁそこそこ簡単にできますよ。
サンプル: 最初だけ大きく3列 カード表示 | codepen
※ scssで書いてます。scssのままでは正しく動作しませんので、css欄の下向き三角からview compiledを選びcssに変換した後、それをコピペして必要な箇所は修正してください。ちなみにリストスタイルはデフォルトでOKです。サンプルは最後も大きくなってますが表示する数を調整すれば正しく表示されます。
-
わいひらさん
ご返答ありがとうございます。
ご返答いただいていることに気づかず、今頃のお礼となりました。
失礼いたしました。なるほど。
ややこしいのですね(笑)
自分なりに模索してみます！わざわざありがとうございました。
-
hidekichiさん
ご返答ありがとうございます。
ご返答いただいていることに気づかず、今頃のお礼となりました。
失礼いたしました。私のイメージするものとかなり近いです！
素晴らしいの一言です！さっそくコピペしていろいろやってみるのですが、ワタクシ記事を書く方が専門でして、CSSの編集等に関しては素人ゆえになかなかうまいこといきません。
大変厚かましいのですが、この場を利用させてもらって細かなところまで教えていただくことは可能でしょうか？
これ以上は勘弁！ということであれば、ご遠慮なくおっしゃってください(笑)どうぞよろしくお願いいたします。
-
ちなみに当方のサイトは
http://hiroshimap.info/
こちらになります。図々しくフライングで貼るようですみません。
このままで、最初だけ大きくしたいと考えております。どうぞよろしくお願いいたします。
-
まずはリストスタイルをカスタマイザーでデフォルトにして、 #45277 の通りにやってみてください。
子テーマを導入されていないようなら、子テーマを導入してから、すでにされているようなら子テーマのstyle.cssに上記のレスの手順でやってみて、何かしらわからないことがあったらまた質問してください。
例えば何がうまく行かないのかを、リストのタイトル部分の色が変わらないとか、.post-metaの背景色を変更したいとか、なるべく具体的に伝わるように書いてもらえれば回答できるものは答えます。
-
わたしも同じように表示方法を変更したいと思い、
スレッドを見て回っていたらこのスレッドを発見したので早速実施してみました。SCSSからCSSにコンパイルしてから子テーマのstyle.cssに貼り付け、
キャッシュをクリアしてから確認しましたが表示方法が変わらずです。。 -
> ヌルさん
> リストスタイルはデフォルトでOKです
リスト表示をデフォルトにされましたか？
またスキンとか利用されてませんか？ -
Hidekichiさん
デフォルトには戻しましたが、スキンの利用していますね・・・(⌒-⌒; )
現在は付属のMonokaiスキンを利用していますが、
やはり難しいでしょうかレイアウトの変更というのは。理想としては最新記事1件のみ大きなサムネイル、あとは
2列カードのように並べて、トップページの情報量を増やしたいなと
思っています。 -
Hidekichiさん
こちらの投稿内容とはちと違うのですが、
＞サンプル: 最初だけ大きく3列 カード表示 | codepen
について教えて頂ければ・・・。
私のサイトでも3列カードにしているのですが、
タイトルの文字数の増減でタイルの高さが変わってしまいます。
Hidekichiさんのサンプルではタイトルの文字数に関係なくタイルの高さが統一されていますが、この表示方法はどうすれば宜しいのでしょうか？よろしくお願い致します<(_ _)>
-
おかしい、レスしたのに反映されてない。
とりあえずわいひらさんの救援待ちです。
今しばらくお待ちください。 -
Hidekichiさん
少し前からなりましたよね
postIDだけついて反映されないという感じですかね
長文書いて反映されないと悲しくなります 笑 -
ヌルさんのサイトってバイクのやつでしたっけ？
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とかですかねぇ。
-
実は色々返信してたんですが、投稿が反映されないので、現在はわいひらさんの対応待ちです。レスが無くなっているようならまた書きます。
> kazuさん
#45277のサンプルはタイトルは特別揃えてませんが、これとはまた違うサンプルですかね？
タイトルの高さを揃えるためには、高さを設定してoverflow: hiddenを設定すればタイトルは切れますが高さは揃えられます。
あ、タイルですか、つまりはそれぞれの.entryの高さを揃えるということならcssのflexが勝手にやってます。heightなどは必要ありません。
flexは親になる要素に設定して子は特別何もしないでも揃います。
サンプル: flexの自動的に高さを揃えるサンプル | jsFiddle
※ベンダープレフィックスをつけてないのでfirefoxかchromeで見てくださいそれぞれのulの子要素の3つ目のliに改行をした文字を入れてます。3つ目の要素の要素の高さに高さが揃いますよね？
折り返しが発生する場合は、隣り合う要素に対して高さが揃います。
逆にheightやwidthを入れると要素のサイズが固定されてしまうので上手く動作しなかったりします。 -
-
Hidekichiさん
死ぬほど感動しましたｗ
今書き換えて確認したところ、思い通りのことが出来ています！！
デフォルトスキンに戻した後、
子テーマに頂いたサンプルコードを記入して、その後スキンを適用したら無事に
色の体裁が元に戻って良くなりました。あと少し気になったのですが、サムネイルの画質が所々劣化している部分が
出ているのですが、これはサムネイル画像の縦横比処理の問題でしょうか？ -
-
最後のカードも１／３に
ならないんですかね？ -
僕も気になるさん
それは記事の表示件数を揃えれば大丈夫ですよ。
-
えっと、普段使わないIE ver11で確認するとレイアウトが崩れてますね(⌒-⌒; )
IEのバージョンの問題でしょうかねぇ・・・edgeで見るとちゃんと再現されているようですが。 -
IEのバージョンの問題でしょうかねぇ・・・edgeで見るとちゃんと再現されているようですが。
edgeとIEは別物ですからね・・・
IEは結構デザインが崩れます
chromeとかで確認して
やったーできたーとか言っていたらIEではデザインが崩れていてテンションがた落ちというね・・・違いについて
https://blogs.msdn.microsoft.com/osamum/2015/08/07/edge-iewindows-10-web-12395/
メジャーなモダンブラウザーとの相互運用性を高めたからなんですかね
IEの独自機能をカットしたりしています -
みきさん
レスありがとうございます。
IEもEdgeも使いにくいので私はOperaしか使っていないです。
【昔はIE,Netscapeで動作確認しています】
なんて文言がどこのHPでも見られましたが、今ではそんな
のけ者的文言も無くなってきたというのは喜ばしい事ですが、
現状としては1ヶ月のアクセスを確認したところ、
IEを使用しているユーザー数が全体の１５％程を占めているので
なかなか無視も出来ないのが辛いです。。 -
> 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なりを使えるんだからそっち使えよと促せるといいんですけどね。
-
Hidekichiさん
#45277のサンプルのやつです。
私もタイル3列を使っているんですが、タイトルが長くなった場合、記事一覧で横並びの高さがズレるので、毎回タイトルの文字数をある程度合わせていました。サンプルを見たときタイトルの文字数がオーバーしても記事一覧の高さが揃っているので、どうするのかなぁって思ってたんです。
ご説明ありがとうございます。
ちょっと試してみます。 -
Hidekichiさん
返信がやっとみれました！
せっかくご教授頂いたコードを無駄にしたくないので、
ぜひ使いたくて色々とIEだけは別のレイアウトで表示できる方法を探したのですが
あまりにも情報が多すぎてどれがどれやら・・・といった感じです。個人的な理想としては、レイアウトが崩れてしまうIEだけは
デフォルトのレイアウトを読み込んで、それら以外は
子テーマに書き込まれたスタイルシートを読み込むという事が
出来ればと思っています。ブラウザごと（IEだけ）に読み込むCSSを切り替える方法を調べてみます！
有難う御座いました
-
> 僕も気になるさん
#48184 はヌルさんの言うように数を調整するのが手っ取り早いです。パッと思いつく方法はあと2つあり、1つはjQueryで不足分をダミーとして入れるというのと、最初のアイテム以外にmax-widthを仕込むという方法です。この場合、justify-content: space-betweenではなく、flex-startという値になるかと思います。ただし不足が出る場合はそこにスペースができるためあまり良い方法とはいえません。
※ページは続くのに不要なスペースができるということで。また最初を大きくするという事は、ページを遡って最後のページを表示した時に、やはり質問のような事態になるかも知れません。
なので、最初を大きくするという部分はこれらも解消するという意味合いでは、.homeの時最初を大きくして、それ以外は全てのアイテムを3列なり2列にするというのが正しいのではなかろうかと思います。 -
どうもどうもどうも
僕です
わざわざご回答有難うございますHidekichi殿が以前に提示された
http://codepen.io/Hidekichi/pen/OyGxmL
黙ってコピペしてますm(_ _)m今回のコードは
リストの末端カードが気になり
思わず書き込んでしまいましたIE11だって無問題ですヨ
-
