サイト運営

【WordPressテーマ】JINをカスタマイズして、さらに綺麗なサイトへ。

もくりんぐ
もくりんぐ
みなさ〜ん こんにちは〜、もくりんぐ
@mokurin1979)です。

ブログをサクサクっと自分好みのブログにカスタマイズしたいと思ったことはありませんか?

この記事では、ブログ初心者でも簡単にカスタマイズ出来る方法を紹介していきます。

ゆーちゃん
ゆーちゃん
私もできるかな?
もくりんぐ
もくりんぐ
この記事を読めば、もくりんぐみたいな素人でも簡単にカスタマイズ出来るようになるので大丈夫だと思うょ。

カスタマイズの基本

もくりんぐ
もくりんぐ
カスタマイズするのに最低限の知識を書いておきます。
HTML言語
  • マークアップ言語
  • HTMLには118の要素(タグ)があり、それらを組み合わせて HTML ファイルを制作してます。
  • 記事を書く時にも使うコードです。
CSS
  • スタイルシート言語
  • HTML言語で書いた事を、装飾そうしょく
  • します。

  • 追加CSSや、style.cssに使うコードです。
もくりんぐ
もくりんぐ
HTML言語で書いて、CSSで装飾する。
2つは連動してます。
ただこれだけです。

CSSを書いてくれていないカスタマイズ記事などはカスタマイズが、上手くでかない可能性もあります。

カスタマイズを紹介してくれている方のほとんどは、コピーしてペーストすればOKにしてくれているので、HTML言語やCSS言語は、覚えてなくてもカスタマイズできます。

もくりんぐ
もくりんぐ
実は、これだけの知識でサクサクっとカスタマイズできちゃいます。
さらに色や、アイコンを変更したいと思ったらもう少しだけ知識が必要になります。

カスタマイズに必要な予備知識

ゆーちゃん
ゆーちゃん
コピーしてカスタマイズ簡単に出来ちゃうけど、みんな同じサイトになっちゃわない?
もっと個性を出したいんだけど…。
もくりんぐ
もくりんぐ
ゆーちゃん大丈夫。
そこは、色やアイコンを変えていくのです。

カラーコード

もくりんぐ
もくりんぐ
カラーコードは、カスタマイズしている方の好きなカラーになっているので自分の好きなカラーに変更しましょう。

カラーコードは、いくつかありますが、カスタマイズでよく見かけるのは3種類。

  1. 『#◯◯◯◯◯◯』#と数字6桁で表わす方法
  2. 『red』色を英語でしてする方法
  3. 『RGB(◯,◯,◯』英語と数字3つで表わす方法

主に①と②がわかっていたらカスタマイズはサクサクっと進みます。

カラーコードはこちらのサイトで確認できます。

『HTML言語カラーコード』で検索するとパレット等のサイトが複数表示されるので自分が使いやすいサイトをご利用ください。

アイコン

もくりんぐ
もくりんぐ
アイコンも、好きなアイコンに変更しましょう。

アイコンはFontAwesomeのサイトから選びます。

アイコンのサイズは変更出来ます。

アイコンサイズ変更コード

例<i class=”fas fa-home fa-lg”>

・赤色の部分を追記すると大きさがアイコンの大きさが変わります

アイコンの倍率&コード一覧
倍率 コード
1.333…倍 fa-lg
2倍 fa-2x
3倍 fa-3x
4倍 fa-4x
5倍 fa-5x
余白調整 fa-fw

『余白調整』はアイコンの左右にちょっとしたスペースを作ってくれる絶妙なコードになります。
余白が欲しい人は是非使って見てください。

もくりんぐ
もくりんぐ
自分のサイトやブログにあった大きさに、さらにカスタマイズしましょう。

文字

もくりんぐ
もくりんぐ
文字のサイズも使う場所によって変更してみて下さい。

文字サイズ変更コード
<small>もくりんぐ</small>

・赤色の部分を変更すると大きさが変わります。

文字の大きさ&コード一覧
大きさ コード
小さい small
ちょっと大きい sobig
大きい big
文字の大きさ参考

もくりんぐ(小さい)

もくりんぐ(標準)

もくりんぐ(ちょっと大きい)

もくりんぐ(大きい)

初歩のカスタマイズ

もくりんぐ
もくりんぐ
まずは、簡単なカスタマイズをしてみましょう。
ここに本文を入力
このコードをカスタマイズ

<div class=”jin-iconbox ①色をカスタマイズ-iconbox”><div class=”jin-iconbox-icons”><i class=”②アイコンをカスタマイズ“></i></div><div class=”jin-iconbox-main ③色をカスタマイズ–border”>④文字の大きさをカスタマイズ</div></div>

もくりんぐ
もくりんぐ
このボックスは、4箇所カスタマイズします。
他にもいろいろ追加できますが、今回は以上のカスタマイズをします。
カスタマイズしたコード

<div class="jin-iconbox blue-iconbox"><div class="jin-iconbox-icons"><i class="fas fa-biohazard fa-2x"></i></div><div class="jin-iconbox-main blue--border"><big>カスタマイズ</big></div></div>

カスタマイズ
もくりんぐ
もくりんぐ
やり方次第でいろいろ変わります。
まずは、簡単なカスタマイズからしてみて下さい。

JINカスタマイズ参考サイト

もくりんぐ
もくりんぐ
私が参考にしているサイトをご紹介します。

・こちらは、JINの公式サイト内で掲載されているカスタマイズサイト集です。

・私のカスタマイズ魂を燃やしてくれるサイトです。
(このサイトは、ほぼすべてクマさんのカスタマイズを参考にしてます。)

もくりんぐ
もくりんぐ
カスタマイズは、なかなか難しい事も多いけれど、それが出来た時の喜びが大きいのでやめれない…。

まとめ

今回は、カスタマイズの基礎知識について書いてみました。
いろんな方がカスタマイズ記事を紹介しているので自分のサイトにあったカスタマイズを自分好みにアレンジしてみてください。

もくりんぐ
もくりんぐ
みなさん、カスタマイズは、程々にして記事を更新しましょうね。
でも、
いつか、カスタマイズ記事を書いてみたいもくりんぐです。
【WordPressテーマ】綺麗なサイトが作れるJINの魅力をご紹介します。 https://twitter.com/hituji_1234/status/972776808792825856...