JINでLPの作り方とコードを全公開｜初心者向け解説付き！

こちらのLPは旧デザインとなり現在のLPと異なります。

どうも。ついにLP作成に手を出した近所です(´･ω･｀)

この記事はワードプレスの有料テーマ「JIN」を利用している方で、LPを作りたい！と思ったけどマニュアルにもなくて断念した・・・・。

って方向けの記事です。

▼私もCSSとかHTMLはほぼ無知ですが、こんな感じのが作れました▼

どうやって作ったのかを書いていきますのでLPを作ってみたい方は参考にどうぞ。

旧LPページを見る

この記事はコードが頻出するのでスマホよりもPCでの閲覧推奨です。

また、使用している画像と現在のLPとは異なる場合があります

コピペOK！LPのコードを全公開！

コード作成は以下のサイトを参考に自分なりにアレンジしています。

超参考にしてますので一度ご覧ください。

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

~~https://nism238.com/jin-toppage-customize/~~

当サイトはワードプレステーマ「JIN」を使っています。ボクはどうしてもサイトのトップページをS…

nism238.com

参考外部サイト

また、このLPにはJIN独自のショートコードが含まれていますので、JIN以外のテンプレートでは同じLPが出来る保証はできません。

飛ばす記事やアイキャッチはお手持ちのサイトに合わせて貼り付ける必要があります。

LPのデザインをコピペする方法

LPのコピペ方法

以下のコード全文をコピーしておきます
固定ページの新規作成を行います
投稿の属性からLPを選択
記事の投稿スタイルを【テキスト】にしてコピーした物を貼り付け
あとはタイトルやURLなどをご自分のブログに合わせて加工

アレンジ方法と細かな解説も一緒にしていきますので、手を加えたい方は参考にしてみて下さい。

コード全文

便利な情報

※右上の左から二つ目のアイコンを押すと自動的に全文が選択されるのでCtrl＋Cでコピーできます。（windowsの場合）

おすすめ記事一覧
<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="" />
<div class="pickup_post"><a href="(記事URL)"><img class="aligncenter" src="アイキャッチ画像URL" alt="" />
<div class="pickup_post"><a href="(記事URL)"><img class="aligncenter" src="アイキャッチ画像URL" alt="" />
</div>


タイトル左
<div class="simple-box3">

<a href="カテゴリー・タグページURL"><img class="aligncenter size-full" src="アイキャッチ画像" alt="" /></a>
<div class="t-aligncenter"><span style="font-size: 20px;">記事の一例</span></div>
<ul>
 	<li><strong><a href="記事URL">記事タイトル</a></strong></li>
 	<li><strong><a href="記事URL">記事タイトル</a></strong></li>
 	<li><strong><a href="記事URL">記事タイトル</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>
<center></center>

タイトル右
<div class="simple-box3">

<a href="カテゴリー・タグページURL"><img class="aligncenter size-full" src="アイキャッチ画像" alt="" /></a>
<div class="t-aligncenter"><span style="font-size: 20px;">記事の一例</span></div>
<ul>
 	<li><strong><a href="記事URL">記事タイトル</a></strong></li>
 <li><strong><a href="記事URL">記事タイトル</a></strong></li>
 	<li><strong><a href="記事URL">記事タイトル</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>



  タイトル左

<a href="カテゴリー・タグページURL"><img class="aligncenter size-full" src="アイキャッチ画像" alt="" /></a>

<center><span class="color-button02"><a href="カテゴリー・タグページURL"><i class="fa fa-folder-open" aria-hidden="true"></i>ボタン文言へ</a></span></center>


タイトル中

<a href="カテゴリー・タグページURL"><img class="aligncenter size-full" src="アイキャッチ画像" alt="" /></a>

<center><span class="color-button02"><a href="カテゴリー・タグページURL"><i class="fa fa-folder-open" aria-hidden="true"></i>ボタン文言</a></span></center>

 タイトル右

<a href="カテゴリー・タグページURL"><img class="aligncenter size-full" src="アイキャッチ画像" alt="" /></a>

<center><span class="color-button02"><a href="カテゴリー・タグページURL"><i class="fa fa-folder-open" aria-hidden="true"></i>ボタン文言</a></span></center>
 

  タイトル左 <a href="ページURL"><img class="aligncenter size-full" src="バナー画像URL" alt="" /></a>

  タイトル右 <a href="ページURL"><img class="aligncenter size-full" src="バナー画像URL" alt="" /></a>

一番上の［no_toc］は目次を消すコードです。

プラグインで自動でつけている方は入れておいて下さい。

これを丸っとコピペすれば私のLPと一緒のデザインが完成します。

でもせっかくなら自分色を出したいですよね？

いや、バナーとかいらんから代わりにカラム増やしたい・・・

そんなお声もあることでしょう！

しかし、これを基にアレンジしようにも

文字多すぎて耳キーーンなる！全然分からん！

って悩む方もいると思いますので、【どのコード】が【どこに対応している】のかを紹介していきます。

この部分をもう少し弄りたい
同じ形をコピーして増やしたい

こんな場合に役立つことでしょう。

ビジュアルモードはほぼ使い物になりません。

見にくいですがテキストモードでコードを弄って下さい。

2カラム（2列）のコード



タイトル左
<div class="simple-box3">

<a href="カテゴリー・タグページURL"><img class="aligncenter size-full" src="アイキャッチ画像" alt="" /></a>
<div class="t-aligncenter"><span style="font-size: 20px;">記事の一例</span></div>
<ul>
 	<li><strong><a href="記事URL">記事タイトル</a></strong></li>
 	<li><strong><a href="記事URL">記事タイトル</a></strong></li>
 	<li><strong><a href="記事URL">記事タイトル</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>
