【超初心者向け】カスタマイズの全項目徹底解説！【JIN使用者向け】

こんにちは！

もやし(@moyashitoilet)です！

今回はトイレではなくブログ記事です！

私がブログを始めて1か月ちょっとが経過しました。

そこで、成長し続けたいもやしはこう考えたのです。

ちょっとサイトの模様替えをしたいな！

思えばサイトを立ち上げたのが2月。

学生時代にパソコンの勉強なんて全くしてこなかった私はネットでサイトの作り方などいろいろ調べてその通りに作成しました。

それはもうなされるがままに流されてサイトを作りました。

テーマも「JIN」に決めて素敵なサイトができました！

ですが色々と記事を書いて色々な先輩方のサイトを見ていくうちにもっと素敵なデザインになるんじゃないか？

と思うようになりました！

そこでデザインを設定しようとしたのですが問題が・・・

 

なんなんこれ・・・

よく分からない単語が多い・・・

ブログ初心者はひとつひとつ調べていくしかないのですよ

ということでこの項目すべて説明していこうと思います！

調べつつですが笑

 

ほんと初心者なのでその都度更新していくかもですが備忘録的な意味も含めて記事をかいていきます！

 

 

あと

 

 

めっっっっっっちゃ長いですこの記事笑

 

カスタマイズの仕方

そうはいってもまず先ほどの画像のところに行けないといけません。

ワードプレスのホーム画面？で「外観」→「カスタマイズ」を選択することで先ほどの画像になります。

 

サイト基本設定

自分のブログが検索者にどのようにみられるかの設定です。

SEO用タイトル

SEO用サブタイトル

ディスクリプション

3つまとめて紹介です。

ネットで調べた時に表示される情報ですね。

こうやって載せるのちょっと恥ずかしいですね笑

サイトのタイトル

HPを開いたときのトップのタイトルです。

画像では「おためし」としてますが何も入力しなければ「SEO用タイトル」と同じになるみたいです。

私はいつもは何も入力していません。

フォント選択

サイト内のフォントを設定できるみたいですね。

JINの公式サイトに各フォントの説明が記載されています。

私はそこまでフォントが気にならないので(気にした方がいいのかもですが)

デフォルトを選んでいますがお好みですかね。

デフォルト以外だと読み込むのに少し時間を要するみたいなのでこだわりがなければデフォルト一択ですかね。

アニメーション機能

自分のサイトでホーム画面に移動したときなどに、投稿記事が下からスッと出てくる機能をつけるかどうかです。

何も意識せずに有効にしていたのですが表示速度を気にするなら無効にした方がいいようですね。私はすぐさま無効にしてみました。

サイトアイコン

ネットで何個かサイトを開いたときに上側に出てくるタブのアイコンです。

スマホでサイトとかをホーム画面に追加したときにも表示されるのである程度こだわった方がいいと思います。

 

記事の投稿日時の表示

投稿した記事の投稿日時と更新日時を表示するかどうかです。

これもお好みですね。

 

サイトデザイン設定

サイトのデザインです。個人の趣味嗜好があると思うので基本的にはすべて皆さんのお好みでって感じになりますね。

背景画像

サイトの背景画像を設定できます。

この画像は失敗した例ですね笑

ヘッダーデザインの選択

ヘッダー(赤枠部分)のデザインを変更できます。

こだわりがあればぜひ

 

サイドバーデザインの選択

サイドバー(赤枠部分)のデザインを変更ができます。

こだわりがあればぜひ

記事エリアのデザインの選択

すっっっっっっごく見づらいのですが記事を開いたときに線で囲われてるのがスタイル１で囲われてないのがスタイル２です。

これもお好みで

 

フッターデザインの選択

フッター(サイトの最下部)に何個の情報を載せるかです。

私は普段フッターはコピーライトしか載せない設定だったので上の画像は一時的に適当に作ったものです。

ちなみにコピーライト以外にも載せる方法は後ででてくるフッター設定で紹介します。

フッターに何を載せるかについてはワードプレスのホーム画面で「外観」→「ウィジェット」で右側にある「フッター【左】」などに左側にある「プロフィール」などをドラッグで持っていくことで設定することができます。

 

グローバルメニューのデザイン設定

グローバルメニュー(赤枠部分)のデザインを変更できます。

こちらもお好みでどうぞ

 

グローバルメニューの文字サイズ

グローバルメニュー(赤枠部分)の文字サイズを設定できます。

画像は文字サイズを100pxにした時の状態です。

