JIN:R Ver1.0.9をリリース!

これをやれば大丈夫!WordPressテーマ「JIN:R」の初期設定のやり方を1ページで総まとめ

ひつじ

こんにちは!JIN:Rをご購入いただきありがとうございます。

このページでは「WordPressが初めての人」でもわかるように、JIN:Rでのサイト作りを1から丁寧に解説をしていきます。

JINRを購入後にやることを1ページにまとめておきました!

ワードプレスが完全に初めての人へ

「このページだけ見ておけば、とりあえず大丈夫」です。

ぜひ動画も再生させつつ、マニュアルを読んでいってください!

STEP1にジャンプ

JINから移行する人へ

JIN→ JIN:R移行プラグイン」を用意しています。こちらの記事も参考にしながら、テーマの引越しを進めてもらえると幸いです

JINからJIN:Rにテーマ移行(引っ越し)する方法
JINからJIN:Rにテーマ移行(引っ越し)する方法

他テーマ(cocoonなど)から移行する人へ

他テーマからJIN:Rに乗り換える方法」の記事を用意しています。こちらの記事も参考にしながら、テーマの引越しを進めてもらえると幸いです

JIN:Rへのテーマ移行(乗り換え)の方法&注意点
JIN:Rへのテーマ移行(乗り換え)の方法&注意点

もし設定していて困ったことがあったら「JIN:R Forum」に頼ってくれてもいいですし、コミュニティ内で聞くこともできます!

▽ JIN:Rの完全無料コミュニティ

コミュニティ「JIN BLOGCAMP」に参加する|JIN:Rユーザーは永年無料
コミュニティ「JIN BLOGCAMP」に参加する|JIN:Rユーザーは永年無料

コミュニティ『BLOGCAMP』で、開発者「ひつじ」に直接相談することができます。頂いた質問には、できるだけ速く、すべて答えています。

ひつじくん
ひつじくん

では、初期設定を始めていきましょう!

初期設定をしよう!【STEP1】

ではテーマを購入後、初期設定の流れについて解説しますね。

この初期設定(テーマのインストール)が終わると、

JIN:Rのテーマを使い始めることができます。

ひつじくん
ひつじくん

自動返信メールが届きます

テーマ購入時に入力いただいたメールアドレスに、JIN:R運営チームから自動返信メールが届きます。(購入から数分で到着)

自動返信メールには

  • 「ダウンロードURL」
  • 「ダウンロードパスワード」

が記載されています。

まずは「ダウンロードURL」にアクセスしましょう!

メールが見つからない場合

どうしても自動返信メールが見つからない場合、お手数ですが以下のメールアドレスまでお問い合わせください。

宛先:jinr-support@croover.co.jp
件名:自動返信メールが届かない
内容:購入時に利用した「メールアドレス」を記載

購入確認が取れ次第、テーマ配布させていただきます。

ダウンロードする

ダウンロードページを下に進んでいくと、ダウンロードする場所が現れます。

「ダウンロードする」をクリックするとパスワードが求められます。

ここで自動返信メールから配布された「ダウンロードパスワード」を入力します。

ダウンロードが成功すると、以下の画像のように「jinr.zip」が画面左下に保存されます(Google Chromeの場合)

※ この画面になってもファイルが自動でダウンロードされないケースもあります。そのときは「ダウンロード」の緑のボタンを押すとファイルダウンロードができます。

ここまで来れば、ダウンロードが完了です!

WordPressにログインする

では、WordPressにログインしてJIN:Rを使えるようにしましょう。

自分のサイトURLの後ろに「/wp-admin」と入力すると、WordPressのログインを開くことができます。

自分のサイトURLの後ろに「/wp-admin」と入力

そうするとログイン画面が開きます

WordPressの「ユーザー名」と「パスワード」は、レンタルサーバー契約時に自分で決めたものになっています。

JIN:Rをインストールする

WordPressの管理画面を開いたら、「外観」>「テーマ」へと進んでください。

「新規追加」のボタンが出てくるのでクリック。続いて「テーマのアップロード」のボタンが出てくるので、これをクリック。