<center></center>

タイトル右
<div class="simple-box3">

<a href="カテゴリー・タグページURL"><img class="aligncenter size-full" src="アイキャッチ画像" alt="" /></a>
<div class="t-aligncenter"><span style="font-size: 20px;">記事の一例</span></div>
<ul>
 	<li><strong><a href="記事URL">記事タイトル</a></strong></li>
 	<li><strong><a href="記事URL">記事タイトル</a></strong></li>
 	<li><strong><a href="記事URL">記事タイトル</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″>

ここがJIN独自のショートコードを使っています。

投稿ページの下部にボックスデザインが載っていると思いますが、それの3番に当たるものを利用しています。

使いたいボックスがあればそれに置き換え、不要であれば消して下さい。

アイキャッチ画像部分

<a href="(タグ・カテゴリーURL)"><img class="aligncenter size-full" src="(アイキャッチ画像URL)" alt=""  /></a>

元のサイズが違うと見た目が変わってくるので、最低でも同じカラム内は同じ大きさ（例：600×300など)に統一するようにリサイズしましょう。

テキストリンクを増やす・減らす

テキストリンクは３つで作成しています、もしテキストリンクを増やしたい場合は</ul>の上に、以下のコードを追加していって下さい。

<li><strong><a href="(タグ・カテゴリー・記事URL)">(タイトル名)</a></strong></li>

減らしたい時はこの部分を消せば１列減らせます。

これもおすすめ記事と同じく数を増やせますが、スマホでも見ることを考えると長くし過ぎない方が良いでしょう。

同じ理屈で上で紹介したアイキャッチ画像のコードを増やせば、バナーのようにして3つ並べるアレンジも可能です。

しかし、スマホで見る事を考慮するとテキストリンクを増やす以上におすすめは出来ません。

ボタン部分

<center><span class="color-button02"><a href="(ボタン用URL)"><i class="fa fa-folder-open" aria-hidden="true"></i>ボタン名</a></span></center>

【<span class=”color-button02″>】はボタンのデザインです。好きなボタンカラーがあれば調整して下さい。

【i class=”fa fa-folder-open”】はアイコンを示しています。

アイコンを変更したい場合はフォントオーサムで取得してください。

フォントオーサムは海外のサイトなので検索の際は英単語で探してみて下さい。

×：フォルダ　〇：folder

3カラム（3列）のコード

  タイトル左

<a href="カテゴリー・タグページURL"><img class="aligncenter size-full" src="アイキャッチ画像" alt="" /></a>

<center><span class="color-button02"><a href="カテゴリー・タグページURL"><i class="fa fa-folder-open" aria-hidden="true"></i>ボタン文言へ</a></span></center>


タイトル中

<a href="カテゴリー・タグページURL"><img class="aligncenter size-full" src="アイキャッチ画像" alt="" /></a>

<center><span class="color-button02"><a href="カテゴリー・タグページURL"><i class="fa fa-folder-open" aria-hidden="true"></i>ボタン文言</a></span></center>

 タイトル右

<a href="カテゴリー・タグページURL"><img class="aligncenter size-full" src="アイキャッチ画像" alt="" /></a>

<center><span class="color-button02"><a href="カテゴリー・タグページURL"><i class="fa fa-folder-open" aria-hidden="true"></i>ボタン文言</a></span></center>

テキストリンクを増やす

<ul>
 	<li><strong><a href="記事URL">記事タイトル</a></strong></li>
 	<li><strong><a href="記事URL">記事タイトル</a></strong></li>
 	<li><strong><a href="記事URL">記事タイトル</a></strong></li>
</ul>

先ほどの2カラムではつけていたテキストリンクを3カラムでは削っています。

理由としてはデザインにメリハリを付けたかったのと、3カラムで文字を並べるとごちゃごちゃなる気がしたためです。

もし文字リンクを付けるのであればアイキャッチ画像のすぐ下にでも、上のコードを追加してください。

ボタン部分

<center><span class="color-button02"><a href="(ボタン用URL)"><i class="fa fa-folder-open" aria-hidden="true"></i>ボタン名</a></span></center>

【<span class=”color-button02″>】はボタンのデザインです。好きなボタンカラーがあれば調整して下さい。

【i class=”fa fa-folder-open”】はアイコンを示しています。

アイコンを変更したい場合はフォントオーサムで取得してください。

フォントオーサムは海外のサイトなので検索の際は英単語で探してみて下さい。

×：フォルダ　〇：folder

バナー部分のコード

  タイトル左 <a href="ページURL"><img class="aligncenter size-full" src="バナー画像URL" alt="" /></a>

  タイトル右 <a href="ページURL"><img class="aligncenter size-full" src="バナー画像URL" alt="" /></a>

最後のバナー部分ですが、画像に直接リンクを貼り付ける形になります。

楽天やAmazonなんかでも良くある画像リンクってやつです。

実は元々1カラムでドーンと見せるつもりでしたがアンバランスになったので2カラムで整えてます。

もし1カラムでバナーを使うのであればかなり大きいサイズを設定しないと見た目的に微妙でしょう。

なお私のLPのバナーサイズの元は640×240と特殊(webバナーとしてはまぁまぁ定番)サイズなので自作です。

(このコード自体はカラムのサイズ内であればどんなサイズでもOKですが、例のごとく大きさは揃えましょう)

バナーが不要でしたらこの部分も削って下さい。

私のLPでは新着記事へのリンクをバナーで設置していますが、新着記事へのリンクを作る場合は一作業必要です。

その作業については次をお読みください。