【アクセスアップに向けたカスタマイズ】WordPress JIN CSS変更点 まとめ【随時更新中】

wordpress-jin-css

WordPress JINを購入して2か月、慣れてきたところでちょこちょこ修正をしたくなり、いくつかCSS変更を行いました。

①どういった目的で、②何を変更したか、がわからなくなるので、備忘録的にCSS変更点をまとめました。

適宜、変更と修正を行っています。

カスタマイズ前に子テーマのインストール

[jinstar5.0 color=”#ffc32c” size=”16px”]

プラグインではありませんが、一番最初に子テーマを導入しておきます。

  1. サイトから子テーマをインストール。
  2. テーマでjin-childを有効にする。

CSS変更の際は子テーマのスタイルCSSに記載します。




php・cssの変更には最新の注意を

functions.phpは一文字でも間違えると真っ白になったりします。

私も一度、ブログが全く表示されなくなりました。

(5~10分程度でなおりましたが)

functions.phpを変更する場合には最新の注意を払ってください。

注意
カスタマイズまでには必ずバックアップをお取ってから行ってください。

ブログの配色

必要以上に多く色や装飾を使ってしまうと、見にくいブログになってしまいます。

私はブログの配色は以下のサイトを参考にしました。

Canva|デザインをセンスアップする“いけてる配色”100選!

[/box]

JIN公式ページにあるカスタマイズ

子テーマを導入した後、CSS追加を行っています。

WordPressテーマ「JIN」のカスタマイズ方法(順次追加)

[/box]

光るボタン設置 → JINの基本ボタンに追加されました

bright

賛否両論ありますが、記事の内容によっては光るボタンも有効かな、と考えて光るボタンのCSSを追加しました。

光るボタン[/box] JINは配色もユーザビリティを考慮しているということなので、カラーはJINのデフォルトの色を参考にしています。「きらりと光る」間隔は参考ページよりも長くしています。思い出したときに光る感じです。でないと、目がチカチカするかなーって。

緑の色はJINのデフォルトの緑の「#54c4a2」にしています。

 

テキストに追加するコード(AddQuicktagに登録)”]

<div class="shinybutton-green"><a href="
">#</a></div>

 

CSSに追加するコード”]

/*緑の光るボタン*/
.shinybutton-green {
 display: block;
 width: 100%;
 margin-bottom: 1em;
}
.shinybutton-green a {
 display: block;
 position: relative;
 z-index: 2;
 overflow: hidden;
 width: 100%;
 font-weight: bold ;
 font-size: 1.2em;
 border-bottom: solid 5px #54c4a2;
border-radius: 5px;
 background-color: #54c4a2;
 color: #ffffff !important;
 padding: 20px 0;
 text-align: center!important;
 text-decoration: none;
 transition: .25s linear;
 -webkit-transition: .25s linear;
 -moz-transition: .25s linear;
}
.shinybutton-green a:hover {
 -ms-transform: translateY(4px);
 -webkit-transform: translateY(4px);
 transform: translateY(4px);/*下に動く*/
 border-bottom: none;/*線を消す*/
}

.shinybutton-green 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 4s infinite linear;
 -webkit-animation: shiny 4s infinite linear;
 -moz-animation: shiny 4s 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%;}
}

記事リストの文字を大きくする

カスタマイズ一覧の通りですね。

ユーザービリティの向上のために変更。文字の大きさってとても大事だと思います。読みにくいサイトなんてイヤだもの。

内部リンクに「続きを読む」を追加

  1. 「続きを読む」を追加
  2. テキストリンクを青に変更
[/box]
[/box] 内部リンクのボックスに「続きを読む」という文字を追加しました。一応次のアクションを書いてあった方が、読者の行動を促せるかなという話ですね。CSSに追記するだけでOK。

a.blog-card:after{
	position: absolute;
	font-family: 'Quicksand','Avenir','Arial',sans-serif,'Font Awesome 5 Free';
	content:'続きを読む \f101';
	font-weight: bold;
	right:10px;
	bottom: 10px;
	padding:1px 10px;
	background:#7badd8;/*「続きを読む」の背景色*/
	color:#fff;/*「続きを読む」の文字色*/
	font-size: .8em;
	border-radius:2px;
}

 

 参考  WordPressテーマ「JIN」のカスタマイズ方法(順次追加)

色も合わせてテキストリンクと同じ色に変更。

くまさんカスタマイズ

JINのカスタマイザーで有名かつ実力者なのが、for-JINのくまさんです。

JINをもっとおしゃれにかわいく、使いやすくカスタマイズしたいとお考えの方は、まずfor-JINをご覧になることをおすすめします。

カスタマイズの参考にさせていただくと、見やすくて美しいサイトになります。

