JIN

記事一覧デザインをカスタマイズ!アイキャッチの上にタイトル表示

トップページの記事一覧デザイン。これはサイトの顔ですよね。

どうしても同じテーマだと似たりよったりしてしまうので、がらっと印象を変えてみました。

BEFORE

AFTER

メンくん

アイキャッチの上にタイトルを配置することで、全体的にすっきりしますね

カスタマイズを始める前に

カスタマイズは自己責任でお願いします。

参考カスタマイズは自己責任。ぼくはこんな風に思っています。

くま

カスタマイズは仮に同じテーマであっても、100%成功する補償はありません。

カスタマイズの準備

JINには記事一覧のデザインが数種類あります。

そのため、まずは記事一覧デザインを指定するものに変更します。

外観カスタマイズトップページ設定

トップページ設定をクリック
この設定に変更

カスタマイズのコードを入力する場所を決める

2つの方法でカスタマイズコードを追加できます。

  • 追加CSS(初心者向けでおすすめ
  • 外観>テーマエディタ>style.css(慣れた人向け)

はじめてカスタマイズするかたは、「追加CSS」がおすすめです。

詳しいやり方はこちらを参考にしてください。

参考ブログのカスタマイズを加速させる「追加CSS」の追加方

カスタマイズのコード

メンくん

important使ってごめんなさい

カスタマイズの締め

カスタマイズコードを書き込んだら、最後に必ずキャッシュ削除して更新をしましょう。 これを忘れてしまうとせっかくカスタマイズしたのにデザインに反映されません

キャッシュ削除

簡単な方法は Ctrl + F5 を押す方法です。またはF12を押した後に更新マークを右クリックして「キャッシュの消去とハード再読込」をクリックします。