ブログ運営

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



こんにちは、松坂 澪 (@matsuzakamio)です。本サイト(CHIMI-JYO)をご覧いただき、ありがとうございます。

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

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

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

登録すべきASP

WordPress 基本性能

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

keyboard

ショートカット

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

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

表 編集

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

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

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

ですが、2列しかないので必要に応じて編集する必要があります。幅を編集する際には1行目を編集しますが、幅にpx数値を入力するとレスポンシブルではなくなりますので注意。(本サイトでは一部崩れています…ダメだねー)

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



CSS追加

website

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

CSS変更:子テーマ

プラグインではありませんが、一番最初に子テーマを導入しておきます。サイトから子テーマをインストール後、テーマでjin-childを有効にします。

CSS変更の際は子テーマのスタイルCSSに記載します。直近でCSS変更する予定がなくても子テーマをインストールしておいて、仕様を変更するのは子テーマにしておきます。

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などでの使い方



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

business

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

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

例)「ブラックから転職」fab fa-black-tie faa-tada animated (ネクタイのアイコンのclass)(スペース)(動きのclass)

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

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

光るボタン設置

bright

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

JINは配色もユーザビリティを考慮しているということなので、カラーはJINのデフォルトの色を参考にしています。

「きらりと光る」間隔は参考ページよりも長くしています。思い出したときに光る感じです。でないと、目がチカチカするかなーって。

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

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

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

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

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



クリックで表示・非表示するBOX

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


クリックされると見れます

 

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

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

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

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

目次の余白変更

別の検索してたら発見。目次の余白のカスタマイズ方法です。

私、見出しが少し長すぎるのかな?目次のデフォルト余白だとなんだかバランスが悪いので変更しました。

 参考  【JIN】目次の余白を調整するカスタマイズ

引用枠 変更

見出し3を変更したところ、引用枠と色の区別がつかないという事態に陥ってしまいました。

そこで、引用枠のデザイン変更、そこまで大それた変更は行わず、背景色のみ変更しました。

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

SNSボタンを少し大きく

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

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

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

アイキャッチ高さの統一

bricks

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

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

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



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

内部リンクのボックスに「続きを読む」という文字を追加しました。

一応次のアクションを書いてあった方が、読者の行動を促せるかなという話ですね。

CSSに追記するだけでOK。色も合わせてテキストリンクと同じ色に変更。

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

内部リンクの抜粋文 非表示

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

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

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

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

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

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

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

Rinker カスタマイズ

business-6

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

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

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

 参考  商品管理プラグインRinker(リンカー)の使い方まとめ
 参考  【JINをカスタマイズしてみた】RinkerのデザインをJINっぽくしてみた
 参考  商品リンクRinker(リンカー)のCSSカスタマイズ【2選】
 参考  Rinkerカスタマイズ for wordpressテーマ JIN

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

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

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

プロフィール

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

オリジナルアイコン

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

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

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

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

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

blog-original-icon
【ブログを収益化したい】ならオリジナルアイコンを作るべき4つの根拠オリジナルアイコンでPV増えるって本当? 収益性の高いブロガーさんはオリジナルアイコンの方も多いです。 実際に使って見ると、ブログへの愛着だけではなく他にも有用性やブログの収益化につながるといったメリットがありました。 オリジナルアイコン作成に迷っている方はご覧ください。...

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


トップページ編集

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

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

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



今後

laptop-coffee

目次 自作

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

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

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

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

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

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

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

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

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

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

 参考  ぱくたそ

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

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

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



その他

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

フォントのスタイル指定

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

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

 参考  CSS Reference

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

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

目次のタイトル変更

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

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



まとめ

blog-coffee

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

随時更新しています。


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

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

登録すべきASP
ブログ運営の有益な情報まとめ
あなたにおすすめの記事

COMMENT

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

CAPTCHA


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