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

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

この記事では

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

ヒトデ君

INは着せ替え機能がとっても優秀!!

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

注意点

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

ヒトデ君

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

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

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

あわせて読みたい

【2023年版】WordPressおすすめブログテーマ７選。無料・有料合わせてプロが初心者向けに紹介

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

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

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

具体的な手順としては、

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

ヒトデ君

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

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

まずは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】」を選択します。

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

その後、

と入力していきます。

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

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

→O-DAN公式ページ

ヒトデ君

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

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

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

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

ヒトデ君

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

SNSボタンを設定する

WordPress左メニューから、

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

とクリックします。

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

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

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

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

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

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

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

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

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

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

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

ヒトデ君

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

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

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

→ココナラ公式ページ

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

あわせて読みたい

ブログで使うイラストやキャラクターの依頼方法！ココナラが簡単でおすすめ！

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

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

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

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

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

あわせて読みたい

WordPressブログの始め方を超わかりやすく解説！【初心者OK！】