Wordpress

JINを使って、ブログを30分で「それっぽい」デザインにする手順を紹介

こんにちは。ブログで生計を立てているヒトデです

この記事では

  • とりあえずJINをインストールしたけど、デザインをどうして良いかわからない…
  • こだわりたいわけじゃないけど、最低限「それっぽいデザイン」にしたい…

そんな方のために、JINを使ってブログを30分で「それっぽい」デザインにカスタマイズする方法を、画像付きでわかりやすく解説していきます。

ヒトデ君
ヒトデ君
JINは着せ替え機能がとっても優秀!!

「動画で解説を見たい」という方は、Youtubeでも解説しているのでこちらをどうぞ!

JINは親テーマではなく、子テーマを有効化して、カスタマイズしましょう。

ヒトデ君
ヒトデ君
親テーマをいじっちゃうとアップデートの時に、

カスタマイズが全て消えてしまう可能性が高いよっ

その他のおすすめワードプレステーマはこちらからどうぞ

【初心者OK!】Wordpress(ワードプレス)ブログ用おすすめテーマの紹介!ブログ収入で生きているヒトデです 今回はワードプレステーマの紹介です テーマってやたらに種類があって迷いますよね 特に...
当サイトも使ってるWPテーマ『JIN』

JINの設定は着せ替え機能を使おう

JINは着せ替え機能がとっても優秀。

公式サイトにあるデザインファイルをダウンロードするだけで、「それっぽい」見た目に変えられます。

具体的な手順としては、

  1. 公式サイトからデザインファイルをインストール
  2. インポート用のプラグインをWordPressにインストール
  3. デザインファイルをWordPressにインポート

これだけでサクッとブログが「それっぽい」デザインになります。

ヒトデ君
ヒトデ君
これから画像付きで詳しく解説していくよ〜

公式サイトからデザインファイルをインストール

まずはJINの公式ページにアクセスします。

→JIN公式ページ

右上の「デモ一覧」をクリックします。

すると、上記のようにたくさんのデモデザインを見ることができます。

この中から好きなデザインの「スタイルをダウンロード」をクリックします。

そして「DOWNLOAD」をクリックします。

これで、デザインファイルのダウンロードは完了です。

インポート用のプラグインをWordPressにインストール

次にこのデザインファイルをインストールするためのプラグインを、

WordPressにインストールします。

WordPressのダッシュボードから、

「プラグイン」→「新規追加」

とクリックします。

検索窓に「Customizer Export」と入力すると、

上記のように「Customizer Export/Import」が見つかります。

「今すぐインストール」をクリックして、インストールします。

その後、有効化をクリックします。

デザインファイルをWordPressにインポート

WordPress左メニューから、

「外観」→「カスタマイズ」

とクリックします。

「Customizer Export/Import」を有効化することで、

カスタマイズメニューの一番下に、「エクスポート/インポート」が表示されます。

こちらをクリックします。

インポート欄の「ファルを選択」をクリックし、

先ほどJIN公式サイトからダウンロードしたファイルを開きます。

その後、「画像ファイルをダウンロードしてインポートしますか?」にチェックを入れ、

「インポート」をクリックします。

ヒトデ君
ヒトデ君
チェックは任意だよ〜

その後、ブログにアクセスすると、先ほどのデザインが適用されていることが確認できます。

ヒトデ君
ヒトデ君
記事を入れてみるとこんな感じ!

これだけでもいい感じだねっ

また、カスタマイズメニューの「サイトデザイン設定」をクリックして、

ヘッダーデザインを選択することで、ヘッダー部分のデザインを好みの形にカスタマイズできます。

メニューを設定する

JINにはデフォルトでメニューが追加されていますが、必要ないものもあります。

こちらを使いやすい形にカスタマイズする方法を解説していきます。

WordPress左メニューから、

「外観」→「メニュー」

とクリックします。

メニュー構造の欄を参照して、要らないメニューをクリックし、削除をクリックします。

そして「メニュー項目を追加」の欄からメニューに入れるものにチェックを入れ、

「メニューの追加」をクリックします。

ちなみにメニューの項目は、

  • 固定ページ
  • 投稿
  • カスタムリンク
  • カテゴリー

などから自由に追加できます。

最後にグローバルナビゲーションにチェックを入れ、「メニューを保存」をクリックします。

これでメニューのカスタマイズは完了です。

サイトにアクセスすると、上記のような形で、カスタマイズされたメニューが表示されているはずです。

メニューは上記のように、長押しで項目の順番を移動させることも可能です。
(上が一番左、下が一番右に表示)

また、このように少し右にずらして配置することで、

階層表示にさせることも可能です。

ヒトデ君
ヒトデ君
自分好みのメニューデザインに、カスタマイズしよう

ピックアップコンテンツを作ろう

デモサイトにもあったような、上記ピックアップコンテンツの作成方法を解説していきます

ここは正直あってもなくても良いのですが「それっぽさ」という意味では、あると非常に「それっぽい」見た目になります

WordPressの左メニューから、

「外観」→「メニュー」

とクリックします。

「新しいメニューを作成しましょう」をクリックします。

メニュー名を入力し、「メニューの作成」をクリックします。

ピックアップに入れる項目を選択し、「メニューに追加」をクリックします。

メニュー設定の画面で、「トップページのピックアップコンテンツ」にチェックを入れ、

「メニューを保存」をクリックします。

すると、上記のようにピックアップコンテンツが表示されます。

ピックアップコンテンツのデザインは、

「外観」→「カスタマイズ」

から変更できます。

「トップページの設定」をクリックし、

左メニューから好きなデザインを選択することで、自由にカスタマイズ可能です。

ヒトデ君
ヒトデ君
おすすめは記事タイプだよっ

最後に「公開」をクリックして保存します。

ちなみに「hitodeblog」のピックアップコンテンツのデザインは「メニュータイプ(文字なし)」です。

Canvaという画像作成サービスを使ってピックアップ専用画像を作成し、反映しました。

→Canva公式ページ

ヒトデ君
ヒトデ君
文字入り画像は見やすくておすすめっ

時間があるときに挑戦してみようっ

またトップページ設定では、上記のようにカテゴリの表示形式を、IDを指定することで設定可能です。

(複数指定するときは1,2,3とカンマで区切って指定します)

カテゴリIDはの確認方法は、

「投稿」→「カテゴリ」とクリックすることで、

このように各カテゴリのIDを確認することができます。

トップページ設定ではその他にも、

  • ピックアップコンテンツの下層ページ表示選択
  • トップページのレイアウト選択
  • トップページの記事一覧デザイン選択

など、細かなデザイン設定が可能です。

表示を確認しながら、好みのデザインにカスタマイズしていきましょう。

サイトのタイトルを変える

次に、サイトタイトルの変更方法を解説していきます。

WordPress左メニューから、

「外観」→「カスタマイズ」

とクリックします。

「サイト基本設定」をクリックします。

サイトタイトルを好みのタイトルに設定し、「公開」ボタンを押して保存すると、

上記のように、サイトタイトルが変更されます。

メタ情報を削除する

続いてはこちらの「メタ情報」を削除する方法を解説します。ちなみに、ワードプレスのバージョンによっては、初めから表示されていないこともあるみたいです

ヒトデ君
ヒトデ君
メタ情報は管理者には便利だけど、読者には必要ないもの!

ログイン画面に遷移できるので、表示されてるとちょっと危険!!

WordPress左メニューから、

「外観」→「ウィジェット」

とクリックします。

ウィジェットの「サイドバー追尾【PC】」という欄に「メタ情報」があるのでそちらをクリックし、

削除をクリックします。

これでメタ情報の削除は完了です。

プロフィールの設定をする

同じくウィジェットの画面の右側に「利用できるウィジェット」が一覧で表示されています。

この中の「プロフィール」をクリックし、「サイドバー【PC】」を選択します。

そして「ウィジェットの追加」をクリックします。

その後、

  1. プロフィール名
  2. 肩書き
  3. 説明

と入力していきます。

そして、「画像を選択」からプロフィール画像をアップロードし、「この画像で確定」にチェックを入れます。

ちなみに、画像のヒトデ画像は「O-DAN」というフリー素材横断検索サイトから入手しました。

→O-DAN公式ページ

ヒトデ君
ヒトデ君
無料の素材をサクッと手に入れられて、とっても便利だよ〜

