Twitterにてブログの新着記事更新情報をお届けしてます!(ここをクリックするとTwitterへ)

どうせ読まれないサイドバーを有効活用する方法|Cocoon改造

どうも、ぶちくまです。

サイドバーはまったく読まれてないコンテンツになるわけですが、
これを少し目立たせて存在アピールするカスタマイズを行いましたので共有投稿します。
Cocoonのモバイルスライドインメニューボタンの改造記事になります。
「サイドバー」のアイコンと文字を変えて、別の要素に切り替えて内容を示すというカスタマイズです。

サイドバーって、まったく読まれてないんですよ。知ってました?
にも関わらず、人気記事一覧でアイキャッチの読み込みでローディングに負担をかけたり、
意味もなくプロフィール貼ったりしてませんか?
言っとくけど、それ誰にも読まれてないからな!

えぇ、このサイトのことですよ。
では、今回の改善をご説明します。

Cocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】
WordPress無料テーマ「Cocoon」の初心者でもできるカスタマイズ部とその方法をまとめてみました。見出しも本文だけではなく、「サイドバーウィジェット」「コメント」「関連記事」などもデザイン可能。ボタンやバッジ、ボックスデザインやCocoonおすすめ機能のカルーセルのCSS編集などを掲載しています。
  1. 今回のCocoon大改造ポイント
  2. サイドバーウィジェットはすっきり見やすくする
    1. サイドバーは読まれないしクリックされない
    2. ぶちくまも自分のサイトで調べました
    3. モバイルでサイドバーが読まれない理由
  3. WPテーマCocoonの優秀さにあぐらかいてた
    1. スライドインボタンとは
    2. サイドバーとは
  4. サイドバーはなぜ読まれないのか考察する
    1. サイドバーに有益な情報が置かれていたことなどいまだかつてない
    2. 「サイドバー」という単語で何があるか予想できる人なんていない
    3. とくにネット慣れしていない人には不親切なワード
  5. モバイルスライドインの大改造方法
    1. モバイルスライドインメニューボタンのCSSコード
    2. 結構悩んだContent変化
    3. CSSはスタイル変更のためのものだからコンテンツは変えられない
    4. 悔しいからユーザビリティとかおかまいなしに完成させた
    5. 仕方がないから親クラスに擬似要素くっつけてアイコン化させた
  6. 見た目には楽しいスライドインボタンができて満足
  7. おすすめカスタマイズポイント
    1. コンテンツをわかりやすく伝えるワードを
    2. アイコンはお好きなものを
    3. カラー変更はシンプルでいい
    4. 回転は2パターン用意
  8. こんなサイドバーが好きだランキング
    1. 5位 どこを読んでいるかわかる道しるべサイドバー
    2. 4位 いっそ読まれないことをいいことに広告めっちゃ貼る
    3. 3位 同一カテゴリ内アイキャッチ記事を紙芝居みたいに
    4. 2位 記事内優秀リンクまとめ
    5. 1位 物販リンクまとめ
  9. サイドバーで大事なことは「本記事をいかに読みやすくする」か

今回のCocoon大改造ポイント

  1. サイドバーウィジェットのコンテンツを見直す
  2. モバイルスライドインボタンの「サイドバー」を目立たせる
  3. サイドバーに何が書いてあるか読者に伝える
  4. カスタマイズを楽しむ

の4本立てになっています。

サイドバーウィジェットはすっきり見やすくする

サイドバーは読まれないしクリックされない

知ってました?
サイドバーのクリック率って異様に低いってこと。
先の記事で、タグマネージャー駆使して読了率とか調べようぜっていう記事があるのですが。

https://www.naenote.net/entry/quantitative-analysis-of-custom-parts-usage

こちらの記事ですね。
NAEさんのサイトには、クリック率を調べる関係でその他の情報もいろいろと参考になることがありました。
ありがとう!

で、ですね。
この記事をみて、驚いたことがですね。

・サイドバーは空気

、、、サイドバーは空気?

1行ですが、あえて引用してみました。
サイドバー、空気らしいですよ。

ぶちくまも自分のサイトで調べました

私もタグマネージャーを駆使して、どこがクリックされたのか調べたのですが、

ぶちくま
ぶちくま

いや、まじでサイドバー死んどる。

