比較表のブロックを追加しました!

JIN:Rの「デザインプリセット」の使い方!DEMO #1〜#8を選んだ人の設定マニュアル

ひつじ

このページでは、WordPressテーマ「JIN:R」のDEMO #1〜#8を適用した人向けに、設定マニュアルを用意しています。

DEMO Ver2 #1
Milk Chocolate
DEMO Ver2 #2
Cuty Pink
DEMO Ver2 #3
Healing Green
DEMO Ver2 #4
Toy Yellow
DEMO Ver2 #5
Sky Blue
DEMO Ver2 #7
Ocean Blue
DEMO Ver2 #6
Egyption Green
DEMO Ver2 #8
Navy Blue

JIN:R DEMO #1〜#8 の設定手順

ページの上から順番に解説していくよ〜

ひつじくん
ひつじくん
1
初期設定

インフォメーションバーを設定する

カスタマイズを開く

まずは「カスタマイズ」に進みましょう。

ここでお知らせ内容の編集ができます。

インフォメーション設定へ

「インフォーメーション設定」に進んでください

設定を自分用に変更する

インフォメーションの設定で変更すべきなのは

「テキスト」「ボタン」「リンク先」の3つです!

お知らせの例(プロフィール)
  1. テキスト:このブログの著者について
  2. ボタン:プロフィールを読む
  3. リンク先:自分のプロフィールURLを指定
お知らせの例(商品PR)
  1. テキスト:6月末までに購入すると20%OFF
  2. ボタン:キャンペーン情報を読む
  3. リンク先:キャンペーン記事のURLを指定

こんな感じで、テキスト・ボタンを変更して使ってね!

ひつじくん
ひつじくん
2
初期設定

サイトタイトル&ロゴ画像の設定

カスタマイズを開く

まずは「カスタマイズ」に進みましょう。

タイトルを変更する

カスタマイズの「基本設定」に進むと、サイトタイトルを編集する部分が出てきます。

ここでタイトルの文字を変更しましょう!

タイトルの「大きさ」「余白」を変更する

サイトタイトルの大きさを調整するには

「サイトデザイン設定」に進んで、「ロゴ設定」にある「ロゴ/タイトルの大きさ」を調整してください。

サイズ調整のポイント

PC・スマホともに調整が効くので、実際の画面を見ながら、微調整をかけてもらえるといいでしょう。

ロゴ画像を持っている人はアップ!

ロゴ画像を持っている人は、ここでアップすると反映されるよ!

ひつじくん
ひつじくん
3
初期設定

グローバルメニューの設定

カスタマイズを開く

まずは「カスタマイズ」に進みましょう。

メニュー設定に進む
メニュー作成へ

「メニューを新規作成」のボタンを押して、このような画面に進みます

メニュー名は「グローバルメニュー」と記入して

「グローバルナビゲーション」「ハンバーガーメニュー」の両方にチェックを入れて進んでもらえればOKです。

設定のポイント

ハンバーガーメニューはスマホ用のメニューです。

強いこだわりがなければ、PCと共通利用でOK

あとはメニュー内容を作っていくだけ

あとは「項目を追加」のボタンを押して、追加したいものをクリックして選んでいきましょう。

もっと詳しい解説は「グローバルメニューの作り方」のページにあります。

4
初期設定

記事スライダーの設定(※ 基本不要)

ここは編集しなくても、そのままで使えます!

記事数が1〜3記事しかないと、あまり綺麗に動きません。

うまくスライドしない場合は記事を追加してください。

細かく編集したい方だけ、じっくり読んでください↓

カスタマイズを開く

まずは「カスタマイズ」に進みましょう。

メインビジュアル設定で編集

メインビジュアル設定で、細かな調整が効きます。

特に、表示する記事をピックアップしたい人は、記事の選択で「個別選択」を選ぶようにしてください!

JIN:R DEMOの設定手順【トップページ編集編】

じゃあ、ここからはトップページの編集に移っていくよ!

(・・・といっても、ほぼいじらなくてOKなんだけども。)

ひつじくん
ひつじくん
1
初期設定

トップページの編集

↓ これからやること ↓

記事編集画面に移動

「人気記事リスト」を編集(※ 基本不要)

人気記事リストは、クリックすると右サイドバーで編集できます。

