TOPページに新着記事、最新記事をリスト化してきれいに表示したい

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など TOPページに新着記事、最新記事をリスト化してきれいに表示したい

このトピックには6件の返信が含まれ、2人の参加者がいます。1 週、 5 日前 ぴーちゃん さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #55685 返信

    ぴーちゃん

    Simplicity活用させていただいている初心者です。
    表題のカスタマイズについて教えていただきたく、書き込みました。

    出来上がりのイメージとしては
    サムネイル蟻の場合、https://prime-dict.com/
    (サムネイルなしでは、http://cherry-blossom.ciao.jp/)
    等です。
    こちらのサイトのTOPページのように並列で新着記事やカテゴリー毎の記事を掲載したいです。

    1)CSSの記載方法
    Simplicityの(S)新着記事のウィジェットでは、そのウィジェットを掲載しているページの
    カテゴリーしか表示できないため、TOPに掲載すると一覧が表示されない仕様になっています。
    他プラグインでNewpost Catchもあったのですが、cssをSimplicityと同じようにする記載
    方法がわからず、できればSimplicityのウィジェットなどを使って実現できればと思うのですが
    Simplicityのウィジェットと同じスタイルにするためにはどのようにカスタマイズすれば
    よろしいでしょうか?

    2)並列表記の方法
    また整列させるようにするためにはどのようにすればよいでしょうか?
    並列にするためにPage Builder by SiteOriginなどの利用も考えたのですが、Simplicityと
    相性が悪いプラグインのため、使っていません。

    宜しくお願いいたします。

  • #55695 返信

    かうたっく

    出来上がりのイメージとしては
    サムネイル蟻の場合、https://prime-dict.com/

    この場合のCSSは、下記の通りでいけると思います。

    新着記事ウジェット {
    	width: calc(50% - ( 0.5 * 30px ) );
    }
    
    最新記事ウィジェット {
    	width: calc(50% - ( 0.5 * 30px ) );
    }

    marginが30pxの場合。20pxの場合は下記。

    新着記事ウジェット {
    	width: calc(50% - ( 0.5 * 20px ) );
    }
    
    最新記事ウィジェット {
    	width: calc(50% - ( 0.5 * 20px ) );
    }

    例えばですが

    なんらかのプラグインなど入れて表示して、この部分に➡『新着記事ウジェット・最新記事ウィジェット』該当のHTMLを指定し、セレクタを当てるのを試してみるとかでしょうか。

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

    1.参考サイトを見る限りでは、Newpost Catchを利用されているようです。
    CSSなどについては、以下を参考にしてみてください。
    Newpost Catch ? サムネイル画像付きの「最近の投稿」を表示できるWordPressプラグイン | ネタワン

    2.並列表記は、以下の「メインカラムの2カラム化」のコードを利用してみてください。
    Simplicityの基本的な文章装飾スタイルを使う方法まとめ

    ただ、サポート対象外のものにもあるように、PHPを用いて手間のかかるカスタマイズや、プラグインを利用したカスタマイズは、サポート外となっています。
    サポート外のものに関しては、上記のようにアドバイス程度のものしかする余裕がないです。ですので、うまくいかなかった場合は、クラウドソーシング等で依頼してみてください。
    https://wp-simplicity.com/reference/crowdsourcing-service/

  • #55700 返信

    桜子

    横レスすみません。
    Simplicityの新着ウィジェットに「表示したいカテゴリー」を指定して表示させることはできないでしょうか?
    今は除外指定できるのですが、逆に指定したカテゴリーだけ指定できれば、Newpostのようなプラグインを使わずとも実現できると思いましたもので・・・

  • #55814 返信

    ぴーちゃん

    わいひらさん、かうたっくさん

    ご返信遅れましてすみません。その後四苦八苦しながらいろいろいじっていましたが、ようやくプラグインを使わず、ご案内いただいた「メインカラムの2カラム化」で対応できました!

    ただ1のNewpost catchを使うにあたってCSSに、Simplicityにあるウィジェットの[s]新着・人気記事や[s]新着と同じスイタイルに適用するにはどうすればよろしいでしょうか?
    Simplicityの[s]新着・人気記事ウィジェットと横に並べると縦幅が異なり、見栄えがよくないため悩んでいます。

  • #55816 返信

    かうたっく

    ただ1のNewpost catchを使うにあたってCSSに、Simplicityにあるウィジェットの[s]新着・人気記事や[s]新着と同じスイタイルに適用するにはどうすればよろしいでしょうか?

    どちらかのstyleを合わせるように工夫する。とかでしょうか。

    Simplicityの[s]新着・人気記事ウィジェットと横に並べると縦幅が異なり、見栄えがよくないため悩んでいます。

    実際の様子を見ていないのと、実装したソースを見てないのでなんとも言えません…。

    #55698でわいひらさんのいうように

    サポート外のものに関しては、上記のようにアドバイス程度のものしかする余裕がないです。ですので、うまくいかなかった場合は、クラウドソーシング等で依頼してみてください。
    https://wp-simplicity.com/reference/crowdsourcing-service/

    またページに書いてる通りですかね。。

    ※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。

  • #55818 返信

    ぴーちゃん

    かうたっくさん
    コメントありがとうございます。素人ながらもSimplicityのpopular postのcssを参考にnewpost catchのcssにコピペしながら調整することができました!
    これを機会に勉強したいと思います。
    ありがとうございました。

返信先: TOPページに新着記事、最新記事をリスト化してきれいに表示したい
あなたの情報:




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