ブログ

「JIN」をサイト型トップページにカスタマイズしてみた|WordPressテーマ

ふーみん
ふーみん
ようこそ!

趣味ブロガーのふーみんです!!

当サイトはワードプレステーマ「JIN」を使っています。

ボクはどうしてもサイトのトップページをSANGOのサイト型トップページにみたいにしてみたかったんです。

 

Google検索で「JIN サイト型 トップページ」と検索しても、なかなか目当てのものに出会えず・・・。

2018年12月に入ってみつけたこはらいふというサイトのカスタマイズ記事を参考にさせていただき、ついにサイト型トップページのカスタマイズをすることができました。

【この記事で学べること】

  1. 「JIN」トップページのカスタマイズ方法
  2. コード知識不要のカスタマイズ方法
  3. オシャレでカッコイイなサイト作り

 

ちなみにボクはhtmlとかcssとかの知識まったくないので、同じような方でもわりと簡単にカスタマイズできるはずです。

そのままで相当使いやすいWordpressテーマJINをさらにカッコよくカスタマイズして、周りのブロガーさんやアフィリエイターさんに差をつけませんか?

 

最低限の力であなた風なサイトトップページにしちゃいましょう!

※この記事はPCで見ながらカスタマイズするのをおすすめします。

 

それでは!

Let’s GO〜!!

 

【重要】トップページをサイト型にするメリット

カスタマイズの前に、あなたのブログのトップ(顔)をサイト型にしたら、どう変わるのかをお伝えします。

 

ボクのサイト(ニズム)はいろいろなジャンルが混在するサイトです。

  • スマホについて
  • メンタリズム
  • モテる科学
  • ブログについて
  • ショッピング術
  • アニメ、ゲームなど

 

なのでJINのトップページだと、どんな記事を書いているのかイマイチわからなくなってしまいます。

それでもボクのサイトに訪れた人が、楽に新しい発見をしてもらえるようなサイト作りが義務なんだと思っています。

 

トップページをブログ型ではなくサイト型にすることで、「5つの伝わる」があると考えています。

  1. サイト内のおすすめ記事
  2. サイト内の記事ジャンル
  3. 読者にとって必要な記事
  4. サイトにいることのメリット
  5. サイト内で得られる情報

 

5つのことがあなたのサイトに偶然訪れた読者に伝わることで、リピート(再訪問)してくれるようになるかもしれません。

この情報=このサイトってイメージがつくかもしれないってことですね。

 

とはいえ、正直にいうと自分風のデザインにしたいっていう自己満でもありますよ。

  • なんかオシャレ
  • WEBサイトっぽくてカッコいい

 

ボク自身がボク自身のサイトを読みたいと思うかというのが1番重要なので。

 

ボクみたいにいろいろなジャンルの記事を書きたい雑記ブロガー雑誌ブロガーのあなたは、JINのトップページをサイト型にするべきです。

いろいろなカテゴリーが混ざっているからこそ、全て読んでもらいたいですよね?

トップページをサイト型にするのは、”いろんな記事を読んでみたい”と読者に思ってもらうためだからです。

 

カスタマイズの前に・・・

バックアップを取っておきましょう|サイト型トップページ

もし設定したデザインが嫌になって元に戻したいときのために、バックアップは必ずしてからカスタマイズをしてくださいね。

バックアップが簡単に取れないというあなたは…

  • どこを足したのか
  • どこを減らせば戻るか

 

最低限この2つはわかるようにコピペなどをしておいてください。

どこをいじったのかわからなくなってしまいそうというあなたにこの作業はオススメしません。

 

カスタマイズにはリスクが伴います|サイト型トップページ

なぜここまで言うかというと、ボクがこういう作業で実際にサイトが見れなくなったことがあるからです。

つまりやたらめったらカスタマイズをすると、サイトが壊れてしまう危険性もあるということです。

 

ボクやあなたの頭の中のイメージを形にするためのカスタマイズです。

ただしリスクがあって責任が自分にあることを覚えておいてくださいね!

 

JINのトップページをサイト型にカスタマイズ

テーマ「JIN」を使っている当サイトのトップページは、すでにサイト型にカスタマイズしてあります。

これからあなたが同じように設定をすると、当サイトと同じようなサイト型トップページを作れます

 

センスがある方は、もっと作り込んで超レベルの高いトップページになるはずです。

カスタマイズ後のトップページをみる

カスタマイズの手順

  1. 固定ページを2つ作る
  2. 1つは「固定ページ」1つは「記事一覧」に設定
  3. トップページのデザインはコードをコピペ
  4. あなたの好みで配置換え
  5. 固定ページをトップに設定
  6. 完成

 

Step1:固定ページの作成

トップページを作るために、「新規追加」から新しい固定ページを作りましょう!

固定ページを開いたら、画面右側にある「テンプレート」「LP」に設定します。

 

記事のタイトルパーマリンクは「固定ページ」にしておいて大丈夫です。

(ボクはトップページという名前にしてあります。)

※以下、画像参照

新しい固定ページの初期設定|JINをサイト型にカスタマイズ

 

 

 

タイトルとパーマリンクの設定|JINをサイト型にカスタマイズ

固定ページを作ったら、タイトルとパーマリンクはわかりやすいように設定しておきましょう。

トップページに設定した後に、タイトルが出ないように設定ができるので、表示は心配しなくて大丈夫です。

 

Step2:トップページのデザインを作る

開いた固定ページで、トップページのデザインになる部分を作っていきます。

デザインはあなた好みのものにしましょう!

 

カスタマイズはすべて記事のテキストエディタにコードを入力して、そのコードの中を書き換えていくだけでできますよ!

(コードはJIN公式にも載っているショートコードなので、その辺の知識がある人はボク以上にいろいろできるはずです!)

 

① 4つのおすすめ記事を並べてみる|JINをサイト型にカスタマイズ

まずはおすすめ記事の一覧を設定してみます。

下画像が一覧の完成イメージですので、こんな見た目になれば正解です!

 

おすすめ記事一覧のカスタマイズは大きく5箇所にわかれています。

カスタマイズの順番は、最初に①〜④を編集して最後に⑤を設定します。

ここをカスタマイズ

  1. ①〜④:個別のおすすめ記事
  2. ⑤:最新記事一覧へのボタン

 

 

テキストエディタの中に以下コードをコピペで貼り付けてください。

おすすめ記事

<div id="pickup"> <div class="pickup_post"><a href="記事URLを入力"><img class="aligncenter" src="アイキャッチ画像URL" alt="記事タイトル" /></a></div> <div class="pickup_post"><a href="記事URLを入力"><img class="aligncenter" src="アイキャッチ画像URL" alt="記事タイトル" /></a></div> <div class="pickup_post"><a href="記事URLを入力"><img class="aligncenter" src="アイキャッチ画像URL" alt="記事タイトル" /></a></div> <div class="pickup_post"><a href="記事URLを入力"><img class="aligncenter" src="アイキャッチ画像URL" alt="記事タイトル" /></a></div> </div> <center><span class="color-button02"><a href="記事一覧URL"><i class="fa fa-folder-open" aria-hidden="true"></i> 最新記事をチェック</a></span></center>

貼り付けたらテキストのまま①〜④編集をしていきます。

  • 記事URLを入力
  • アイキャッチ画像URL
  • 記事タイトル

上記3つの項目を4記事分入力しましょう。

  • ※⑤の残りの設定はあとでやるので、この時点では「https://◯◯.com/blog」と設定しておいてください。
  • ※この時点では画像が正しく表示されません。あとのCSS入力で正しくなるのでご心配なく!

 

このタイミングでちゃんとできているか心配なあなたは、プレビューで確認してみてくださいね。

画像のようになっていれば正解です。

  • おすすめ記事」は違う言葉に変えられる
  • アイキャッチは見た目を統一させるとGOOD

 

② コラムを3列で並べてみる|JINをサイト型にカスタマイズ

次は少し違うデザインでカスタマイズしてみます。

3つのコラムをカテゴリーごとに分けて、それぞれでおすすめ記事を設定します。

「もっと読む」画像の部分から、カテゴリーのまとめページにジャンプさせることができますよ!

これはコラムごとにカスタマイズしていきます。

ここをカスタマイズ

  1. 見出しのタイトル「スマホについて」
  2. 画像
  3. 箇条書きの記事タイトル

 

 

テキストエディタの中に以下コードをコピペで貼り付けてください。

見出しタイトル

<a href="カテゴリーURL"><img class="aligncenter wp-image-3081 size-full" src="画像URL(必要であれば)" alt="" width="1500" height="500" /></a></p> <div class="simple-box3"> <ul> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> </ul> <center><span class="color-button02"><a href="カテゴリーURL"><i class="fa fa-folder-open" aria-hidden="true"></i>もっと読む</a></span></center><center>  </center></div> <p>

見出しタイトル

<a href="カテゴリーURL"><img class="aligncenter wp-image-3082 size-full" src="画像URL(必要であれば)" alt="" width="1500" height="500" /></a></p> <div class="simple-box3"> <ul> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> </ul> <center><span class="color-button02"><a href="カテゴリーURL"><i class="fa fa-folder-open" aria-hidden="true"></i>もっと読む</a></span></center><center>  </center></div> <p>

見出しタイトル

<a href="カテゴリーURL"><img class="aligncenter size-full wp-image-3083" src="画像URL(必要であれば)" alt="" width="1500" height="500" /></a></p> <div class="simple-box3"> <ul> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> </ul> <center><span class="color-button02"><a href="カテゴリーURL"><i class="fa fa-folder-open" aria-hidden="true"></i>もっと読む</a></span></center><center>  </center></div> <p>

無事貼り付けができたら、以下すべてを書き換えてください。

  • 見出しタイトル
  • カテゴリーURL
  • 記事リンク
  • 記事タイトル

3コラムのカスタマイズをするときに、画像を使わない場合は「カテゴリーURL」がコード後半の1回だけしか使いません。

画像があった方がみやすいので、Canvaとかで作って設定してみてくださいね!

  • ボックスは好きなものに変更可能
  • 画像は細長い方が見栄えがいい
  • 箇条書きのタイトルは短い方がスマホ画面でみやすい
  • ボタンは短い言葉がGOOD

 

③ コラムを2列で並べてみる|JINをサイト型にカスタマイズ

②と同じタイプで3列ではなくて、2列コラムも作ることができます。

 

基本的な見た目は一緒なので、下記コードをコピペして使ってください。

見出しタイトル

画像をここに挿入(必要であれば) <div class="simple-box3"> <ul> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> </ul> <center><span class="color-button02"><a href="カテゴリーURL"><i class="fa fa-folder-open" aria-hidden="true"></i>もっと読む</a></span></center>&nbsp; </div>

見出しタイトル

画像をここに挿入(必要であれば) <div class="simple-box3"> <ul> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> <li><strong><a href="記事リンク">記事タイトル</a></strong></li> </ul> <center><span class="color-button02"><a href="カテゴリーURL"><i class="fa fa-folder-open" aria-hidden="true"></i>もっと読む</a></span></center>&nbsp; </div>
  • コラム2列と3列は使い分けるとGOOD!

 

④ 画像を2列で並べてみる|JINをサイト型にカスタマイズ

最後は画像を2列に並べてカテゴリーページや個別記事へジャンプできるようにカスタマイズしてみます。

 

このカスタマイズは左と右にわかれていますので、それぞれ順番に編集します。

ここをカスタマイズ

  • 左の見出しタイトル
  • 左の画像
  • 左のボタン
  • 右の見出しタイトル
  • 右の画像
  • 右のボタン

 

ボタンの「カテゴリーへ」という言葉は「もっと読む」のような違う言葉に変えられます。

言葉はコードをすべて設定してから変更するのがオススメです。

 

テキストエディタの中に以下コードをコピペで貼り付けてください。

見出しタイトル

<a href="カテゴリーURL"><img class="aligncenter wp-image-3047 size-full" src="画像URL(必要であれば)" alt="" width="640" height="430" /></a></p> <center><span class="color-button02"><a href="カテゴリーURL"><i class="fa fa-folder-open" aria-hidden="true"></i>カテゴリーへ</a></span></center> <p>

見出しタイトル

<a href="カテゴリーURL"><img class="aligncenter wp-image-3046 size-full" src="画像URL(必要であれば)" alt="" width="640" height="430" /></a></p> <center><span class="color-button02"><a href="カテゴリーURL"><i class="fa fa-folder-open" aria-hidden="true"></i>カテゴリーへ</a></span> </center> <p>

コードのコピペが終わったら、順番にタイトルやURLを入力していきます。

  • 見出しタイトル
  • カテゴリーURL
  • 画像URL

 

  • アイキャッチ画像は大切
  • ボタンは短めの言葉がGOOD!

 

”見出しタイトル”のデザイン変更|JINをサイト型にカスタマイズ

それぞれのコードの中に下記のような項目があります。

  • lp-h2 style=”2″

 

これはstyle=”◯”の部分を1〜3で変更すると、デザインを変えることができます。

あなたのお好みで変更してみてくださいね。

 

カスマイズの応用も可能!|JINをサイト型にカスタマイズ

紹介したカスマイズが以下4つです。

  • ① おすすめ記事一覧
  • ② コラム3列のリスト
  • ③ コラム2列のリスト
  • ④ 画像2列

 

この4つは全て順番に並べる必要はありません。

つまり使いたいカスタマイズだけを使って、あなた風のサイト構成ができるんです。

  • ④ 画像2列
  • ④ 画像2列
  • ② コラム3列のリスト
  • ① おすすめ記事一覧

 

こういう順番でも全然おっけーです!

(本当にどの順番でコードを使っても大丈夫なので、自分オリジナルの設定をしてみてくださいね!)

 

Step3:最新記事一覧の設定

新しい固定ページを使ったときと同じように、固定ページの作成をします。

 

このときに記事のタイトルは「記事一覧」に設定しておいてください。

そしてパーマリンクは「https://◯◯.com/blog」で設定しておきます。

 

※以下、画像参照

 

Step4:CSSにコードを入れて形を整える

最後のカスタマイズとしてCSSに少し手を加えます。

(手を加えると言っても、コードを追加するだけなので安心してください。)

 

あなたの使っているテーマによってCSSの場所が違うので気をつけてくださいね。

  • 親テーマ:追加CSS
  • 子テーマ:テーマ編集→Style.css

 

追加CSSは、「外観」→「カスタマイズ」の1番下にあります。

Style.cssは、「外観」→「テーマの編集」にあります。

 

形を整えるコード|JINをサイト型にカスタマイズ

ここまででカスタマイズしたのをプレビューでみると、イマイチ形が変だったので整えるためのコードをCSS内に追加します。

 

コピペでそのまま追加してくださいね。

/*トップページおすすめ*/
#pickup{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-top:0.5em;
margin-bottom:2em;
}
#pickup .pickup_post{
width:24%;
}
@media only screen and (max-width: 767px) {
#pickup .pickup_post{
width:48%;
margin-bottom:1em;
}
}
#pickup .pickup_post a img{
box-img_border: 0 0 3px 0 rgba(0,0,0,.12), 0 2px 3px 0 rgba(0,0,0,.22);
border-radius:2px;
transition: .3s ease-in-out;
}
#pickup .pickup_post a img:hover{
box-img_border: 0 13px 20px -3px rgba(0,0,0,.24);
}

/*トップページの見出し*/
h2.top_menu {
border-left:none;
background-color:#fff;
color:#000;
overflow: hidden;
text-align: center;
}
h2.top_menu span {
position: relative;
display: inline-block;
margin: 0 2.5em;
padding: 0 1em;
text-align: left;
}
h2.top_menu span::before,
h2.top_menu span::after {
position: absolute;
top: 50%;
content: '';
width: 400%;
height: 1px;
background-color: #000;
}
h2.top_menu span::before {
right: 100%;
}
h2.top_menu span::after {
left: 100%;
}
@media only screen and (max-width: 767px) {
h2.top_menu {
font-size:1em;
}
}

 

トップページでタイトルを消すコード|JINをサイト型にカスタマイズ

ボクの場合、トップページなのに「固定ページ」ってタイトルが結構ダサかったので、このコードをいれました。

同じ症状の方はCSS内にいれてくださいね。

*ホームタイトル消し*/
.home .entry-title {
  display: none;
}

 

Step5:固定ページをホームに設定

最後にここで作ったページをあなたのサイトのトップページに設定して終わりです。

「設定」→「表示設定」から簡単にトップページ設定ができます。

 

 

ここまで全て終わったら、サイトのキャッシュを削除してちゃんとできているか確認しましょう!

  • Windows(Chrome):Ctrl+F5キー
  • Mac:command+Shift(↑)+5

 

ちゃんと見れたら完成です!

カスタマイズと言う名の長旅、お疲れ様でした。

初心者が登録するべきASP3選

A8.net
→ アフィリエイトと言ったらコレ!といえるくらいの有名ASP。使いやすさ、案件の数が最大級なので、必ず登録しておきたい!

アクセストレード
→ 通信、スマホの案件を多く扱っているASP。格安SIMや自宅インターネット「光」についてのアフィリエイトをしたいなら登録必須!

もしもアフィリエイト
→ 初心者のアフィリエイターさんに優しすぎるASP。取り扱いの案件もとても多いし、何よりサポートが充実しています。ここは登録しておいて間違いない!

まとめ

JINでサイト型トップページを使って、読者を集めよう!

この方法はトップページだけじゃなくて色々な応用ができますよ。

  • カテゴリーページ
  • 記事まとめページ
  • 商品まとめページ

 

一度カスタマイズ方法を覚えてしまえば、あとは記事を作るときにコードを並べていくだけなので、かなり楽にできちゃいます。

ぜひ一度試して欲しいですね。

 

雑記、雑誌、趣味ブロガーさんのサイトが今以上に読みやすくて見やすいサイトになるような試行錯誤を一緒にしていきましょうね!

ABOUT ME
アバター
ふーみん☆彡
ども、当サイトを作っているふーみんです!最後までお読み頂き、ありがとうございます。あなたのわからないが1つでも無くなったら嬉しいです。