画面中央に「ファイルを選択」というボタンがでるので、自分のパソコンの中からファイルを選べる画面へと移動しますね。

先ほどパソコンにダウンロードしておいた「jinr.jp」を選択したら、「今すぐインストール」のボタンを押しましょう!

アップロードがうまくいくと「有効化」のボタンが出てきますので、これをクリックしたら完了です。

ここで「有効化」をクリックすると、JIN:Rのデザインが反映されます。

※ もしページから移動してしまった場合には、「外観」>「テーマ」に進むと、JIN:Rのテーマを有効化する画面が出てきます。

トップページを開くと、JIN:Rのサイトができている

お疲れ様でした!

トップに戻るとJIN:Rの初期デザインが反映されていることがわかりますね。

初期設定、おつかれさまでしたっ!

もし、JIN:Rのプログラムコードをカスタマイズする予定がある人は、「JIN:Rの子テーマ」を利用して貰えると幸いです。

初期設定でわからない部分があれば、、

▽ フォーラム
https://jinr-forum.jp/

▽ コミュニティ
https://jinr.jp/manual/community/

まで、ご相談ください。

1人で悩まなくていい場を用意していますので、ぜひご活用ください🤲

次は、STEP2「デザインインポート」に進んでいきましょう!

JIN:Rならデザイン変更も一瞬でできますので、自分なりにサイトデザインを楽しんでみてください。

ひつじくん
ひつじくん

デザインをインポートする【STEP2】

このSTEP2では、JIN:Rを使ったサイトデザインを進めていきます。

といっても「デザインプリセット」の機能を使えば、一瞬でDEMOと同様のデザインのサイトを立ち上げることが可能です。

デザインプリセットのイメージ動画↓
こんな風にDEMOの型をそのままインポートすることができます。

20秒だけ動画を見てください

その方法についてみていきましょう!

カスタマイズを開く

WordPress管理画面上にある「カスタマイズ」をクリックして、デザインの編集画面に移りましょう。

デザインプリセットに進む

カスタマイズの画面を開いたら「デザインプリセット」の項目に進みます。

好きなデザインをインポート

あとは、好きなDEMOのデザインを選んで「Download」のボタンを押しましょう!

ダウンロードボタンを押すと、前のデザインには戻れません。

※ Safariでは「ダウンロード」のボタンがうまく機能しない場合があります。お手数ですが、この機能に関しては「Chrome」のブラウザで使ってもらえるとうまく動作するはずです。

「Donwload」を押すと、DEMOと同じデザイン(配色・レイアウト・トップページの形)に一瞬で切り替えることができます。

デザインプリセットに関するよくある質問

Q
デザインインポートがうまく機能しない

お手数ですが「デザインインポートがうまくいかない時の対処法」の記事を読んでご対処ください。

Q
デザイン変更は何度でもできるの?

インポートは何回もできます!

もしイメージと違う場合は、別のDEMOをインポートしてみてください。

Q
インポート前のトップページ(記事)に戻すことはできる?

インポート前のトップページの記事は消えた訳ではありません。

ちゃんと戻すことができます!

トップページが変わる仕組み

デザインインポートを行うと「トップページ用の記事が新規作成されて、その記事にトップページが置き換わる」という仕組みになっています。

例えば、DEMO2を適用した状態でDEMO4をインポートすると

DEMO4のトップページ記事が強制的にトップにセットされます。DEMO2の記事は消えた訳ではなくて、固定ページ一覧に残っています。

対処法

もしインポート前のトップページに戻したい場合

管理画面の「設定」>「表示設定」の「ホームページ設定」で、再度トップ用に作成していた記事を固定してもらう必要があります。

Q
トップページ用に自動生成される記事にnoindexが入る理由は?

トップページ用に自動生成される記事には、あらかじめ「noidex」のタグが入っています。

これは重複コンテンツを避けるための仕様です。

トップ用の固定ページにnoindexタグが入っていても、トップページに呼び出して表示しているのであれば、トップページは正常にインデックスが働きます。

あとは記事や画像を整えるだけ!

お疲れ様です。これでデザインのベースは整いましたね!

でも、まだトップページが「noimage」の画像ばかりになっていると思います。