PC閲覧であれば、多分、目には入ってるとは思うんですよね。
でも、ぶちくまのサイトも、もう8割がスマホ、しかもその半分以上がAMPという。

ぶちくま
ぶちくま

やばい、時代、変わってる!

そういうわけで、うんうんと頭を抱えていた今日この頃なのです。

モバイルでサイドバーが読まれない理由

まず、サイドバーが読まれない理由はふたつあります。

  1. サイドバーに有益な情報がないことを知っているネット巧者
  2. サイドバーの存在を知らないネット亡者

この2択です。説明していきます。
その前に、少しだけCocoonのサイドバーについても解説。

WPテーマCocoonの優秀さにあぐらかいてた

実は、当方が利用させてもらっている、WPテーマ「Cocoon」なんですけどね、
機能が豊富すぎて使いこなせない

ぶちくま
ぶちくま

そのくせCSSのカスタマイズには熱が入って逆に記事作成に力が入らないブロガーゴロシテーマ

ぶちくま流の利用術はまたいずれか書くことにして、
レスポンシブ完全対応でモバイルでもPC閲覧ばりにスマートでコンパクトでシンプルな記事閲覧が可能となっているのですよ。

さて、みなさんは、

  • スライドインメニュー派ですか?
  • トップボタンを配置してグローバルナビに誘導する派ですか?

ぶちくまは、スライドインメニューボタンが欲しくて、
XeoryBaseからSimplicityに移住、そのままCocoonに永住した口なので、
当然、スライドインメニューボタンをこよなく愛しておるわけですよ。

スライドインボタンとは

ぶちくまのサイトをみてもらえれば一目瞭然ですが、
この、一番下に貼り付けられた、5つのボタンのことですね。
ちゃんと、サイドバーって書いてあるんですけどね、
これがまぁ機能していないわけですよ。

「Cocoon設定」の「モバイル」タブから設定できます。

サイドバーとは

きっと、この記事を読んでる方は、ある程度Cocoonの設定が終わって、
今はカスタマイズに精をだされてこの辺鄙なサイトまで足を運んでくださっているのだけど思うけど。

サイドバーはウィジェットで簡単に組み立てられるので、すっごく便利ですよね!
Cocoonは、スマホやPCごとに表示するかどうか選べるという、
Simplicity時代からの便利な機能は踏襲している。
なんとなく、人気記事一覧とかを並べてみたりしていますよね。
便利な機能だから、とりあえずありったけのウィジェットを詰め込んでみて、
ごちゃごちゃ整理のつかない、居心地の悪いサイトになっていたり。。。

ぶちくま
ぶちくま

えぇ、わたしのサイトです。

サイドバーはなぜ読まれないのか考察する

サイドバーに有益な情報が置かれていたことなどいまだかつてない

はい、私もブログ回遊を趣味というか生業にしている人種でありますが、
正直、サイドバーをみて幸せ度数が上がったことなんて、ただの一度もない。
ビッグバナーが貼られているか、せいぜいがプロフィールくらいなもんで、
よほど気に入ったサイトじゃないとクリックしないどころか、
目も通さない。

そう、ネット依存度が高い人、探索レベルの高い人は、サイドバーなんか見ない
サイドバーに、有益な情報なんて、ない!
偏見ですけどね。

「サイドバー」という単語で何があるか予想できる人なんていない

まぁ、そんな雑多としたサイドバーですから、
Cocoonの優秀な機能をもってしても、
サイドバーは読まれない。
むしろ、PCと同じ表示までできるが故に、
人気記事やカテゴリ一覧なんかあっても絶対にクリックしない。
まずは、本文あってのサイドバーなのだ。

とくにネット慣れしていない人には不親切なワード

「サイドバー」って、正直、なんなんだよ、という感じはある。
もちろん、我々ブロガーはコンテンツ作る側だから、
サイト内を行き来しやすいように、人気記事のリンクを用意したり、
場合によってはアフィリエイト貼ったりして、
なんとか工夫を凝らしている。

でも、読者はそんなことは知ったこっちゃない!

なんだかわからない、フッターに固定されたサイドバーボタンなんかクリックしないし、
ましてネット慣れしていない人にとって

しろくまさん
しろくまさん

何これうまいの

状態なんですよ。

ぶちくま
ぶちくま

なので何が書かれているかわかるようなカスタマイズしてみた!

そう、それなら、何が書かれているかわかるようなカスタマイズをすればいいのだ!

というわけで、一応CSSコード貼っておきます。

モバイルスライドインの大改造方法

ここからカスタマイズ記事になります。
https://bibabosi-rizumu.com/cocoon-slidein-menu-button/

Cocoon界のカスタマイズといえばカウタックさんですね。
カスタマイズする際には一度目を通しておくと、大体すでに着手されてます。

モバイルスライドインメニューボタンのCSSコード


/**** モバイルスライドインメニューのアニメーション編集 ****/
/* メニューアイコン */

.sidebar-menu-icon::before {
	content: '\f06b';/* アイコンはここに代入 */
	position: absolute;
    left: 0;
    right: 0;
    	animation: rotation 10s ease-in-out infinite normal;
	-webkit-animation: rotation 10s ease-in-out infinite normal;
}
/* メニュー文字 */
.sidebar-menu-icon::after {
	content: 'おすすめ';/* 文字はここに代入 */
	font-size: 12px;
	position: absolute;
	top: 2.2em; /* 高さの微調整 */
	left: 0;
	right: 0;
	animation: rotation 10s ease-in-out infinite normal;
	-webkit-animation: rotation 10s ease-in-out infinite normal;
}
/* 要素を重ねて入れ替える */
/* メニューアイコン */
.sidebar-menu-button:before {
    font-family: FontAwesome;
    content: "\f1fd";/* 変化後のアイコンはここに代入 */
    position: absolute;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 1em;
    top: 0.15em;
     opacity:0;
     animation: rotation2 10s ease-in-out infinite normal;
	-webkit-animation: rotation2 10s ease-in-out infinite normal;
}
/* メニュー文字 */
.sidebar-menu-button:after {
    content: "まとめ";/* 変化後の文字はここに代入 */
    position: absolute;
    display: inline-block;
    width: 100%;
    text-align: center;
     font-size: 12px;
     top: 2.1em;
     opacity:0;
     animation: rotation2 10s ease-in-out infinite normal;
	-webkit-animation: rotation2 10s ease-in-out infinite normal;
}
/* キーフレームでアイコンを変化 */

@keyframes rotation {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: rotate(0deg);
  }
  30% {
    opacity: 0;
transform: rotate(360deg);
color:blue;
  } 
 75% {
    opacity: 0;
    transform: rotate(360deg);
  }
    80% {
    opacity: 1;
transform: rotate(0deg);
color:red;
  }
   100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

@-webkit-keyframes rotation {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: rotate(0deg);
  }
  30% {
    opacity: 0;
transform: rotate(360deg);
color:blue;
  } 
 75% {
    opacity: 0;
    transform: rotate(360deg);
  }
    80% {
    opacity: 1;
transform: rotate(0deg);
color:red;
  }
   100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}
@keyframes rotation2 {
 0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  25% {
    opacity: 0;
    transform: rotate(0deg);
  }
  30% {
    opacity: 1;
transform: rotate(360deg);
color:blue;
  } 
 75% {
    opacity: 1;
    transform: rotate(360deg);
  }
    80% {
    opacity: 0;
transform: rotate(0deg);
color:red;
  }
   100% {
    opacity: 0;
    transform: rotate(0deg);
  }
}

@-webkit-keyframes rotation2 {
 0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  25% {
    opacity: 0;
    transform: rotate(0deg);
  }
  30% {
    opacity: 1;
transform: rotate(360deg);
color:blue;
  } 
 75% {
    opacity: 1;
    transform: rotate(360deg);
  }
    80% {
    opacity: 0;
transform: rotate(0deg);
color:red;
  }
   100% {
    opacity: 0;
    transform: rotate(0deg);
  }
}

結構悩んだContent変化

やってることはシンプルです。
Animationを使って、時間指定して適当に変化させてるだけです。
変化が自然になるように、微妙に色変えたり、回転させたりしてます。
まぁ、その辺りは趣味もある。
色は適当に書いただけだから、もし本当に使う物好きな人がいれば、
自分のサイトのメインカラーに合わせたりするといい。

んで、意外と大変だったのが、animationで文字を変える、ということ。

CSSはスタイル変更のためのものだからコンテンツは変えられない

いや、そんなこと知らずにコード書いたから、
書き終えてから動作しなくて絶望したね。

ぶちくま的には、
Animationの時間経過に合わせて、
「A→B→C→A」みたいなことを、

  • 「25% content:”A”」
  • 「50% content:”B”」
  • 「75% content:”C”」

みたいな感じでやりたかったんですよ。

Chromeだと動くからタチが悪い

しかも、動作確認しているMacのChromeだとちゃんと動作するから、
うかつにもちゃんと2〜3時間かけてコード書き上げてから、
モバイル端末で動かないという事態に気がつく、というね。
ちなみに、Safariでも動かなかったから、
自分の読者の9割以上が動作をみることができない無駄なコードになってしまったよね。

悔しいからユーザビリティとかおかまいなしに完成させた

はい。これはもうただの意地です。
そういうわけで、コードとしてはかなり強引です。
たぶん、jQueryとかで、classを代入したりできればもっとシンプルなコードになっていたし、
もっといろいろな動きができたことでしょう。

ぶちくま
ぶちくま

ただ、もうCSS以外はいじらないって心に決めてる。

Javaまで手を出したら、ただのセンスのないアマチュアプログラマになっちまう。
時間ばっかりとられるからCSS以外は触らないって、Simplicityの時に決めた。

仕方がないから親クラスに擬似要素くっつけてアイコン化させた

幸いにして、Cocoonではスライドインボタンひとつひとつにクラスをつけてくれていたので、
子クラスについている擬似要素の裏(普段目にするアイコン)に、
その親クラスであるdiv classに擬似要素をつけて隠しておくことで、
交互に出現させて、さも文字が変わっているようにしてみました。
んで、みやすいかどうかは別として、ちょっと目立たせるために回転と色をつけてみました。

本当はスクロール量でアイコン回転させたかった

余談ですが、本当のことを言うと、
jQueryを使って、スクロールするとアイコンがくるくる回って、
ページ読了80%を超えると、有益な情報がみられる、みたいな、
FF6のシャドウみたいなイベント(最後まで我慢するといいことがあるの総称)
を仕掛けてみたかったのですが、
jQueryを途中まで書いてやめました。
これ、勢いよくスクロールするとみていて楽しいんだけど、
それがユーザビリティと離脱率にどう関係しているのかよくわからんくて、
労力の割に合わんと思ってやめた。
誰か、僕の代わりにやってみてほしい

見た目には楽しいスライドインボタンができて満足

こうして記事を書いていて、完成してよかったと思うのだが、
正直、本来の目的が果たせたカスタマイズになっているかは、まだなんとも言えない。
つい、完成した勢いと安い発泡酒のアルコールのせいで、
こんな駄文をひたすら打鍵している。
駄文であればあるほど、筆が進むのは不思議な話である。

おすすめカスタマイズポイント

果たしてどこかでコピペされて似たようなカスタマイズがされるのかは
甚だ疑問ではあるけど、
もしも導入したらここのリンク貼ってください。
真似してくれたサイトがあったら嬉しいなぁ。

コンテンツをわかりやすく伝えるワードを

おすすめはcontentの” 文字 ”部分を変更して、
サイドバーの中に何があるか、情報を端的に示せるといいと思います。
「記事一覧」とか、プロフィールがサイドバーにあれば「プロフ」とか、
フォローボタンを置いてあれば「フォロー」もありですね。
ちなみに、6文字以上の場合は、文字サイズの調整が必要ですね。
小さい画面だと全部見れなくなります。

アイコンはお好きなものを

アイコンに関しては、fontawesomeから好きなものをお探しください。
当サイトのアイコンセンスについての言及はお控えください。

カラー変更はシンプルでいい

カラーを変更する場合は、「red」とか「blue」とかで十分かと思います。
アニメーションを使うと、ゆっくりとグラデーションで変化していくので、
単純な原色でもいろいろな色合いが楽しめます。

回転は2パターン用意

今回はサイドバー用のコードだけを貼っておきますが、
@keyframesの中にある、transformのrotate(値)の、
値の部分が(角度)になります。
360度以上も回転できるので、
720にすると二回転します。
当サイトの場合だと、メニューアイコン部分が二回転バージョンになります。
ぐりんっ!って感じで、一瞬で変化する感じですね。

〇〇%とアニメーション時間を調整して頻度を決める

