これをやれば大丈夫！WordPressテーマ「JIN:R」の初期設定のやり方を1ページで総まとめ
こんにちは！JIN:Rをご購入いただきありがとうございます。
このページでは「WordPressが初めての人」でもわかるように、JIN:Rでのサイト作りを１から丁寧に解説をしていきます。
JINRを購入後にやることを１ページにまとめておきました！
ワードプレスが完全に初めての人へ
「このページだけ見ておけば、とりあえず大丈夫」です。
ぜひ動画も再生させつつ、マニュアルを読んでいってください！
JINから移行する人へ
「JIN→ JIN:R移行プラグイン」を用意しています。こちらの記事も参考にしながら、テーマの引越しを進めてもらえると幸いです
他テーマ（cocoonなど）から移行する人へ
「他テーマからJIN:Rに乗り換える方法」の記事を用意しています。こちらの記事も参考にしながら、テーマの引越しを進めてもらえると幸いです
もし設定していて困ったことがあったら「JIN:R Forum」に頼ってくれてもいいですし、コミュニティ内で聞くこともできます！
▽ JIN:Rの完全無料コミュニティ
コミュニティ『BLOGCAMP』で、開発者「ひつじ」に直接相談することができます。頂いた質問には、できるだけ速く、すべて答えています。
では、初期設定を始めていきましょう！
初期設定をしよう！【STEP１】
ではテーマを購入後、初期設定の流れについて解説しますね。
この初期設定（テーマのインストール）が終わると、
JIN:Rのテーマを使い始めることができます。
自動返信メールが届きます
テーマ購入時に入力いただいたメールアドレスに、JIN:R運営チームから自動返信メールが届きます。（購入から数分で到着）
自動返信メールには
- 「ダウンロードURL」
- 「ダウンロードパスワード」
が記載されています。
まずは「ダウンロードURL」にアクセスしましょう！
ダウンロードする
ダウンロードページを下に進んでいくと、ダウンロードする場所が現れます。
「ダウンロードする」をクリックするとパスワードが求められます。
ここで自動返信メールから配布された「ダウンロードパスワード」を入力します。
ダウンロードが成功すると、以下の画像のように「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人で悩まなくていい場を用意していますので、ぜひご活用ください🤲
次は、STEP２「デザインインポート」に進んでいきましょう！
JIN:Rならデザイン変更も一瞬でできますので、自分なりにサイトデザインを楽しんでみてください。
デザインをインポートする【STEP２】
このSTEP２では、JIN:Rを使ったサイトデザインを進めていきます。
といっても「デザインプリセット」の機能を使えば、一瞬でDEMOと同様のデザインのサイトを立ち上げることが可能です。
デザインプリセットのイメージ動画↓
こんな風にDEMOの型をそのままインポートすることができます。
その方法についてみていきましょう！
カスタマイズを開く
WordPress管理画面上にある「カスタマイズ」をクリックして、デザインの編集画面に移りましょう。
デザインプリセットに進む
カスタマイズの画面を開いたら「デザインプリセット」の項目に進みます。
好きなデザインをインポート
あとは、好きなDEMOのデザインを選んで「Download」のボタンを押しましょう！
※ Safariでは「ダウンロード」のボタンがうまく機能しない場合があります。お手数ですが、この機能に関しては「Chrome」のブラウザで使ってもらえるとうまく動作するはずです。
「Donwload」を押すと、DEMOと同じデザイン（配色・レイアウト・トップページの形）に一瞬で切り替えることができます。
デザインプリセットに関するよくある質問
インポートは何回もできます！
もしイメージと違う場合は、別のDEMOをインポートしてみてください。
インポート前のトップページの記事は消えた訳ではありません。
ちゃんと戻すことができます！
トップページが変わる仕組み
デザインインポートを行うと「トップページ用の記事が新規作成されて、その記事にトップページが置き換わる」という仕組みになっています。
例えば、DEMO2を適用した状態でDEMO4をインポートすると
DEMO4のトップページ記事が強制的にトップにセットされます。DEMO2の記事は消えた訳ではなくて、固定ページ一覧に残っています。
対処法
もしインポート前のトップページに戻したい場合
管理画面の「設定」>「表示設定」の「ホームページ設定」で、再度トップ用に作成していた記事を固定してもらう必要があります。
トップページ用に自動生成される記事には、あらかじめ「noidex」のタグが入っています。
これは重複コンテンツを避けるための仕様です。
トップ用の固定ページにnoindexタグが入っていても、トップページに呼び出して表示しているのであれば、トップページは正常にインデックスが働きます。
あとは記事や画像を整えるだけ！
お疲れ様です。これでデザインのベースは整いましたね！
でも、まだトップページが「noimage」の画像ばかりになっていると思います。
あとは記事や画像を作り込んで、中身の完成度を上げていきましょう！
- DEMO01をインポートした人の設定
- DEMO02をインポートした人の設定
- DEMO03をインポートした人の設定
- DEMO04をインポートした人の設定
- DEMO05をインポートした人の設定（※作成中）
- DEMO06をインポートした人の設定
- DEMO07をインポートした人の設定
- DEMO08をインポートした人の設定
- DEMO09をインポートした人の設定
- DEMO10をインポートした人の設定
- DEMO11をインポートした人の設定
- DEMO12をインポートした人の設定
- DEMO13をインポートした人の設定
- DEMO14をインポートした人の設定
- DEMO15をインポートした人の設定
お疲れ様でした！
このSTEP２で、大まかなサイトデザインは完了しましたね！
記事の書き方を知る
ワードプレス完全初心者の人はブログ上に記事がない状態だと思います。
「記事の書き方」についても覚えておいてもらえるといいでしょう
サイトデザインを設定する【STEP３】
では、ブログデザインを少しずつ完成させていきましょう！
デザイン変更のやり方
JIN:Rでは「カスタマイズ」でサイトデザインを調整していきます↓
そのやり方について、詳しく解説していきましょう！
メインビジュアルを設定する
サイトの第一印象を作る「メインビジュアル」の設定から始めていきましょうか。
メインビジュアルとは、例えばこういったパーツのことです↓
他にも「画像スライドショー」「ヘッダー画像」「ヘッダー動画」など、さまざまなタイプのメインビジュアルがあります。
この設定について解説をしていきましょう。
WordPress管理画面上にある「カスタマイズ」をクリックして、デザインの編集画面に移りましょう。
「カスタマイズ」を開いたらこのような画面になるので「メインビジュアル設定」に進んでください。
メインビジュアル設定を開くと、「記事スライドショー」「画像スライドショー」「ヘッダー画像」「ヘッダー動画」の４つの選択肢が表示されていますね。
DEMOのデザインを使っている人は、すでに何かの設定が入っていると思います。
「色」を変更する
ブログで使われている色を変更してみましょう
「カスタマイズ」>「カラー設定」に進んでください。
すると、色を一括変更できる場所があります。
JIN:Rでは、各パーツのカラーを「カスタマイズ」で一括変更できるようになっています。
「基本設定」「ヘッダーエリア設定」「執筆ツールの色」「お気に入りカラー」など、触りながら調整して貰えるといいでしょう。
「ロゴ」を設定する
サイトのロゴ画像を持っている人は、ロゴを設定しておきましょう。
ロゴ画像というのは、こういったブランドを印象付ける画像のことです↓
さて、ロゴ画像を設定方法について簡単に説明します。
「カスタマイズ」>「サイトデザイン設定」に進んでください。
サイトデザイン設定の中に、以下のような設定欄があります。
ここで「画像を選択」を押して、ロゴ画像を貼り付けましょう。
大きさはPCとスマホの両方をみながら調整をしてください。
もっと詳しい説明は「ロゴ画像の設定」の記事を参考にしてください。
「メニュー」を設定する
メニューを設定しておきましょう。
「グローバルメニュー」は、パソコン画面の右側に表示されるメニューのことです。
「ハンバーガーメニュー」は、スマホ画面の右側に表示されるメニューのことです。
この「グローバルメニュー」と「ハンバーガーメニュー」の２つを設定しておきましょう！
「カスタマイズ」>「メニュー」に進んでください。
すると「メニューを新規作成」のボタンがあります。ここからメニュー作成を始めていきましょう。
メニュー作成画面に続きます。
メニュー名は「グローバルナビ」と記載して、メニューの位置は「グローバルナビゲーションにチェック」を入れておきましょう。
「次」のボタンを押します。
すると、以下のようにメニューを組むことができる画面に移ります。「項目を追加」のボタンを押して、メニューに入れたい記事を選んでいきましょう。
もっと詳しい方法については「グローバルメニューの作り方」についての記事を読んでください。
また、全く同じ方法で「ハンバーガーメニュー」や「フッターメニュー」も作成することができます。
「スマホメニュー」を組んでおこう
スマホメニューを組んでおくと、よりリッチな表示に仕上げることができます↓
「カスタマイズ」>「スマホ専用機能」に進んでください。
設定を始める前に、スマホビューに変更しておきましょう。
あとは、メニュー１〜４を埋めていけば完成です！
- メニュー名
- アイコン
- リンク先URL
この３つを設定していけばスマホメニューが完成します！
「吹き出し」を設定する
記事で使う「吹き出し」のキャラクターを登録しておきましょう。
吹き出しというのは、まさにこのキャラクターの会話文のこと
「カスタマイズ」>「吹き出し」に進んでください。
以下のように吹き出しキャラクターを設定できる場所が見つかります。ここの設定欄を埋めていきましょう。
より詳しい解説については「吹き出しデザインの設定」についての記事をご覧ください。
「プロフィール」を設定する
プロフィールを設定しておくと、記事の最後に「著者情報」として表示されます。
設定しておいたほうが完成度が高く仕上がりますし、SNSをフォローしてもらえるきっかけにもなります。
では、プロフィールを設定方法について簡単に説明します。
「カスタマイズ」>「プロフィール登録」に進んでください。
以下のようにプロフィールを設定できる場所が見つかります。ここの設定欄を埋めていきましょう。
より詳しい解説については「プロフィール登録」についての記事をご覧ください。
「SNSアカウント」を設定する
プロフィールを作るついでに、SNSアカウントも登録しておくことをおすすめします。
自分のSNSのURLを登録しておくとフォローボタンが出て、フォローしてもらえるきっかけを作ることができます。
「カスタマイズ」>「SNSアカウント登録」に進むと、以下のようにSNSを設定できる場所が見つかります。ここの設定欄を埋めていきましょう。
「https://」の部分も含めて、自分のSNSアカウントのURLをコピペしておきましょう
より詳しい解説については「SNSアカウント登録」についての記事をご覧ください。
メインビジュアル作り、お疲れ様した！
次も「Step4」でトップページの中身をどんどん作っていきましょうっ！
トップページを完成させよう【STEP４】
では、いよいよトップページを完成させていきましょう。
トップページの編集画面に移動する
トップページを開いたら、ワードプレスの黒いバーに「固定ページを編集」の項目が見つかると思います。
これをクリックして進むと、トップページの編集画面に移動することができます。
ここの画面で設定を進めていきましょう。
記事リストを設定する
DEMOのデザインをダウンロードした人は、
トップページに「記事リスト」のブロックが置かれていると思います。
記事リストの例
記事リストの画像について
（１）アイキャッチ画像を設定していれば、「プロフィールを作ってみました」のページのように画像が表示されます。
（２）アイキャッチ画像を設定していないと「Hello world !」のように、noimageの画像が表示されています。
記事リストを完成させよう
記事を書いてアイキャッチ画像を設定していけば、デザインは整っていきます。
記事リストはデフォルトでは「新着順」で表示されますが、
「特定のカテゴリーの記事だけを表示」することもできます。
記事リストをクリックすると、右のサイドバーに「記事タイプ」を選ぶところがありますね。
詳細が見えにくいので、もっと拡大しますね
記事タイプの「新着記事」を「カテゴリ一覧」に切り替えると、自分の好きなカテゴリーを選ぶことができるようになります。
例えば、「旅の思い出」というカテゴリーを選んだら、記事リストには「旅の思い出」のカテゴリー記事だけが表示されるようになります。
こうやって、自分が表示したい記事を並べていきましょう。
もっと詳しい使い方については「記事リストの作り方」の記事を参考にしてください。
リッチメニューを設定する
DEMOのデザインをダウンロードした人は、トップページに「リッチメニュー」のブロックが置かれている場合が多いと思います。
こういったブロックのことですね↓
このリッチメニューにURLを貼り付けて、サイトの中身を整理整頓していきましょう。
まずは、設定したいメニューをクリックして選びます。
そうすると右サイドバーに設定欄が出てきますね。
まずはURLを設定します。
記事のタイトルを検索できるので、自分の作った記事の名前を探しましょう。
記事の検索
たとえば、初心者というキーワードで検索をかけると…
その中から記事を選ぶと、こうやってURLが配置されます。
画像はアイキャッチを設定していれば自動で入ります。
これでURL設定はできました！
あとはメニュータイトルの文字を変えておけば完成です。もっと詳しい使い方については「リッチメニューの使い方」の記事を参考にしてください。
あとは細かい微調整を・・・
「記事リスト」と「リッチメニュー」の２つができれば、デザインが整ったと思います。
あまり説明すると細かくなるので省略しますが、
「ボタンの設定」を済ませたり「デザイン見出しの設定」を変更したりして、最終調整をしていってもらえればいいでしょう。
これで初期設定完了
細かな設定、お疲れ様でした！
あとは「記事の書き方」のページも参考にしながら、ブログを作り込んでいってモラルと幸いです。
これでいったんサイトデザインは完成です！！
プラグインで機能追加もできます
WordPressのプラグインを活用すると「目次」「お問い合わせ」「高速化」といった機能を足すことができます。
▼ 公式推奨プラグインを全部読みたい人はこちら
コミュニティに参加しよう
また、わからないことはコミュニティやフォーラムでもサポートしますので、ぜひご利用ください！
すでに1800人以上のユーザーがいる大規模ブログコミュニティです。ぜひ仲間を作って、一緒にブログをがんばりましょう！
できることはトップにまとめています！