これさえやれば大丈夫!WordPressテーマ「JIN:R」の設定を1ページですべてまとめ

ひつじ

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

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

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

「このページだけ見ておけば、とりあえず大丈夫」と言えるページとなっています。動画付きできるだけ丁寧に解説をしています。

動画はぜんぶ見てもらえると、ブログがしっかり作れるものになっています。ぜひ動画も再生させつつ、マニュアルを読み込んでもらえるといいでしょう。

ひつじくん
ひつじくん

ページの分量はちょっと多いですが、1つ1つは軽くこなしていけるはず。

動画も添えているので、このページをみながらじっくり設定してもらえるといいでしょう。

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

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

この初期設定が終わると、JIN:Rのテーマを使い始めることができます。

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

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

自動返信メールには「ダウンロードURL」と「ダウンロードパスワード」が記載されています。

メールに記載されていたダウンロードURLにアクセスして、JIN:Rをダウンロードしてください!

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

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

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

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

ダウンロードする

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

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

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

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

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

WordPressにログインする

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

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

WordPressのログイン画面

WordPressへのログインIDとパスワードは、多くの場合、レンタルサーバー契約時に自分で決めたものになっています。

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

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

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

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

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

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

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

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

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

お疲れ様でした!

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

これでJIN:Rを使っていく準備が完了しました

このまま使っていくこともできますが、せっかくなら自分好みにデザインを変更していきたいですよね。

初期設定おつかれさまでした!次はいよいよデザインに進んでいきましょう。

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

ひつじくん
ひつじくん

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

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

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

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

カスタマイズを開く

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

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

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

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

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

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

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

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

デザイン変更は何度でもできるの?
インポートは何回もできます。もしイメージと違う場合は、別のDEMOをインポートしてみてください。

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

そのため、もしトップページ用の記事をすでに固定ページで用意してセットしていた場合でも、その記事はトップページから外されてしまいます。

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

トップページ用に自動生成される記事のnoidexタグについて

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

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

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

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

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

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

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

お疲れ様でした!

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

もっとデザインにこだわりたい人は、カスタマイズの「サイトデザイン設定」「カラー設定」の部分をオリジナルに変えてもらえるといいでしょう。

本当にいろんなデザインができるので、少しずつJIN:Rに慣れて使いこなしてもらえると幸いです。

トップページも「型」はしっかりできていると思いますが、今は肝心の記事がまだない状態。STEP3では記事作りをしていきましょう。

ひつじくん
ひつじくん

記事を作っていく【STEP3】

デザイン(STEP2)は1クリックで切り替わりましたが、トップページは型が入っただけで、まだ完全に整っていませんね。

いま未設定の部分は「画像を設定してください」の表示がでていたり、noimageの画像が貼られています。こういった部分を埋めていく作業をしていきましょう。