あとは記事や画像を作り込んで、中身の完成度を上げていきましょう!

  1. DEMO01をインポートした人の設定
  2. DEMO02をインポートした人の設定
  3. DEMO03をインポートした人の設定
  4. DEMO04をインポートした人の設定
  5. DEMO05をインポートした人の設定(※作成中)
  6. DEMO06をインポートした人の設定
  7. DEMO07をインポートした人の設定
  8. DEMO08をインポートした人の設定
  9. DEMO09をインポートした人の設定
  10. DEMO10をインポートした人の設定
  11. DEMO11をインポートした人の設定
  12. DEMO12をインポートした人の設定
  13. DEMO13をインポートした人の設定
  14. DEMO14をインポートした人の設定
  15. DEMO15をインポートした人の設定

お疲れ様でした!

このSTEP2で、大まかなサイトデザインは完了しましたね!

記事の書き方を知る

ワードプレス完全初心者の人はブログ上に記事がない状態だと思います。

「記事の書き方」についても覚えておいてもらえるといいでしょう

JIN:Rでの「記事の書き方」を覚えよう!初心者がコレだけおさえておきたいポイントを紹介
JIN:Rでの「記事の書き方」を覚えよう!初心者がコレだけおさえておきたいポイントを紹介
ひつじくん
ひつじくん

サイトデザインを設定する【STEP3】

では、ブログデザインを少しずつ完成させていきましょう!

デザイン変更のやり方

JIN:Rでは「カスタマイズ」でサイトデザインを調整していきます↓

画面上の黒いバーに「カスタマイズ」があります。ここでデザインをいじります。

そのやり方について、詳しく解説していきましょう!

ひつじくん
ひつじくん

メインビジュアルを設定する

サイトの第一印象を作る「メインビジュアル」の設定から始めていきましょうか。

メインビジュアルとは、例えばこういったパーツのことです↓

「記事スライドショー」のデザイン

他にも「画像スライドショー」「ヘッダー画像」「ヘッダー動画」など、さまざまなタイプのメインビジュアルがあります。

この設定について解説をしていきましょう。

カスタマイズを開く

WordPress管理画面上にある「カスタマイズ」をクリックして、デザインの編集画面に移りましょう。

メインビジュアル設定

「カスタマイズ」を開いたらこのような画面になるので「メインビジュアル設定」に進んでください。

メインビジュアル設定を開くと、「記事スライドショー」「画像スライドショー」「ヘッダー画像」「ヘッダー動画」の4つの選択肢が表示されていますね。

DEMOのデザインを使っている人は、すでに何かの設定が入っていると思います。

設定を進める

では、メインビジュアルの設定を進めていきましょう。

今回は「記事スライドショー」の方法を紹介します。

そうするとURLの入力欄が出るので、ここにピックアップしたい記事のURLをコピペして貼り付けましょう。

そうすると、このように反映されます。

これで「記事スライドショー」でのメインビジュアルは出来上がりです!

なお、「ヘッダー画像」「ヘッダー動画」「画像スライドショー」の方法は、お手数ですが別の記事でご覧ください。

「色」を変更する

ブログで使われている色を変更してみましょう

「カスタマイズ」>「カラー設定」に進んでください。

すると、色を一括変更できる場所があります。

JIN:Rでは、各パーツのカラーを「カスタマイズ」で一括変更できるようになっています。

「基本設定」「ヘッダーエリア設定」「執筆ツールの色」「お気に入りカラー」など、触りながら調整して貰えるといいでしょう。

「ロゴ」を設定する

サイトのロゴ画像を持っている人は、ロゴを設定しておきましょう。

ロゴ画像というのは、こういったブランドを印象付ける画像のことです↓

ロゴはなくてもいいですが、あったほうが印象に残るサイトに仕上がりやすいです。

もしロゴを持っていない人は「ココナラ」のサービスを使って、外注でロゴを作ってもらってもいいかもしれません。

さて、ロゴ画像を設定方法について簡単に説明します。

「カスタマイズ」>「サイトデザイン設定」に進んでください。

サイトデザイン設定の中に、以下のような設定欄があります。