といっても、基本触らなくてOK。

気になる人だけぽちぽち触りながらカスタマイズを楽しんでください。

「新着記事リスト」を編集(※ 基本不要)

新着記事リストも、クリックすると右サイドバーで編集できます。

ここも、基本触らなくてOK。

カスタマイズ例
  • テキストタイプが嫌な人は、カード型に切り替える
  • 新着一覧はいらない人は、カテゴリ一覧に切り替える

気になる人だけぽちぽち触りながらカスタマイズを楽しんでください。

ボタンの編集

ボタンは、クリックすると右サイドバーで編集できます。

編集すべき項目
  1. ボタンのテキスト(文字)
    • 「ダウンロードページへ」となっている箇所
  2. URL設定
    • 「https://jinr.jp/download/」となっている場所

例えば、ボタンはこんな使い方があります↓

  1. プロフィールへ飛ばす
    • テキスト:〇〇のプロフィールへ
    • URL設定:自分のプロフィールURLをセット
  2. レビュー記事へ飛ばす
    • テキスト:〇〇のレビュー記事を読む
    • URL設定:自分の書いたレビュー記事URLをセット
  3. 推し商品の公式サイトへ飛ばす
    • テキスト:〇〇の公式サイトへ
    • URL設定:アフィリエイトコードを設定

詳しい使い方は「JIN:Rのボタンの使い方」の記事を読んでもらえるといいでしょう!

ここまできたら、ページは基本完成!

あとは細かい調整を行なっていってね。

ひつじくん
ひつじくん
2
初期設定

プロフィールを設定する

カスタマイズを開く

まずは「カスタマイズ」に進みましょう。

プロフィール登録
SNS登録をしていく!

「カスタマイズ」>「SNS登録 / シェア設定」に進むと、自分のSNSアカウントを設定できる場所があります。

ここで、自分のSNSのプロフィールURLをセットしましょう!

アプリ版ではなく、Web版で「Twitter」「Instagram」などを開いてください。

そして、自分のSNSアカウントのプロフィールページに移動するとURLが見つかるので、それをセットしてもらえるといいです。

たとえばこんな感じ!
Instagramだとこんな感じ
3
初期設定

サイドバーを設定する

※ ただいま執筆中です。しばらくお待ちください…

カスタマイズ
<!-- wp:jinr-blocks/profile -->
<div class="wp-block-jinr-blocks-profile b--jinr-profile-container">
ひつじ
ひつじ
ブロガー / デザイナー
Profile
WordPressテーマ「JIN」の制作者として、設計とデザインを担当している。

会社員として働くのが嫌すぎて、2016年に収入0円でブログ起業。SEOとアフィリエイトを組み合わせて開始1年で月100万円超の利益を達成する。

しかしその反動でアフィリエイトには飽きてしまい、もともと好きだったデザインを武器に、チームでWordPressの開発をおこなっている。
</div> <!-- /wp:jinr-blocks/profile --> <!-- wp:search /--> <!-- wp:jinr-blocks/postlist {"postNum":3,"rankingDisplay":true,"rankingViewDisplay":true,"columnSelect":"1","radioDisplayArticles":"pv","moreLink":"https://jinr-demo.jp/demo-2/category/blocks/","clientId":"ce7d600b-d12e-450c-a0fe-47f8e4654d10","PvUrl1":"https://jinr-demo.jp/demo-2/feature/","PvUrl2":"https://jinr-demo.jp/demo-2/button/","PvUrl3":"https://jinr-demo.jp/demo-2/box/","PvUrl4":"https://jinr-demo.jp/demo-2/timeline/","PvUrl5":"https://jinr-demo.jp/demo-2/blogs/","PvUrl6":"https://jinr-demo.jp/demo-2/pagespeed/","PvUrl7":"https://jinr-demo.jp/demo-2/design/","PvUrl8":"https://jinr-demo.jp/demo-2/monetize/"} /-->

お疲れ様でした!

ここまできたら、JIN:Rの初期設定は終わりです!

あとは記事を書いていくだけでOK

ひつじくん
ひつじくん

ここからは「何からブログを始めたらいいかわからない」という人向けに

WordPress初期設定後にやることリストを用意しています!

こちらも活用しながらブログ作成を進めていってくださいね。

記事URLをコピーしました