• ゲーム
    【とび森amiibo+】村を売却する方法、条件、金額の決まり方を徹底解説!
    2018年03月27日
  • 奈良のこと
    奈良市の新施設「ミ・ナーラ」のテナント情報!イオン系列なの?
    2018年04月19日
  • あずのおすすめ
    人と少し違うオトナなiFace「Sense(センス)」の購入レビュー
    2018年03月26日
  • ゲーム
    【とび森】ゆうたろうが登場する魔法のランプの入手方法は?
    2018年03月27日
  • 副業・在宅ワーク
    iPadでイラストを描くなら、aibowの極細タッチペンがコスパ最高でオススメ!
    2018年03月26日
  • ブログ運営
    SANGOの内部リンクボックスにラベルをつけたりするカスタマイズ
    2018年02月09日
  • 奈良のこと
    にぼしこいし|奈良一煮干しの濃いラーメン店に行ってきた♡
    2018年03月25日
  • あずのおすすめ
    無名の主婦ブロガーがpolcaで10万円の支援をしてもらえた理由と今思うこと
    2017年08月16日
  • ブログ運営
    読まれるブログは読みたいブログだし、まずは存在を認識してもらうことが大切
    2018年02月08日
  • ゲーム
    【とび森amiibo+】アプデで楽になった住民厳選!指定追い出しも出来る!
    2018年03月27日
SANGOの横長記事一覧カードをPC表示でも1列にするカスタマイズ
▼ どこよりもわかりやすいブログの育て方
▼ シンプルライフに憧れるあなたへ

こんにちは
主婦ブロガーのあず(yuuki_azusa )です。

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%を推奨しました。

▼ 癒し犬たろすけのLINEスタンプ ▼
sponsord by. @tatsuya141free

まとめ

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

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

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

コピペで簡単にできるSANGOのカスタマイズ方法まとめ
2018.2.9
WPテーマをSANGOに変えたのをきっかけに、カスタマイズにめちゃくちゃ力を入れています。 あず 今まではCSS?何それ?PHP?無理ゲー。と思っていました。 SANGOを使っている人のお役に立てれば...

 

現在はこのブログも含め、運用しているほぼ全てのブログのテーマを、SANGOから「Diver」に変更しています。

カスタマイズ大好きな私が、CSSやPHPをほとんどいじらなくていいほど、全てが揃っている理想のテーマに出会ってしまいました。

あずさん

CSSは追記で数行しか書いていないので、ブログネタになりませんw

興味があれば、ぜひテーマ詳細を見てみてくださいね♡

 

最後まで読んでいただき、ありがとうございましたあず(yuuki_azusa ) でした。
投資に興味がある方はコチラも ▼
ブログ運営者さんにオススメ ▼

スポンサーリンク


WPカスタマイズの関連記事
  • SANGOの横長記事一覧カードをPC表示でも1列にするカスタマイズ
  • WordPress|投稿一覧画面に記事IDを表示するカスタマイズ
  • コピペでOK!記事タイトルの文字数カウンターを設置する方法
  • SANGOの内部リンクボックスにラベルをつけたりするカスタマイズ
  • コピペで簡単にできるSANGOのカスタマイズ方法まとめ
  • SANGOのサイドバーの横幅をコピペで変えるカスタマイズ方法
コメント一覧
  1. 茉莉子 より:

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

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

    • あずさん あずさん より:

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

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

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

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

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

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

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

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

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

  2. としま より:

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

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

    よろしくお願いします。

    • あずさん あずさん より:

      はじめまして!

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

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

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

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

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

      参考になれば幸いです。

      • としま より:

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

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

  3. 茉莉子 より:

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

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

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

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

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

    • あずさん あずさん より:

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

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

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

  4. イシモン より:

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

    • あずさん あずさん より:

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

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

  5. イシモン より:

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

  6. イシモン より:

    post-gridのphpファイルを元に戻すことで解決しました!
    お手数おかけしました!

コメントを残す