JINユーザーはぜひ応援がおすすめです。限定カスタマイズも閲覧可能になります。

 参考  for-JIN

SNSボタンを少し大きく

SNSボタンは大きい方がユーザビリティが良いので、SNSボタンを大きく変更しました。

色はそのままにしたかったので、「opacity: .7; 」の一文は削除しました。

【JINをカスタマイズしてみた】SNSボタンをおしゃれにしてみた」の説明がとてもわかりやすいで、ご確認ください。

 参考  【JINをカスタマイズしてみた】SNSボタンをおしゃれにしてみた

/*******sns share ボタン(枠線あり)*******/
.sns-design-type01 .svg-inline--fa {/*Twitter facebook poket*/
vertical-align: -0.8em;
}
.sns-design-type01 .font-hatena:before {/*hatebu*/
vertical-align: -0.7em;
}
.sns-design-type01 .line a svg {/*line*/
width: 24px !important;
fill: #fff !important;
vertical-align: -0.7em;
}
@media (min-width: 768px){
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a {
box-shadow: none;
height: 44px;
}}
@media (max-width: 767px){
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a {
padding: 6px 6px;
box-shadow: none;
height: 44px;
}}
.sns-design-type01 .sns-top li.twitter a, .sns-design-type01 .sns-top li.facebook a, .sns-design-type01 .sns-top li.hatebu a, .sns-design-type01 .sns-top li.pocket a, .sns-design-type01 .sns-top li.line a {
border: 3px double;
border-color: white;
}
.sns-design-type01 .sns li.twitter a, .sns-design-type01 .sns li.facebook a, .sns-design-type01 .sns li.hatebu a, .sns-design-type01 .sns li.pocket a, .sns-design-type01 .sns li.line a {
border: 3px double;
border-color: white;
}

 

インフォバー カスタマイズ

くまさんカスタマイズが好きすぎて…

【SANGOカスタマイズしてみた】ヘッダーお知らせ欄にボタンっぽいのをプラスをJINでもできるようにしました。

 参考  【SANGOカスタマイズしてみた】ヘッダーお知らせ欄にボタンっぽいのをプラス

/*--------------------------------------
  ヘッダーお知らせ欄
--------------------------------------*/
.cps-info-bar a {/*お知らせ欄全体*/

	padding: 5px;/*内側の余白 上下左右*/
    font-size: 15px;/*文字の大きさ*/
}
.cps-info-bar a:after {/*後ろにぶち込む*/
    content: "クリックして見に行く";/*PCでのセリフ*/
    font-weight: 500;/*文字の太さ*/
    border: 1px solid #fff;/*枠線*/
    border-radius: 5px;/*角丸*/
    padding: 2px 10px;/*内側の余白*/
    margin-left: 5px;/*外側の余白(文字との距離)*/
}
@media screen and (max-width: 500px){/*スマホ表示*/
.cps-info-bar a:after {
    display: block;/*改行されるように*/
    width: 60%;/*ボタンっぽいやつの横幅*/
    content: "タップして見に行く";/*スマホでのセリフ*/
    margin: 0 auto;/*中央寄せ*/
    font-size: .8em;/*文字のサイズ*/
}}

ユーザービリティ向上のためのカスタマイズ

リンクカードの抜粋文 非表示

内部リンクのブログカードの抜粋文を非表示にして、すっきりさせています。

私の設定の問題なのかわかりませんが、JINの内部リンクの抜粋文はメタ ディスクリプションではなく、ブログの冒頭。

私のブログの場合、ユーザーファーストの抜粋文ではないので、情報がごちゃごちゃしてしまうと判断して、抜粋文を非表示にしています。

/*説明文を消す*/
.blog-card-excerpt{
display:none;
}

 

地味に色々検索しちゃった。

本当は余白とか微調整したほうがいいなーと思っていますが、力尽きた…

 参考  【Simplicity】ブログカードの本文抜粋を消すCSSの書き方。サイドバーのみの設定も可

リンクカードのリンク色変更

リンクカードのブログの題名の色を黒から青に変更しました。

青はクリックされやすいといされている「#0044cc」にしました、

以下のCSSのの部分を変更すると好きな色に変更できます。

@media (min-width: 768px){
.blog-card-title {
color: #0044cc;
text-decoration: underline;
}}
.blog-card-title {
color: #0044cc;
text-decoration: underline;
}

 

 参考  【Simplicity】ブログカードの本文抜粋を消すCSSの書き方。サイドバーのみの設定も可

スマホの固定フッターの変更

スマホの固定フッターの文字の色と背景色を変更しました。

の部分のコードを変更すると文字色を、のコードを変更すると背景の色を変更することができます。

/******スマホフッター 色変更*****/
.footer-menu-sp .menu-item a{
color:#fff;
background-color:#3b4675;
}

