ブログ運営

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

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

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

って方向けの記事です。

 

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

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

https://kinjyo8835.com/

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

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


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

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

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

 

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

 

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

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

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

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

コード全文

便利な情報

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

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

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

 

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

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

 

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

 

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

 

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

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

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

 

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

 

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

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

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

スポンサーリンク

おすすめ記事部分のコード解説

見出し部分

今後も[lp-h2 style=”数字”]と言うコードが出てきますが、全て見出しのデザインになります

style=”数字”の数字部分を1、2、3・・・と変えるとあなたのブログで設定している大見出しや中見出しのデザインを引き継げます。

 

統一するのであれば全て同じ数字を、メリハリを付けたい場合は変更しておきましょう。

紹介記事部分

これを増やすと1記事増加、消すと1記事減少になります。

MAXで4記事までなら1列で表示できます。

 

5記事になるとサムネイルが下段に移ったので作るなら4の倍数で作りましょう。

アイキャッチ部分

アイキャッチURLの取り方
  1. メディアを追加を開く
  2. 挿入したい画像をクリック
  3. 画像のURLが表示されるのでコピー
  4. コード内のアイキャッチ画像URL部分に貼り付ける

 

この手順で作業すればアイキャッチが表示されるようになります。

しかし、アイキャッチに何も文字が入っていない場合、ただ写真が並ぶだけで全く意味が通じなくなってしまいます。

 

対策としては

  • アイキャッチ自体にタイトルを入れた画像を作る
  • アイキャッチの下にタイトルを付ける

 

で対応しましょう。

 

もしアイキャッチの下にタイトルを入れる場合のコードはこんな感じになります。

 

が、タイトルって文字数バラバラなので文字入れすると結構バランスが悪くなります。

綺麗に見せるのであればアイキャッチに文字を入れてしまった方が見やすいので、この機会にチャレンジ!

文字入りアイキャッチを作るならFotorをどうぞ
綺麗な写真サンプル
ブラウザ上で無料の画像加工ができるFotorの魅力と使い方!どうも。美的センスが毛程もない近所です(´・ω・`) ブロガーだとおしゃれなアイキャッチ画像を作ったりしたいですよね? ...

2カラム(2列)のコード

<div class=”simple-box3″>

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

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

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

アイキャッチ画像部分

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

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

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

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

 

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

 

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

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

ボタン部分

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

 

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

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

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

×:フォルダ 〇:folder

スポンサーリンク

3カラム(3列)のコード

テキストリンクを増やす

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

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

 

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

ボタン部分

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

 

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

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

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

×:フォルダ 〇:folder

バナー部分のコード

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

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

 

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

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

 

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

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

 

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

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

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

スポンサーリンク

トップページをLPに変更する

最後に一番大事なトップページとLPを入れ替える方法です。

これをしないとせっかく作ったLPが無駄になってしまいますので必ず設定しましょう。

LPをトップページにする方法
  1. 固定ページを新規作成
  2. タイトルを記事一覧にする(本文は空白でOK)
  3. パーマリンクにはblogを付ける
  4. 設定>表示設定からトップページをLPに、投稿ページを記事一覧に設定

これによりサイトのトップページがLPのページになり、従来のトップページは別のページ扱いとなります。

 

先ほど「新着記事設定は一作業必要」と言った作業はこの部分になります。

この設定をした後からは新着記事へ飛ぶURLは【https://ブログURL/blog】となります。設定間違いのないようにしましょう!

LPの組み合わせは自由自在

一通り作り方と解説をしましたが、LPは自由度が高いので好みの形に作り替えて下さい。

これまで解説で載せたコードを組み合わせればよいので

組み合わせ例1
  • バナー
  • おすすめ
  • 3カラム
  • 3カラム
組み合わせ例2
  • バナー
  • バナー
  • 3カラム
  • 2カラム

 

なんてのも自在です。(上の例は設計図などもなく適当に上げた例なのでデザインは保証しません)

おすすめしたい記事やカテゴリーで組み合わせを変えてみて下さい!

もしよく分からないなどありましたら、コメント等いただければお答えできる範囲ならばお答え致します。

全く違うデザインの作り方(例えば4カラム)などは分からないのでご了承ください

 

以上、【コピペでOK】JINでLPのコードを全公開!作り方解説&参考サイト付き!でした!

初心者必見!特化ブログに注力1カ月実践記!PVや収益の作り方を解説!特化ブログにしっかりと取り組んだらどうなるかの解説記事です。やったことやその数値を濃厚にまとめました。ページ/セッションに重点を置いてますのでPV数やアクセスを増やしたい方は是非ごらんください。...
ワードプレステーマを有料の「JIN」のレビュー!超おすすめです!どうも。本を買ったけどあんまり理解できなかった近所です(´・ω・`) ワードプレス始めたところだし有料テンプレートはちょっと手が出...

 

COMMENT

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

CAPTCHA