ここで「画像を選択」を押して、ロゴ画像を貼り付けましょう。

大きさはPCとスマホの両方をみながら調整をしてください。

もっと詳しい説明は「ロゴ画像の設定」の記事を参考にしてください。

▼ あわせて読みたい
「サイトロゴ」の設定
「サイトロゴ」の設定

「メニュー」を設定する

メニューを設定しておきましょう。

「グローバルメニュー」は、パソコン画面の右側に表示されるメニューのことです。

「ハンバーガーメニュー」は、スマホ画面の右側に表示されるメニューのことです。

この「グローバルメニュー」と「ハンバーガーメニュー」の2つを設定しておきましょう!

「カスタマイズ」>「メニュー」に進んでください。

すると「メニューを新規作成」のボタンがあります。ここからメニュー作成を始めていきましょう。

メニュー作成画面に続きます。

メニュー名は「グローバルナビ」と記載して、メニューの位置は「グローバルナビゲーションにチェック」を入れておきましょう。

「メニューを新規追加」すると、この画面に

「次」のボタンを押します。

すると、以下のようにメニューを組むことができる画面に移ります。「項目を追加」のボタンを押して、メニューに入れたい記事を選んでいきましょう。

あとはメニューを組んで「公開」ボタンを押すだけ!

もっと詳しい方法については「グローバルメニューの作り方」についての記事を読んでください。

また、全く同じ方法で「ハンバーガーメニュー」や「フッターメニュー」も作成することができます。

「スマホメニュー」を組んでおこう

スマホメニューを組んでおくと、よりリッチな表示に仕上げることができます↓

スマホメニューの例

「カスタマイズ」>「スマホ専用機能」に進んでください。

設定を始める前に、スマホビューに変更しておきましょう。

下の方にスマホアイコンがあるので、これをクリックする

あとは、メニュー1〜4を埋めていけば完成です!

  • メニュー名
  • アイコン
  • リンク先URL

この3つを設定していけばスマホメニューが完成します!

「吹き出し」を設定する

記事で使う「吹き出し」のキャラクターを登録しておきましょう。

吹き出しというのは、まさにこのキャラクターの会話文のこと

ひつじくん
ひつじくん

「カスタマイズ」>「吹き出し」に進んでください。

以下のように吹き出しキャラクターを設定できる場所が見つかります。ここの設定欄を埋めていきましょう。

より詳しい解説については「吹き出しデザインの設定」についての記事をご覧ください。

▼ あわせて読みたい
「吹き出し」の作り方|キャラクター会話文を作って記事をもっと読みやすく仕上げよう!
「吹き出し」の作り方|キャラクター会話文を作って記事をもっと読みやすく仕上げよう!

「プロフィール」を設定する

プロフィールを設定しておくと、記事の最後に「著者情報」として表示されます。

設定しておいたほうが完成度が高く仕上がりますし、SNSをフォローしてもらえるきっかけにもなります。

では、プロフィールを設定方法について簡単に説明します。

「カスタマイズ」>「プロフィール登録」に進んでください。

以下のようにプロフィールを設定できる場所が見つかります。ここの設定欄を埋めていきましょう。

より詳しい解説については「プロフィール登録」についての記事をご覧ください。

▼ あわせて読みたい
「プロフィール」の作り方|記事の好きな位置にプロフィールを呼び出そう!
「プロフィール」の作り方|記事の好きな位置にプロフィールを呼び出そう!

「SNSアカウント」を設定する

プロフィールを作るついでに、SNSアカウントも登録しておくことをおすすめします。

自分のSNSのURLを登録しておくとフォローボタンが出て、フォローしてもらえるきっかけを作ることができます。

「カスタマイズ」>「SNSアカウント登録」に進むと、以下のようにSNSを設定できる場所が見つかります。ここの設定欄を埋めていきましょう。

「https://」の部分も含めて、自分のSNSアカウントのURLをコピペしておきましょう

より詳しい解説については「SNSアカウント登録」についての記事をご覧ください。

メインビジュアル作り、お疲れ様した!

次も「Step4」でトップページの中身をどんどん作っていきましょうっ!

