自分のブログを「寝ログ」に近付けるためのカスタマイズまとめ

記事のシェアはこちらから。

WordPressテーマSimplicityの作者さんが運営するブログ「寝ログ」に、自分のブログを近付けるためのカスタマイズ方法をまとめています。

この「寝ログ」はWordPressテーマを自作されている方のブログだけあって、アクセス数や広告収益率アップの方法が色々と散りばめられています。

実際のカスタマイズ方法は「寝ログ」の記事にありますが情報が散らばっているため、記事を探して探して自分のブログをカスタマイズして、などとやっていると結構時間がかかります。

そのため、この記事では自分のブログに「寝ログ」の良い所を取り入れて近づけるためのカスタマイズ方法をまとめるとともに、何故そのようなカスタマイズがされているかといったメリットについても解説しています。

Simplicityユーザの方で、

  • どうブログをカスタマイズして良いのか分からない初心者の方
  • もっとアフィエイトの収益を増やしたい方
  • ブログの見栄えを良くしたい方

にぜひ読んで頂きたい内容です。

オススメ これらを行った効果はこちらにまとめました。読み終わった後にでもどうぞ!

当ブログに、人気ブログの寝ログの良い所を取り入れた効果について解説をしています。寝ログに近付けるために私が行った具体的なカスタマイズ...
寝ログを見て実際に何をしているか分かる部分と、分からない部分があります。
「おそらくこれをやっているだろう」で書いている部分もありますのでご了承下さい。
スポンサーリンク

サイトの見た目向上に関するもの

ヘッダー画像の追加

ブログにヘッダー画像を追加されています。

寝ログのヘッダー画像

やり方はこちらを参考にして下さい。

Simplicity1.4から、テーマカスタマイザーだけで、以下のような画面幅いっぱいのヘッダー画像を設定できるようになりました。 このヘッダー画像をブラウザ幅いっぱいにするカスタマイズ方法は、フォーラムなどにも結構問い合わせがあったの

これのメリット

  • ブログの見栄えが良くなる
  • ヘッダー画像を設置してない場合と比べてスクロールする長さが少し増えるので、記事上広告の読み込み時間が稼げるかも?

画像のポップアップ表示

大きい画像を見やすいようにポップアップ表示するように設定されています。
全ての画像に対してではなく、特定の画像のみに行われている模様です。

画像のポップアップ表示

これのメリット

  • 新しいウィンドウで開かずに大きい画像が見れるので、ユーザービリティが向上する

どのように実装されているか分かりませんが、おそらくSimplicityの機能だと思います。

やり方は、

  • 外観 → カスタマイズ → 画像 → 画像リンク拡大効果のタイプ

で、

  • Lightbox
  • Lity

のどちらかを選べばOKです。(おそらくLity)

画像編集ソフトの活用

撮影したスクリーンショットを、画像編集ソフトを活用して見栄えが良いように加工されています。

水色矢印の先が「寝ログ」が加工した部分。水色矢印は当サイトで追加。

画像編集ソフト活用例

こちらで紹介されている画像編集ソフトを使われているようです。

Skitchに負けず劣らず使いやすく、機能も豊富な画像注釈レタッチソフト「Screenpresso」の使い方や、インストール方法です。とにかく、画像注釈ソフトの決定版といってもよいのではないかと思うほどお勧めのソフトです。

私もSkitchから乗り換えましたが、非常に使いやすいです。

これのメリット

  • 画像を簡単に加工することができ、見栄え向上ができる

画像の圧縮はScreenpressoでもできますが、私はリサイズ超簡単proというフリーソフトを使っています。
非常に簡単に画像の圧縮&リサイズができるのでおすすめです。

ブログカードの活用

リンクを作る際にブログカードを使用されています。
内部リンク、外部リンク共に。

ブログカードの活用

やり方はこちらを参考にして下さい。