ちなみに当サイトの場合はメニューアイコン(左)が15秒で全体の2%の間に変化。
右のスライドバーアイコン(右)は10秒で、全体の5%の時間で変化するように調整されています。
2つのアイコンの変化を一緒にするのであれば、必要なコードの量が減っていいですね。
個人的には、頻度は少ない方が、「あれ、今このアイコン変わらなかった?」という感じがして興味を持ってもらえるかと思います。

きつね
きつね

頻回すぎると目障りです。

最後に、個人的に、こんなサイドバーだったらみてもいい、
をランキング形式にしてお届けしてさよならです。

いま、改めて挙動を調べてたら、タッチできる部分が半分になってました。。。
アイコン部分はタッチできるので、使えないことはないけど、
文字部分をタッチ(クリック)しても反応しない感じです。
たぶん、親クラスにafterの擬似要素でくっつけているのが問題かと思います。

こんなサイドバーが好きだランキング

5位 どこを読んでいるかわかる道しるべサイドバー

いわゆる、目次をサイドバーに表示しておいて、
自分がだいたいどのあたりを読んでいるかわかる、っていうやつですね。
SANGOなんかでは実装されているようだ。
あれはサイドバーとしての役割を果たしているいい例だ。

4位 いっそ読まれないことをいいことに広告めっちゃ貼る

読まれないならここぞとばかりに広告だらけにするのも一つの手かなと思っている。
サイドバー埋め尽くすビッグバナーを常設したい。
表示するだけで収益になる広告もあるので、そういったものを消化してしまうという手もなくはない。

3位 同一カテゴリ内アイキャッチ記事を紙芝居みたいに

これは取り入れたいなぁと思いながらなかなか時間がなくてできないのだけど、
スライドショーみたいに、同一カテゴリ内の記事のアイキャッチを、
3秒ごとに切り替えるやつが欲しいなぁ、と思っている。
なるべくサイドバーは一画面に収まるようにしたいし、
その場合だとスペースが限られるので、
他記事の誘導はこんな感じで済ませたい。

ただ、PCのような常に表示してあるサイドバーならいいけど、
モバイルビューワーだと邪魔になるだけだと思って、
まぁ、結局手は出さないでいるわけだ。
あと、カテゴリの役割が最適化されていないといけないわけだ。

2位 記事内優秀リンクまとめ

どうせ目次がみられるのなら、記事内で「ちょっと気になるから後で読もうかな」というリンクを
サイドバーに貼っておけると、読者としてはすごく助かる。
もちろん、ネット世界の住人たちは、あとで読むときは、
「Pocket」や「Feedly」を使ったり、
別タブを開いたりして対処してるとは思いますけどね。

1位 物販リンクまとめ

これもまたリンクのまとめ。どんだけリンクまとめたがってるのか。
これは、ブロガーのMakringさんが、
「記事の最後に、本文で紹介した商品のリンクをまとめて貼っておくといい」といったことの、、、まぁ、真似っこですね。

副業ブログで月10万円を稼ぐ4つの方法とは?
ブログを始めて一年。ブログ収益が確定月10万円をようやく超えました。本当にゼロから始めたので、その道のりは決してラクなものではありませんでした。僕が先輩ブロガーさんから受けたものを少しでもお返しできればと思い、当ブログ【マクリン】は月10万円以上を稼ぐための方法論を書き残していきます。
ちなみにマクリンさんは、ぶちくまが今一番おすすめする、
「Twitterでフォローしたい人」です。
理由はいつか細かく説明したいけど、
Twitterからもらえる情報の、精度が高く濃度が濃い。
たしかに、「おすすめのデスク周りアイテムまとめ」みたいな、
いくつも商品を紹介する記事の場合は、サイドバーにリンクがまとめてあるといいかも。

サイドバーで大事なことは「本記事をいかに読みやすくする」か

とにかく、必要なものは「本記事との関連性」です。
サイトの別コンテンツへの誘導は、むしろ本記事内に盛り込んだ方が読者のためになります。
各離脱ポイントに、ふさわしい誘導をすることが大事だと、ぶちくまは思っています。
と、いうのは実際のところ、自分のサイトはほぼ「検索流入」なので、
だいたい1記事で事足りるわけです。
無理してサイドバーで、別の記事へ誘導するより、
より「読者が求めている情報」が読み取りやすいように、
本記事の補助ができた方が、サイドバーとしては役にたつと思うんですよね。
今日はこんなところで。ちゃお。

コメント