ブログ運営

JINトップページをサイト型にする方法・手順【テキストにコピペでok♪】 

JINトップページをサイト型にする方法・手順 テキストにコピペ この記事では有料テーマjinのトップページを『サイト型』のように固定にしたい!あるいは新着記事はできるだけ非表示の固定ページを作りたい!ユーザーが必要な記事を見つけやすくユーザビリティを向上させたい!と思っているパソコン初心者の方に向けて、できるだけ分かりやすくたくさんの画像を使いながら丁寧に解説していきたいと思います。

このjinのカスタマイズ方だと、cssを触らないでいいから初心者でも安心です。
HTMLをコピペでテキスト部分に張り付けるだけなので安心して実践できます☆

この記事は有料テーマjinを使っている方向けの記事です。

 

ピンくま
ピンくま
ねぇねぇ トップページ?ホーム?をね、新着順ではなくってサイト型っていうのかな?いつ開いても固定のページ画面で、そっからボタンとか押したら好きなカテゴリーに飛べる感じのにしたいんだけど~難しいのかな?
みのかママ
みのかママ
大丈夫だよ!だってパソコン音痴で初心者の私だってこんな感じのトップページにできたんだもの♪
ピンくま
ピンくま
え!そうなんだ~分かりやすく教えてよ!
みのかママ
みのかママ
うん!じゃあ行ってみよう☆

①JINのトップページをサイト型にカスタマイズする手順

当サイトはトップページを以下の方法でカスタマイズしています。

当サイトはTanakano*様の記事の記事を参考に、トップページを作らせていただき忘備録も兼ねて記事を書いています。

Tanakano*様は現在ジンのカスタマイズで超有名なポンひろ様の記事を参考にトップページを作っているとのことです。
Tanakano*様、ポンひろ様に感謝です!

Tanakano*様は新着記事エリアや関連記事エリア、3カラム表示のことなどとても細かく説明して下さっています。ご興味のある方はTanakano*様、サイト及びポンひろ様のサイトをご覧ください。

 

トップページをサイト型にカスタマイズする手順
  • STEP1
    手順1
    新規固定ページで好みのトップページを作る
  • STEP2
    手順2
    投稿の属性をLPにして記事タイトルを消す。
    記事タイトルを消し投稿。
  • STEP3
    手順3
    もう一つ別に新規固定ページを開き、タイトルを『記事一覧』としてタイトルのみ記載で投稿。
  • STEP4
    手順4
    設定>表示画面から表示画面を固定ページ。ホームページを固定ページ(手順1)に設定。
    投稿ページは記事一覧ページ(手順2)を設定。
  • STEP5
    手順5
    お好みで新着記事ボタンなどリンクを張る

 ワードプレスのダッシュボードで 固定ページ>新規追加をクリック

ワードプレスの管理画面に行き、固定ページをクリックし新規追加をクリックする。

ここではタイトルをトップページとする。

ワードプレス画面
みのかママ
みのかママ
この時パーマリンクが平仮名になっているのでローマ字に変更しておこうね
ワードプレス管理画面

※空欄の部分はグーグルの検索で任意の単語を英語で検索してもOKです。

目次・索引を作る

以下をコピー&ペーストしてテキスト部分に張り付けてください。

 

【お好みの画像】

【導入文=好きな文章を入れて下さい】

【ここに索引や目次等を記入してください】

<ol> <li style="border-bottom: dashed 1px #87CEFA;"><a href="#category1">【カテゴリー名1】</a></li> <li style="border-bottom: dashed 1px #87CEFA;"><a href="#category2">【カテゴリー名2】</a></li> <li style="border-bottom: dashed 1px #87CEFA;"><a href="#category3">【カテゴリー名3】</a></li> </ol>

 

すると下のような画面が作ることが出来ます。

目次 索引

※今のところまだ記事数が少ないのでここではカテゴリー3つ分を記載しています。
【】の中をご自身のブログの内容に合わせて変更してくださいね

