記事を探したい方は全カテゴリへ
JIN

JINの記事一覧をSANGO風にカスタマイズ

SANGOの居心地の良さがうらやましい。

SANGOユーザーの方が熱く頻繁にカスタマイズ論を話しているのがうらやましい。

そう思うJINユーザー、よこっち(@tirykt)です。

うらやましがってばかりいないで、自分でJINのカスタマイズに取り組んで行けばいい!と思い始めて、少しずつ勉強を始めました。

CSS初心者ですので、至らないところもあると思います。

不具合や問題もあるかもしれませんので、必ず初めにスタイルシート(style.css)のバックアップを取ってから臨んでくださいね!

さて今回は、TOPページにある記事一覧を、SANGO風に近づけてみたいと思います。

記事一覧の部分で、JINとSANGOの違いというのは、以下を想定しています。

  1. アイキャッチ画像の周りに余白がある
  2. 記事ボックスが浮き上がっている

それではそれぞれのカスタマイズ方法を書いていきます!

(SANGOを買うのではなく、あくまでJINベースでやりたいのです笑)

はじめに

スタイルシートの編集方法

wordpressのcss編集準備

スタイルシートのCSSを編集するために、エディタを使います。

①wordpressの管理画面より、「外観」-「テーマの編集」を選んでください。

②画面の右上にテーマを選択する箇所がありますので、「JIN」を選んでください。

③その下に、何のファイルを編集するか選択する箇所がありますので、「スタイルシート(style.css)」を選んでください。

エディタ部分で「F4」を押すと、検索ボックスが出てきますので、ここに指定する文字列を入れてEnterを押すことで検索することができます。

スタイルシートのバックアップ

スタイルシートのバックアップ

簡単な方法としては、スタイルシートの中身を全てコピーして、メモ帳に張り付けて保存してください。

ファイル名は「スタイルシート_今日の日付.txt」にするとわかりやすいです。

カスタマイズ前には、必ずバックアップする癖をつけましょう!

アイキャッチ画像に余白を入れる

【修正前イメージ】

標準イメージ

【カスタマイズしたイメージ】

余白を入れたイメージ

まずは、写真の周りに余白を設けました。

これだけだとわかりにくいかもしれません。

次のカスタマイズではっきりわかるようになりますので、このまま進みます。

【修正方法】

検索ボックスで「post-list-mag .post-list-item .post-list-inner .post-list-thumb,」をコピーして検索してください。

以下のCSSが見つかるはずです。

これを、まるっと以下のように修正してください。

【完成形】

@media (max-width: 767px) がスマホの場合で、@media (min-width: 768px) がPCの場合のカスタマイズです。

余白を大きくしたい場合は、95%→90%に修正し、それぞれmarginを調整してみてください。

ファイルを更新して、記事一覧を更新表示してみましょう。

キャッシュが残って、反映されない場合がありますので、キャッシュを削除するか別のブラウザで確認してみましょう。

記事ボックスを浮き上がらせる

【修正前イメージ】

余白を入れたイメージ

【カスタマイズしたイメージ】

浮かび上がらせるイメージ

いかがでしょう。

ここまでやると、違いがはっきりと分かると思います。

【修正方法】

検索ボックスで「a.post-list-link {」をコピーして検索してください。

以下のCSSが見つかるはずです。

検索に何個か引っかかると思いますが、「@media (min-width: 768px)」を目印にしてください。

[削除するCSS]

box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18);

 

[追加するCSS]

box-shadow:0 6px 6px 0 rgba(0,0,0,.12), 0 2px 16px 0 rgba(0,0,0,.22);

 

【完成形】

ファイルを更新して、記事一覧を更新表示してみましょう。

さいごに

JINのカスタマイズ、いかがでしたでしょうか。

カスタマイズをしたことが無い方には難しかったかもしれません。

僕もwordpressのカスタマイズ?mediaクエリ?はてはて?という状態でした。

でも、自分のイメージに少しでも近づけたいと思って、少しずつ勉強して実践してみました!

もしよろしければ、皆さんのSANGOのイメージを教えてくださいませんか?

JINでこれを実現したい!こんなカスタマイズをしたい!などありましたらコメントやDMで連絡をお待ちしております!

・今回は親テーマをカスタマイズしているため、JINのアップデートで元に戻ってしまいます。

・スタイルシートの編集はあくまで自己責任でお願いします。

やっぱり、子テーマや追加CSSでコピペってできるカスタマイズの方が簡単でいいよなぁと思いました。

これから勉強していきます!

よこっち(@tirykt)から一言。

もっと簡単に、分かりやすく、かっこいいカスタマイズができるように勉強していきます!

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA