こんにちはブロガーのこーんです
お越しいただきありがとうございます
ブログを書いているとどの記事でもそうですがこの記事は見てもらいたいなという記事ってありますよね。
でも見てもらいたい記事と見てもらえる記事は違うものです。
ほとんどの閲覧者が検索サイトから来るのでブロガーから選ぶことはできないのが現状です。
そこで見てもらえるようになるために記事を育てて一番見られる記事に育てていこうということにしました。
見てもらいたい記事
見てもらいたい記事はパソコンの軽量化について書いた記事です。
パソコンは掃除をしないとどんどん汚れていくのですがキャッシュファイルや不用なレジストリを削除することで新品のパソコンの状態を保つための方法です。
新品よりさらにスリムになっているといいってもいいかもしれません。そのぐらいわたしとしてはおすすめしている方法です。
多くのユーザーの方はデスクトップやフォルダなどの目に見えるファイルやゴミを削除すればパソコンは片付いたと思っているのですよね。しかし、見えないところのゴミがじつはパソコンの速度をどんどん遅くしている原因になっていることが多いんです。
この気がついていないところが検索されない大きな理由かもしれません。
見てもらえる工夫
検索で見てもらう機会が少ないのであればまったく関係ない記事を見に来たユーザーに記事を見せるための工夫としてスライダーを導入してみました。
スライダーとはページ上部で記事のサムネイル画像がクルクルと動いているパーツです。
ここに一番最初に表示されるように載せています。あたかも一番よく見られている記事のように。
効果はまだわかりませんが期待できる機能だと思います。ちなみにわたしはスマホのときはうっとうしく感じるのでCSSで非表示にしています。
スライダーの設置
スライダーの設置について解説します。
ソースはヘッダー、CSSとHTMLへの埋め込みの3パーツに分かれます。
基本はコピペで済みますので以下に掲載します。
あとは好みでいじってみてください。
ヘッダー部
テンプレートHTMLの上部の「<HEAD>~</HEAD>」の間に記載します。
はてなブログだと、「設定」→「詳細設定」→「headに要素を追加」に追記します。
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.js" defer></script> <script> $(document).ready(function () { // initiates responsive slide gallery var settings = function() { var settings1 = { minSlides: 1, maxSlides: 1, moveSlides: 1, mode: 'horizontal', startSlide: 0, auto:true, captions: true }; var settings2 = { minSlides: 1, //スライダーの最小数を設定 maxSlides: 4, //スライダーの最大数を設定 moveSlides: 1, mode: 'horizontal', //スライダーのスタイル設定。(他にもvartivcal, fade等があります) slideWidth: 172, //スライダーの大きさを設定。お好みで調整してください。 startSlide: 0, slideMargin: 5, auto:true, captions: true, //キャプションの有無 adaptiveHeight: false }; return ($(window).width()<630) ? settings1 : settings2; } var mySlider; function slideSetting() { mySlider.reloadSlider(settings()); } mySlider = $('.slider').bxSlider(settings()); $(window).resize(slideSetting); }); </script>
パラメータで設定がいろいろといじれますが普通はこの設定で問題ありません。
CSS部
CSSに追記します。
はてなブログの場合、「デザイン」→「カスタマイズ」→「カスタマイズCSS」に追記します。
/* スライダー設定 */ .bx-wrapper{margin:0 auto;} .bx-wrapper .bx-caption span{ font-size:12px!important; font-weight:bold; padding:5px!important; line-height: 1.3em; } .slider div {display: none;} .bx-viewport .slider div {display: block !important;}
わたしはスマホでは非表示にしているので以下を追加していますがお好みでどおぞ。
/* スマホでスライダー非表示 */ @media screen and (max-width:680px){ #slider_wrap {display:none;} }
スマホでは非表示にするという記述はバナーや他でも使えるので一つ追加しておくと使える記述です。
ソース部
スライダーを表示させたい部分に以下の記述を追記します。
はてなブログの場合、「デザイン」→「カスタマイズ」→「ヘッダー」に記載するとタイトル下に掲載できるので良いでしょう。
<div id="slider_wrap"> <div class="slider"> <div class="slide-inner"><a href="リンクする記事のURL"><img src="表示する画像のURL" alt="画像にカーソルをあわせたときに表示されるタイトル" title="サムネールに表示するタイトル"></a></div> <div class="slide-inner"><a href="リンクする記事のURL"><img src="表示する画像のURL" alt="画像にカーソルをあわせたときに表示されるタイトル" title="サムネールに表示するタイトル"></a></div> <div class="slide-inner"><a href="リンクする記事のURL"><img src="表示する画像のURL" alt="画像にカーソルをあわせたときに表示されるタイトル" title="サムネールに表示するタイトル"></a></div> <div class="slide-inner"><a href="リンクする記事のURL"><img src="表示する画像のURL" alt="画像にカーソルをあわせたときに表示されるタイトル" title="サムネールに表示するタイトル"></a></div> </div> </div>
掲載に使用する画像は記事で使っている画像とは別に縮小した画像を用意したほうが良いです。
高解像度画像だと読み込みが重たくなりますのでWindows標準グラフィックソフトの「3Dペイント」でよいので縮小イメージを作って画像としてアップロードして使用するのがおすすめです。
わたしははてなブログの固定ページでサムネール画像だけをアップするページを作ってそこに画像を上げています。
リライトも検討する
ブログに来訪してくれたユーザーへ見せたい記事へ誘導するのにスライダーは効果的だと思いますがブログに来訪者を増やすにはどうすればよいのでしょう。
そのためには本文やタイトルのリライトが必要ですね。
今の記事のタイトルは
「CCleanerでパソコンを永遠に軽く保つ方法について。」
としていますが、具体的でいいのですがCCleanerなにそれ?ですし一般的に検索されるワードでは無いような気がします。
そこで例えばシンプルですが「パソコンを軽くして最速にする方法」などであればどうでしょうか?
パソコンを「軽くしたい」とか「最速にしたい」というニーズを叶えるために検索する人は多いのではないかと思います。
オトンは思った
ブログを書いているともっと見てもらいたいということがあってもなかなか難しいものです。
しかしGoogleの検索でもリライトされた記事への評価は高くなるという話もあります。
一度公開してそのままにせず気になった箇所を直したりタイトルを変更してみたりキーワードを見直して記事を育てることもブロガーとしては大事だと思います。
わたしも紹介した記事のページビューが伸びるようにこれからも工夫してみたいと思います。