カテゴリーと載せたい項目を張り付ける。

下記のHTMLをブログのテキストへ張り付ける。

<a id="“category1“"></a><strong>【カテゴリー1】</strong>

<i class="fas fa-camera" style="color: #2194d5;"></i> <a id="category1"></a>【カテゴリー1のPCで左側表示】

【バナーサイズ画像(今回width="320" height="100")】 <div class="simple-box6"> <ul> <li><a href="【記事URL】">【カテゴリー1のPC左表示の記事タイトル】</a></li> <li><a href="【記事URL】">【カテゴリー1のPC左表示の記事タイトル】</a></li> <li><a href="【記事URL】">【カテゴリー1のPC左表示の記事タイトル】</a></li> </ul> </div> <center><span class="color-button01-big"><a href="【カテゴリーURL】">このカテゴリをもっと読む <i class="fas fa-chevron-circle-right"></i></a></span></center>

<i class="fas fa-camera" style="color: #2194d5;"></i> <a id="category1"></a>【カテゴリー1のPCで右側表示】

【バナーサイズ画像(今回width="320" height="100")】 <div class="simple-box6"> <ul> <li><a href="【記事URL】">【カテゴリー1のPC右表示の記事タイトル】</a></li> <li><a href="【記事URL】">【カテゴリー1のPC右表示の記事タイトル】</a></li> <li><a href="【記事URL】">【カテゴリー1のPC右表示の記事タイトル】</a></li> </ul> </div> <center><span class="color-button01-big"><a href="【カテゴリーURL】">このカテゴリをもっと読む <i class="fas fa-chevron-circle-right"></i></a></span></center>&nbsp;
&nbsp;

<a id="“category2“"></a><strong>【カテゴリー2】</strong>

<i class="fas fa-camera" style="color: #2194d5;"></i> <a id="category2"></a>【カテゴリー2のPCで左側表示】

【バナーサイズ画像(今回width="320" height="100")】 <div class="simple-box6"> <ul> <li><a href="【記事URL】">【カテゴリー2のPC左表示の記事タイトル】</a></li> <li><a href="【記事URL】">【カテゴリー2のPC左表示の記事タイトル】</a></li> <li><a href="【記事URL】">【カテゴリー2のPC左表示の記事タイトル】</a></li> </ul> </div> <center><span class="color-button01-big"><a href="【カテゴリーURL】">このカテゴリをもっと読む <i class="fas fa-chevron-circle-right"></i></a></span></center>

<i class="fas fa-camera" style="color: #2194d5;"></i> <a id="category2"></a>【カテゴリー2のPCで右側表示】

【バナーサイズ画像(今回width="320" height="100")】 <div class="simple-box6"> <ul> <li><a href="【記事URL】">【カテゴリー2のPC右表示の記事タイトル】</a></li> <li><a href="【記事URL】">【カテゴリー2のPC右表示の記事タイトル】</a></li> <li><a href="【記事URL】">【カテゴリー2のPC右表示の記事タイトル】</a></li> </ul> </div> <center><span class="color-button01-big"><a href="【カテゴリーURL】">このカテゴリをもっと読む <i class="fas fa-chevron-circle-right"></i></a></span></center>

<a id="“category3“"></a><strong>【カテゴリー3】</strong>

<i class="fas fa-camera" style="color: #2194d5;"></i> <a id="category3"></a>【カテゴリー3のPCで左側表示】

【バナーサイズ画像(今回width="320" height="100")】 <div class="simple-box6"> <ul> <li><a href="【記事URL】">【カテゴリー3のPC左表示の記事タイトル】</a></li> <li><a href="【記事URL】">【カテゴリー3のPC左表示の記事タイトル】</a></li> <li><a href="【記事URL】">【カテゴリー3のPC左表示の記事タイトル】</a></li> </ul> </div> <center><span class="color-button01-big"><a href="【カテゴリーURL】">このカテゴリをもっと読む <i class="fas fa-chevron-circle-right"></i></a></span></center>