ひつじくん
ひつじくん

トップページを完成させよう【STEP4】

では、いよいよトップページを完成させていきましょう。

トップページの編集画面に移動する

トップページを開いたら、ワードプレスの黒いバーに「固定ページを編集」の項目が見つかると思います。

これをクリックして進むと、トップページの編集画面に移動することができます。

ここの画面で設定を進めていきましょう。

記事リストを設定する

DEMOのデザインをダウンロードした人は、

トップページに「記事リスト」のブロックが置かれていると思います。

記事リストの例

記事リストの画像について

(1)アイキャッチ画像を設定していれば、「プロフィールを作ってみました」のページのように画像が表示されます。

(2)アイキャッチ画像を設定していないと「Hello world !」のように、noimageの画像が表示されています。

記事リストを完成させよう

記事を書いてアイキャッチ画像を設定していけば、デザインは整っていきます。

記事リストはデフォルトでは「新着順」で表示されますが、

「特定のカテゴリーの記事だけを表示」することもできます。

記事リストをクリックすると、右のサイドバーに「記事タイプ」を選ぶところがありますね。

詳細が見えにくいので、もっと拡大しますね

記事タイプの「新着記事」を「カテゴリ一覧」に切り替えると、自分の好きなカテゴリーを選ぶことができるようになります。

例えば、「旅の思い出」というカテゴリーを選んだら、記事リストには「旅の思い出」のカテゴリー記事だけが表示されるようになります。

こうやって、自分が表示したい記事を並べていきましょう。

もっと詳しい使い方については「記事リストの作り方」の記事を参考にしてください。

記事リストの作り方
記事リストの作り方

リッチメニューを設定する

DEMOのデザインをダウンロードした人は、トップページに「リッチメニュー」のブロックが置かれている場合が多いと思います。

こういったブロックのことですね↓

リッチメニューの例

このリッチメニューにURLを貼り付けて、サイトの中身を整理整頓していきましょう。

まずは、設定したいメニューをクリックして選びます。

そうすると右サイドバーに設定欄が出てきますね。

まずはURLを設定します。

記事のタイトルを検索できるので、自分の作った記事の名前を探しましょう。

記事の検索

たとえば、初心者というキーワードで検索をかけると…

「初心者」で検索ヒットした記事

その中から記事を選ぶと、こうやってURLが配置されます。

画像はアイキャッチを設定していれば自動で入ります。

これでURL設定はできました!

あとはメニュータイトルの文字を変えておけば完成です。もっと詳しい使い方については「リッチメニューの使い方」の記事を参考にしてください。

リッチメニューの使い方
リッチメニューの使い方

あとは細かい微調整を・・・

「記事リスト」と「リッチメニュー」の2つができれば、デザインが整ったと思います。

あまり説明すると細かくなるので省略しますが、

ボタンの設定」を済ませたり「デザイン見出しの設定」を変更したりして、最終調整をしていってもらえればいいでしょう。

これで初期設定完了

細かな設定、お疲れ様でした!

あとは「記事の書き方」のページも参考にしながら、ブログを作り込んでいってモラルと幸いです。

これでいったんサイトデザインは完成です!!

プラグインで機能追加もできます

WordPressのプラグインを活用すると「目次」「お問い合わせ」「高速化」といった機能を足すことができます。

▼ 公式推奨プラグインを全部読みたい人はこちら

【これだけでOK】 WordPressテーマ 『JIN:R』の推奨プラグイン一覧
【これだけでOK】 WordPressテーマ 『JIN:R』の推奨プラグイン一覧

コミュニティに参加しよう

また、わからないことはコミュニティフォーラムでもサポートしますので、ぜひご利用ください!

すでに1800人以上のユーザーがいる大規模ブログコミュニティです。ぜひ仲間を作って、一緒にブログをがんばりましょう!

コミュニティ「JIN BLOGCAMP」に参加する|JIN:Rユーザーは永年無料
コミュニティ「JIN BLOGCAMP」に参加する|JIN:Rユーザーは永年無料
ひつじくん
ひつじくん

できることはトップにまとめています!

記事URLをコピーしました