Simplicityでブログカードを使う方法の紹介です。ブログカード利用には、利点と難点がありますので、それらを踏まえてご使用ください。
Simplicity2.1.9から、Simplicity独自の外部リンクブログカード機能を追加しました。 以下のような外部リンクのブログカードを手軽に作成できるようになりました。 以下では、外部ブログカード機能設定の説明をしたいと思いま

これのメリット

  • 画像付きの見栄えの良いリンクにより、記事が映える
  • URLで設定するため、タイトル変更があった場合に修正の必要がない

文字装飾の活用

文字に独自の装飾を行っています。

例えば、

オススメ おすすめ情報です!

補足を書きます

などなど。

やり方はこちらを参考にして下さい。

Simplicityでは、デフォルト状態で、文字装飾に使えるCSSの拡張クラスをいくつか用意しています。以下では、それら拡張クラスの使い方について説明したいと思います。文字装飾まずは、文字装飾用に以下のようなクラスがあります。太字文字を&l

文字装飾で使いやすくて私のおすすめは、

  • 赤アンダーライン
  • バッジ
  • 補足情報(i)ボックス

です。

これのメリット

  • 文字装飾を使うことにより、記事の見栄えが格段に向上する

ユーザビリティ向上に関するもの

目次の導入

記事に目次を導入されています。

目次の導入

全ての記事に目次を導入しているのではなく、目次の導入は主要な記事のみのようです。

これのメリット

  • 記事の主な内容が一覧で分かるので、ユーザーの利便性向上になる

個人的には目次はあったら便利だと思っているので、TOC+というプラグインを使って目次を導入しています。

インターネットで何か検索した時にブログやサイトを見ると目次のようなものを見たことがありませんか。目次がある記事はどんなことが書いてあるのかを明確にさせることができるため、長い記事だったとしても読者は知りたい内容に早くたどり着くことができて読まれる記事を作ることができます。検索ユーザーに読まれる記事を作ることができれば、
WordPress で目次を自動的に表示してくれる Table of Contents Plus はすごく便利なプラグインですが、初期設定のままだとちょっと味気ないデザインですよね。 設定画面から横幅や背景色を変更するこ …

ただ、このプラグインを入れるとサイトの読み込み速度が遅くなる場合があるので、導入には注意が必要です。

サイトマップの設置

ブログの構造を示すサイトマップページが作られています。
サイトマップへのリンクはフッターに設置されています。

サイトマップ

これのメリット

  • ブログの全ての記事タイトルが1ページで見れるので、ユーザーの利便性向上になる

おそらく、プラグインを使ってやられているのだと思います。

Auto generator of a customizable and designed sitemap page.

問い合わせフォームの設置

問い合わせフォームが設置されています。

問い合わせフォーム

これのメリット

  • ユーザーから直接問い合わせを受け付けることができる

寝ログはアクセス数が多いので、フォーラムという形を取られていると思いますが、個人ブログの場合は普通の問い合わせフォームで良いと思うので、こちらがおすすめです。

Just another contact form plugin. Simple but flexible.

サイト内検索をGoogleカスタム検索に変更

サイト内検索をWordPress標準のものではなく、Googleカスタム検索に変更している

サイト内検索はGoogleカスタム検索

やり方はこちらを参考にして下さい。

Google AdSenseカスタム検索ボックスの設定方法です。デフォルトの設定だと、見た目が悪いので、スタイルシートで整える方法も紹介しています。

これのメリット

  • 検索速度の早いGoogleの検索機能が使えるため、ユーザーの利便性が向上する
  • 広告が付くので収益アップが見込めるかも?

関連記事の精度アップ

関連記事の精度を上げる施策を行っていられると思います。

Simplicityの本文下には、関連記事が表示されています。 ただ、この関連記事は、アルゴリズム的に言えば、以下のような挙動になっています。 同一のカテゴリの中から指定した数だけランダムで関連記事を表示する これだと、「同一のカテゴ

これのメリット

  • よりマッチした関連記事が表示されることにより、他の記事が読んで貰える確率がアップし、サイトの評価向上ができる

モバイルサイトのAMP対応

モバイルサイトをAMPに対応しています。

AMPとは、

AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。

引用元:https://www.seohacks.net/basic/terms/amp/

です。

簡単に言うと、

  • スマホからブログを見る時、AMP対応のサイトだと表示が高速

です。

やり方はこちらを参考にして下さい。

Simplicity2.3.1からAMPに対応しました。 以下では、簡単にSimplicityでのAMP機能の使い方を説明します。 とは言っても、そこまで難しいことをする必要はないかと思います。 AMP機能を有効にする まずSimplic

これのメリット

  • サイトが高速表示可能になるため、ユーザービリティが向上する

<h2></h2>タグに半角でAMPと入れたら、エラーでAMPサイトにならなかったため全角でAMPと入れています。
何でだろ?

サイトの高速化

サイトを高速化するために、各種施策を行われていると思います。

見た目を変更することなくWordpressブログの余分な部分を削ってブログをダイエットする方法をまとめてみました。

これのメリット

  • 各種高速化により、サイトに評価が上がる
  • 読み込み速度が上がることにより、広告が表示されるのが早くなる

どのような高速化施策をされているか分からないため、私がやっている方法を記載します。
※何となくやっているので、正しい方法とは限りません。

<画像の圧縮>

画像圧縮によるブログの高速化方法です。

<ページ&ブラウザキャッシュの設定>

Simplicityを高速化し、さらなるパフォーマンスアップをする方法を解説します。 高速化には、ブラウザキャッシュの設定と、リソースを圧縮の設定を行います。 たったこれだけのことですが、かなりの高速化が図れます。 例、Simplicit

or

Wordpressのページキャッシュプラグインの導入としては、最も入りやすいかと思われる「WP Fastest Cache」プラグインのインストール方法や、設定方法の紹介です。

<リソースキャッシュの設定>

今回は、リソースを縮小してWordpressブログを高速化する方法です。これまで、このブログには以下のような高速化を一つ一つ施してきました。 ブラウザキャッシュの設定 リソースを圧縮して転送サイズを減らす 画像を最適化(ロスレス圧縮)どれも

<レンダリングブロック対策>

Move your scripts to the footer to help speed up perceived page load times and improve user experience.

おわりに

ブログを初めてはや2年。
私もブログも1日に300人以上の方に見てもらえるようになりました。

そのため、ブログ運営本腰を入れようと考え、愛用しているWordPressテーマSimplicityの作者さんのサイト「寝ログ」の良い所を私のブログにも取り入れようと考えました。

寝ログを解析していると凄く色々なことをやっておられるのが分かったので、まとめておかないと絶対に忘れると考え、この記事を書きました。

自分の備忘録的な記事ですが、他のSimplicityユーザの助けになれば嬉しいです。

後半のpart2ヘはこちらのリンクからどうぞ。

WordPressテーマSimplicityの作者さんが運営するブログ「寝ログ」に、自分のブログを近付けるためのカスタマイズ方法の解説part2です。 part2では、ソーシャルメディア、アフィリエイトに関する解説を行っています。

こちらの記事もどうぞ。
スポンサーリンク
スポンサーリンク

記事のシェアはこちらから。

フォローはこちら。お気軽にどうぞ!

このブログを応援する。

コメント

  1. Simplicityを使ってブログを始めました。
    とても役に立つまとめ記事をありがとうございます。
    ブログをこれからも頑張って行きます!

  2. なぎそら より:

    こんにちは。お役に立てて良かったです。

    Simplicity関連の記事は他にも書いているので、右上のサイト検索で「Simplicity」で検索して頂ければと思います。
    また、ブログ関係のお役立ち情報も色々書いているので、カテゴリ「ブログ」から良かったらどうぞ。

    ブログは続けてさえいれば伸びていくので、頑張ってください!