ブログテーマ【スワロー】をカスタム!「 トップのブログカードを3列にする方法」

ブログ




ブログって自分が思った通りのデザインにできるから楽しい!
と思っていたけど、現実はなかなか難しく、HTMLやCSSなんて全然わからないです、、、

そんなわたしでもどうしてもやってみたくなったカスタムがあったので今回はその方法を記録しておきます。
万が一忘れた場合でも手順さえわかれば戻せるはず!

同じことをやりたいという人にとって役立つものであれば嬉しいです。

 

カスタム内容

今回の内容はパソコン用レイアウトの変更です。
正直当ブログも割合でいうとスマホが圧倒的なんです。
それでも、1番レイアウトとしてこだわれるのがパソコンで見たとき。
同様にタブレットで見たときも同じレイアウトで表示されますので、やはりないがしろにはできないですね。

 

レイアウト

トップ画面のレイアウトは通常の状態でも2パターン選べます。

アイキャッチがメインで2列に並べる方法と、テキストもしっかり表示して1列で表示する方法です。

ずっと1列で使っていたんですが、これサイドバーをなくして、3列にできないかなと思ったのが始まりです。

結論はできたので、こちらにその方法を記載します。

 

追加方法

テーマそのものの内容の変更もいいですが、今回は【追加CSS】で反映ができるということ。
こちらの方法のほうがシンプルなので私みたい「カスタムよくわからない!」という人はオススメできます。

【追加CSS】
外観→カスタマイズ→追加CSS

ここに次の文字列を追加してください。



@media only screen and (min-width: 980px) {
.home .main-wrap,
.home #main {
max-width: 1100px;
float: none;
margin-left: auto;
margin-right: auto;
}

.home .archives-list.card-list .post-list {
width:31.333%;
}
}

このコードを追加CSSに追加することで、

  • 3列表示
  • サイドバー移動
    ができている状態です。

そう、まだサイドバーは残ってしまうのです。
そこで、サイドバーを消すためにはをテーマファイルを変更するしかありません。

テーマファイル【home.php】

37〜39行目

<?php get_sidebar(); ?>

を削除

これで完全にサイドバーを削除できました。
完成したものは当サイトをぜひパソコンかタブレットでご覧いただきたいのですが、こんな感じです。

うん、大満足!

この画像を見て、違和感が、、、というかたがいたらこちらの記事もご覧ください。
実際は3列にして、さらに記事ごとに枠をつけています。

ブログテーマ【スワロー】をカスタム!「トップの記事一覧カードに枠をつける方法」

2018.09.28

今回の内容はオープケージに問合せし、方法を確認しました。とても親切に教えてくれましたので、多少のカスタマイズ方法なら公式に問い合わせて答えてもらえます。
同じスワローを使用しているかたで同様のカスタマイズをしたいという人は、この方法で間違いなくできます。
しかし、それぞれすでにカスタマイズしていて当初のテーマの内容と変わっている場合、うまくレイアウトされない可能性もあります。
必ずバックパックをとってから試してください。

こちらの記事も人気です!