引用枠 変更

これが引用枠です。

そこで、引用枠のデザイン変更、JINのデフォルトのデザインから背景色だけ変更したような感じです。

/*引用文 色変更*/
blockquote {
position: relative;
padding: 10px 20px;
box-sizing: border-box;
font-style: italic;
color: #4e4e4e;
background:
#f2f9ff!important;
} 

 

 参考  CSSで作る!魅力的な引用デザインのサンプル30(blockquote)

グローバルメニューのアイコンを動かす

business

このサイトの場合は、mobile限定に設定しているのですが、グローバルメニューと固定フッターのアイコンにアニメーション動作を入れています。

JINの設定方法は簡単で「メニュー」→「説明」にアイコンのclassとアニメーションのclassを追加するだけで設定できます。

例)fab fa-black-tie faa-tada animated

(ネクタイのアイコンのclass)(スペース)(動きのclass)

▼好みのアイコンの動きを探す▼

 参考  【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

アコーディオンボックス:クリックで表示・非表示するBOX

以下のように、クリックすると内容が見えるBOXがつくれます。


クリックされると見れます[/box] [/box] ネタバレを防ぎたいときや、必要な人だけ確認してほしい情報をBOXに入れることで、読み手の人のストレスを軽減できます。

子テーマにCSS追加…「外観」→「CSS編集」でCSS追加。

[/box]

プラグイン「AddQuicktag」にHTML追加…「設定」→「AddQuicktag」

[/box]  参考   コピペで出来る、クリックで要素の表示非表示を切り替えるHTML&CSS【WordPress対応版】

タイムライン表示

JINでもSANGOみたいなタイムライン表示ができます。

[ti label=”ラベル名1” title=”タイトル1”]コメント1[/ti] [ti label=”ラベル名2″ title=”タイトル2″]コメント2[/ti] [ti label=”ラベル名3″ title=”タイトル3″]コメント3[/ti] [ti label=”ラベル名4″ title=”タイトル4″]コメント4[/ti] [ti label=”ラベル名5″ title=”タイトル5″]コメント5[/ti]

 参考  JINでのtimeline用ショートコードの実装方法

アイキャッチ高さの統一

アイキャッチ画像とか適当にしか設定しておらず、高さがまちまち。

リサイズしてアップしなおしとか、面倒なので放置…していたら、コピペで比率変更できるCSS!以下のサイトを参考にさせていただきました。

 参考  WordPressテーマ「JIN」アイキャッチの高さを揃える




収益に向けたカスタマイズ

Rinker カスタマイズ

business-6

Rinkerをちょこちょこカスタマイズしました。

変更したらクリック率が上昇しました。

  1. 「~で見る」の文面追加
  2. 商品名へのアンダーライン追加とテキストリンクの色変更
  3. スマホ閲覧時のボタンを大きく変更
  4. ボタン色変更、枠変更、Amazon、楽天、Yahoo!文字の大きさ変更、文字間変更
[/box]  参考  商品管理プラグインRinker(リンカー)の使い方まとめ
 参考  【JINをカスタマイズしてみた】RinkerのデザインをJINっぽくしてみた
 参考  商品リンクRinker(リンカー)のCSSカスタマイズ【2選】
 参考  Rinkerカスタマイズ for wordpressテーマ JIN

楽天アドセンス カスタマイズ

楽天アドセンスのウィジェットの最適化を行いました。

 参考  楽天モーションウィジェットをPC・スマホで切替&その他の裏技

プロフィール

プロフィールを充実させました。いったい誰が有名人でもない一個人に興味を持つのだろう?と思っていたのですが、素性がわからないよりは筆者の概要が分かった方が、情報の発信元として信頼感が増すかな、と判断しました。

オリジナルアイコン

プロフィールのアイコンも変更しました。

「オリジナルアイコンでPV増えた」っていうのも耳にして、「本当かな?」と思ったのですが、実際に使ってみたら収益が上がりました。

詳細とメリットは「【ブログを収益化したい】ならオリジナルアイコンを作るべき4つの理由」にまとめています。

mio

上がった収益でイラスト料金の元が取れました。

➢ 【ブログを収益化したい】ならオリジナルアイコンを作るべき4つの理由

https://www.chemi-jyo.com/entry/blog-original-icon

 詳細  似顔絵・イラスト制作はTVCMで話題のココナラ


トップページ編集

時系列のトップページではなく、おすすめの記事を表示するようなトップページへ変更中。

参考にさせて頂いたのは、以下のサイトです。かっこよくてあこがれのサイト。

 参考  ブログのトップページを作ったので、作り方から実測効果まで全部紹介




WordPress 基本性能

始めにWordPressの基本的な操作の一部をメモ的にまとめています。