その後、SNSボタンで「表示」を選択し、「保存」をクリックします。

その後、サイトを表示すると、左サイドバーにプロフィールが表示されます。

ちなみに表示されているSNSボタンは、このままでは機能しません。

ヒトデ君
ヒトデ君
次の章でその設定方法を説明していくよっ

SNSボタンを設定する

WordPress左メニューから、

「外観」→「カスタマイズ」

とクリックします。

「SNS設定(OGP)」をクリックします。

リンクを設定したい各SNSのURLを入力します。

すると、デモとして右画面にSNSアイコンが表示されます。

表示を確認して、「公開」をクリックして保存します。

例えばTwitterのアイコンが設定できていれば、クリックすると、

こんな感じで、Twitterのプロフィールページに遷移できるはずです。

さらにオシャレにするために

個人的にこだわって欲しいのがヘッダーアイコンです。

ここがオシャレなだけで、サイト全体がオシャレな雰囲気になります。

当サイト「hitodeblog」も、ヘッダーアイコンは有料で作成してもらいました。

  • ロゴメーカー(無料)で自分で作成
  • ココナラ(有料)でデザイン依頼

などをして、ぜひヘッダーアイコンにはこだわってみてください。

ヒトデ君
ヒトデ君
有料のココナラでも、3,000円~5,000円くらいで頼めるよ〜

デザインが苦手な人にはおすすめっ

→ロゴメーカー公式ページ

→ココナラ公式ページ

ココナラの詳しい利用方法はこちらの記事を参考にしてください

ブログで使うイラストやキャラクターの依頼方法!ココナラが簡単でおすすめ!ブログで生きてるヒトデです 僕が超超超超良くされる質問がこれです 質問者さんの言う「ブログのイラスト」はこういうので...

まとめ:オシャレにカスタマイズして、ブログ、サイト運営を楽しもう!

このように、有料テーマ「JIN」を利用すればオシャレなサイトを簡単に作ることができます。

今回の内容は30分もあればサクッとできるので、

ぜひカスタマイズして、おしゃれなサイト・ブログを作ってみましょう!!

 

ワードプレスブログの始め方記事に戻る方はこちらからどうぞ▼

WordPress(ワードプレス)ブログの始め方を超わかりやすく解説!【初心者でもOK!】【真似するだけで誰でも出来る!】WordPress(ワードプレス)ブログの始め方を。50枚以上の画像と図解、そして動画を使ってとにかくわかりやすく伝えます。2020年6月27日。情報、画像を最新の物に更新しました。難しいイメージのWordPressですが、きちんと手順通りにやっていけば簡単にブログを始められます。...
【無料のブログ講座】LINEですきま時間にブログを学ぼう!

ヒトデの公式LINEに登録すると、ブログ運営で上手くいく方法や、ブログで稼ぐために必要な情報が手に入ります!

  • 無料で当サイトや動画の内容をまとめたブログ講座が受けられる
  • ヒトデからブログ運営に役立つ情報や、有益な情報が送られてくる
  • ヒトデに直接ブログのことを質問が出来る

返信は膨大な量なので時間がかかりますが、必ず全て見て返信しています

完全無料で不要になったらすぐにブロック等出来るので、是非気軽にご登録ください!

 

\ 無料のブログ講座有り! /ヒトデ公式LINEに登録する

 

POSTED COMMENT

  1. トラ子 より:

    初めまして。
    この度ブログに挑戦しようとヒトデさんのYouTubeやサイトで勉強しているトラ子と申します。
    JINの購入を検討していて試しにデモをインポートしようとしたのですが『設定のインポート中にエラーが発生しました。この設定は現在のテーマ用ではありません。』と表示されます。
    色々調べてみたのですが行き詰まってしまいました。
    どんな原因が考えられますでしょうか?
    ちなみにJINを検討する前はコクーンを有効化したりして試していました。
    お忙しい所すみませんがご教示よろしくお願いいたします。

    • hitode99 より:

      トラ子さん
      デモのインストールは、JINを使っている人が、デモサイトと同じ見た目に出来る
      という機能なので、JINを購入しないと使えませんね

      デモサイトの閲覧は出来るため、そちらで気に入れば購入して反映させましょう~

COMMENT

メールアドレスが公開されることはありません。