.jetpack-lazy-image{display:none}ゲームと音楽と副業の「趣味でまったりお金を稼ぐ」ブログです。2018.06.30どうも、ぶちくまです。サイドバーはまったく読まれてないコンテンツになるわけですが、これを少し目立たせて存在アピールするカスタマイズを行いましたので共有投稿します。Cocoonのモバイルスライドインメニューボタンの改造記事になります。「サイドバー」のアイコンと文字を変えて、別の要素に切り替えて内容を示すというカスタマイズです。サイドバーって、まったく読まれてないんですよ。意味もなくプロフィール貼ったりしてませんか?言っとくけど、それ誰にも読まれてないからな!えぇ、このサイトのことですよ。今回の改善をご説明します。Cocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】WordPress無料テーマ「Cocoon」の初心者でもできるカスタマイズ部とその方法をまとめてみました。見出しも本文だけではなく、「サイドバーウィジェット」「コメント」「関連記事」などもデザイン可能。ボタンやバッジ、ボックスデザインやCocoonおすすめ機能のカルーセルのCSS編集などを掲載しています。物販リンクまとめサイドバーで大事なことは「本記事をいかに読みやすくする」か今回のCocoon大改造ポイントサイドバーウィジェットのコンテンツを見直すモバイルスライドインボタンの「サイドバー」を目立たせるサイドバーに何が書いてあるか読者に伝えるカスタマイズを楽しむの4本立てになっています。サイドバーウィジェットはすっきり見やすくするサイドバーは読まれないしクリックされない知ってました?サイドバーのクリック率って異様に低いってこと。先の記事で、タグマネージャー駆使して読了率とか調べようぜっていう記事があるのですが。https://www.naenote.net/entry/quantitative-analysis-of-custom-parts-usageこちらの記事ですね。NAEさんのサイトには、クリック率を調べる関係でその他の情報もいろいろと参考になることがありました。ありがとう!で、ですね。この記事をみて、驚いたことがですね。サイドバーは空気?1行ですが、あえて引用してみました。サイドバー、空気らしいですよ。くまも自分のサイトで調べました私もタグマネージャーを駆使して、どこがクリックされたのか調べたのですが、ぶちくまいや、まじでサイドバー死んどる。PC閲覧であれば、多分、目には入ってるとは思うんですよね。くまのサイトも、もう8割がスマホ、しかもその半分以上がAMPという。くまやばい、時代、変わってる!そういうわけで、うんうんと頭を抱えていた今日この頃なのです。モバイルでサイドバーが読まれない理由まず、サイドバーが読まれない理由はふたつあります。サイドバーに有益な情報がないことを知っているネット巧者サイドバーの存在を知らないネット亡者この2択です。その前に、少しだけCocoonのサイドバーについても解説。機能が豊富すぎて使いこなせない。くまそのくせCSSのカスタマイズには熱が入って逆に記事作成に力が入らないブロガーゴロシテーマぶちくま流の利用術はまたいずれか書くことにして、レスポンシブ完全対応でモバイルでもPC閲覧ばりにスマートでコンパクトでシンプルな記事閲覧が可能となっているのですよ。スライドインメニューボタンをこよなく愛しておるわけですよ。スライドインボタンとはぶちくまのサイトをみてもらえれば一目瞭然ですが、この、一番下に貼り付けられた、5つのボタンのことですね。サイドバーって書いてあるんですけどね、これがまぁ機能していないわけですよ。「Cocoon設定」の「モバイル」タブから設定できます。今はカスタマイズに精をだされてこの辺鄙なサイトまで足を運んでくださっているのだけど思うけど。サイドバーはウィジェットで簡単に組み立てられるので、すっごく便利ですよね!Cocoonは、スマホやPCごとに表示するかどうか選べるという、Simplicity時代からの便利な機能は踏襲している。なんとなく、人気記事一覧とかを並べてみたりしていますよね。便利な機能だから、とりあえずありったけのウィジェットを詰め込んでみて、ごちゃごちゃ整理のつかない、居心地の悪いサイトになっていたり。くまえぇ、わたしのサイトです。サイドバーをみて幸せ度数が上がったことなんて、ただの一度もない。ネット依存度が高い人、探索レベルの高い人は、サイドバーなんか見ない。サイドバーに、有益な情報なんて、ない!偏見ですけどね。「サイドバー」という単語で何があるか予想できる人なんていないまぁ、そんな雑多としたサイドバーですから、Cocoonの優秀な機能をもってしても、サイドバーは読まれない。人気記事やカテゴリ一覧なんかあっても絶対にクリックしない。本文あってのサイドバーなのだ。ネット慣れしていない人には不親切なワード「サイドバー」って、正直、なんなんだよ、という感じはある。場合によってはアフィリエイト貼ったりして、なんとか工夫を凝らしている。くまなので何が書かれているかわかるようなカスタマイズしてみた!そう、それなら、何が書かれているかわかるようなカスタマイズをすればいいのだ!というわけで、一応CSSコード貼っておきます。モバイルスライドインの大改造方法ここからカスタマイズ記事になります。https://bibabosi-rizumu.com/cocoon-slidein-menu-button/Cocoon界のカスタマイズといえばカウタックさんですね。カスタマイズする際には一度目を通しておくと、大体すでに着手されてます。}}結構悩んだContent変化やってることはシンプルです。Animationを使って、時間指定して適当に変化させてるだけです。変化が自然になるように、微妙に色変えたり、回転させたりしてます。その辺りは趣味もある。自分のサイトのメインカラーに合わせたりするといい。意外と大変だったのが、animationで文字を変える、ということ。書き終えてから動作しなくて絶望したね。content:”C”」みたいな感じでやりたかったんですよ。Chromeだと動くからタチが悪いしかも、動作確認しているMacのChromeだとちゃんと動作するから、うかつにもちゃんと2〜3時間かけてコード書き上げてから、モバイル端末で動かないという事態に気がつく、というね。自分の読者の9割以上が動作をみることができない無駄なコードになってしまったよね。悔しいからユーザビリティとかおかまいなしに完成させたはい。これはもうただの意地です。いうわけで、コードとしてはかなり強引です。jQueryとかで、classを代入したりできればもっとシンプルなコードになっていたし、もっといろいろな動きができたことでしょう。くまただ、もうCSS以外はいじらないって心に決めてる。Javaまで手を出したら、ただのセンスのないアマチュアプログラマになっちまう。時間ばっかりとられるからCSS以外は触らないって、Simplicityの時に決めた。交互に出現させて、さも文字が変わっているようにしてみました。みやすいかどうかは別として、ちょっと目立たせるために回転と色をつけてみました。本当はスクロール量でアイコン回転させたかった余談ですが、本当のことを言うと、jQueryを使って、スクロールするとアイコンがくるくる回って、ページ読了80%を超えると、有益な情報がみられる、みたいな、FF6のシャドウみたいなイベント(最後まで我慢するといいことがあるの総称)を仕掛けてみたかったのですが、jQueryを途中まで書いてやめました。労力の割に合わんと思ってやめた。誰か、僕の代わりにやってみてほしい。本来の目的が果たせたカスタマイズになっているかは、まだなんとも言えない。完成した勢いと安い発泡酒のアルコールのせいで、こんな駄文をひたすら打鍵している。駄文であればあるほど、筆が進むのは不思議な話である。おすすめカスタマイズポイント果たしてどこかでコピペされて似たようなカスタマイズがされるのかは甚だ疑問ではあるけど、もしも導入したらここのリンク貼ってください。真似してくれたサイトがあったら嬉しいなぁ。”部分を変更して、サイドバーの中に何があるか、情報を端的に示せるといいと思います。「記事一覧」とか、プロフィールがサイドバーにあれば「プロフ」とか、フォローボタンを置いてあれば「フォロー」もありですね。ちなみに、6文字以上の場合は、文字サイズの調整が必要ですね。小さい画面だと全部見れなくなります。アイコンはお好きなものをアイコンに関しては、fontawesomeから好きなものをお探しください。当サイトのアイコンセンスについての言及はお控えください。カラー変更はシンプルでいいカラーを変更する場合は、「red」とか「blue」とかで十分かと思います。単純な原色でもいろいろな色合いが楽しめます。値の部分が(角度)になります。360度以上も回転できるので、720にすると二回転します。当サイトの場合だと、メニューアイコン部分が二回転バージョンになります。っ!って感じで、一瞬で変化する感じですね。〇〇%とアニメーション時間を調整して頻度を決めるちなみに当サイトの場合はメニューアイコン(左)が15秒で全体の2%の間に変化。右のスライドバーアイコン(右)は10秒で、全体の5%の時間で変化するように調整されています。2つのアイコンの変化を一緒にするのであれば、必要なコードの量が減っていいですね。個人的には、頻度は少ない方が、「あれ、今このアイコン変わらなかった?」という感じがして興味を持ってもらえるかと思います。きつね頻回すぎると目障りです。最後に、個人的に、こんなサイドバーだったらみてもいい、をランキング形式にしてお届けしてさよならです。いま、改めて挙動を調べてたら、タッチできる部分が半分になってました。文字部分をタッチ(クリック)しても反応しない感じです。親クラスにafterの擬似要素でくっつけているのが問題かと思います。自分がだいたいどのあたりを読んでいるかわかる、っていうやつですね。SANGOなんかでは実装されているようだ。あれはサイドバーとしての役割を果たしているいい例だ。読まれないことをいいことに広告めっちゃ貼る読まれないならここぞとばかりに広告だらけにするのも一つの手かなと思っている。サイドバー埋め尽くすビッグバナーを常設したい。表示するだけで収益になる広告もあるので、そういったものを消化してしまうという手もなくはない。同一カテゴリ内アイキャッチ記事を紙芝居みたいにこれは取り入れたいなぁと思いながらなかなか時間がなくてできないのだけど、スライドショーみたいに、同一カテゴリ内の記事のアイキャッチを、3秒ごとに切り替えるやつが欲しいなぁ、と思っている。他記事の誘導はこんな感じで済ませたい。PCのような常に表示してあるサイドバーならいいけど、モバイルビューワーだと邪魔になるだけだと思って、まぁ、結局手は出さないでいるわけだ。あと、カテゴリの役割が最適化されていないといけないわけだ。記事内優秀リンクまとめどうせ目次がみられるのなら、記事内で「ちょっと気になるから後で読もうかな」というリンクをサイドバーに貼っておけると、読者としてはすごく助かる。別タブを開いたりして対処してるとは思いますけどね。物販リンクまとめこれもまたリンクのまとめ。どんだけリンクまとめたがってるのか。「記事の最後に、本文で紹介した商品のリンクをまとめて貼っておくといい」といったことの、、、まぁ、真似っこですね。副業ブログで月10万円を稼ぐ4つの方法とは?ブログ収益が確定月10万円をようやく超えました。本当にゼロから始めたので、その道のりは決してラクなものではありませんでした。当ブログ【マクリン】では、月10万円以上を稼ぐための準備と方法論を書き残していきます。「Twitterでフォローしたい人」です。理由はいつか細かく説明したいけど、Twitterからもらえる情報の、精度が高く濃度が濃い。たしかに、「おすすめのデスク周りアイテムまとめ」みたいな、いくつも商品を紹介する記事の場合は、サイドバーにリンクがまとめてあるといいかも。サイドバーで大事なことは「本記事をいかに読みやすくする」かとにかく、必要なものは「本記事との関連性」です。サイトの別コンテンツへの誘導は、むしろ本記事内に盛り込んだ方が読者のためになります。各離脱ポイントに、ふさわしい誘導をすることが大事だと、ぶちくまは思っています。いうのは実際のところ、自分のサイトはほぼ「検索流入」なので、だいたい1記事で事足りるわけです。本記事の補助ができた方が、サイドバーとしては役にたつと思うんですよね。今日はこんなところで。メリットCocooncocoonシェアするTwitterFacebookはてブPocketLINEコピーぶちくまをフォローするぶちくまぶちくま創作ベース関連記事Cocoon【Cocoon】ブログカードは回遊率をあげるためにシンプルが1番!WordPressの無料テーマ、Cocoonのカスタマイズ記事です。今回は、「ブログカード」という、リンクを貼るだけで記事のアイキャッチとタイトル、本文説明(snippet)を抜き出す便利な機能になります。目的は何より回遊率をあげること。ユーザーを求めている情報まで届けること。2018.06.08Cocoon【Cocoonを使ってブログ作り】サイトのテーマを決めないと大変なことにCocoonを使ったブログ作りを解説しています。今回はサイトのイメージを固めて、サイト全体のカラーリングについて解説しています。設計図を作ることで、ブレなく、統一感のあるサイトを作成することができます。マテリアルデザインとフラットデザインの特徴、メリット/デメリットについても。2018.05.08CocoonCocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】WordPress無料テーマ「Cocoon」の初心者でもできるカスタマイズ部とその方法をまとめてみました。見出しも本文だけではなく、「サイドバーウィジェット」「コメント」「関連記事」などもデザイン可能。ボタンやバッジ、ボックスデザインやCocoonおすすめ機能のカルーセルのCSS編集などを掲載しています。2018.06.07Cocoonサイトの水先案内グローバルナビもかっこよく仕上げる【Cocoonカスタマイズ】WordPress無料テーマ最強のCocoonのカスタマイズ記事です。グローバルナビを変更したい方に対して、CSSへの理解度毎に設定のポイントを解説しています。CSS改編不要のものからアニメーションを駆使して魔改造する上級編まであります。CSSコードのコピペで使用できるし、解説もあるので自分用にデザインしてもOKです!2018.06.09CocoonCocoon導入後のアナリティクスとタグマネージャーで設定変えたポイントWordPress無料テーマで最強のCocoonを利用することになりました。Cocoon利用者のフォーラムは毎日大にぎわいです。無料テーマのCocoonのダウンロード方法を解説したページです。最初は有料テーマを利用することを検討してもらう、ことについても書いています。注意点として必ず親テーマと一緒に子テーマもダウンロードして、子テーマを利用するようにしてください。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。Cacheを導入Headをすっきりさせて読み込みを早くするお勧めのWPプラグインエックスサーバー利用者なら簡単にサイト高速化ができる方法を伝授!CDN導入のためにJetpackとCloudflareを使った感想オススメの記事CocoonのカスタマイズをするならCocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】サイト高速化の手引きブログ高速化のためにやった5つの方法|WordPressテーマはCocoon記事の検索プロフィールぶちくまぶちくま:白いもふもふの毛皮を被った医療系社畜兼ブロガー。Cacheを導入Headをすっきりさせて読み込みを早くするお勧めのWPプラグインエックスサーバー利用者なら簡単にサイト高速化ができる方法を伝授!CDN導入のためにJetpackとCloudflareを使った感想オススメの記事CocoonのカスタマイズをするならCocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】サイト高速化の手引きブログ高速化のためにやった5つの方法|WordPressテーマはCocoon記事の検索プロフィールぶちくまぶちくま:白いもふもふの毛皮を被った医療系社畜兼ブロガー。幻影戦争の装備・武器クラフトについて知りたい2019.12.062020.01.15幻影戦争に課金すべきか悩んだら読む記事「やめとけ」2019.11.222020.01.06ブレイドエクスロードの適正パーティーの組み方2019.11.012020.01.10アルカラストの効率的な育成手順【素材もないし金もない】2019.08.182019.12.16FFT(タクティクス)コラボをどう消化するか【幻影戦争】2019.12.27応援クリック大歓迎!人気ブログランキングにほんブログ村フォローボタンぶちくまをフォローするカテゴリーイラスト2ゲーム159FFBE幻影戦争9KHUx6TEPPEN12ぷよぷよクエスト4アルカラスト6アートオブコンクエスト18ゼノンザード10デュエルリンクス28ドラガリアロスト3ドラクエライバルズ1ハンドレッドソウル8ブラウンダスト12ブレイドエクスロード8ヴァルキリーアナトミア6最果てのバベル28ブログ52Cocoon19カスタマイズ2サイト高速化6Simplicity4Xeory2ブログ運営15WordPress5スパルタブログ論2収益化5副業のすすめ13ゲームライター6動画配信2読書2小説1漫画1音楽3リスニング2タイトルとURLをコピーしました。