では、JIN:Rを使った「記事の作り方」について解説を進めていきます。(WordPressが初めての人向けに書いていますので、知っている人はSTEP4に進んでください。

投稿ページを作成する

ブログ記事は「投稿」と呼ばれるページで作ります。

ブログ上にあるWordPressの黒いバーの「+新規」にマウスを重ねると「投稿ページ」が表示されるので、これをクリックしてページ作成しましょう。

そうすると、以下のような画面に切り替わると思うので、執筆を始めていきましょう。

タイトルはなんでもOKですが、はじめは「プロフィール」のような書きやすいものがいいかもしれませんね。

見出しを作ってみよう

まずは基本中の基本である「見出し」を作ることから覚えましょう。

「+」のボタンを押してから「見出し」をクリック

そうすると、記事に見出しを作ることができました。

もっと詳しい作り方は「見出しの作り方」をご覧ください。

小見出し(H3)を作成したり、時短テクニックを覚えたりすると、より便利に使いこなせます。

ボックスを作ってみる

では同じ要領で「ボックス」を作ってみましょう!

「+」のボタンを押して少し下にスクロール

JINRブロックの「ボックス」をクリック

そうすると、ボックスを呼び出すことができましたね。もっと詳しい使い方は「ボックスの作り方」をご覧ください。

ここまで覚えればもうOKです!

あとは全く同じように「+」のボタンから、「ボタン」「ブログカード」「記事リスト」…など、いろいろなアイテムを呼び出すことができます。

少しずつ使い慣れていってもらえるといいでしょう。

アイキャッチ画像を設定する

記事の執筆が終わったら、アイキャッチ画像を設定しておきましょう。

アイキャッチ(サムネイル)は、記事の一番上に表示される画像です。

他にも、トップページの「記事リスト」に画像が表示されたり、SNSで記事がシェアされた時に表示される画像となります。

とても重要な画像なので、できるだけセットしておくのをおすすめします。

では、アイキャッチ画像を設定しましょう。

執筆画面の右サイドバーに「アイキャッチ画像」を設定する項目があります。

「アイキャッチ画像を設定」の箇所を押すと、画像をアップできる画面に移ります。

※ ここでアップする画像はGoogleで拾ったものは著作権的にNGです。無料素材サイトからダウンロードして使いましょう。

いらすとや  Shigureni  ぱくたそ 

もしくは有料素材サイトを使うことも検討されるといいと思います。私がよく使っているのはシャッターストックのサービスですね。

ShutterStock

さらにこだわる人は「Canva」のような無料画像編集サービスでアイキャッチを自作するといいでしょう。

Canva

アイキャッチ画像を設定できると、こうやってプレビューが出ています。

これでアイキャッチ画像の設定は完了です!

カテゴリーを設定する

では最後に「カテゴリー」を設定しておきましょう。そうすると読者にとって探しやすいし、記事リストもより精密に表示することができるようになります。

執筆画面の右サイドバーに「カテゴリー」を設定する項目があります。

ここで「新規カテゴリーを追加」を押して、新しいカテゴリーを作りましょう。

あとは、追加するカテゴリーにチェックを入れておくだけです!

これでカテゴリーの設定も終わりました!

記事を公開する

では、ここまで来たら記事の「公開」ボタンを押しましょう!

そうすると作った記事がサイト上に公開されます。

これで、とりあえず1記事を完成させることができました!

お疲れ様です!このSTEP3で、記事作りの要領はなんとなく掴めましたかね?

メニューを組んでいくにも記事数はそれなりにいるので、ひとまず5記事くらい書いてもらえるといいかと思います。

最初は「プロフィール」のような書きやすいテーマから書くといいです。商品を紹介する人なら、「メリット」「デメリット」のような記事もいいですね。

では、作成した記事を使って、トップページの仕上げ(STEP4)に移っていきたいと思います。

ひつじくん
ひつじくん

メインビジュアルを設定【STEP4】

では、トップページを少しずつ完成させていきましょう!

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

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

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

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

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

カスタマイズを開く

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

メインビジュアル設定

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

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

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

設定を進める

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

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

記事スライドショーの場合

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

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

さて、これでメインビジュアルは出来上がりですね!

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

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

この設定をしていきましょう。

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

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

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

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

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

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

記事リストを設定する

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

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

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

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

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

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

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

右サイドバーを拡大するとこんな感じ。

「カテゴリ一覧」をクリックすると、任意のカテゴリーを選ぶことができます。

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

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

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

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

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

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

リッチメニューの例

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

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

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

まずはURLを設定します。

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

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

こうやって候補が出てきました。

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

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

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

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

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

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

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

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

トップページ作り、お疲れ様した!

サイトデザインはもうかなり整ってきましたね。もうこのままでも十分ですが、他にもやっておいたほうがあります。

いよいよ最終のブラッシュアップ段階へと進んでいきましょう。

ひつじくん
ひつじくん

さらにブラッシュアップ【STEP6】

ここからは、サイトをもっとブラッシュアップして完成度を上げていきましょう。

カスタマイズを開く

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

ロゴを設定する

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

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

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

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

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

「カスタマイズ」の「サイトデザイン設定」に進んで、しばらくスクロールすると、以下のような設定欄があります。

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

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

プロフィールを設定する

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

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

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

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

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

SNSアカウントを登録しておく

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

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

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

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

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

吹き出しを設定する

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

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

ひつじくん
ひつじくん

「カスタマイズ」>「吹き出し」に進むと、以下のように吹き出しキャラクターを設定できる場所が見つかります。ここの設定欄を埋めていきましょう。

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

グローバルメニューを設定する

お好みで、グローバルメニューを設定しておきましょう。

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

「カスタマイズ」>「メニュー」に進むと、「メニューを新規作成」のボタンがあります。ここからメニュー作成を始めていきましょう。

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

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

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

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

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

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

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

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

スマホメニューを設定する

スマホで使いやすいメニューを組んでおくのもおすすめです。

「カスタマイズ」>「スマホ専用機能」に進むと、スマホメニューを組める箇所があります。

設定する際には、画面左下のスマホアイコンをクリックしましょう。

そうするとスマホのプレビュー画面に切り替わるのでわかりやすくなります。

あとは「メニュー名」「アイコン」「URL」の項目を埋めていくだけで完成します。

これも簡単にできる部分なので、ぜひ必要な人は登録しておきましょう。

詳しい方法は「スマホメニューの作り方」の記事を参考にしてください。

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

JIN:Rは「カスタマイズ」からほとんどの設定ができます。デザインを変更したいときには色々と触ってみてください。

では最後のSTEP7では、プラグインを使って機能を足す方法についても補足しておきますね。

ひつじくん
ひつじくん

プラグインを活用する【STEP7】

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

ここからは必要な人だけ、お好みで設定してもらえるといいでしょう。

記事の目次を作る

記事の目次は、JIN:Rチームで開発している「Rich Table of Contents」というプラグインを使って作成することができます。

このように、サイドバーに設置することで「追尾する目次」も作成可能です。

目次を作りたい人は「Rich Table of Contents|目次の作り方」を参考にして、設定を進めていってください。

お問い合わせを作る

サイトへのお問い合わせは「Contact Form 7」を使って作りましょう。

JIN:Rなら以下のようなフォームをすぐに作ることができます↓

「お問い合わせ」のページを作ってフォームを設置しておくだけで、お仕事のプラスになるお話をもらえることは多いです。ぜひ設置しておきましょう!

詳しくは「Contact Form 7|お問い合わせの作り方」についての記事をご覧ください。

スクロールできる表を作る

WordPress純正の表(テーブル)は、とてもシンプルな機能となっています。

より高度な表を作りたい場合は「Flexible Table Block」という表作成プラグインを利用することをおすすめしています。このプラグインを利用すれば表の横スクロールにも対応することが可能です。

タコイカ
泳ぐ速度15km/時40km/時
足の数8本10本

レビューサイトなどで比較をよく使うなら、こういった高度な表を作成できるプラグインを活用されるといいでしょう。

あわせて読みたい
【横スクロール対応】 表(テーブル)作成プラグイン「Flexible Table Block」のおすすめ設定
【横スクロール対応】 表(テーブル)作成プラグイン「Flexible Table Block」のおすすめ設定

これで全ての設定が終わりました!

ここまで読んでいただき、丁寧に設定して頂き、ありがとうございます。

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

コミュニティに参加する
コミュニティに参加する

他にもJIN:Rでできることはたくさんありますので、ぜひトップページをチェックして機能を探してみてください。

ひつじくん
ひつじくん

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

記事URLをコピーしました