keyboard

ショートカット

WordPressにもショートカットキーがあります。Windowsとそんなに変わりません。

 参考  WordPress キーボードショートカット

表 編集

JINはデフォルトで「シンプルな表」を選べば、美しい表を挿入できます。

項目名ここに説明文を入力してください。
項目名ここに説明文を入力してください。
項目名ここに説明文を入力してください。
項目名ここに説明文を入力してください。
項目名ここに説明文を入力してください。

(「ここに説明文を入力してください」の文面を変更はできないのかなー?いちいち消すのが少し面倒。ユーザービリティ考えたら仕方がないか)

ですが、2列しかないので、必要に応じて編集する必要があります。

編集するときの注意点は、幅にpx数値を入力するとレスポンシブルではなくなりますので注意。

 参考  WordPress の投稿に表を挿入する方法




今後

laptop-coffee

目次 自作

文中に「リンク付きの箇条書き項目を追加したい」と思うことがあるのは私だけなのかな?

目次を自作できるように、以下の記事を理解したいと思っています。読んでも内容わからない…そのうち…

アンカーリンクを使うってことなのかな?

 参考  WordPressで目次を自作する方法+「プラグインを避けるべき話」

番外編:アイキャッチ画像

WordPress の有料のテンプレートJINに変更してから生じた意外と大きな問題、「アイキャッチ画像がない」です。

はてなブログ初期は「画像?面倒。まずは文章でしょう」という考えのもと、アイキャッチ画像を一切挿入せずにブログ記事を作成していました。

ですが、JINの場合アイキャッチ画像が大きく画面に出力されるため、アイキャッチ画像がないとかなりヤバいサイトになってしまいます。すっかすか。

現時点では、超有名な無料サイト、ぱくたその画像を使用させて頂いています。かわいい女の子を多めに使っています。

いいの、他のブログとかぶったって。かわいいは正義。

 参考  ぱくたそ

そのうち、エクセルとペイントでおしゃれに作成したいと思っています。普段業務で使ってるからね、エクセルに慣れているので。

文字を入れたおしゃれはアイキャッチを作りたいののだけども、私は題名のつけ方が多分下手。決まっていない題名でアイキャッチ画像作って、またあとで作り直すのが面倒なので、放置中…

 参考  Excelを使ってアイキャッチ画像をつくる




その他

デフォルトのデザインの変更とかプラグインの文面変更とか。

フォントのスタイル指定

文字のスタイル指定を増やしたい場合のspanで囲むCSSを使ったフォントのスタイル指定。

プラグインの「AddQuicktag」に登録しました。

 参考  CSS Reference

<strong>でも<b>でも良くないそうです。検索して「<b>が良い」というサイトしか発見できなかったポンコツとしては衝撃。

 参考  strongがペナルティの原因?違います、使い方が悪いだけです

目次のタイトル変更

目次のプラグインには「Table of Contents Plus」を使っています。

見出しテキストを「目次 ~読みたい場所へジャンプ」に変えてみました。




Font Awesome

icon

JINはデフォルトで簡単にFont Awesomeをスマホメニューに導入できます。

 参考  スマホフッターメニューの設定方法

ボタンにもFont Awesomeを少し使いたいなーとのことでCSSを少し追加。

追加するのに地味にいろいろ大変だったのですが、あっているのかな?JINのボタンって色と大きさと丸みしか変更できない…よね…?簡単な方法あるのかな?色々、試行錯誤を行って設定したこともあり、参考サイトがやや多め。

 参考  WordPressにFont Awesomeを導入する方法と使い方
 参考  Font Awesome 5をCSSの疑似要素で指定するとアイコンが表示されない場合の対処方法
 参考  【保存版】クリック率を上げる!アフィリエイトリンクのボタン化デザイン6選。

 <i class=”fas fa-angle-right”></i>
 <i class=”fas fa-chevron-circle-right”></i>
 <i class=”fas fa-arrow-circle-right”></i>
 <i class=”fas fa-external-link-alt”></i>

Font Awesomeアイコンを探すときに、以下のサイトが便利です。気に入ったアイコンを「AddQuicktag」に登録しています。

 参考  Font Awesomeアイコンを素早く検索しコピー。Photoshopなどでの使い方




まとめ

blog-coffee

WordPress JIN のCSS変更した事柄をまとめました。

随時更新しています。

手探りのSEO対策…ユーザビリティ、わかりやすい文章…課題は山積みです。勉強するしかないですねー

記事作成スピードをあげたいなーと思っている方は「【ブロガー必見!記事を書くのに時間がかかる…悩みを解消】ブログ作成のスピードアップができる6つのこと」もあわせてお読みください。

登録必須のASP

▼ブログ関連知識の本▼

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください