【素人のブログ運営の現実】下には下がいるから気にしなくていいよ|6か月間の運営実績報告【誰も見に来ない】

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

wordpress-jin-css

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

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

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

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

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

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

以下にまとめているCSS変更はすべて子テーマのスタイルCSSに記載します。

親テーマのCSSに書いてしまうと、親テーマのバージョンアップをしたときに消えてしまって、これまでの努力がすべて消えてしまうので注意してください。

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

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

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

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

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

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

ブログの配色

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

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

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

JINのCSSカスタマイズ

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

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

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

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

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

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

  1. 「続きを読む」を追加
  2. テキストリンクを青に変更

内部リンクのボックスに「続きを読む」という文字を追加しました。一応次のアクションを書いてあった方が、読者の行動を促せるかなという話ですね。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」のカスタマイズ方法(順次追加)

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

TablePressの水平スクロース

HTML
<div class="scroll-table">テーブルタグ</div>

CSS

CSS

/**Table Press 水平スクロール**/

.scroll-table {
overflow: auto;
white-space: nowrap;
}
.scroll-table::-webkit-scrollbar {
height: 5px;
}
.scroll-table::-webkit-scrollbar-track {
border-radius: 5px;
background: #f0f0f0;
}
.scroll-table::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #f0f0f0;
}

くまさんカスタマイズ

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

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

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

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

 参考  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;/*文字のサイズ*/
}}

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

ボタン表示微調整

このブログでもボタンの表示が崩れていたので、以下のCSSで修正しました。

CSS
/*ボタン調整*/
@media
 (max-width: 767px){.top-image-btn-color a, .color-button01 a, .color-button02 a{
padding: 12px 40px;
}}

ブログ(リンク)カードの抜粋文(ディスクリプション)非表示

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

私の設定の問題なのかわかりませんが、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;
}

スマホスライドメニューに「MENU」「SEARCH」の文字を追加

スマホのスライドメニュ―部分に「」や「」 の記号だけがあっても、人によっては何のアイコンかわからないこともあります。

ユーザーにやさしくないし、クリックもしてもらいにくそう…

mio

そこで、「」と「」の下に「MENU」「SEARCH」の文字を追加するCSSが以下のサイトに載っていました。

 参考  【JIN】簡単に追加CSSでできる!ヘッダーカスタマイズ

引用枠 変更

WordPressでは「<blockquote>~</blockquote>」で囲むことで下のような引用枠がつくれます。

これが引用枠です。

そこで、引用枠のデザイン変更、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に入れることで、読み手の人のストレスを軽減できます。

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

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

 参考   コピペで出来る、クリックで要素の表示非表示を切り替える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専用プラグインCARATを導入するとタイムラインが使えるようになります。

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

URLとタイトルをコピーするボタン

「URLとタイトルをコピーするボタンがあるとSNSで拡散されやすくなる」と言われています。

 参考  【WordPress JIN】URLとタイトルのコピーボタンを導入

【WordPress JIN】URLとタイトルのコピーボタンを導入【WordPress JIN&SANGO】URLとタイトルのコピーボタンを導入

アイキャッチ高さの統一

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

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

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

チェックボックス作成

チェックボックスを入れる場合は、以下のHTMLをテキストに入力します。

HTML
<div>
  <input type="checkbox" >
</div>
HTML
<input type="checkbox" name="checkbox" value="checkbox">

 参考  HTML辞典 <input>

チェックボックスの見た目を変更したいときのCSSは以下の記事を参考にさせていただきました。

 参考 CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた

CSS
/* css checkbox */
.checkbox-input{
  display: none;
}
.checkbox-parts{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.checkbox-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox-input:checked + .checkbox-parts{
  color: #009a9a;
}
.checkbox-input:checked + .checkbox-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #009a9a;
  border-right: 3px solid #009a9a;
}

<!-- html -->
<div class="checkbox">
  <label>
    <input type="checkbox" name="checkbox[]" class="checkbox-input">
    <span class="checkbox-parts">チェックボックス01</span>
  </label>
  <label>
    <input type="checkbox" name="checkbox[]" class="checkbox-input">
    <span class="checkbox-parts">チェックボックス02</span>
  </label>
  <label>
    <input type="checkbox" name="checkbox[]" class="checkbox-input">
    <span class="checkbox-parts">チェックボックス03</span>
  </label>
</div>




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

Rinker カスタマイズ

business-6

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

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

  1. 「~で見る」の文面追加
  2. 商品名へのアンダーライン追加とテキストリンクの色変更
  3. スマホ閲覧時のボタンを大きく変更
  4. ボタン色変更、枠変更、Amazon、楽天、Yahoo!文字の大きさ変更、文字間変更

詳しくは以下の記事にまとめています。

➢ 2019【物販アフィリエイト最強プラグイン】Rinkerを120%活用する方法|バリューコマースは必須【Amazon楽天Yahoo!の紹介】

Rinkerの使い方と損をしないASPの選び方2019【物販アフィリエイト攻略プラグイン】Rinkerを120%活用する方法|バリューコマースは必須【Amazon楽天Yahoo!の紹介】

 参考  【JINをカスタマイズしてみた】RinkerのデザインをJINっぽくしてみた
 参考  商品リンクRinker(リンカー)のCSSカスタマイズ【2選】
 参考  Rinkerカスタマイズ for wordpressテーマ JIN

プロフィール

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

オリジナルアイコン

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

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

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

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

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

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

【個人ブログを収益化したい】絵が苦手でも平気 オリジナルアイコンを作るべき4つの理由

トップページ編集

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

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

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




WordPress 基本性能

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

keyboard

ショートカット

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

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

表 編集

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

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

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

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

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

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

記事一覧に最新記事を文頭に持ってくる

特定の記事を記事一覧の先頭に表示させたい場合、編集画面で「公開(先頭に固定表示)」を選べばOKです。

特定の記事を先頭に固定表示する
記事編集→公開→編集→「公開(先頭に固定表示)」を選択



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

フリー画像

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

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

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

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

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

 参考  pixabay

アイキャッチ画像作成

アイキャッチ画像はCanvaを使っています。

私は有料版は使わずに無料版のみです。テンプレートを使うだけでかんたんにおしゃれなアイキャッチ画像を作ることができます。

 参考  Canva




その他

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

フォントのスタイル指定

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

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

 参考  CSS Reference

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

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

目次のタイトル変更

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

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




Font Awesome

icon

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

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

追記:JINにはオリジナルアイコンが導入されました。

ボタンにも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
登録すべきASPと細かな設定【会社員主婦が趣味ブログで月15万】損をしないために登録したASPサービスと大事な設定まとめ Rinkerの使い方と損をしないASPの選び方2019【物販アフィリエイト攻略プラグイン】Rinkerを120%活用する方法|バリューコマースは必須【Amazon楽天Yahoo!の紹介】

コメントを残す

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

CAPTCHA


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