センスのかけらもないですね

カラー設定

サイト内の色々な部分のカラーを設定できます。

こちらもまとめていきましょう。

テーマカラー

アクセントカラー

背景色

ヘッダーの背景色

タイトルの文字色

メニューの文字色

メニューの背景色

SNSボタンの色

ちょっと詰め込みすぎてていろいろありますがご容赦を・・・

背景色はそのままです。黒に設定すると背景真っ黒になって一気に世紀末感がでてきます笑

 

フッターの文字色

フッターの背景色

フッターの文字色と背景色を変更できます。

そのままですね・・・。これ以上説明しようがないです笑

 

リンクの色

リンクにマウスを合わせた時の色

SNSのリンクやほかのサイトのリンクを作成したときのリンクの色を設定できます。

また、PCのみだと思いますがリンクにマウスを合わせた時の文字色も設定できます。

ただ、こちらは記事内には反映されず、画像のようにサイドバーなどにしか反映されないよいうです。

サイト内の文字色

サイト内の文字色を設定できます。

試しに赤くしてみたらだいぶロックな感じになりました。

スマホ専用メニューの文字色

スマホ専用メニューの背景色

スマホ専用のスライドメニューの文字色と背景色を設定できます。

この部分におすすめのカテゴリーとか設定したらスマホでもみやすくなる気がしますね。

インフォメーションバーの背景色

インフォメーションバーの背景色を設定できます。

 

ヘッダー設定

ヘッダー全体の表示選択

↓

なんとびっくり

非表示にするとヘッダーが消えてしまいました。

理由はわかりませんがヘッダーが不要な人のための設定ですね。

 

サイトロゴ

ヘッダーに画像を設定することができます。

オシャレなヘッダー画像のブロガーさんてたくさんいますよね。

私も早くオシャレなトイレの画像を設定したいのですがなかなかいい画像がなくて・・・

上の画像はダメな例です笑

ロゴとフレーズの文字サイズ調整

ヘッダーの文字のサイズ感を設定できます。

上の画像は文字の大きさ「200」、上下の余白「15」の場合です。

下の画像は文字の大きさ「15」、上下の余白「200」の場合です。

何事もバランスが大事！

検索ボックスの表示選択

SNSアイコンの表示選択

ヘッダー部分にある検索ボックスとSNSアイコンを非表示にすることができます。

よっぽどの理由がない限りほとんどのブロガーさんが表示してるんじゃないでしょうか？

【スマホ用】ヘッダーロゴとヘッダーフレーズの文字サイズ調整

スマホで見た場合のヘッダーの文字サイズを設定できます。

赤枠部分をクリックすることでPC、iPad、スマホで閲覧したときにどのように見れるかを実際に見ることができるのですがヘッダーの文字サイズはきちんと反映されないんですよね。

なのでここの項目に関しては実際に公開してみてから自分のスマホでみて確認する方がいいかもしれません。

インフォバーに表示する文字

インフォバーのリンク先URL

インフォバーてここの事です。

カラー設定でも少しでてきましたね。

「アピールしたい収益性の高い記事やプロフィールなど読んでもらいたい記事を設定するのがおすすめです」とJINマニュアルに書いてありました！

 

ヘッダー画像設定

ヘッダー画像

ヘッダー画像のリンク先URL

ヘッダー画像のキャッチフレーズ

キャッチフレーズのカラー

キャッチフレーズの文字加工

ヘッダー画像のサブテキスト

サブテキストのカラー

サブテキストの文字加工

ヘッダー画像のボタンカラー

ヘッダー画像のボタンのリンク先

ヘッダー画像のボタンテキスト

こんな設定があったんですねぇ・・・

ヘッダーの下に画像を設定してそこに自サイトのPR？みたいなのを書いてボタンでおすすめ記事とかに誘導できるみたいです。

上の画像はヘッダー画像だけ適当なものを設定しましたがそれ以外の文章とかボタンはデフォルトで入っていたものです。

色々と設定がありますがこの「キャッチフレーズ」「サブテキスト」「ボタン」の文章と色などを設定できます。

ヘッダー画像とボタンはクリックすると好きなサイトに飛んでもらうことができるのでそのURLも設定できますね。

ヘッダー画像のテキスト位置調整

ヘッダー画像のキャッチフレーズを上からどれくらいの場所に記載するかを設定できます。

数字を大きくするほどキャッチフレーズの場所が下に下がります。

【スマホ用】ヘッダー画像

【スマホ用】ヘッダー画像のテキスト位置調整

こちらもPC版と基本的には変わりません。

ただ、実際に設定後スマホで確認してみると・・・

ボタンが下にはみだしてしまいました。

もう少し上にあげないといけませんね。

設定を「-100」にしてみたらちょうどいい感じになりました。

マイナスもしっかり対応してるんですね

ヘッダー画像の下層表示選択

「下層ページに表示させる」を選ぶと記事を読むときにもヘッダー画像が出てくるようになります。

フッターの辺りに出てくることはないので注意ですね。

フッター辺りに出てもあまり効果は期待できなそうですが・・・

フッター設定

フッターの表示項目の選択

フッターの項目【左】のテキストを変更する

フッターの項目【左】のリンクを変更する

フッターの項目【右】のテキストを変更する

フッターの項目【右】のリンクを変更する

フッターのこの部分ですね。

プライバシーポリシーや免責事項など記載しておかないといけないみたいですね。

JINを使用している方は何もいじっていなければどちらもデフォルトで設定されていると思うのでそのまま記載していただければいいのではないでしょうか？

ヘッダーなどで自分で記載するからフッターにはいらないっていう人は「コピーライトのみ」に設定すればいいんだと思います。

スマホサイドメニューのボタンのテキスト

スマホで見た時に右下に出てくるボタンです。

これちょっと憧れてたんです！

ボタンの設定方法は後述するのですがこのボタンのテキストを設定できます。

画像では「メニュー」としてますが「MENU」でもいいですしお好きな単語でいいですね。

トップページ設定

ピックアップコンテンツのタイプ選択

ピックアップコンテンツの下層ページ表示選択

後述するピックアップコンテンツの表示方法を決めることができます。

「メニュータイプ」です。アイキャッチの上に記事名が表示されます。

「メニュータイプ(文字なし)」です。アイキャッチで勝負したい人に！

「記事タイプ」です。一般的な記事と同じ感じで表示されますね。

また、これを「下層ページでも表示させる」にするとヘッダー画像の時と同じで記事を読むときにもピックアップコンテンツが表示されるようになります。

トップページのレイアウト選択

ホーム画面の表示方法を設定できます。

上が1カラム(列)で下が2カラム(列)です。

1カラムだと「投稿記事」という1種類のみを表示しているのに対して

2カラムだと「投稿記事」と「サイドバー(プロフィールとか)」の2種類を表示しています。

トップページの記事一覧デザイン選択

PCとスマホで表示のされ方が異なるのでそれぞれ確認していきましょう。

PC版

1カラムで設定しているとマガジンスタイルもベーシックスタイルも違いはないようです。

どちらを設定しても上のように表示されます。

2カラムで設定した場合以下のようになります。

上がマガジンスタイルで下がベーシックスタイルです。(PCの場合マガジンスタイルはどちらでも表示方法は一緒でした。)

ベーシックスタイルは記事の出だしの文章もでてくるので出だしで読み手を引き付けることができるようならこちらでもいいかもしれませんね。

 

スマホ版

スマホだとトップページのレイアウトを1カラムにしても2カラムにしても影響ないようです。

マガジンスタイル(スマホ2カラム)

見慣れた様式ですね。安心感があります。

マガジンスタイル(スマホ1カラム)

アイキャッチが大きくてびっくり。

その分自身のあるアイキャッチを推すにはいいのかも。

私のアイキャッチは少し恥ずかしい笑

ベーシックスタイル

これはこれで見慣れたというかなんというか。

ちなみに私はこちらを採用。

最新記事一覧から除外したいカテゴリーIDに-をつけて入力

最新記事一覧に表示させたくない記事のカテゴリーを設定できるようです。

最新記事一覧に表示させたくない記事ってどんなのなんでしょう？

私にはまだ分からないです。

ちなみにカテゴリーIDてゆうのは

ワードプレスのホーム画面→投稿→カテゴリーを開くと確認できます。

このIDに「ｰ」を付けて入力すれば除外できるようですね。

トップページの記事一覧に表示させるカテゴリーID

赤枠の部分にピックアップしたいカテゴリーを表示することができます。

最大3つまでです。

これもさっきのカテゴリーIDを入力すればOKです。

 

記事のデザイン設定

文字サイズ

文字サイズ(スマホ)

文字通りサイトの文字サイズを設定できます。

XL,L,M,S,XSの5種類から選ぶことができるのでお好みに合わせて選べばいいと思います。

マーカー1の色

マーカー１の太さ

マーカー２の色

マーカー２の太さ

文章を書く時強調するためのマーカーです。

これがマーカー１です

これがマーカー２です

図にあるように「スタイル」から設定することができます。

これもお好みに合わせて設定すればいいと思います。

CTAの背景色

CTA内の文字

まず皆さん思うのが

CTAってなんなん？

ですよね。私含め初心者の方は分からないですよねー。

調べてみたら「Call To Action]の略みたいです。

まぁそれでもなんなん？

って話ですが。

上の画像みたいなやつのことらしいです。

JINさんのHPから拝借してみました。

これもどこかに誘導したい時に使えるみたいですね。

ワードプレスのホーム画面から作成できるみたいですが私のような初心者にはまだまだ先の話のようです・・・。

関連記事の表示形式

記事の下側にある関連記事の表示形式を設定できます。

スライドスタイル

関連記事がスライドして見れます。

ベーシックスタイル

トップページみたいな表示形式ですね。

表示する記事の数が多いとくどくなるかも。

マガジンスタイル(2カラム)

マガジンスタイル(3カラム)

これもトップページで設定できるのと同じ感じですね。

関連記事の見出し

関連記事のテキストを編集できます。

デフォルトだと「RELATED　POST」になっていますが日本語で「関連記事」とかでもいいですしね。

関連記事の表示件数

関連記事を何件表示するかです。

ベーシックスタイルだと表示件数が多すぎるのは微妙かもですね。

記事に自動で挿入されるアイキャッチ画像を非表示にする

記事の最初にアイキャッチが表示されるのを防ぎます。

記事のコメントを表示する

ブログの最後にコメント機能をつけることができます。

コメントもらえると嬉しいですよね。

貰ったことないですが笑

SNSボタンを表示しない

ページ上部のSNSボタンのみを表示しない

記事の最初と最後にあるSNSボタンを非表示にすることができます。

どうでもいいですが下部のSNSボタンだけ非表示にすることはできないんですかね。

記事下の「次の記事」「前の記事」を非表示にする

下にある「次の記事」と「前の記事」を非表示にします。

不要だと思う人はぜひ

記事下の関連記事を非表示にする

先ほどの関連記事を非表示にしてくれます。

不要だと思う人はぜひ

見出しデザイン設定

大見出し（H2）デザイン

小見出し（H3）デザイン

小見出し（H4）デザイン

 

上から順にH2、H3、H4の見出しデザインです。

ここのデザインを設定できます。

他の方のブログだと少し違った見出しになってておしゃれだなって思ってたんですよね。

見出しをオリジナルデザインにする

自分で作ったデザインを使いたい！って人のための項目みたいです。

CSSを自分でいじって設定するようですがそんなことできる人はこの記事自体みないですよね笑

私もまったく分からないのでそのうちできるようになったら(できるようになるのか？)いじってみようと思います。

ボックスデザイン設定

 

このあたりのボックスの色を１つずつ設定することができます。

細やかな気配りですね。

 

ボタンデザイン設定

 テキストモードで上のタブにある「ボックス」を押すと図のようなテキストが勝手に挿入されます。あとはURLを入力したりテキストを入力することで自分好みのボタンを作ることができます！

 

こんな

感じで

このボタンはURLを記載してないのでどこにも飛びませんが

ボタンデザイン

ボタンの見た目を変更できます。

マテリアル、フラット、立体の3つがあります。

正直マテリアルとフラットの違いが分からない・・・

色ボタン１の色

色ボタン２の色

さっきのボタンの色を設定することができます。

カスタムボタン①

カスタムボタン②

自分なりのボタンを作りたいなってゆう人にはカスタムボタンです！

丸み、横幅、高さ、色を設定することができます。

詳細ページ

公式ページ

上のボタンはだいぶ極端な例ですが笑

ちなみに1つ目が「丸み１」「横幅10%」「高さ10px」で

2つ目が「丸み200」「横幅200%」「高さ200px」です。

まぁほどほどに設定するればいいと思います笑

ｿﾚﾆｼﾃﾓ2つめのボタン突き抜けてますね・・・

 

SNS設定(OGP)

OGPってなんだ？

「Open Graph Protcol」の略称のようですがやっぱり意味わからんのです。

FacebookやTwitterで記事をシェアした時にタイトルや画像を正確に伝えるためのなんちゃら・・・ということらしいですがまぁ設定しておけってことですね！

SNSボタンのデザイン

記事の下などにあるSNSボタンの見た目を設定できます。

