タグ: カスタマイズ

  • はてなブログのサイドバーをコピペでカスタマイズする方法

    はてなブログのサイドバーをコピペでカスタマイズする方法

    はてなブログのサイドバーって味気がないですよね。

    何と言うか、無機質で面白みがないというか・・・

    ということで、今日はコピペで簡単にできるサイドバーカスタマイズの方法を紹介します。

    サイドバーのカスタマイズ

    下の写真の左側がオリジナルで、右がカスタマイズ後です。(PC版)

    はてなブログ サイドバーカスタマイズ

    スマホ版も同じですが、こんな感じです。

    はてなブログ サイドバーカスタマイズ スマホ

    サイドバーはPCではかなり見られるので、クリックされることが多いのですが、カスタマイズしていないと無機質すぎてクリックする気にもなりませんよね。

    サイドバーのカスタマイズコード

    はっきり言ってかなり簡単なので、1分もかからずに終わると思います。

    はてなブログ サイドバーカスタマイズ

    貼り付け場所は、「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」になります。

    /* サイドバータイトル  */
    .hatena-module-title {
        position: relative;
        color: #00bfff;
        font-size: 120%;
        font-weight: bold;
        margin-bottom: 15px;
        padding: .25em 0 .25em 0;
        font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
        border-bottom: 2px solid #00bfff;
    }

     

    4行目のcolor: #00bfff;(文字色の変更)と、10行目のborder-bottom: 2px solid #00bfff;(下線の色変更)の赤色部分を変更すると、好きな色にできます。

    カラーコードはHTMLカラー大辞典をどうぞ。

    はてなブログ サイドバーカスタマイズ

    10行目のborder-bottom: 2px dotted #00bfff;の赤文字をsolidからdottedに変えると、上のような線になります。

    Profile画像の変更

    上でも紹介したように、プロフィール部分はこのようにしました。(ビーチの写真はただの例です)

    はてなブログ プロフィール画像のカスタマイズ

    これはひと手間あるのですが、オリジナルのプロフィールは結構ダサいので、替えた方がいいかなと思います。

    まずは、管理画面の右上にあるボタンを押し、はてなフォトライフをクリックします。

    はてなブログ プロファイルのカスタマイズ

    次にアップロードを押し、「クリックしてファイルを選択するか~・・・」をクリックして画像をアップロードします。次に、フォルダを編集をクリック。

    はてなブログ プロファイルのカスタマイズ

    「このフォルダの写真を編集」と書いてある画面に今までアップロードした写真などが表示してあると思うので、今アップした写真をクリックし、「ブログに貼り付ける」を押すと、下の画像の様にHTMLタグが出てきます。

    はてなブログ プロファイル画像のカスタマイズ

    このHTMLタグをコピーし、「ダッシュボード」→「デザイン」→「カスタマイズ」→「サイドバー」に行き、「モジュールを追加」→「HTML」に貼り付けます。

    はてなブログ プロファイルのカスタマイズ

    もし「読者になるボタン」が必要な人は、以下の様にしてコードを取得します。

    「ダッシュボード」→「設定」→「詳細設定」に行き、下の方に行くと「読者になるボタン」とそのコードが書かれているのでこれをコピペし、先ほどのHTMLタグの下に貼り付けます。

    はてなブログ プロファイル画像のカスタマイズ

    最後に自己紹介を書いて、それを<p></p>で囲めば完成です。

    私の場合はこんな感じです。

    はてなブログ プロファイルのカスタマイズ

    最後に

    サイドバーはパソコンだと視認率が高いので、ぜひおしゃれにして読者にもっとクリックしてもらいましょう。

    サイドバーのカスタマイズは、私も参考にしたminimal greenのサイトにたくさん載っているので、こちらも参考にしてみて下さい。

  • はてなブログにグローバルメニューをコピペで設置する方法

    はてなブログにグローバルメニューをコピペで設置する方法

    今日は、はてなブログにグローバルメニューを設置しましょう。

    今回はコピペだけと言っても、自分でメニューのカテゴリ名を記入したり、URLを貼ったりするので5分では終わりませんが、初心者の人でも30分あれば終わります。

    ちなみにInnocentではナビゲーションバーと言っていますが、一般的にはグローバルメニュー、グローバルナビと呼ばれることが多いです。

    グローバルメニューとは?

    こう言ったものです。まとめの項目は、子カテゴリをつけています。

    はてなブログ グローバルメニューとは?

    もしくは今見ているブログのグローバルメニューは、見ての通りですがこんな感じです。

    はてなブログ グローバルメニュー カスタマイズ

    スマホはこんな感じで、メニューをタップをしたら展開するタイプです。

    はてなブログ グローバルメニュー カスタマイズ スマホ

    これがある事によって、読者が興味のあるカテゴリに移動しやすいし、どんなブログかが一目でわかるので、読者に便利な機能なんです。

    ちょっと今のブログはわけがあってカテゴリが多いですが、4つくらいがベストです。多くても6つくらいでしょう。

    グローバルメニューのコード

    実はですね、超簡単なんですよグローバルメニューの設置って。

    まずはフッタに以下のjQueryをコピペします。(すでにjQueryがある人は必要なしです!)

    場所は、「ダッシュボード」→「デザイン」→「カスタマイズ」→「フッタ」

    はてなブログ Innocent グローバルメニューの設置方法

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    (function($) {
    $(".menu-toggle").on("click", function() {
    $(".main-navigation").toggleClass("toggled");
    });
    })(jQuery);
    </script>

     

    次に、下記コードをヘッダのタイトル下にコピペします。

    はてなブログ グローバルメニュー カスタマイズ Innocent

    <nav class="main-navigation">
        <div class="menu-toggle">メニュー</div>
        <div class="main-navigation-inner">
            <ul>
                <li><a href="https://example.jp/">TOP</a></li>
                <li><a href="https://example.jp/">カスタマイズ</a></li>
                <li><a href="https://example.jp/">ブログ論</a></li>
                <li><a href="https://example.jp/">収益化</a></li>
                    <li>
                    <a href="https://example.jp" class="has-child">まとめ</a>
                    <ul>
                        <li><a href="https://example.jp">アドセンス</a></li>
                        <li><a href="https://example.jp">アフィリエイト</a>
                    </ul>
                </li>
               </ul>
        </div>
    </nav>

    href=以降のURLは、自分がそれぞれ表示したいURLに変えて下さい。また、TOPやカスタマイズなどの単語もそれぞれ変更して使って下さい。

    子カテゴリを入れる場合は各URLの後に、 class=”has-child” を足してください。

    子カテゴリ無し <a href=”https://example.jp/”>まとめ</a>
    子カテゴリ有り <a href=”https://example.jp” class=”has-child”>まとめ</a>

    classの前にはあえてスペースがあるので消さないように!

    カテゴリを増やしたい場合は、

    <a href=”https://example.jp/”>カテゴリ名</a>

    を追加すればOKです。

    孫カテゴリなんかも入れれますが、あまり階層を増やすのはお勧めしません。シンプル イズ ベストです。

    一応紹介します。こんな感じになります。(孫カテゴリを入れる人は、上記のコードは使わないでこの下のコードのみを使ってください)

    はてなブログ グローバルメニューに孫カテゴリを設置する方法

    <nav class="main-navigation">
        <div class="menu-toggle">メニュー</div>
        <div class="main-navigation-inner">
            <ul>
                <li><a href="https://example.jp/">TOP</a></li>
                <li><a href="https://example.jp/">カスタマイズ</a></li>
                         <li><a href="https://example.jp/">ブログ論</a></li>
                         <li><a href="https://example.jp/">収益化</a></li>
                    <li>
                    <a href="https://example.jp" class="has-child">まとめ</a>
                    <ul>
                        <li><a href="https://example.jp">アドセンス</a></li>
                        <li><a href="https://example.jp"  class="has-child">アフィリエイト</a>
                        <ul>
                <li><a href="https://example.jp">孫カテゴリ1</a></li>
                <li><a href="https://example.jp">孫カテゴリ2</a></li>
            </ul>
                    </ul>
                </li>
               </ul>
        </div>
    </nav>

     

    色の変更

    はてなブログ Innocent グローバルメニューの色を変更する方法

    ちょっと見にくいですね(笑)まぁ、このように好きな色に変更できます。

    はてなブログ 目次カスタマイズ

    デザインCSSに以下のコードをコピペして、background-colorの#の部分を変えると色が変わります。

    .main-navigation,
    .main-navigation ul ul {
        background-color: #ffc0cb;
    }

     

    カラーコードは、原色大辞典からどうぞ。

    中央に寄せる方法

    はてなブログ Innocent グローバルメニューを中央に寄せる方法

    カスタマイズ前は左端に合ったメニューが、真ん中よりになります。こっちの方がすっきりして見やすいですね。

    これもデザインCSSにコピペしてください。

    @media screen and (min-width: 1024px) {
        .main-navigation {
            text-align: center;
        }
    }

    右に寄せたい場合は、centerをrightに変えればOKです。

    最後に

    グローバルメニューの設置は、ユーザビリティも向上し、回遊率の向上などいろいろな効果があり、結局は収益化にも繋がるので必須ですね。

    いつも言っていますが、カスタマイズはほどほどにして記事を書きましょうね。

    <参照はMoonnoteさんでした。ありがとうございました>

  • はてなブログ・目次のカスタマイズ!コピペのみで5分でできるよ

    はてなブログ・目次のカスタマイズ!コピペのみで5分でできるよ

    今日は、はてなブログの目次をカスタマイズしましょう。

    目次があると読者が簡単に記事の概要を把握できるし、必要な個所に移動できるので利便性が上がります。

    と言っても、私はカスタマイズに時間をかけるより記事を書きたいタイプなので、今回も5分もあれば完了するコピペカスタマイズを紹介します。

    目次のカスタマイズ

    私は目次はシンプルなものが見やすいと思うので、本当にシンプルなものを使っています。

    カスタマイズは色々やりすぎてもページの表示速度が落ちるので、シンプル イズ ベストです。

    目次は見出しが目次になるので、まずは見出しを付けます。

    見出しの付け方は、見出しにしたい文を選び、左上にある「見出し」をクリック、大見出し・中見出し・小見出しをクリック

    はてなブログ 見出しの付け方

    選択した文がそれぞれ見出しになります。ちなみに見出しはカスタマイズしていて、コピペで出来るコードは「見出しのカスタマイズ」で紹介しています。

    次に目次は、このボタンを押せば見出しが目次になります。

    はてなブログに目次を付ける方法

    アプリを使って書いている人はこの見出しボタンがないと思うので、その場合は下記のコードを見たまま編集で書きます。

    [:contents]

     

    それでは、目次のカスタマイズです。

    全てのカスタマイズは、「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」の順にクリックしていき、コードをデザインCSSに貼り付けます。

    はてなブログ 見出しカスタマイズ

    まずは何もしていない状態です。

    はてなブログ 見出しカスタマイズ

    ちょっとシンプル過ぎるので、背景をつけてみました。

    はてなブログ 見出しカスタマイズ貼り付けるコードはすっごく簡単です。

    .table-of-contents{
    padding: 20px 10px 20px 40px;
    border-radius: 5px;
    background: #f0ffff;
    }

     

    私は背景の色をうす水色にしましたが、backgroundの#の数字を変えると好みの色に設定できます。色は原色大辞典を参考にどうぞ。

    また、border-radiusの5pxの数値を変えると、枠の丸みの調整ができます。(0pxが丸み無し)

    例)カラー・#fffaf0、border-radius・15px

    はてなブログ 見出しカスタマイズ

    .table-of-contents{
    padding: 20px 10px 20px 40px;
    border-radius: 15px;
    background: #fffaf0;
    }

    例)カラー・#e0ffff、border-radius・15px

    はてなブログ 見出しカスタマイズ

    .table-of-contents{
    padding: 20px 10px 20px 40px;
    border-radius: 15px;
    background: #e0ffff;
    }

     

    次は目次にタイトルを入れ、リンクっぽい見た目を普通にし、下線を消しました。

    はてなブログ・目次のカスタマイズ

    .table-of-contents{
    padding: 20px 10px 20px 40px;
    border-radius: 10px;
    background: #FFFEFC;
    }
    .table-of-contents:before {
      content: "[ INDEX ]";
      text-align: center;
      font-size: 20px !important;
      display: block;
      margin: 3px 0px 14px;
      padding: 3px 14px;
      font-weight: bold;
      color: #24CFE2;
      }
    .table-of-contents a:after {
      display: none !important;
    }
    .table-of-contents a,
    .table-of-contents a:visited {
      color: #000000 !important;
      text-decoration: none;
    }
    .table-of-contents a:hover {
      color: #888888 !important;
    }

     

    • backgroundやcolorと書いてある部分の#以降の文字を変えたら、好きな色に変更できます。
    • ContentのINDEXを好きな文字に変える事も出来ます。
    • visitedのColorの#以降の数字を変えると見出しタイトルの色が変わります
    • hoverのColorの#以降の数字を変えるとカーソルが上に来た時の色が変わります

    次は、上のカスタマイズから、目次の枠の色を変えてみました。

    はてなブログ・目次のカスタマイズ2

    これは先ほどのCSSに border: 1px solid #24CFE2 !important; と追加しただけです。

    .table-of-contents{
    padding: 20px 10px 20px 40px;
    border-radius: 10px;
    border: 1px solid #24CFE2 !important;
    background: #FFFEFC;
    }
    .table-of-contents:before {
      content: "[ INDEX ]";
      text-align: center;
      font-size: 20px !important;
      display: block;
      margin: 3px 0px 14px;
      padding: 3px 14px;
      font-weight: bold;
      color: #24CFE2;
      }
    .table-of-contents a:after {
      display: none !important;
    }
    .table-of-contents a,
    .table-of-contents a:visited {
      color: #000000 !important;
      text-decoration: none;
    }
    .table-of-contents a:hover {
      color: #888888 !important;
    }

     

    次は女性っぽくしてみました。

    はてなブログ・目次のカスタマイズ3

    .table-of-contents{
    padding: 20px 10px 20px 40px;
    border-radius: 0px;
    border: 1px solid #ffb6c1 !important;
    background: #ffecf9;
    }
    .table-of-contents:before {
      content: "[ もくじ ]";
      text-align: center;
      font-size: 20px !important;
      display: block;
      margin: 3px 0px 14px;
      padding: 3px 14px;
      font-weight: bold;
      color: #ff69b4;
      }
    .table-of-contents a:after {
      display: none !important;
    }
    .table-of-contents a,
    .table-of-contents a:visited {
      color: #000000 !important;
      text-decoration: none;
    }
    .table-of-contents a:hover {
      color: #888888 !important;
    }

     

    この様に「もくじ」や「Index」などの文字も変えれるし、色も変える事が出来るので自分に合ったものにカスタマイズしてみて下さい。

    最後に

    ネットを調べたら色々なタイプのカスタマイズが出てきますが、シンプルに目立つものが一番いいと思います。

    あまりこだわりすぎるよりも、コピペで簡単に済ませて新しい記事を書きましょう。

  • はてなブログコピペカスタマイズのまとめ

    はてなブログコピペカスタマイズのまとめ

    私はInnocentを使っているのですが、そのまま使っても結構かっこいいですよね。

    私はあまりカスタマイズに時間を掛けたくない方なので、あまりやっていませんが、それでもちょっとは付け加えたいところがあるんですよね。

    また、アドセンスの広告位置を変えて収益アップを狙ったり・・・

    今日は、私がやってきたカスタマイズのすべてを紹介します。

    はてなブログのカスタマイズ

    はてなブログのカスタマイズ まとめ

    せっかく自分のブログを持っているので、理想のサイトにしたいですよね。

    まぁやりすぎは良くないですが、ある程度はカスタマイズしないとユーザビリティが悪いと、離脱者が多くなるので是非やっておきましょう。

    私はInnocentを使っているので(このブログはWordpressです)そこまで過激にカスタマイズしなくても良かったですが、テーマによっては結構カスタマイズが必要かもしれないですね。

    各種設定が面倒だし、分からないという人は、こちらの「1発コピペで完了!はてなブログInnocentのカスタマイズテンプレート」を使えば2分でサイトをかっこよくできます。

    その他の手作業が必要はカスタマイズは、下記を参考にしてください。

    トップページをカード型にカスタマイズ

    はてなブログのトップページをカード型にする カスタマイズ

    TOPページをカード型にするとちょっとwordpressっぽくなりますよね。こちらトップページをカード型にしてwordpressっぽく見せる方法をどうぞ。

    はてなブログのオリジナルはすっっごくシンプルなので、カード型にした方が見やすいし、wordpressのサイトはほぼ全てこのスタイルなのでおしゃれです。

    ブログタイトルのカスタマイズ

    ブログタイトルのカスタマイズ

    一番重要と言っても過言でないブログのタイトルです。一番初めに読者の目に留まるし、ロゴ的な意味合いもあるので、おしゃれにしたりインパクトがあるものにすると覚えてもらいやすいですね。

    こちら、ブログタイトルのカスタマイズ・コピペで簡単にできる!を参考にどうぞ。

    グローバルメニューのカスタマイズ

    はてなブログ Innocent グローバルメニューを中央に寄せる方法

    グローバルメニューはナビゲーションバーなどと呼ばれることもあります。ページ上部にメニューがあると読者も読みたい記事を探しやすいし、回遊率、滞在時間も増えるので、絶対入れておきたいですね。

    こちらInnocentにグローバルメニューをコピペで設置する方法にほぼコピペで出来る方法を紹介しています。

    変更する点は、リンク先やカテゴリ名を自分にものにするくらいです。

    ヘッダーにおすすめ記事を設置

    はてなブログのヘッダーにおすすめ記事を入れる クリック時の色を変える

    ヘッダーにおすすめ記事を入れるとwordpressっぽいですね。収益化ページなどのキラーページや、特に呼んでほしい記事を入れておくとクリックされやすいです。

    ページ上部にあるので、画像は出来るだけ圧縮した方が読み込み速度も落ちにくくなります。

    はてなブログのヘッダーにおすすめ記事を作ってwordpressの様に見せる方法

    SNSボタンのカスタマイズ

    はてなブログのSNSボタンは重いし目立たないので、カスタマイズする人が多いですね。こちらも簡単にコピペで出来るので、是非設置しておきましょう。

    はてなブログ SNSボタンのカスタマイズ

    はてなブログのSNSボタンをおしゃれにカスタマイズする方法 

    はてなブログ シェアボタンのカスタマイズ カウント付き

    次はカウント付きのボタンです。上で紹介したモノよりも重くなるので、どうしても数字を表示したい人はこちらをやってもいいと思います。

    カウント付きシェアボタンのカスタマイズ

    読了時間を表示するカスタマイズ

    はてなブログに読了時間を表示するカスタマイズ

    個人的に必要だと思いませんが、簡単に設置できるし軽いので入れてもいいかなと思います。一時期多く人が読了時間を表示していましたが、ここ最近はそこまで多くないですね。

    アイキャッチ画像の設定とカスタマイズ

    はてなブログ アイキャッチ画像のカスタマイズ

    Canvaという編集サイトを使います。私は有料プランですが、無料でも全然使えます。有料だとより多くの画像が使えたり、圧縮もできたり、画像のサイズ変更などできるようになります。

    アイキャッチを設定すると、SNSで拡散されやすくなるし、トップページの記事一覧にも画像が表示されるので読者を惹きつけやすいです。

    記事タイトルのカスタマイズ

    はてなブログ 記事タイトルのカスタマイズ6

    記事のタイトルがださい・・・という人は、記事タイトルのカスタマイズを参考にカスタマイズしてみて下さい。テーマによってはデフォルトでも問題ないですが、テーマによってはちょっとカッコ悪い感じですよね。

    上に戻るボタンを設置

    はてなブログ 上に戻るボタン カスタマイズ

    これ、必須ですよね。このボタンがないと上に戻る時スクロールしないといけません。それって、面倒くさいですよね。

    コピペで簡単にできるので、数分で設置できます。

    はてなブログに「上に戻る」ボタンをコピペで簡単に設置する方法 

    目次のカスタマイズ

    はてなブログ・目次のカスタマイズ2

    はてなブログの目次は、良い言い方をしたらシンプルですよね。別の言葉で言うとダサい・・・。いくつかの種類を用意しているので、コピペでやっちゃいましょう。

    見出しのカスタマイズ

    はてなブログ 見出しのカスタマイズ3

    流し読みをする人もいるので、見出しをかっこよくしていたら目に留まりやすく。滞在時間も上がりますね。

    色々な種類の見出しを紹介しているので、コピペしてください。

    リンクを目立たせる

    はてなブログ リンクを枠で囲って目立たせるカスタマイズ

    参考画像は「関連記事」ですが、「あわせて読みたい」など文を自由に変えることが出来ます。もちろん色も変えれます。

    回遊率がアップするので是非導入しましょう。

    サイドバーに画像付きリンクを貼る方法

    はてなブログのサイドバーに画像付きリンクを貼る方法

    サイドバーに画像を貼って、リンクの設定をする方法です。目立たせたい記事を載せたら、PVも上がりますね。

    サイドバーに広告を貼る方法

    はてなブログのサイドバーにバナー広告を貼る方法

    バナー広告やアドセンス広告などをサイドバーに貼り付ける方法です。簡単にできますよ。

    サイドバーの追従カスタマイズ

    任意のサイドバーを追従する方法です。読者がページ下部に行くと、サイドバーって表示されないですよね?これを常に表示させる方法です。

    サイドバーのカスタマイズ

    はてなブログ サイドバーカスタマイズ<左がデフォルトで右がカスタマイズ後です>

    線を入れたり、文字色を変えたりするカスタマイズです。

    プライバシーポリシーをフッターに入れる方法です。

    はてなブログ プライバシーポリシー設置 カスタマイズ

    プライバシーポリシーは必須項目なので。必ずやりましょう。

    吹き出しのカスタマイズ

    はてなブログ 吹き出し形式 会話 吹き出し設定 カスタマイズ

    画像を用意したりとちょっと時間がかかるカスタマイズですが、一度設定したら簡単に吹き出しが使えるようになります。

    吹き出しを使うと読みやすいし、読者もマンガっぽく読めるので滞在時間も上がると思います。

    蛍光マーカーで文字を装飾する

    線の大きさや色も変更できます。一度設定したら次はボタン(クリック)一つで使えるので、わざわざHTML編集で記述する必要はありません。

    表(テーブル)の設定

    はてなブログで表(テーブル)を使う方法

    シンプルなものから色付きまで、いろいろと紹介しています。表は意外に使う機会が多いので、是非設定しておきましょう。

    はてなブログ高速化

    はてなブログは遅いですが、やりようによってはそこそこ早くなります。ページが重いと読者が離脱しやすくなるので、必ず対応しておきましょう。

    カスタムURLの使い方

    はてなブログ カスタムURLの設定方法

    あえて日本語表記でもいいですが、URLは英語で書けたらそれが一番いいですね。グーグル、読者、そして自分が分かりやすいURLにすればSEO的にプラスです。

    ページ内リンク

    ページ上部から下部へ、下部から上部へなどのページの中をクリック一つで移動するカスタマイズです。

    最後に

    今後も記事が増えたら追加していくので、ブックマークにでも入れて時々このページをのぞいてみて下さい。

    はてなブログ収益化方法のまとめも一緒にどうぞ!

    ちなみにCSSやHTMLを学びたい人は、こちらを参考にどうぞ。有名ブロガーもおすすめしている教科書です。

  • はてなブログに「上に戻る」ボタンをコピペで簡単に設置する方法

    はてなブログに「上に戻る」ボタンをコピペで簡単に設置する方法

    ここ最近はてなブログのカスタマイズにはまっているのですが、知識がないと難しいですよね。

    と言うことで、色々なサイトを見て勉強しながらやっているのですが、すごく簡単に「上に戻る」ボタンが設置できたのでご紹介します。

    5分もあれば設置できるので皆さんもやってみて下さい。

    注)この方法を紹介していたブログがもう無いので、参考にしたサイトの紹介ができません

    上に戻るボタンとは?

    はてなブログ カスタマイズ 上に戻るボタン 設置方法

    上のスクショのような矢印で、記事の下の方に行ったときにこの矢印をクリックすると、記事の先頭まで戻るボタンです。

    スマホだとこんな感じです。

    はてなブログ カスタマイズ 上に戻るボタン 設置方法 スマホ

    ちなみに今回のコードが上手く機能しない人は、CSSのコードを上の方にペーストしてみて下さい。

    例えば私の場合は、CSSのコードを300行目に書いたら矢印が左下にあり一番下まで行かないと矢印が見えなかったのですが、50行目に書いたら上の写真の様にちゃんと追随して右下に表示されました。

    上に戻るボタンの設置コード

    はてなブログ 上に戻るボタンのカスタマイズ 設置方法

    まずは以下のコードを「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」に入れます。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

     

    次に、「ダッシュボード」→「デザイン」→「カスタマイズ」→「フッタ」に下記コードを入れます。

    はてなブログ 上に戻るボタンの設置方法 カスタマイズ

    <div id="page-top">
    <a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>
    </div>
    <script>
    $(window).scroll(function(){
    var now = $(window).scrollTop();
    if(now > 500){
    $("#page-top").fadeIn("slow");
    }else{
    $("#page-top").fadeOut("slow");
    }
    });
    $("#move-page-top").click(function(){
    $("html,body").animate({scrollTop:0},"slow");
    });
    </script>

     

    上に戻るボタンのCSS

    最後にフッタの下にあるデザインCSSに、下記のコードを入れます。先ほども言ったように、一番下にコードを入れると他のCSSと競合してうまく作動しない可能性があるので、一番下に入れて上手くいかない場合は、上の方の行に入れてみて下さい。

    /*上に戻る*/
    #page-top {
    display:none;
    position:fixed;
    right:10px;
    bottom:20px;
    margin: 0;
    padding: 0;
    text-align:center;
    }
    #move-page-top{
    color:rgba(246, 135, 116, 1);
    text-decoration:none;
    display:block;
    cursor:pointer;
    }
    #move-page-top:hover{
    color:rgba(0, 0, 0, 6);
    }
    @media only screen and (min-width: 400px){
    #page-top{
    right:50%;
    margin-right: -450px;
    }
    }

     

    上に戻るボタンの色を変える方法

    ボタンの色を変える方法は、上で紹介したCSSのコードの12行目と18行目のrgbaの後ろのカッコの数字を変えます。ちなみに今の設定はピンクと黒です。

    • 12行目の赤のコードは、ボタンが常に見えている時の色
    • 18行目の青のコードは、カーソルがボタンの上にある時の色になります。

    色はこちらのサイトで調べることができます。

    最後に

    この「上に戻るボタン」があると読者の利便性が上がるので、是非設置してみて下さい。

    その他のカスタマイズは、「カスタマイズ」をどうぞ。

  • はてなブログのSNSボタンをおしゃれにカスタマイズする方法

    はてなブログのSNSボタンをおしゃれにカスタマイズする方法

    以前から、はてなブログの純正のSNSボタンが嫌いだったんですよね。

    重いし、かっこ悪し、サイズが違うし・・・

    色々試していたのですが、なかなかうまく動作するものが無く途方に暮れていたのですが、やっとこれだ!ってカスタマイズを見つけたので紹介しますね。

    ちなみにコピペで簡単にできるので、3分もあれば完了します。

    カスタマイズに当たって

    私の様にコピペでブログのカスタマイズをしている人は、1点だけ注意してほしいのですが、カスタマイズしまくると「どれがどのカスタマイズか忘れてしまう」ので、必ずPC上のメモに「参考にしたURL・何のカスタマイズか・どこに張り付けたか」を記録しておきましょうね。

    またCSSに記述する時、他のカスタマイズと競合してうまく表示されない可能性があります。

    その時は、CSSにコピペするものを上の方に入れてみて下さい。

    下のスクショは私がカスタマイズした時の物ですが、CSSの402行目に書いたときはボタンが小さく、色も黒だったのですが、CSSの9行目に書いたら下の画像の様にちゃんと表示されました。

    もしうまく表示されない場合は、CSSの上の行に入れてみて下さい。

    カスタマイズのコツ はてなブログ

    SNSボタンカスタマイズ

    今回参考にさてもらったのは、いつもお世話になっているSHIROMAGさんからです。

    まずは、「設定」→「詳細設定」→「headに要素を追加」に下記コードを入れます。

    はてなブログ SNSボタンのカスタマイズ

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    このコードがすでにある人は、入れなくてOKです。

    次は、ダッシュボードの「デザイン」→「カスタマイズ」から、記事の上にボタンを設置したい場合は「記事上」に。記事の下に設置したい場合は「記事下」に下記のコードを入れてください。

    両方に入れたい場合は、「記事上」と「記事下」に。

    はてなブログ SNSボタンのカスタマイズ

    <!-- ここからシェアボタン -->
    <div class="share-btn-type2">
      <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加" class="share-btn__item share-btn__item--hatebu" target="_blank"><i class="blogicon-bookmark lg"></i></a>
      <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share-btn__item share-btn__item--facebook" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"><i class="fa fa-facebook-square lg"></i></a>
      <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share-btn__item share-btn__item--twitter" target="_blank"><i class="blogicon-twitter lg"></i></a>
      <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share-btn__item share-btn__item--pocket" target="_blank"><i class="fa fa-get-pocket"></i></a>
    </div>
    <!-- シェアボタンここまで -->

    最後に「デザインCSS」に以下のコードを入れます。

    /**
    * シェアボタンここから
    */
    .share-btn-type2 {
    margin: 1.2em 0;
    display: flex;
    justify-content: space-between;
    }
    .share-btn-type2 .share-btn__item {
    width: 24%;
    height: 40px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    transition: all .3s;
    }
    .share-btn-type2 .share-btn__item--hatebu {
    background-color: #00A4DE;
    box-shadow: 0 4px #038ebf;
    }
    .share-btn-type2 .share-btn__item--facebook {
    background-color: #1778F2;
    box-shadow: 0 4px #1366ce;
    }
    .share-btn-type2 .share-btn__item--twitter {
    background-color: #1BA1F3;
    box-shadow: 0 4px #1280c3;
    }
    .share-btn-type2 .share-btn__item--pocket {
    background-color: #EF4155;
    box-shadow: 0 4px #c3293b;
    }
    .share-btn-type2 .share-btn__item:hover {
    transform: translateY(4px);
    box-shadow: 0 0 #333;
    }
    /**
    * シェアボタンここまで
    */

    先ほども言ったように、他のカスタマイズと競合してうまく表示されない場合は、CSSの上の方に入れてみて下さい。

    レスポンシブにしていない人向け

    ほとんどの人のブログはレスポンシブと思いますが、レスポンシブを使っていない人はスマホ用に追加のコードを入れます。

    「スマホ」→「記事上」もしくは「記事下」。もしくは両方に下記のコードを入れます。

    はてなブログ SNSボタンのカスタマイズ スマホ用

    <style>
    <!-- ここからシェアボタン -->
    <div class="share-btn-type1">
    <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加" class="share-btn__item share-btn__item--hatebu" target="_blank"><i class="blogicon-bookmark lg"></i></a>
    <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share-btn__item share-btn__item--facebook" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"><i class="fa fa-facebook-square lg"></i></a>
    <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share-btn__item share-btn__item--twitter" target="_blank"><i class="blogicon-twitter lg"></i></a>
    <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share-btn__item share-btn__item--pocket" target="_blank"><i class="fa fa-get-pocket"></i></a>
    </div>
    <!-- シェアボタンここまで -->
    </style>

    これは先ほどのパソコン用とほぼ同じなのですが、styleタグで囲っています。

    最後に

    パソコンの表示はこんな感じです。

    はてなブログ SNSボタンのカスタマイズ

    スマホはこんな感じです。

    はてなブログ SNSボタンのカスタマイズ

    これでみなさんも、上のスクショのようなボタンが設置されたと思います。

    見た目がWordpressっぽくなってかっこいいですよね。

    これで読者もシェアだったりはてぶしやすくなるので、ページビューも上がりそうですよね。

    その他のカスタマイズは、「カスタマイズ」をどうぞ。

  • はてなブログでLazy Loadを使う方法!コピペで簡単に使える!

    はてなブログでLazy Loadを使う方法!コピペで簡単に使える!

    以前からはてなブログで、画像遅延読み込みするLazy Loadの導入を考えていて、不具合が多かったのでやってなかったのですが、久しぶりにやってみたらほぼ誤作動なく動いたので、皆さんにも紹介しようと思います。

    ちなみに私のサイトは、Innocentですが他のテーマでも動くと思います。

    画像遅延読み込みとは?

    画像遅延読み込みとは、その名の通り画像の読み込みを遅らせるものになります。

    読者が記事をクリックし、ページが表示されたときに全部の画像を一気に読み込むとページの表示速度が落ちます。

    なので、目視できない部分にある画像を読み込むのを遅らせるによって、ページの表示速度を上げるんです。

    ページの表示速度が上がるのは、SEO的にも良いですよ。

    私は今はWordpressを使っているのですが、Lazy Loadを使っていない人はいないと思います。みんな使っていますね。

    注意点

    Lazy Loadを使うにあたって4点ほど注意点があります。

    1. グーグルクローラーが画像を認識しない(可能性があり)
    2. 見たまま編集では画像が表示されない
    3. 手作業が必要
    4. 遅延されていない画像が時々ある

    1 Lazy Loadを使うとグーグルクローラーが画像を認識しないらしいので、画像検索から流入がある人はよく検討してから導入するかしないか決めてください。

    なぜ「らしい」と言ったかと言うと、WordpressのLazy Loadはクロールに認識されているので、はてなでもされるんじゃないかな?って思っています。

    ただしalt属性を入れたら不具合になるので、どちらにしても画像検索から流入が無い人向けになります。

    2 見たまま編集では画像が表示されなくなりますが、プレビューでは表示されているので、そちらで確認してください。

    3 下で説明していますが、記事内の画像のHTMLを手作業で変えるので、ちょっと面倒です。

    4 先ほど「ほぼ不具合が無い」と言ったのですが、「ほぼ」とは、時々遅延読み込みされない画像があるんです。

    理由は分かりません。

    Lazy LoadのCSS

    まずはこちらのテストサイトをどうぞ。最後の写真は2MBの写真ですが、サイトが重くならずに表示されています。

    参考にしたサイトは、PhotogLifeさんです。

    Lazy Loadのコードの貼り付け場所は、「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「フッタ」です。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
    <script>
    $('.lazy').lazyload({
    effect : 'fadeIn',
    threshold :200
    });
    </script>

     

    ちなみに、jqueryを入れてない人は、下記のコードをフッタの一番最初に張り付けておいてください。でないと動作しないです。

    <script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>

    これで準備は終わったので、さっそくやってみましょう。

    画像のコードを変える

    まず、はてなブログに画像をアップロードし、HTML編集で見たら、画像のコードはこんな感じになっています。

    <img src=”https://cdn-ak.f.st-hatena.com/images/fotolife/n/your name/20200121/20200121061709.jpg” alt=”f:id:your name:20200121061709j:plain” title=”f:id:your name:20200121061709j:plain” class=”hatena-fotolife” itemprop=”image” />

    で、必要な部分は赤文字の部分です。

    赤文字の部分を下のコードにコピペし、HTML編集で下記コードを貼り付ければ完成です。

    <img class=”hatena-fotolife lazy” data-original=”赤文字部分を貼る“>

    この例で言えば、こんな感じになります。

    <img class=”hatena-fotolife lazy” data-original=”https://cdn-ak.f.st-hatena.com/images/fotolife/n/your name/20200121/20200121061709.jpg“>

    最後に

    皆さんは画像をアップロードするときに、リサイズと圧縮をしていると思うので、万が一画像が遅延されなくても大丈夫かと思います。

    リサイズ?圧縮?って人は、「画像を圧縮して読み込み速度を上げる方法」を参考にどうぞ。

    もし100KB以上の画像を記事に使うなら、記事を投稿後にグーグルのPagespeed Insightで読み込みが遅延になっているか確認してみて下さい。

    その他のカスタマイズは、「カスタマイズ」をどうぞ。

  • アドセンスのクリック率を2%まで上げたたった3つの方法

    アドセンスのクリック率を2%まで上げたたった3つの方法

    以前関連コンテンツが使える条件で紹介したように、CTRの改善に取り組んでいました。

    色々対策を練って2ヶ月が経ったのですが、2019年5月の直近7日間のCTRは1,61%、28日間は1,38%と、徐々に成果が出ています。

    追記)2020年1月現在はもっと上がり、このようになっています。

    <CTRなどの統計を開示してはいけないので、画像は削除しました>

    追記2)2020年3月現在はもうちょっと上がりました。左から7日間・28日間・3か月のCTRです

    <CTRなどの統計を開示してはいけないので、画像は削除しました>

    2020年7月追記)上のスクショと期間が反対ですが、左から3か月・28日間・7日間のデータです。過去3か月でも2.2%超えです!

    <CTRなどの統計を開示してはいけないので、画像は削除しました>

    この期間はページビューが1/4になったのですが、これはブログに多くのカテゴリーがあったため、PVが多くても収益が少ないカテゴリを新たなサイトに移動したためです。

    実は重要なんですよね。カテゴリーを絞るって。

    2020年8月24日追記)過去3か月で見るとCTRは上がっていますが、28日間と7日のCTRは若干下がりました。ただしページインプレッションは上がり、1PV・0.8円~1円ほどです。

    <CTRなどの統計を開示してはいけないので、画像は削除しました>

    特に難しいことはしなかったので、皆さんもすぐに実践できると思ったので紹介します。クリック率が悪くて収益に悩みがある方は、是非試してみて下さい。

    CTRとページCTRの違い

    CTRとはClick Through Rateと言い、1つ当たりの広告に対するクリック率です。
    ページCTRとは、ページビューあたりのクリック率。1PV1クリックなら100%、10PV1クリックなら10%、100PV1クリックなら1%です。

    CTRとCPCを上げる

    CPC(クリック単価)を上げる方法は、金融系の記事を書くことですね。お金にまつわることを書けば、CPCは勝手に上がっていきます。

    と言われていますが、あんまり関係ないと思います。まぁクレカやFX系の記事を書けばたまには1クリック1000円、2000円行きますが、かなり頑張らないといけません。

    ある程度のジャンルの選定は必要ですが、基本的に好きなことを書けばいいと思います

    だって好きなこと書かないと、長続きしないですもんね。

    ブログは続けないと稼げないです。

    鉄則ですね。

    CTRに関しては後述しますが、ブログによってはリンク広告も収益が上がります。

    このブログには設置していないですが、ほかのブログでアドセンスのディスプレイ広告で必要な公告が全然でないので、リンク広告を記事上に設置しました。

    例えば、法律関係や税理士の広告が欲しいブログなのに、そういった広告があまりないのでリンク広告をつけたんです。

    それからは5倍近い収益が発生しています。

    なので皆さんのブログもシークレットモードで確認し、適切な公告が出ているか確認しましょう。

    もしかして適切な公告が出ていないから、クリックされないのかもしれませんよ。

    後、アドセンスは広告のジャンルごとにブロックしたりできるのですが、基本扱わないほうがいいです。

    というのも、アドセンスの広告は広告料を多く払っているところの広告が選ばれて、私たちのブログに表示されるので、競争率が落ちると広告単価も落ちてCPC(クリック単価)が下がります。

    とは言っても、私は楽天やFacebookなどの広告は除外しています。(アドセンスでいらない広告をブロックする方法を参考に)

    それではCTRを上げる方法を紹介します。

    CTRを上げる方法

    <CTRなどの統計を開示してはいけないので、画像は削除しました>
    <直近7日間のCTRと28日間のCTR>

    CTRの改善で試したことは、シンプルに以下の事だけです。

    1. 関連コンテンツの導入
    2. 自動広告を試す
    3. 広告の配置

    「だけ」と言っても、結構時間はかかったのですが・・・。

    関連コンテンツの導入

    関連コンテンツ アドセンス

    規約違反にならないようにぼかしが入ってて見にくいですが、関連コンテンツとは上の画像のようなもので、自分のブログからの関連記事と、関連しそうな広告が表示されるものです。

    通常は記事下に表示されるように設定する人が多いですが、好きな場所に設置できます。

    こちら「関連コンテンツが使える条件・はてなブログの設定」でも紹介したのでざっくり言いますが、ある程度の記事数やPV(ページビュー)数があって初めて使えるようになります。

    私はこの関連コンテンツの導入当初、おかげでCTRが0.85%から1.1%くらいに上がりました。

    関連コンテンツが使える人は、絶対に導入するべきです。

    ちなみに、皆さんはブログの記事下に関連記事を表示していると思うのですが、私は関連コンテンツを使いだして関連記事の表示を止めました。

    というのも、関連コンテンツは関連記事と広告を混ぜて表示するので、関連記事を表示してしまうとダブルで出てしまうからです。(関連コンテンツの関連記事は精度が良くないですが・・・)

    また、関連記事有りと無しでCTRや滞在時間などチェックしたのですが、関連記事を表示しない方が数値が良かったためです。

    自動広告を試す

    2019年までは精度が悪くお荷物的な広告だったのですが、2020年頭くらいから精度も良くなり、広告数やどこに表示するかなど細かに設定できるようになったので、今は使っています。

    設定方法は簡単なので、是非やってみて下さい。

    まずは、アドセンスの管理画面から広告をクリックし、下に登録しているURLが出てくるので、その右端にあるペンマークをクリックします。

    アドセンスの7自動広告の設定方法

    すると画面が切り替わって以下の画面に行き、PC版とモバイル版の広告の表示具合が見れます。 トップページだけじゃなく、どのページでも確認できます。

    私の場合は、アンカー広告とディスプレイ広告が入ってますね。アドセンスの自動広告の設定方法

    必要ない個所に広告が表示されていたら、横にあるゴミ箱マークをクリックで広告を削除できます。ただし、反映には24時間ほどかかります。

    右端にある設定は、こんな感じです。

    アドセンスの自動広告の設定方法

    • 自動広告はON(じゃないとこれを使う意味がないので)
    • 既存の広告ユニットを最適化しますか?・・・ONにすると、すでにアドセンスのリンクを自動・手動で表示している場合、最適化されるので、任意の場所に広告が出ない可能性有
    • ページ内広告・・・ON(じゃないとこれ使う意味がないので)
    • 関連コンテンツ・・・あるなら絶対ON
    • 6個のエリアが~・・・ブログの先頭に広告が出たりしたし、ここはいらないという個所を削除したので表示があります
    • アンカー・・・スマホ向けですが、私はアンカーにサイドバーなど設置していないのでこれをONにしています。すでにアンカーに何か設置している人は、アンカー広告があると画面が小さくなるので、注意を
    • モバイル全画面・・・私は嫌いなのでOFF
    • 広告数の管理・・・多いか少ないかで設定できます。少なめがいいかなと思います。
    • ページ除外・・・広告を出したくないページがあればここから設定できます

    広告の配置換え

    私の中では、コレが一番重要だったと思います。と同時に、一番時間がかかりました。

    私は「目次下」「記事下」に広告を配置していたのですが、セオリーでは「目次上」「3番目の見出しの上」「記事下」が良いと言われているので、全記事この様に配置換えをしました。

    2~3週間ほど様子を見たのですが、ある記事はCTRが上がり、ある記事は下がったりと、記事によって有効か、有効じゃないかと効果は違ったんです。

    ここで重要な事に気が付きました。

    記事によって広告の位置やスタイルを変えなくちゃいけない、という事を。

    私の場合はですが、記事中に広告を入れてCTRが上がったものは、10記事ないくらいです。3000文字以上の記事でも5000文字以上の記事でも、記事中に広告がないものがほとんどです。(2020年7月現在、自動広告をメインに使っているので、いろんなところに広告が出ているはずです)

    たぶん「ウザい」んでしょうね。記事中に広告があると・・・。

    記事中の広告は、最後まで読まれずに途中離脱が多いサイトの場合は、記事中に広告を入れてもいいと思いますが、私は平均滞在時間も長いし、記事下の視認率も高いので入れない方がクリック率が高かったと思います。

    私の基本設定・設置場所は以下の様にしています。

    • ディスプレイ広告・・・目次上もしくは目次下 /  全ての記事に設置

    音楽関係の記事は目次上にリンク広告、目次下に通常の広告2つ置いているものもありますが、基本は1つです。

    広告のHTMLの中にdata-ad-format=”auto”とあるのですが、これを変えることによって、広告の形を変える事が出来ます。

    1. 横長・・・horizontal
    2. 全幅サイズのレスポンシブ広告・・・true

    これはグーグルに認められている改変なので、使って大丈夫です。(ここで見れます)

    また、<data-ad-format=”rectangle“>とすることによって、レクタングル(長方形)の広告のみが出るようになります。

    先人曰く「レクタングルの方が大きいため収益が高い」らしいのですが、私の場合はあまり関係なかったように見えました。

    • 記事下 / レクタングル300×250 /  全ての記事に設置

    記事下には広告を2つ並べて表示しています。

    はてなブログでアドセンスの広告を2列表示する方法!

    4 トップページに広告 / レクタングルのみ

    はてなブログ・トップページにアドセンスのインフィード広告を入れて収益アップする方法

    5 関連コンテンツの導入

    「関連コンテンツが使える条件・はてなブログの設定」

    広告の配置換え方法

    <CTRなどの統計を開示してはいけないので、画像は削除しました>

    私は3月中旬にCTRの改善を始め、およそ2ヶ月で3倍のクリック率、1年後には9倍近くになりました。

    このクリック率はアドセンスの管理画面で見るクリック率とは違うものになります。

    • アドセンスのCTR・・・1ページ当たりのクリック率
    • アナリティクスのCTR・・・広告表示回数に対するクリック率

    例えば1ページに5個の広告があったとして、100回広告が表示されて(20ページ表示)クリック率が1%だったら、

    • アドセンスのCTRは5%
    • アナリティクスのCTRは1%

    になります。(単純計算で紹介していますが、実際はもうちょっと複雑です)

    なので、アナリティスクのCTRは平均0.1~0.3%と言われています。

    私は平均が1.5%くらいなので、かなりのトップクラスにクリックされています。

    では、広告配置換えの手順を紹介します。

    CTRの改善はアクセスの多い記事からやった方が合理的なので、以下の様を準備します。

    アナリティクスのページを3つ用意します。

    1つ目はアクセス数確認用で、<行動>→<サイトコンテンツ>→<全てのページ>で過去3ヶ月分のデータを表示します。

    2つ目はクリック率確認用で、<行動>→<サイト運営者>→<サイト運営者のページ>で過去3ヶ月分のデータを表示します。

    3つ目もクリック率確認用で、<行動>→<サイト運営者>→<サイト運営者のページ>で過去1ヵ月分(もしくは3週間)のデータを表示します。

    でアクセスが多い記事をチェックし

    で該当記事のサイト運営者のクリック率をチェック

    で直近のサイト運営者のクリック率をチェック

    通常はサイト運営者のクリック率が0,1以上ならOKと言われていますが、私は平均以下の記事の配置を変えています。(私のサイトのクリック率の6か月の平均は1.48です)

    <CTRなどの統計を開示してはいけないので、画像は削除しました>

    まずはアクセスが多い記事TOP10の広告の配置を見直し、それからCTRが低いページを改善していきましょう。

    ただ、こればっかりはやってみないと分からないのですが、配置を変えたら下がることもあるし、上がることもあります。色々試してやってみるしか方法はありません。

    参考までに私がやった事を紹介します。

    1. 目次上の広告を目次下に移動
    2. 通常広告をリンク広告にしてみる
    3. 思い切って広告を減らす
    4. 思い切って広告を増やす
    5. 自動広告を使ってみる
    6. 3番目の見出し上にある広告を2番目の見出し上に移動
    7. 見出し上の広告をなくす(記事中広告削除)

    最後に

    グーグルアドセンスのクリック率を上げる方法

    私の場合は、自動広告の恩恵を結構受けているのですが、こればっかりはサイトによるので試すしかないです。

    関連コンテンツが使えない人は、設置できるように記事を量産して行きましょう!

    PVを上げるのは大変ですが、クリック率は広告の場所を変えるだけで劇的に変わることもあるので、CTRが低いな~って方は、是非どうぞ。

    1記事づつチェックしてやるので時間はかかりますが、やる価値は絶対にありますので。

    先ほども言いましたが、上がることもあれば下がることもあるので自己責任でお願いします。

  • プライバシーポリシーのひな形とはてなブログのフッターにいれる方法

    プライバシーポリシーのひな形とはてなブログのフッターにいれる方法

    みなさんは、ブログにプライバシーポリシーや免責事項を書いたページを作っていますか?

    作ってない?

    今すぐにやっておきましょう。コピペできるひな形を作ったので、是非今から取り掛かってください。10分ほどで終わりますので。

    なぜこれが必要かって?

    トラブルを起こさないためです。

    なぜプライバシーポリシーや免責事項が必要なのか?

    私たちは常に正確な情報を提供するように努めていますよね。

    でも、中には勘違いだったり、タイプミスで違った意味になったりすることだってあります。

    あなたの読者が記事を見て、「あ~そうなんだ」と思ってやってみたけど、記事に書いてある様な結果が出なかったり、最悪のケースで事故が起こったりと何があるか分かりません。

    そのため、免責事項を表記することで、何かあったときのプロテクションになります。

    また、グーグルアドセンス等の第三者配信広告を利用している人は、ルールとして「クッキーを使って広告を配信している」こと等を明記しないと規約違反になりますので、プライバシーポリシーは必要なんです。(全てのアフィリエイト会社が義務付けているわけではないので、使っている会社の規約を読んで、確認してください)

    詳しくはこちらをどうぞ。

    必須コンテンツ – AdSense ヘルプ

    また、グーグルアナリティクスや、お問い合わせメールを使っていると、個人情報を取得することになるので、個人情報の取り扱いの方針を明記しないといけないんですね。

    ブロガーも色々と大変ですね。

    プライバシーポリシーと免責事項のひな形

    私が記載しているものを紹介しますので、コピペして使って頂いてもOKですが、必要な部分は書き換えて下さい。ページのURLも分かりやすいように、www.OOO.com/privacy-policyで大丈夫です。

    ちなみに記事はフッターにつけるのが一般的らしいので、私はフッターに載せました。

    注)書き換えが必要かもしれない箇所を赤文字にしています。

    プライバシーポリシーと免責事項

    個人情報の利用目的

    当ブログでは、お問い合わせ等、場合によってはお名前、メールアドレスを頂いております。

    これらの個人情報は、メールで質問に回答する場合のみ利用させていただきますので、それ以外の目的では使用いたしません。

    個人情報の第三者への開示

    当サイトでは個人情報を適切に管理し、以下に該当する場合を除いて、第三者に情報を開示することはございません。

    ●本人の了解がある

    ●法令などへの協力のために、開示が必要な場合

    第三者配信の広告サービスとクッキー(Cookie)

    当サイトでは、第三者配信の広告サービスである「グーグルアドセンス」「A8.net」、「アマゾン」などを利用し、第三者配信事業者や広告ネットワークの配信する広告が掲載されます。

    グーグルアドセンス等の第三者配信の広告サービスでは、Cookieを利用することで、ユーザーが当サイトに訪れた情報や過去他のサイトに訪れた情報に基づき、適切な広告を表示します

    グーグルアドセンスのCookieを利用した広告を無効にする方法についてはこちらの広告設定をご参照ください、もしくはhttp://optout.aboutads.infoにアクセスすれば、パーソナライズ広告に使われる第三者配信事業者の Cookie を無効にできます。

    Amazonアソシエイト・プログラム

    当サイトは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

    使用しているアクセス解析ツール 

    当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用していて、このトラフィックデータは匿名で収集されており、個人を特定するものではありません。

    この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。

    免責事項

    当サイトに掲載されている情報の正確さについて可能な限り努力をしていますが、その正確性や適切性に問題がある場合、告知無しに情報を変更・削除する事があります。

    当ブログの情報を用いて行う一切の行為、被った損害・損失に対しては、一切の責任を負いかねますので、ご了承ください。

    はてなブログのフッターにプライバシーポリシーを入れる方法

    コピペでOKの方法です。完成はこんな感じになりますが、背景と文字色は、お好きな色に変更できますので。

    はてなブログ プライバシーポリシー設置 カスタマイズ プライバシーポリシーをフッタに入れる

    まずは、デザイン→カスタマイズ→フッタに以下のコードを入れます。赤文字の部分は、自分のものに変えて下さいね。

    <div id=”copyright”>Copyright ©あなたのブログ名 All rights reserved.<p><a href=”https://www.あなたのブログのURL.com/privacy-policy“>プライバシーポリシー </a></p></div>

    次に、デザインCSSに以下を入れます。

    /*コピーライト*/
    #copyright {
    padding: 20px;
    text-align: center;
    background: #33DDEE;/*背景色*/
    font-size: 14px;
    color:#ffffff;/*文字の色*/
    }

    はてなブログ プライバシーポリシー設置 カスタマイズ

    • フッターの大きさは、paddingの20pxを10pxに変えたら細くなるし、50pxにしたら太くなります。お好きな大きさを選んでください。
    • 背景色と文字の色は好きなものに変えれるので、https://www.colordic.org/で色を探してください。
    • font-sizeも20pxにしたら大きくなるし、10にしたら小さくなります。これも、お好きな大きさを選んでください。

    注)このカスタマイズを教えてくれた方、ありがとうございます。どのページか分からなくなったので、紹介できませんでした。

    最後に

    私はほぼアドセンスのみの広告ですが、アマゾンとA8ネットにも登録しているので、いつか使うときの為に一緒に記載しました。

    大切な個人情報の事なので、「知らなかった」では済まないことも出てくるので、今すぐプライバシーポリシーを書いておきましょう。