Wordpress

WordPressテーマ「JIN」のアイキャッチ表示場所をカスタマイズしてみた

最近、界隈で話題のWordpressテーマ「JIN」。ポイまめもシコシコ使っております。

このサイトでは、アイキャッチ画像の表示場所をヘッダのすぐ下に移動してみました。


こんな感じ

完成形はこれ

もともとタイトルの下に表示されていたアイキャッチ画像を、ヘッダのすぐ下 and タイトルの上に移動しています。

スマホでの見え方

PCでの見え方

ポイまめ
ポイまめ
PCは、あんまり印象が変わらないけどね!

「JIN」カスタマイズの手順

1.「JIN」の子テーマをダウンロード

子テーマとは、カスタマイズ専用のファイルのことです。

元テーマにあるファイルを子テーマにコピーして修正すると、修正した子テーマの方を自動的に優先して表示してくれます。

「JIN」の子テーマはこちらからダウンロードできます。

WordPressテーマ「JIN」のアップデート情報

ポイまめ
ポイまめ
子テーマを使えば、元テーマを壊してしまう心配がなくて安心だね!

2.子テーマ「jin-child」を有効化

ダウンロードした子テーマを、元テーマと同列の場所にアップロードし、「外観>テーマ」で「jin-child」テーマを有効化します。

3.編集したいファイルを子テーマフォルダに追加

今回は page.php / single.php を修正するので、それらを元テーマからコピーして、子テーマのフォルダに入れます。

4.「外観>テーマ」で該当ファイルを修正

さきほど子テーマに格納した page.php / single.phpを、以下のように修正します。

ポイまめ
ポイまめ
ソースをぴよっと移動するだけだよ!

5.「外観>カスタマイズ」の「追加CSS」にスタイルシートを追加

ちょっとした細かい調整が必要だったので、以下のようなスタイルシートを追加しました。


/*投稿・固定ページのレイアウト調整*/
.cps-post-box{
padding-top:0!important;
}
@media (max-width: 767px){
#main-contents{
margin-top:2px;
}
.cps-post-thumb{
margin: 0 -200%;
}
}
@media (max-width: 767px){
.toppost-list-box-simple{
margin-top:15px;
}
.archive-title-sub{
display:block;
margin-top:30px;
}
}
/*投稿・固定ページのカテゴリを消す*/
.cps-post-cat a{
display:none;
}
/*投稿・固定ページタイトルを調整*/
.cps-post-title{
padding:5px 5px 0 5px;
margin-top:0;
text-align:center;
}
/*投稿・固定ページ日付を調整*/
.cps-post-date-box{
text-align:center!important;
margin-bottom:10px;
}

ポイまめ
ポイまめ
このあたりは、もう好きずきだね!

まとめ

  • 「JIN」は子テーマを使ってカスタマイズできる!
  • 子テーマを編集していれば、いつでも元のテーマに戻せる!
  • 「JIN」のソース、めっちゃ美しくて見やすい!

カスタマイズ楽しい!


読む人も、書く人も、すべてを考え抜いたデザイン。

WordPressテーマ「JIN」を見る

ABOUT ME
ポイまめ
最後まで読んでくれてありがとうございます。このブログは、ポイ活をメインに、節約や貯金のために実際にやってみたことを書いています!プロフィール