ブログ運営

【JINカスタマイズ】カエレバヨメレバの7net用CSS【コピペOK】

私はWordpressテーマでJINを使用しています。JINの7net用のCSSを作成しましたので配布します。大きく見た目を変化させるというよりも、もともとのカエレバ・ヨメレバのJINオリジナルデザインになじむような7net用デザインを追加するイメージです。

コピペOKですのでご自由にお使いください。

このCSSで得られる効果

元々のカエレバ・ヨメレバは7netのデザインが適用されず、以下のようなイメージとなっていました。

7netだけ浮いていますね。JINのソースコードを確認したところ、少なくとも私が確認したバージョンでは仕様のようでした。

今回配布するCSSを適用すると、以下のようなイメージになります。

元々のJINのデザインに違和感なくなじんでいるかと思います。

そもそもカエレバヨメレバって何?という方は、こちらの記事をご覧ください。

【JIN】カエレバヨメレバって何?使い方もあわせて紹介するよWordPressテーマJINを購入したとき、カエレバヨメレバというブログパーツが使えるようになりました。 なんとなく商品を紹介で...

CSSの適用方法

CSSの適用方法は、以下の通りです。

  1. CSSをコピーする。
  2. 必要であれば背景色を書き換える。
  3. WordPressに適用する。

CSSをコピーする

以下の枠内を選択してコピーしてください。

.shoplinkseven a {
background: #52a038;
display: block;
font-size: 0.85rem;
text-decoration: none !important;
color: #fff !important;
text-align: center;
border-radius: 2px;
}

@media (max-width: 767px) {
.shoplinkseven a {
padding: 10px;
}
}

@media (min-width: 768px){
.shoplinkseven a {
font-size: 0.8rem;
padding: 12px 5px;
}
}

必要に応じて色を変更

先ほどコピーしたもののなかで、赤字部分は背景色を指定する部分となっています。そのままコピペすると緑色になりますが、変えたいという方は赤字部分を書き換える必要があります。一度さきほどコピーしたものをメモ帳などに張り付けましょう。

色の確認には下記サイトが参考になります。

お好みの色を選んで#がついたカラーコードを確認し、赤字部分を書き換えてください。

あまり明るい背景色を選ぶと白い文字と同化し、文字が読みにくくなってしまいます。また他のボタンが少し落ち着いた色が採用されています。

背景色は濃くて、少し色あせたものを選ぶと良いと思います。コピペ用テンプレートでは赤、黄、青と被らない、少し色あせた緑を採用しました。

書き換えが終わったら、そのメモ帳全体をコピーし、次のステップに進んでください。

WordPress上でペースト

WordPress上でペーストします。

テーマカスタマイズ→追加CSSを開き、貼り付けます。

公開を押せば、7netのデザインが適用されます。お疲れさまでした。

【アフィリエイト】ASPはとりあえず登録すべき理由を理論的に解説ASPに登録してブログのアフィリエイトで稼ぎたいという人は多いと思います。おすすめのASPは色々紹介されているけれど、結局どこのASPに...