上がスタイル１で下がスタイル２です。

お好みに合わせてどうぞ

トップページのOGP画像

SNSで記事などを紹介した時に出てくる画像を設定できます。

かなり重要ですよねこれ！

選び抜かれた1枚を設定したいものです。

Facebook、Twitter、Instagram、LINE、YouTubeのURLを入力することでボタンを押すとそのサイトに飛べるように設定できます。

Twitterのカードタイプ

Twitterに載せた時にでる画像が普通サイズか大きいサイズかを設定できます。

JINマニュアルでも説明されていますが基本的には大きいサイズにしておけば問題なさそうですね。

その他設定

カエレバヨメレバをJINオリジナルデザインにする

カエレバヨメレバってなんじゃい？

って方はこちらを見てください

 

アプリーチをJINオリジナルデザインにする

 

こーゆーのもみたことありますよね？

アプリを紹介するためのサイトがアプリーチというものみたいです。

カエレバヨメレバのアプリ版みたいな感じですね。

コードのシンタックスハイライターを利用する

シンタックスハイライターとはなんぞや？

カスタマイズをしてるとわからない単語ばかりですね。

調べてみたところ

コード(テキストエディタみたいな？)に色をつけて読みやすくすることができる

という事のようです？

読者に向けたものというより作成者側への配慮みたいですね。

この理解であっているかは不明ですがこれも私のような初心者には縁遠い項目ですかね。

 

パンくずリストの表示

トップへ戻るボタンの表示

パンくずリストは記事の最後に載っているやつですね。

これあると便利ですよねー。

トップへ戻るボタンもあるととても便利ですよねー。

どちらも表示しないという選択肢はないと思います。

 

NO IMAGE画像の設定

記事のアイキャッチとかを設定しなかったときに代わりに乗っかる画像ですね。

たまに他のサイトでも見かけますよね。

いい感じの画像があれば私も設定したいんですけどねぇ

 

メニュー

このあたりは結構ややこしくて初心者の私は結構ややこしくなってしまいます。

グローバルナビゲーション

スマホ固定フッターメニュー

スマホのスライドメニュー

スマホのボタンメニュー

トップページのピックアップコンテンツ

まずは単語の説明からですね。

一応全部これまでの項目で設定してきたものばかりですかね。

では設定の仕方を見ていきましょう。

①まずはメニューの名前を決めます。

なんでもいいので自分がわかるように決めればいいと思います。

②どこに配置したいかを決めます。

画像では全部の欲張りセットです。

ただ、全部にしちゃうと全部で同じ項目が決まってしまうのであまり現実的ではありませんね。

③「項目を追加」を押します。

④メニューに載せる項目を設定します。

ここで各ブログの個性が出てきそうですね。

一番上のカスタムリンクなんかだとURLを載せれば他のサイトにも誘導できる感じですね。

ブログを複数個持ってる人とかいいんじゃないでしょうか

これでメニューの設定が完了しました。

⑤あとは、それぞれ設定したメニューをどこに配置するか決めていく感じです。

この辺りもこだわっていきたいですねぇ。

ちなみにこちらからも設定できます。

こちらの方が画面が広くて設定しやすい気もしますね。

ウィジェット

また出てきましたよくわからない単語！

ウィジェットってなんぞや

ウィジェットについて調べたところ「ヘッダー」「サイドバー」「フッター」の3か所のことのようです。

ブログの上、右、下ってことですね。

この3か所にいろいろと情報を載せるための設定のようです。

早速こちらの画面から設定するようにしてみましょう。

今回はサイドバーにSNSアイコンを設定してみましょう。

まずはサイドバー追尾【PC】をクリックします。

次に左の項目(たくさんありますねぇ)からSNSアイコンをドラッグでひっぱってきて設定完了です。

それぞれの項目でいろいろと設定できるのでいじってみると自分だけのブログが作成できますね！

メニューとウィジェットをどれだけこだわるかでサイトの完成度も全然違ってきますね！

私もがんばります！

追加CSS

私のような初心者は触らないこと推奨ですね！

なーんにも分かりません笑

エクスポート/インポート

自分のJINのカスタマイズ設定をエクスポートしたりインポートしたりできるようなのですが私にはまだまだ縁遠い項目・・・

 

 

いかがでしたでしょうか？

JINのカスタマイズを一通り網羅してみたつもりです！

正直私もこの記事を書いていて初めて知ったことも多いですしまだまだこだわりきれてないところばかりですが徐々に自分らしいサイトに育てていきたいですね！