【WordPress-JIN】オススメのカスタマイズをまとめてみたよ!

 

どうも!はらくん(@harakunishere)です。

僕はJINが大好きなんですが、結構色々カスタマイズの仕方についての記事が上がっているんですよね。

今日はその記事の中からオススメのカスタマイズを抜選して、ご紹介します!

 

アプリーチのデザインをCSSでカスタマイズ

アプリーチデザイン

 

アプリーチというアプリケーションを紹介するためのツールがあります。

ネットなんかでよく見かけるコレです↓

クラッシュ オブ キングス-「城育成シミュレーションRPG」

クラッシュ オブ キングス-「城育成シミュレーションRPG」

ELEX Wireless無料posted withアプリーチ

 

このデザインのカスタマイズです。

 

もしカスタマイズをせずにコードを貼り付けると(カスタマイズしなくても使える旧コードを使うと)、こんな感じになります↓

 

クラッシュ オブ キングス-「城育成シミュレーションRPG」
クラッシュ オブ キングス-「城育成シミュレーションRPG」
開発元:ELEX Wireless
無料
posted withアプリーチ

 

先ほどと比べてどうでしょうか?少し質素なデザインですよね!

デザインは読者の人のことを考えるととても重要なのでこだわっていきましょう。

デザインCSS一覧が公式サイトに乗っていますので、参考にしてください。

→ JINアプリーチデザインCSS一覧

アプリーチのデザインCSSの貼り方は、他のCSSと同様に【カスタマイズ→追加CSS→ペースト】という流れで行なってください!

【ブログでアプリ紹介】JINでアプリーチを利用してアプリを紹介しよう

 

JINで目次の番号を消す

TOC+というプラグインで目次を作ることができます。

(目次の作り方に関しての記事は後日書きます!)

目次を作るときにJINの仕様では、番号が振られることになっています。

 

 

この目次の番号を消すための方法をご紹介します。

方法は簡単です!以下のCSSを追加するだけです!

#toc_container .toc_list>li:after{
display:none;
}

 

【カスタマイズ→追加CSS→ペースト】という流れで貼り付けを行なってください!

するとこんな感じで番号が消えます!

目次がぞう

 

もしつまずいた方は、目次の番号を消すカスタマイズに関してこちらのサイトを参考にするとより詳しくわかります。

JINで目次の番号を消すカスタマイズ方法

JINでプロフィール画像をカスタマイズする

 

JINのプロフィールは、元々のデザインもスッキリしていて良いですが、カスタマイズすることによってよりオシャレにする事ができます。

こちらも方法は簡単です!

【カスタマイズ→追加CSS→ペースト】という流れで以下のコードを貼り付ければOK!

 

プロフィール画像

 

元々のプロフィールのデザインはこれです!このプロフィールを装飾していきます。

プロフィール画像の丸枠に色をつけるCSS
.my-profile-thumb{
border: solid 3px #2ECCFA;
}

 

マーカーを引いた場所を好きな色に指定する事ができます!

配色などについてはこちらの記事を参考にしてみてください。

配色ツールについての記事

そうするとこんな感じで画像の枠に青い線が入りました!

 

プロフィールの外枠を囲むCSS
.my-profile{
border: 3px solid #b0c4de;
}

 

マーカーを引いた場所を好きな色に指定する事ができます!

 

プロフィール画像

はい!こんな感じで外枠に色をつける事ができましたね!

 

プロフィールに色をつけるCSS
.my-profile{
background-color:#ffefd5!important;;
}

 

マーカーを引いた場所を好きな色に指定する事ができます!

 

プロフィール画像

こちらも問題なく色がついたかと思います!

もっとプロフィールについてのカスタマイズを詳しく知りたい方はこちらのサイトをご覧ください!

JINを使ったプロフィールのカスタマイズについてのサイト

ウィジェットタイトルの1文字目の色を変える

ウィジェットリストタイトル管理画像

ウィジェットリストのタイトルの1文字目の色を変える方法です。

まずウィジェットリストってなに?って方は【カスタマイズ→ウィジェット】で確認してみてください。あ〜これね〜ってなると思います。

簡単にいうとサイドバーとかに表示させるやつですね。

 

ウィジェットリスト管理

 

 

こちらも方法は簡単です!

【カスタマイズ→追加CSS→ペースト】という流れで以下のコードを貼り付ければOK!

 /*ウィジェットタイトル1文字目の色*/
 .widgettitle::first-letter{color:#dd305e;}

 

マーカーを引いた場所を好きな色に指定する事ができます!

 

ウィジェットリスト管理画像

こんな感じで1文字の色を変更できました!

 

詳しくは公式サイトで解説されていますので、つまずいたこちらも参考にしてみてください。

ウィジェットリストの最初の文字色を変える方法

JINで光るボタンを設置する

空のイラスト

ボタンのデザインによってクリック率が大きく変わる場合があります。

そんなボタンのデザインをかっこよくするための装飾です。

標準装備のボタンはこんな感じ!

標準装備のボタン

今回は子テーマをいじりますので、子テーマをまだ導入されていない方は導入しましょう!

JINでの子テーマの導入方法

子テーマを導入したらいじっていきます。

 

次に少し長くなりますが、【ダッシュボード→外観→テーマの編集→style.cssを選択】で以下のCSSを貼り付けます。

/*赤い光るボタン*/
.shinybutton {
 display: block;
 width: 100%;
 margin-bottom: 1em;
}
.shinybutton a {
 display: block;
 position: relative;
 z-index: 2;
 overflow: hidden;
 width: 100%;
 font-weight: bold ;
 border-bottom: solid 5px #e53935 ;
border-radius: 5px;
 background-color: #ef5350 ;
 color: #ffffff !important;
 padding: 12px 0;
 text-align: center;
 text-decoration: none;
 transition: .25s linear;
 -webkit-transition: .25s linear;
 -moz-transition: .25s linear;
}
.shinybutton a:hover {
 -ms-transform: translateY(4px);
 -webkit-transform: translateY(4px);
 transform: translateY(4px);/*下に動く*/
 border-bottom: none;/*線を消す*/
}
.shinybutton a:before {
 display: block;
 position: absolute;
 z-index: -1;
 left: -30%;
 top: -50%;
 content: "";
 width: 30px;
 height: 100px;
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 background-image: linear-gradient(left, rgba(255,255,255,0) 0%, 
rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
 background-image: -webkit-gradient(linear, left bottom, right bottom, 
color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),
color-stop(100%,rgba(255,255,255,0)));
 background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%,
 #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%);
 animation: shiny 2s infinite linear;
 -webkit-animation: shiny 2s infinite linear;
 -moz-animation: shiny 2s infinite linear;
}
@keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%; }
}
@-webkit-keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%; }
}
@-moz-keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%;}
}

 

CSSを貼り付けたら以下のHTMLで使う事ができます!

<div class="shinybutton">ここにリンクタグ</div>

 


 

こんな感じのボタンを作る事ができます!

ちなみに、リンクタグというのは以下のコードです。

<a hrel="ここにリンク(http://...)">ここにボタンに表示させる言葉</a>

 

CSSの「shinybutton」(4か所)を変更して複数パターン作成することで複数の色を使うこともできるようです。

他の色のボタンなどを作りたい方はこちらのサイトも参考にしてみてください!

JINで光るボタンを作る方法

 

他にもJINのカスタマイズは色々ありますので興味のある方はこちらのサイトを参考にしてみてください!

JINカスタマイズ一覧[公式]