<i class="fas fa-camera" style="color: #2194d5;"></i> <a id="category3"></a>【カテゴリー3のPCで右側表示】

【バナーサイズ画像(今回width="320" height="100")】 <div class="simple-box6"> <ul> <li><a href="【記事URL】">【カテゴリー3のPC右表示の記事タイトル】</a></li> <li><a href="【記事URL】">【カテゴリー3のPC右表示の記事タイトル】</a></li> <li><a href="【記事URL】">【カテゴリー3のPC右表示の記事タイトル】</a></li> </ul> </div> <center><span class="color-button01-big"><a href="【カテゴリーURL】">このカテゴリをもっと読む <i class="fas fa-chevron-circle-right"></i></a></span></center>
&nbsp;

 

すると下記のような画面を作ることが出来ます。

 

みのかママ
みのかママ
この上の文をコピペしてHTMLの部分に張り付けてみて。
ビジュアル画面の方を押しただけじゃ2カラムになっていることは確認できないよ。
プレビューを押したらちゃんと2カラム表示できているはずだよ。
ピンくま
ピンくま
目次って文字をタップしたらそのカテゴリーに飛ぶことはできるの?
みのかママ
みのかママ
上記の目次と索引部分のHTML分をコピペしたらちゃんと飛べるようにしているわよ♪

当方パソコン初心者でありまして、この索引部分から飛びたい場所に飛ぶという設定をするのにも、かなりの時間を要しました(;’∀’)

なので、ちゃんと飛べるように書き込んでおきました☆

またカテゴリー数を増やしたい場合は『目次・索引』のHTMLの部分をコピーしてカテゴリーの数字を増やしたものをコピペしてください。

ジン 項目 飛ぶ わかりやすく

そしてカテゴリーのHTMLの<a id=”“category(数字)“”></a>というタグの数字目次の数字と一致させてもらったら、カテゴリー数を増やしても同じように任意の部分まで飛ぶことが出来ます。

記事タイトルを消す

タイトルを消したら都合が悪い場合(タイトルがない記事がたくさんあるなどの時は)最後に消してもOKです、

投稿の属性を変更する

ブログの投稿の属性という部分を『デフォルト』から『LP』に変更にする。
↓下記のピンクの部分

 

 

こっちはデフォルト↓(まだタイトルを消していない時)

 

 

こっちがLP。(こっちはタイトルを削除たものを表示しています。)

こうすることによりサイドバーが消えて、ブログが見やすくなりますね♪

②記事一覧ページを作る

固定ページで新規作成をクリック。

タイトルを『記事一覧』にする。
パーマリンクは日本語になるので、英語に直します。(ここでは『blog』)

③固定ページをトップページ(ホーム)に設定する。

ワードプレスのダッシュボード『設定』>表示画面から設定を行います。

ジン カスタマイズ サイト型

ホームページの表示を固定ページ
サイト型に作ったページ(手順①)をトップページに設定。
投稿ページは記事一覧ページ(手順②)のページに設定。

最後『変更を保存』を押すのを忘れないように。

お好みで新着記事にリンクを張る。

『新着記事』へのリンクは、手順②で作って投稿した『記事一覧ページのURL』をリンクしてください。

私は雑記ブログのためいろいろ書いていきたいと思っているので
新着記事への誘導はトップぺージの下の方に目立たないようにリンクを張っています。
また全ての記事を検索したい人のために、サイトマップへもリンクを張っています。

新着を目立たせたいと思う方は、jinのショートコードを使って新着一覧のリンクボタンを目立たせるようにしてもいいと思います。

あなた好みのサイトにカスタマイズしてくださいね。

まとめ

いかがでしたか?
カスタマイズってなんだか面倒ですが、凝ってたらキリがありませんよね~
時間のないあなたの何かのお役に立てれば幸いです。
最後まで見てくださいましてありがとうございました!

 

 

error: 保護されたウエブサイトです