SANGOの横長記事一覧カードをPC表示でも1列にするカスタマイズ




いらっしゃいませ三姉妹育児に奮闘中の主婦、あず(oyakocreate)です。

SANGOの記事一覧表示は、2種類あります。

今回は横長カードに設定した場合の、パソコンからの表示をカスタマイズしてみます。

「2列表示がイヤだな…」という方は、参考にしてみてください。

今回のSANGOカスタマイズ

カスタマイズ前

SANGOでは、記事一覧表示を「横長カード」に設定すると上の画像のように表示されます。

記事へのカードリンクが、グリッド表示と同じように2列で表示されていますね。

カスタマイズ後

今回はこの画像のように、1列にするカスタマイズ方法をご紹介します。

横長カードスタイルを1列表示にする

記載するのは、子テーマのstyle.cssです。

わたし

以下のコードをコピペするだけでOKですよ。

@media only screen and (min-width: 1030px){
.sidelong__article {
    width: 90%;
    }}

これだけで、表示が2列から1列になりました◎

だんな

どうしてwidthを100%に指定していないの?

わたし

100%にしてみるとわかるけど、かなり窮屈な印象になるの。 だから、このカスタマイズ方法では90%を推奨してるよ。

まとめ

たまたまTwitterでブロガー仲間が困っていたので、サクッと書いてみました。

トップページの表示変更に関しては、他にもネタがあるので順次カスタマイズ記事を増やしていきたいと思います。

今までに紹介したSANGOのカスタマイズ方法は「コピペで簡単にできるSANGOのカスタマイズ方法まとめ」にまとめているので、参考になれば嬉しいです♡

コピペで簡単にできるSANGOのカスタマイズ方法まとめ この記事はここまでです。もしお時間があれば、ぜひ他の記事も読んでいってくださいね。

あず(oyakocreate)でした

ブログのトップページへ

コメントはありません

茉莉子

こんにちは。
SANGOのカスタマイズを探していてこちらの記事にたどり着きました。

ブログも可愛いなと思ったのですが、今はDIVERというテンプレートなんですね。
SANGOから乗り換えてみて、ココが良かったなーとかイマイチだなと思うことがあったら
教えていただけると嬉しいです。
(今どちらを買おうか迷っています・・・;)

あずさん あずさん

こんばんは!コメントありがとうございます。比較して、変えて良かったと思うところはたくさんあるんですが…

まず、CSSやPHPのカスタマイズに時間を取られることがなくなりました。

テーマの標準機能だけで、このデザインが出来上がるので、記事を書くことに本当の意味で集中できるようになりました!

あとは、記事を書くときもテーマ独自の入力補助機能があって、「ボタン」「ランキング」「口コミ」「レビュー表」「ふきだし」など21種類の機能が執筆画面から簡単に使えます。

私は使っていませんが「AMP」にチェック1つで対応できるのも、大きいかと思います。あと、サポートが無料で何回でも使えます!

変えてイマイチだったところは…ごめんなさい、ないです!所有ブログは全て「DIVER」に変更していっていて、SANGOに戻ることはないですね。

しいてあげるなら、SANGOに比べてテーマが高いです。

すごすぎて書ききれないので、売り込みみたいになっちゃいました。

参考になるかわかりませんが…私の感想は「DIVER最高」ですm(_ _)m

茉莉子

こんにちは。
SANGOのカスタマイズを探していてこちらの記事にたどり着きました。

ブログも可愛いなと思ったのですが、今はDIVERというテンプレートなんですね。
SANGOから乗り換えてみて、ココが良かったなーとかイマイチだなと思うことがあったら
教えていただけると嬉しいです。
(今どちらを買おうか迷っています・・・;)

あずさん あずさん

こんばんは!コメントありがとうございます。比較して、変えて良かったと思うところはたくさんあるんですが…

まず、CSSやPHPのカスタマイズに時間を取られることがなくなりました。

テーマの標準機能だけで、このデザインが出来上がるので、記事を書くことに本当の意味で集中できるようになりました!

あとは、記事を書くときもテーマ独自の入力補助機能があって、「ボタン」「ランキング」「口コミ」「レビュー表」「ふきだし」など21種類の機能が執筆画面から簡単に使えます。

私は使っていませんが「AMP」にチェック1つで対応できるのも、大きいかと思います。あと、サポートが無料で何回でも使えます!

変えてイマイチだったところは…ごめんなさい、ないです!所有ブログは全て「DIVER」に変更していっていて、SANGOに戻ることはないですね。

しいてあげるなら、SANGOに比べてテーマが高いです。

すごすぎて書ききれないので、売り込みみたいになっちゃいました。

参考になるかわかりませんが…私の感想は「DIVER最高」ですm(_ _)m

としま

はじめまして。
今SANGO をテーマとして使用しているのですが、DIVERに変えようか迷っています。

もしSANGO からDIVERに変えたとして、これまでSANGO の内部リンクのラベルや外部リンクのラベル、その他SANGO からDIVERに移行した時に変更しなければならない点など、あれば教えて頂きたいのですが

よろしくお願いします。

あずさん あずさん

はじめまして!

SANGOからDIVERに変更した場合、テーマ固有のショートコードは全て変更しなければいけません。

どこまでSANGOの固有機能を使っているかで、内容はかなり変わりますが…ふきだし・内部リンクカード・Q&A・ボックス関連などが代表的なものかと思います。

置き換えには、プラグイン「Search Regex」などを使うのが一般的かと思いますが、記事のリライトをするときに手入力でコードの置き換えは必須です。

テーマを変更すると、ウィジェットの配置を整え直す必要があります(DIVERはSANGOよりウィジェット欄が多いので)。

また、アナリティクスのトラッキングコードをSANGOのカスタマイザーで入力している場合は、テーマを変えてから再度入力し直す必要があります(DIVERにもトラッキングコードのの入力欄があります)。

参考になれば幸いです。

としま

参考になりました。ありがとうございました!

記事更新いつも楽しみにしています、頑張って下さい。

としま

はじめまして。
今SANGO をテーマとして使用しているのですが、DIVERに変えようか迷っています。

もしSANGO からDIVERに変えたとして、これまでSANGO の内部リンクのラベルや外部リンクのラベル、その他SANGO からDIVERに移行した時に変更しなければならない点など、あれば教えて頂きたいのですが

よろしくお願いします。

あずさん あずさん

はじめまして!

SANGOからDIVERに変更した場合、テーマ固有のショートコードは全て変更しなければいけません。

どこまでSANGOの固有機能を使っているかで、内容はかなり変わりますが…ふきだし・内部リンクカード・Q&A・ボックス関連などが代表的なものかと思います。

置き換えには、プラグイン「Search Regex」などを使うのが一般的かと思いますが、記事のリライトをするときに手入力でコードの置き換えは必須です。

テーマを変更すると、ウィジェットの配置を整え直す必要があります(DIVERはSANGOよりウィジェット欄が多いので)。

また、アナリティクスのトラッキングコードをSANGOのカスタマイザーで入力している場合は、テーマを変えてから再度入力し直す必要があります(DIVERにもトラッキングコードのの入力欄があります)。

参考になれば幸いです。

としま

参考になりました。ありがとうございました!

記事更新いつも楽しみにしています、頑張って下さい。

茉莉子

こんにちは。
返信ありがとうございます~。

同じ様に迷っている方がいた(笑)

やっぱりDIVER良いなぁとサイトをウロウロしていましたが・・・先ほど買ってしまいました!
一応リンク踏んだので反映されていればよいのですが・・・。

さっそくブログ設定してみます!

これからもブログ更新楽しみにしていますね。

あずさん あずさん

DIVERデビューおめでとうございます♡
そして、リンク踏んでいただきありがとうございます!反映されていました!

「これどーやるの?」みたいなことがあったら、気軽に相談してくださいね!

DIVER使いの方のお役に立てるような記事、少しずつ増やしていきます。

茉莉子

こんにちは。
返信ありがとうございます~。

同じ様に迷っている方がいた(笑)

やっぱりDIVER良いなぁとサイトをウロウロしていましたが・・・先ほど買ってしまいました!
一応リンク踏んだので反映されていればよいのですが・・・。

さっそくブログ設定してみます!

これからもブログ更新楽しみにしていますね。

あずさん あずさん

DIVERデビューおめでとうございます♡
そして、リンク踏んでいただきありがとうございます!反映されていました!

「これどーやるの?」みたいなことがあったら、気軽に相談してくださいね!

DIVER使いの方のお役に立てるような記事、少しずつ増やしていきます。

イシモン

こんにちは
同じ奈良に住んでいるので楽しくブログ拝見させてもらってます!
最近sangoでwordpressを始めまして、この記事にあるような横長記事一覧カードで一列に
記事を表示させたいと思っています。子テーマのcssに上記にあるコードを記載しましたが、
綺麗に表示されません。アイキャッチ画像が大きすぎるのですが、原因がわかりません。
もし原因がわかりましたら、何かアドバイス頂けたらありがたいです。

あずさん あずさん

こんにちは!添付のURL先拝見させていただきました。

まず、WordPress管理画面から「外観」→「カスタマイズ」→「記事一覧レイアウト」ですべてにチェックを入れてみてもらえますか?

イシモン

返信ありがとうございます!
記事一覧レイアウト中の4つは既にチェック入れております!

あずさん あずさん

このカスタマイズ以外に、何かCSSで改変している部分はありますか?
あと、テーマは最初からSANGOを使っていましたか?

イシモン

こんにちは
同じ奈良に住んでいるので楽しくブログ拝見させてもらってます!
最近sangoでwordpressを始めまして、この記事にあるような横長記事一覧カードで一列に
記事を表示させたいと思っています。子テーマのcssに上記にあるコードを記載しましたが、
綺麗に表示されません。アイキャッチ画像が大きすぎるのですが、原因がわかりません。
もし原因がわかりましたら、何かアドバイス頂けたらありがたいです。

あずさん あずさん

こんにちは!添付のURL先拝見させていただきました。

まず、WordPress管理画面から「外観」→「カスタマイズ」→「記事一覧レイアウト」ですべてにチェックを入れてみてもらえますか?

イシモン

返信ありがとうございます!
記事一覧レイアウト中の4つは既にチェック入れております!

あずさん あずさん

このカスタマイズ以外に、何かCSSで改変している部分はありますか?
あと、テーマは最初からSANGOを使っていましたか?

イシモン

最初からSANGOを使用しております。
CSSは、この記事のコード以外ではあずさんちの吹き出しコードを追記しています。
https://azu3.com/hukidashi-css/
また、他サイトでトップページ記事一覧に本文の抜粋を表示する方法があったので
横長タイプのコードも追記しています。これに関しては、post-gridのphpファイルも編集しています。
http://pj-freedom.com/sango-customize-get-excerpt/

イシモン

最初からSANGOを使用しております。
CSSは、この記事のコード以外ではあずさんちの吹き出しコードを追記しています。
https://azu3.com/hukidashi-css/
また、他サイトでトップページ記事一覧に本文の抜粋を表示する方法があったので
横長タイプのコードも追記しています。これに関しては、post-gridのphpファイルも編集しています。
http://pj-freedom.com/sango-customize-get-excerpt/

現在コメントは受け付けておりません。