投稿者: レビューライター

  • はてなブログにカウント付きシェアボタンを設置するカスタマイズ

    はてなブログにカウント付きシェアボタンを設置するカスタマイズ

    以前「はてなブログのSNSボタンをおしゃれにカスタマイズする方法」で下の画像のようなシェアボタンのカスタマイズを紹介したのですが、今回はカウント付きの物を紹介します。

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

    カウント付きとは、いくつシェアされたかが分かるようにするもので、読み込み速度が遅くなるので私は使いませんが、欲しいという方もいると思います。

    ↓こんな感じのものですね。(スマホ表示ではカウントなしです)

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

    ●カスタマイズをやりすぎると表示速度が落ちるので、気を付けて下さい!
    ●このカスタマイズが上手くいかない時は、他のカスタマイズと競合している可能性があるので、デザインCSSに貼るコピペを上の方に貼ってみて下さい。

    コピペカスタマイズ

    注)基本的にはてなブログProを使っている方を対象にした記事なので、無料版での動作確認はしておりません。

    この機会にProの利用を検討される人は、はてなブログPro登録からどうぞ

    色々なブログを参考にしたのですが、一番簡単だったのがminimal-greenさんの物でした。

    まずはFontawesomeを「headに要素を追加」にコピペします。場所は「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」です。

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

    次に記事上か記事下、もしくは両方に以下をコピペします。「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「記事上・記事下」

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

    最後にデザインCSSに以下をコピペしたら、終了です。(テーマMinimal greenとStripeを使っている人は必要ないです!)

    私はレスポンシブのテーマなので、レスポンシブにしていない人は、minimal greendデモブログを参照にどうぞ。

    最後に

    最初にも言ったように表示速度に影響があるのであまりお勧めじゃないですが、必要な方は是非導入してみて下さい。

    カスタマイズ後はPagespeed Insightでスピードチェックも忘れずに。

    表示速度が遅い場合は、以下の記事を参考にどうぞ。

    その他のカスタマイズはこちらをどうぞ。

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

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

    はてなブログのトップページってWordpressっぽくできないのかな~?って探していたら、結構簡単にそれっぽくできるんですね。

    いわゆるカード型の表示です。こんなやつです↓

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

    なんかこれだけで、かなり格好良くなりますよね。

    通常のトップページは、こんな感じです。

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

    まぁ、好みもあるので何とも言えないですが、カード型の方がおしゃれなのでいいかなって思います。

    基本的にはてなブログProを使っている方を対象にした記事なので、無料版での動作確認はしておりません。

    この機会にProの利用を検討される人は、はてなブログPro登録からどうぞ

    カスタマイズ

    私はInnocentを使っているのですが、参考にしたのはminimal-greenのデモブログです。また、これはPCのトップページのみがカード型になり、スマホは通常表示です。

    最初の設定ですが、トップページの記事数は10くらいにした方がいいです。

    表示記事が多すぎると速度が遅くなるし、少なすぎると読者がいちいちクリックして新しいページを読み込まないといけないので、ユーザビリティが悪くなりますね。

    設定方法は、「設定」→「詳細設定」→「トップページの表示形式」で一覧形式を選び、トップページの記事数で任意の数字を選びます。

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

    次に下記のコードをデザインCSSにコピペします。

    /* トップページカード型 */
    @media (min-width: 768px){
    .page-index .archive-entries {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    }
     
    .page-index .archive-entry {
    margin-bottom: 20px!important;
    padding-bottom: 20px;
    box-sizing: border-box;
    width: calc(50% - 20px);
    }
     
    .page-index .entry-thumb {
    float:none;
    display: block;
    width: 100%;
    height: 200px;
    background-position: center center;
    background-size: cover;
    border-radius: 8px;
    }
    .entry-thumb-link:hover {
    opacity:0.7;
    }
    }

    本文の抜粋文が無い方がいい人は下記のコードをCSSに追加したらOKですが、なぜかスマホの方でも本文が無くなるので、使わない方がいいですね。

    .page-index .entry-description{
      display:none;
    }

    これで終了です。

    最後に

    だいぶブログがwordpressっぽくなってきました。(笑)

    まぁ、私はメインでwordpressを使っているのですが(このブログもそうです)、はてなブログでも全然かっこよくなりますよね。

    他にもコピペで出来るカスタマイズを紹介しているので、是非やってみて下さい。

  • はてなブログ・コピペで1分!蛍光マーカーで文字を装飾・強調するカスタマイズ

    はてなブログ・コピペで1分!蛍光マーカーで文字を装飾・強調するカスタマイズ

    wordpressって、こう言う文字を強調するアンダーラインを使っている人が多いですよね。(って私も今はWordpressも使っていますが・・・)

    これかっこいいですよね。

    はてなブログでも簡単にできるって知ってました?

    今回もコピペでOK・1分でできるので是非やってみて下さい。

    文字を蛍光ペンで装飾する方法

    参考にしたのはNorthgeekさんの記事ですが、私のブログじゃ使えなかったのでちょっとカスタマイズして紹介します。

    この蛍光ペンは、ctr+Bもしくは左上のB(太字)の時に反応します。なので、今後太文字で強調する場合は蛍光ペン付きになります。

    はてなブログ 蛍光マーカーで文字を強調するカスタマイズ

    コードはこれだけです。

    .entry-content strong{
    background: -webkit-linear-gradient(transparent 60%, #ffff00 60%)!important;
    background: -o-linear-gradient(transparent 60%, #ffff00 60%)!important;
    background: linear-gradient(transparent 60%, #ffff00 60%)!important;
    }

    これを「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「デザインCSS」に貼り付けます。

    文字を蛍光ペンで装飾する方法

    以上です!(笑)

    もし反映しない場合は、上の方にコピペしてみて下さい。
    例)200行目→100行目

    っていうのは冗談で(というか実際にこれだけなんですが・・・)、色の変更と線の幅を好きなサイズに変更しましょう。

    2,3,4行目にある#の英数字を変えたら色が変わります。

    例)

    • #ffff00 黄色
    • #ff0000 赤
    • #0000ff 青

    色は原色大辞典より探せます。

    また、60%とある数字を変えると、線の幅が変わります。

    • 0%→太い
    • 99%→細い(100%だと線が見えなくなります)

    使い方は、蛍光ペンを使いたい個所を選んで、左上のBを押すか、ctr+Bで使えます。

    はてなブログ 蛍光ペンで文字を装飾するカスタマイズ

    見たまま編集の画面だと変化が無いのですが、プレビューを見るとちゃんと変わっているはずです。

    このまま終わったら短すぎるので、もう一つ追加してみました(笑)。

    先ほどはBの時に蛍光ペンが使えるものですが、次は i(斜体)の時に違う色の蛍光ペンを用意しておけば、2種類のペンを使い分けて強調できます。

    はてなブログ 蛍光ペンで文字を装飾するカスタマイズ

    先ほどと同じように指定の文字を選んで、i を押せばそれでOKです。

    プレビューで見たらこんな感じになります。

    .entry-content em{
    	background: -webkit-linear-gradient(transparent 60%, #00ff7f 60%)!important;
    	background: -o-linear-gradient(transparent 60%, #00ff7f 60%)!important;
    	background: linear-gradient(transparent 60%, #00ff7f 60%)!important;
    }

    ほんとに1分くらいで設定終わったでしょ?

    注)基本的にはてなブログProを使っている方を対象にした記事なので、無料版での動作確認はしておりません。

    この機会にProの利用を検討される人は、はてなブログPro登録からどうぞ

    その他のカスタマイズ

    他にもこんなカスタマイズや、高速化についても書いているので、参考にどうぞ。

    その他すべてのカスタマイズはこちらをどうぞ。

    はてなブログのカスタマイズ集(すべてコピペでOK)と収益化方法などのまとめ

  • はてなブログのヘッダーに画像の設定とカスタマイズ

    はてなブログのヘッダーに画像の設定とカスタマイズ

    はてなブログのヘッダーに画像を入れてオリジナリティーを出したい人って多いと思うので、簡単にできる方法を紹介します。

    結構幅が合わなかったり、スマホだと大きくなったりして面倒だったのですが、その点もコピペで対処できるように紹介します。

    ヘッダーに画像を入れる

    画像を入れると言っても、写真などは極力入れない方がいいです。だって表示速度が遅くなるので、グーグルに嫌われるからです。

    仮に画像のサイズが70KBであっても表示速度の足を引っ張るので、止めた方がいいです。高速化に関しては、「今すぐできるはてなブログの高速化・9つの方法」を参考にどうぞ。

    写真をアップしたい人は、次の項でやり方を紹介していますが、まずは一般的で一番表示速度に影響しにくい画像を作成し設定する方法を紹介します。

    今日はサンプルに、こんな画像を2分で作ってみました。

    はてなブログ ヘッダーに画像を入れる方法 はてなブログ ヘッダーに画像を入れる方法

    分かってますよ。かっこよくないって・・・。

    これは今回の記事のために作っただけで、私は普段は画像を使っていません。(笑)

    使ったのはCanvaというサイトで、以前「アイキャッチ画像の設定方法とカスタマイズ方法」という記事で使い方を紹介しました。

    使いやすいサイトで、いちいち使い方を習わなくても直感で分かるサイトですので是非使ってみて下さい。

    今回はヘッダー用の画像なので、1000px X 200pxで作ってくださいね。

    Canavaの使い方

    Canvaに行き、「デザイン作成」をクリックし、カスタムサイズを選択して幅・高さを1000X200にします。

    Canvaの使い方

    まずは何も書かれてない白のキャンバスが出てきます。

    このキャンバスをクリックすると左上に虹色の四角が出てくるので、それをクリックし、任意の色を選びます。私は青を選びました。

    次に左側にある「素材」をクリックすると、いろいろなアイコンや画像が使えるので、好きなものを使います(有料アイコンあり)。私はレンチを使いました。

    レンチをクリックすると左上に四角で今の色が表示されるので、またこの四角をクリックし、好きな色に変えます。

    次に、もう一つのレンチを反転させます。アイコンをクリックしたら左上に「反転」と出てくるので、水平に反転。ついでに色も替えました。

    次は「テキスト」→「見出しを追加」を選び、自分のブログのタイトルを書きます。

    最後にBLOGの文字を斜めにしたのですが、文字を書いたら曲がった矢印が出てくるので、これをクリックしたままタッチパッドを左右に動かすと、角度を変えることが出来ます。

    最後に画面右上の下矢印を押し、ファイルをPNGかJPGに選び、ダウンロードしたら完成です。

    オリジナルヘッダー画像の作り方 はてなブログにヘッダー画像を入れる方法

    慣れていないと時間がかかるかもしれませんが、Canvaはアイキャッチ画像にテキストを入れるため毎回使うので、覚えていたほうがいいです。

    ヘッダー背景の色と画像の色を合わせておけば、横幅が変わっても画像が途切れることがありません。

    アイキャッチ画像にテキストを入れたらこんな感じになり、読者も記事をクリックしやすくなりますよ。

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

    ちなみに今回の画像は圧縮した後は10KBだったので、表示速度にはちょっとしか影響しないと思います。

    はてなブログにヘッダー画像を入れる方法

    ここからが本題ですが、ヘッダー画像・写真のアップ方法を紹介します。

    まずは「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「ヘッダー」に行き、「ファイルを選択」から今作った画像、もしくは任意の写真をアップします。

    はてなブログ ヘッダーに画像を入れる方法

    これでOKのはずなのですが、レスポンシブなのにモバイルで見た時がこんな感じなんです。

    はてなブログ ヘッダーに画像を入れる方法 モバイル サイズ設定

    なぜ?レスポンシブなのになんでこんなにはみ出しているんでしょう?

    と言うことで、これをCSSで収まるようにします。場所は「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「デザインCSS」に貼ります。

    @media (max-width:480px) {
    .header-image-only #blog-title {
    height: 60px;
    }
    .header-image-only #blog-title #blog-title-inner {
    background-size: cover;
    height: 70px;
    }
    }

    これで完成です。

    はてなブログ ヘッダーに画像を入れる方法

    はてなブログ ヘッダーに画像を入れる方法

    ヘッダー画像を横幅いっぱいに表示する方法

    ヘッダー画像を写真でアップすると、PC表示がこんな感じになります。

    はてなブログ ヘッダー画像に写真を使う時の幅を調整するカスタマイズ

    これはやばいので、やり方を変えてカスタマイズしてこんな感じにします。

    はてなブログ ヘッダー画像に写真を使う時の幅を調整するカスタマイズ

    幅は横いっぱいに広がるのですが、その分大きめの画像と画質が良いものをアップしないといけないので、個人的にはお勧めしません。

    かなり圧縮しても70~100KBくらいあると思いますが、これは記事を開いたときに最初の方に読み込まれるので、完全にグーグルの推奨事項から外れてますね。

    しかもかなり圧縮する=画質が悪くなる、です。画質がいいものを使いたい=重い=表示速度が遅くなり、ユーザビリティが悪くなる=離脱率が多くなる=PVが減る、です。

    まぁ、それでもしたいという人はいると思うので、簡単に紹介します。

    この場合は、先ほど設定した「ヘッダタイトル画像の画像を外す」のを忘れないように。

    1. はてなフォトライフに幅2000px以上・高さ300pxくらいで画像をアップ
    2. 画像のURLを取得する

    ヘッダー画像を横幅いっぱいに表示する方法ヘッダー画像を横幅いっぱいに表示する方法

    最後に下記CSSを「デザインCSS」に貼り付ければOKです。(2行目の背景画像URLに、今取得したURLを貼り付けて下さい)

    #blog-title {
    background-image: url("背景画像URL");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    text-align: center;/* 中央寄せ */
    height: 300px;/* 表示したい画像の高さ */
    margin: 0;
    padding: 0;
    top: 0;
    width: 100%;/* 幅100%に */
    overflow-x: hidden;
    }
    #title,#title a {
    -webkit-text-shadow: 0 1px 2px #000;
    text-shadow: 0 1px 2px #000;
    color: #fff;/* タイトル名の文字の色 */
    margin: 0;
    padding-top: 120px;/* タイトル名の上からの位置 */
    text-align: center;/* タイトル名中央寄せ */
    }
    #blog-description {
    color: #fff;/* 説明文の文字色 */
    -webkit-text-shadow: 0 1px 2px #000;
    text-shadow: 0 1px 2px #000;
    }

    <参考・minimal greenさん

    最後に

    ヘッダーはブログの顔なので、ぜひオリジナルなものを作って他のブログとの差別化を図りましょう。

    その他のカスタマイズは、「はてなブログのカスタマイズ集(すべてコピペでOK)と収益化方法などのまとめ」で紹介しているので是非読んでみて下さい。

  • はてなブログ>記事を更新してもPVが上がらない人必見の対処法

    はてなブログ>記事を更新してもPVが上がらない人必見の対処法

    ブログって簡単なようで難しいですよね。

    やみくもに更新すればページビューが上がるわけでもないし、しっかり書いているつもりでもPVは上がらないし・・・。

    私も1番最初のブログは、試行錯誤の繰り返しでした。

    まぁ、最初のブログが2009年に始めたアメブロなので、ブログの存在を知っている人もあまりいませんでしたしね。

    そこから一時期辞めていたのですが、その後はてなブログに乗り換え、今はwordpressで4つのブログを運営しており、今現在合計で30万PV/月くらいです。

    今回は裏技も一緒に紹介するので、絶対にPVを上げたい!って人はやってみて下さい。

    PVが上がる要因

    PVが上がる要因 ブログ

    まず大前提ですが、PVが上がるサイトというのは以下の事を書いています。

    • 人の役に立つこと
    • 他人が興味があること

    人の役に立つは言い換えれば、役に立たないブログは誰も読みませんよね。

    他人が興味がある事は例えば、Google TrendsやTwitterを調べたら、今何が話題になっているかすぐに分かりますよね。(トレンドブログの場合)

    上記2点を書いているサイト以外で、月10万PV以上は難しいですね。

    私は無理です。

    PVが上がらない原因

    PVが上がらない要因 ブログ

    次にこれをお伝えしないといけませんが、PVが上がらない原因は以下になります。(今回は話がそれるので、SEOの事には触れていません)

    1. 日記ブログを運営
    2. 自分の専門分野を書いていない
    3. 更新頻度が少ない
    4. レッドオーシャンに飛び込んでいる
    5. ターゲットが明確になっていない
    6. ターゲットの人口が少ない
    7. SNSを有効活用していない

    一つずつ項目を紹介します。

    日記ブログを運営している

    時間がある時にコンサルをしているのですが、日記ブログを書いていて、「PVが上がらない」って言う人が結構いるのですが、すみませんが誰もあなたの日記なんて興味がないです。

    芸能人でもない限り、あなたが朝ごはん何を食べたかや、今日一日やったことなんて誰も気にしないですよね。

    日記をやめて、人の役に立つ記事を書きましょう。

    専門分野を書いていない

    今やっているブログって、本業が関係ありますか?

    例えば職業が、整体師、機械の修理工、SE、看護士など何でもいいですが、専門知識が必要な仕事をしている人って多いと思うのですが、なんでその分野の記事を書かないのでしょう?

    自分がやっている仕事=その道のプロなんで、自分の知識を活かしたブログを書きましょう。

    プロが書く記事は権威性もあるし、私たちじゃ絶対に知らないことも多く知っているはずなので、人のためのなりますよ。(=PVが上がりますよ)

    更新頻度が少ない

    私は複数のブログを運営しているので、1週間で最低20記事書いています。

    多い日は1日4記事くらい書きます。

    さて、あなたは1週間に何記事投稿していますか?

    2記事?3記事?

    副業でやっている人は、1日1記事書くというのはかなり大変だと思いますが、毎日更新すればある程度はPVが上がっていきますよ。

    1つのブログに対して、最低でも週に3~4記事は必要です。月間15記事アップしていたらそこそこ伸びますよ。

    レッドオーシャンに飛び込んでいる

    レッドオーシャン、競争が激しいジャンルですね。

    色々ありますが、クレカや転職、iPhoneなんか競争が激しいですよね。

    競争が激しいジャンルをドメインパワーのない初心者ブログが書いても、上位検索はほぼ不可能です。

    だって相手はアフィリエイターですよ。

    命を懸けてそのジャンルの記事を書いているプロに勝つのは、容易ではないですよね。

    また、自分が今から書くブログのタイトルで検索した時に、上位表示されているサイトは企業のサイトですか?ブログですか?

    これも同じで、企業のサイトだったらまず勝ち目はないですよね。

    例えば、「IKEA ベッド」を題にした記事を書こうとしているとします。

    「IKEA」と検索したら当然ですが、IKEAが出てきます。では、「IKEA ベッド」と細分化したら、IKEAや楽天などの企業サイトが上位表示されますよね。

    では、「IKEA ベッド おすすめ」ではどうですか?個人サイトが表示されますね。

    こう言う風に読者を細分化して狙っていけば、レッドオーシャンでも読まれる可能性が上がりますね。

    ターゲットが明確になっていない

    今のブログのターゲットはどこになっていますか?

    学生?社会人?男性?女性?30代?60代?電車好き?ブロガー?

    前項で話した細分化と似ているのですが、ターゲットを明確にすれば読者も付きやすく、PVも上がりやすいです。

    ブログにいろいろなカテゴリーを作りすぎてませんか?

    ターゲットを絞ってみましょう。

    ターゲットを絞ることによって、記事も書きやすくなりますよ。

    ターゲットの人口が少ない

    前項で話したようにターゲットを絞ったとします。

    そのターゲットが仮に、「タイガーオトシン」だとします。(笑)熱帯魚です。

    月間の平均検索数は100~1000です。(Googleのキーワードプランナーを使うとある程度の検索数を調べることができます)

    極端な例ですが、ターゲットの人口が多いものを選びましょう。

    とは言っても、マニアックなジャンルを攻めて、そこを総どりするってやり方もありますね。

    SNSを活用してない

    私はどちらかというと自然検索を重視しているので、あまり気にしていませんが、SNSと連携をしてPVを上げることも重要です。

    同じジャンルの事をつぶやいている人と繋がれば、同じことに興味を持った人に直接アプローチできるので、クリック率も上がりますよね。

    ただ単にフォローワーを増やすんじゃなく、ここでもターゲットを絞って狙っていきましょう。

    PVを上げるためにする事

    PVを上げるためにする事

    裏技と言うわけじゃないですが、知らない人もいると思うのでいくつか紹介していきます。

    被リンクをもらう方法

    被リンクって知ってますか?

    他のブログやウェブサイトが自分のブログ(URL)を紹介すると、被リンクが付きます。

    被リンクはSEO上かなり重要で、このリンクが多ければ多いほどドメインパワーも強くなる傾向にあります。

    ただし、ドメインパワー1の人から被リンクをもらっても、あまり効果はないですよ。

    ドメインパワー90とかの人に、自分のブログを紹介してもらえたら最高なんです。

    でもこれって、自分でできますよ。

    Blog Rankingや、ブログ村パワーランキングに登録したら自分の記事が表示されるので、これも被リンクと同じなんです。

    これはパワーランキングに登録している私のブログですが、一応63位で掲載されています。

    はてなブログでPVを上げる方法 被リンクをもらう

    ブログ村などは事を見かけた人がクリックするかもしれないので、PVアップにもなります。

    あとは、はてなブックマーク。記事投稿したら、自分ではてなブックマークをしましょうね。

    はてなブックマークは、3ブックマーク以上で新着に表示され、10ブックマーク以上で被リンクが付きます。でも、自分でガンガンブックマークしちゃっても大丈夫ですよ。

    自己クリックしても1ブックマークなので被リンクはもらえないですが、自分のページのSNSボタンから読者がクリックするかもしれないので、やってて損はないですね。(SEO的に良くないという人もいます)

    これ↓は私のサイトの被リンクのランキングですが、上位30-40個は全部はてなからです。

    はてなブログからの被リンク

    はてなブログは度面パワーが高いので、使わない手はないですね。

    自分の被リンクを調べるなら、Moz linkがおすすめですよ。どんなURLでも詳細を調べることができるので、ライバルの分析にも役に立ちます。

    需要のない記事をno indexにする

    ブログを始めたばかりの人は使わない方がいいですが、ある程度ブログ運営をしていて記事もリライト済みだけど全然読まれずに打つ手がない、となったらno indexにしましょう。

    No indexにすることによって、グーグル検索に表示されなくなります。

    ということは、ブログ全体の評価を下げている質の悪い記事がインデックスされないので、ブログ全体の評価が上がる(可能性がある)と言うものです。

    すぐに何でもNo indexにするんじゃなく、以下の手順でもダメならNo indexにした方がいいです。

    1. 文章のリライト
    2. 見出しの変更
    3. タイトルの変更

    私は何度もリライトをして、タイトルも変えたけどPVが増えないものはno indexにしています。

    今確認したら、約400記事あるサイトで30記事ほどno indexでした。(ダメ過ぎて削除した記事もいくつかあり)

    せっかく書いた記事をNo indexしたくない気持ちは分かりますが、低評価の記事があればサイト自体が低評価になりやすいので、思い切ってやってみて下さい。

    また、初心者ブロガーにありがちな「収益報告」の記事。典型的な人の役に立たない記事です。

    あれってツイッター経由以外から読まれる事あるんでしょうか?2日後、3日後、1週間後にも読まれてますか?

    あんなに意味のない記事はないと私は思っているので、やったことが無いですが、もしそんな記事を投稿していたら、迷わずノーインデックスですね。

    今後も収益報告をしたいなら、1週間後もしくは1か月後とかにノーインデックスにした方がいいですね。

    ただし、ノーインデックスしたらグーグルに1記事とカウントされないので、結局は記事を書いていないことと同じです。

    労力の無駄になる記事は、書かないようにしましょう。

    こちらブログのリライト方法を実例画像付きで紹介で詳しいリライトの方法を紹介しているので、ご一緒にどうぞ。

    内部リンクを付ける

    ブログ初心者って、内部リンクがない人が多いですね。

    内部リンクとは、記事に以前書いた記事のリンクを載せて他のページに誘導するものです。

    例えばIKEAのベッドの記事を書いているとして、以前テーブルの記事も書いていたら、この記事を今書いている記事で紹介します。

    よくこんな↓の見るでしょ?

    こんな感じで関連記事を紹介している人、多いですよね。

    ただし内部リンクを貼るものは、あなたが読んでほしい記事じゃなく、読者が読んだら為になるであろう記事だけですよ。

    関連ないものを載せてもクリックされにくいので、意味がないです。

    タイトルをSEO的に考える

    タイトルはいろいろと言うことが多いのですが、一番大事なのは、

    • 分かりやすいタイトル
    • 27文字以内
    • キーワードを極力左詰めにする

    です。

    • 悪い例・「どんな家庭にも合うおしゃれなIKEAのテーブル」
    • 良い例・「IKEAのテーブルおすすめ5選・洋間や和室にも合うタイプ!」

    上の例のキーワードは、「IKEA」「テーブル」なので、これらの重要キーワードは必ず左側に詰めましょう。

    最後に

    突き詰めていけばまだまだ色々な修正箇所があるかもしれませんが、まずは上記の事を試してみて下さい。

    必ず成果が出ますから!

    また、テーマによってはSEO対策が不十分だったり、スピードが遅かったりするので、テーマを変えることも1つですね。

    「使ったからおすすめするwordpress有料テーマ8選」も一緒に読んでみて下さい。

  • はてなブログProにするか迷ってる人必見のメリット・デメリット

    はてなブログProにするか迷ってる人必見のメリット・デメリット

    はてなブログProにするか迷っていますか?

    私もはてなの無料版でブログを始めて、迷いに迷った挙句、1か月後にProにしました。

    なぜかと言うと、無料版だと出来ないことが多すぎてカスタマイズに時間が取られたり、その当時のアドセンスは無料ブログはダメだったので、他の広告会社を使ったりして時間を無駄にしたからです。

    また、「はてなブログ 無料 収益化」なんて検索しまくってましたね(笑)。

    はてなProにする利点はいろいろありますが、一番の理由は収益化がしやすいからです。

    はてなブログProのデメリット

    まずは皆さんが知りたいであろうデメリットから紹介したいのですが、あまりないですね・・・。

    あえて言うなら、ここでしょうか?

    1. お金がかかる(年間8000円くらい)
    2. 自動更新なのでちゃんと解約しないと料金が引き落としされる

    2番目は実際に私に起こったことなのですが、解約したらすぐに解約になると勘違いしていて、先延ばしにしていたら期限が過ぎてまた1年分支払っちゃいました。

    なので今も別ブログで使っています。(笑)

    はてなブログProの費用

    はてなブログProの料金説明

    料金自体はそれほど高くないです。

    1ヶ月コースを選ぶとちょっと割高ですが、1年コースなら約700円/月、2年コースなら600円/月です。

    外食した時にドリンクを1杯減らせば、それで1ヶ月分のコストは賄えますね。

    もしも「ブログ続かないかもな~」って言う人なら、毎月更新の1ヶ月コースにすればいつ辞めても大丈夫です。

    私も始めた時は「続かないだろうな~」って思っていましたが、今ではどっぷりのめり込んでいます(笑)。

    だって収益が出ているからです。

    収益が出ないと続かないと思うし、無料版だと99%まともな収益は出にくいので、いづれブログを書くことをやめると思います。

    なのでブログが好き!お金も欲しい!って人はProを検討したほうがいいですね。

    はてなブログ公式ページ

    はてなブログProメリット

    メリットはかなり多いですよ。

    まずは、Proと無料版の違いを見てみましょう。(重要個所は赤文字)

    Pro 無料版
    独自ドメインの設定が可能 X
    はてな側の広告を消す X
    キーワードリンクを消せる X
    固定ページを作る X
    カスタマイズ
    写真のアップロード 3GB/月 300MB/月
    記事の履歴 過去50記事保存 過去5記事保存
    ブログ作成数 10個までブログ開設 3個までブログ開設
    ブログ管理を複数人できる X
    AMP対応 X

    一番大きな違いは、はてなの広告を消して、自分の広告を入れれることです。

    だって、ブログやっているのって好きだからって言うのもありますけど、お金も大事ですよね。

    2020年現在、無料版でもアドセンスに受かったって人も見ますが、でもはてなの広告が収益が上がる場所を占めているので、ほとんどはてなに持って行かれますもんね。

    なので本気で収益を上げたい人は、Proにした方がいいです。

    それでは項目ごとに見ていきましょう。

    はてなブログProに登録する

    独自ドメインの設定が出来る

    独自ドメインは、ブログの顔であり、ブログの住所ですね。

    無料版はhatenablogと付いたはてなのサブドメインで運用しているので、他人の家の軒先で営業しているようなものです。

    一国一城の主になるなら、自分の城を持っておいた方が泊も付くし、本気でやっているブログだって読者も分かるかもしれないです。

    また、自分のドメインを持っているって言うのも、なんかかっこいいですし。(笑)

    先ほども少し言いましたが、無料版でも広告を出せるようになりましたが、Proじゃないと審査に通りにくいのは変わっていません。

    アドセンスなしでブログの収益を上げようと思ったら、結構大変ですよ。

    独自ドメインの設定は「お名前ドットコムの設定方法とはてなブログProの独自ドメインの選び方」を参考にどうぞ。

    はてな側の広告を消せる

    無料版は、サイドバーや記事下などにはてなブログの広告が出ますが、邪魔ですよね(笑)

    サイトは重くなるのに自分の収益はつかないし・・・。そんなことなら自分の収益になる広告を貼りたいですよね。

    収益化を考えていない人でも無駄な広告があって読み込み速度が遅くなるし、ブログで1万円稼ごう!って考えている人は、ただでさえ大変なのに、無料版じゃもっと大変ですよ。

    キーワードリンクを消せる

    キーワードリンクは、嫌がらせのために付けているとしか思えない機能ですね(笑)。

    なんでこんなことをするんでしょうね?

    キーワードリンクとは、記事中の単語などの意味が調べられるようにリンクが張って合って、読者がその単語をクリックしたら別ページに飛びます。

    って、別ページに行っちゃダメでしょ、はてなブログ・・・。

    固定ページを作れる

    無くてもそこまで困るものではないですが、一般的なブロガーは全員使っています。

    固定ページには、プロフィールやプライバシーポリシーのページを作ったりするときに使います。

    トップページを固定ページにして、カスタマイズする人もいますよ。自分色を出すためですね。

    カスタマイズできる

    無料版は限られた場所しかカスタマイズできないのですが、Proになると多くの部分のカスタマイズが可能です。

    無料版のブログは、素っ気ないデザインですよね。

    当然テーマをダウンロードできるので少しはオリジナルのブログにできますが、テーマを変えてもカスタマイズしないと同じく素っ気ないですよね。

    色々なカスタマイズが出来ますが、コピペ1発で結構おしゃれなブログに変身できます。参考までに、こちらのコピペカスタマイズ記事を見てみて下さい。

    写真のアップロード

    無料版は300MB/月で、Proは3GB/月ですが、月に100記事更新しても300MBも行かないのであまり関係ありませんが、容量が多いに越したことはないですね。

    記事の履歴

    うっかり記事を消してしまったときに役に立つ機能です。

    無料版は5記事まで履歴が保存されますが、有料版は50記事です。

    ここまでうっかりすることは無いでしょうけど・・・

    ブログ作成数

    Proにしたらカスタマイズを結構すると思うのですが、カスタマイズをする時はテストサイトを作って、そちらで試して上手く行けばメインに適用するというやり方をします。

    なので、ブログが複数作れたら助かりますね。

    ブログの管理者

    チームでブログ運営をする時に役に立ちます。

    例えばサークルで運営するブログなどで、記事を書く人が複数いたらこの機能は役に立ちます。

    AMP化対応

    使わないと思いますが、簡単に言うと、スマホ表示の時に簡素化したサイトを表示して読み込み速度を上げる機能です。

    管理も面倒だし、不具合も多かったので私はすぐに止めました・・・

    2020年10月追記)ここ最近ははてなのAMPページをちょこちょこ見かけるようになりました。ただし、文字の羅列だけ、改行無し、20年前のテキストベースのウェブサイトみたいに見えます・・・。

    最後に

    先ほども言いましたが、「ブログ、続かないかも・・・」って人は1ヶ月コースを選べばダメージは少ないですが、ちょっと割高になります。

    でもProにしたらもっと真剣にブログに取り組むし、責任感も出てくるし、収益も上がりやすいのでブログを副業としてやる人はProにしてみて下さい。

    ブログって、「稼げる=辞めない」、「辞める=稼げない」ですよ!

    はてなブログProに登録する

  • カエレバの使い方や設定方法を画像・リンク付きで紹介

    カエレバの使い方や設定方法を画像・リンク付きで紹介

    アマゾンや楽天の商品をブログで紹介するときは、Rinkerかカエレバを使う人がほとんどですよね。

    個人的にはRinkerの方が簡単にリンクを作れるのでお勧めですが、wordpress専用なので、はてなブログなどの他のブログを使っている人は、カエレバが一番よいですね。(Rinkerの設定方法はこちらからどうぞ)

    それではカエレバを使うにあたって、アマゾンともしもアフィリエイト、バリューコマースは必須なので登録をしてください。

    各ASPに登録したら、バリューコマースでYahooショッピングの提携を、もしもアフィリエイトで楽天市場と提携をしてください。

    なぜもしもで楽天の提携をするかと言うと、楽天は報酬をポイントで払うのでうまみがないためです。どうせなら現金でほしいですよね。(3か月連続で5000ポイント(5万円の報酬)超え、審査に受かれば現金で支払われます)

    なので、もしもアフィリエイトから楽天の提携をした方がお得なんです。

    カエレバの設定方法

    設定は簡単なので、5分もあれば登録できます。

    必要なものは以下になります。

    1. ブログ名の記載
    2. アマゾンのIDをここから取得しコピペ
    3. 楽天用にもしもアフィリエイトのIDをコピペ(IDの調べ方はここをクリック)
    4. Yahooショッピング用にバリューコマースのsid pidをコピペ(調べ方はここをクリック)
    5. 7netをもしもアフィリエイトで使うなら、先ほど調べたIDをコピペ

    カエレバ 使い方 カエレバ 使い方 設定方法

    保存を押したら、完了です。

    カエレバの使い方

    次に、カエレバで任意の商品を検索します。(例はNIKEを検索)

    カエレバ 使い方 設定方法

    下にスクロールダウンして、気に入った商品があれば「ブログパーツを作る」をクリック。

    カエレバ 使い方 設定方法

    ブログパーツ生成方法です。

    デザインを「amazlet風-2(cssカスタマイズ用)」に変更し、その他は特に触らなくてOKです。(画像のサイズを変えたい場合は、「画像小・中・大を選ぶ)

    カエレバ 使い方 設定方法

    リンクを表示したいものすべて、チェックを入れます。

    カエレバ 使い方 設定方法 最後に、表示されたコードをコピーして記事に貼り付けたら完了です。って、アレ?かっこ悪いですね・・・

    カエレバ 使い方 そうなんです。カエレバはカスタマイズしないとこういった味気のないリンクが表示されるので、カスタマイズは必須なんです。

    カエレバのカスタマイズ

    はてなブログ向けですが、カスタマイズ後はこんな感じになります。

    カエレバ 使い方

    カスタマイズのコードはかなり長いですが、一応私が使っているものを紹介するので、下のボックスをクリックしてコードを確認してみて下さい。ちなみに結構昔に設定したもので、どのブログを参考にしたか分かりません。

    これはカエレバやヨメレバ、トマレバなどの総合カスタマイズです。

    [ac-box01 title=”はてなブログ カエレバカスタマイズコード”]

    <style>
    .cstmreba {
    	width:98%;
    	height:auto;
    	margin:36px auto;
    	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
    	line-height: 1.5;
    	word-wrap: break-word;
    	box-sizing: border-box;
    	display: block;
    }
    /* WordPressで自動挿入されるPタグの余白を対処 */
    .cstmreba p {
    	margin: 0;
    	padding: 0;
    }
    .cstmreba a {
    	transition: 0.8s ;
    	color:#285EFF; /* テキストリンクカラー */
    }
    .cstmreba a:hover {
    	color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
    }
    .cstmreba .booklink-box,
    .cstmreba .kaerebalink-box,
    .cstmreba .tomarebalink-box {
    	width: 100%;
    	background-color: #fafafa; /* 全体の背景カラー */
    	overflow: hidden;
    	border-radius: 0px;
    	box-sizing: border-box;
    	padding: 12px 8px;
    	box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
    }
    /* サムネイル画像ボックス */
    .cstmreba .booklink-image,
    .cstmreba .kaerebalink-image,
    .cstmreba .tomarebalink-image {
    	width:150px;
    	float:left;
    	margin:0 14px 0 0;
    	text-align: center;
    	background: #fff;
    }
    .cstmreba .booklink-image a,
    .cstmreba .kaerebalink-image a,
    .cstmreba .tomarebalink-image a {
    	width:100%;
    	display:block;
    }
    .cstmreba .booklink-image a img,
    .cstmreba .kaerebalink-image a img,
    .cstmreba .tomarebalink-image a img {
    	margin:0 ;
    	padding: 0;
    	text-align:center;
    	background: #fff;
    }
    .cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
    	overflow:hidden;
    	line-height:170%;
    	color: #333;
    }
    /* infoボックス内リンク下線非表示 */
    .cstmreba .booklink-info a,
    .cstmreba .kaerebalink-info a,
    .cstmreba .tomarebalink-info a {
    	text-decoration: none;
    }
    /* 作品・商品・ホテル名 リンク */
    .cstmreba .booklink-name>a,
    .cstmreba .kaerebalink-name>a,
    .cstmreba .tomarebalink-name>a {
    	border-bottom: 1px solid ;
    	font-size:16px;
    }
    /* powered by */
    .cstmreba .booklink-powered-date,
    .cstmreba .kaerebalink-powered-date,
    .cstmreba .tomarebalink-powered-date {
    	font-size:10px;
    	line-height:150%;
    }
    .cstmreba .booklink-powered-date a,
    .cstmreba .kaerebalink-powered-date a,
    .cstmreba .tomarebalink-powered-date a {
    	color:#333;
    	border-bottom: none ;
    }
    .cstmreba .booklink-powered-date a:hover,
    .cstmreba .kaerebalink-powered-date a:hover,
    .cstmreba .tomarebalink-powered-date a:hover {
    	color:#333;
    	border-bottom: 1px solid #333 ;
    }
    /* 著者・住所 */
    .cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
    	font-size:12px;
    }
    .cstmreba .kaerebalink-link1 div img,.cstmreba .booklink-link2 div img,.cstmreba .tomarebalink-link1 div img {
    	display:none !important;
    }
    .cstmreba .kaerebalink-link1, .cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
    	display: inline-block;
    	width: 100%;
    	margin-top: 5px;
    }
    .cstmreba .booklink-link2>div,
    .cstmreba .kaerebalink-link1>div,
    .cstmreba .tomarebalink-link1>div {
    	float:left;
    	width:24%;
    	min-width:128px;
    	margin:0.5%;
    }
    /***** ボタンデザインここから ******/
    .cstmreba .booklink-link2 a,
    .cstmreba .kaerebalink-link1 a,
    .cstmreba .tomarebalink-link1 a {
    	width: 100%;
    	display: inline-block;
    	text-align: center;
    	box-sizing: border-box;
    	margin: 1px 0;
    	padding:3% 0.5%;
    	border-radius: 8px;
    	font-size: 13px;
    	font-weight: bold;
    	line-height: 180%;
    	color: #fff;
    	box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26);
    }
    /* トマレバ */
    .cstmreba .tomarebalink-link1 .shoplinkrakuten a {background: #76ae25; border: 2px solid #76ae25; }/* 楽天トラベル */
    .cstmreba .tomarebalink-link1 .shoplinkjalan a { background: #ff7a15; border: 2px solid #ff7a15;}/* じゃらん */
    .cstmreba .tomarebalink-link1 .shoplinkjtb a { background: #c81528; border: 2px solid #c81528;}/* JTB */
    .cstmreba .tomarebalink-link1 .shoplinkknt a { background: #0b499d; border: 2px solid #0b499d;}/* KNT */
    .cstmreba .tomarebalink-link1 .shoplinkikyu a { background: #bf9500; border: 2px solid #bf9500;}/* 一休 */
    .cstmreba .tomarebalink-link1 .shoplinkrurubu a { background: #000066; border: 2px solid #000066;}/* るるぶ */
    .cstmreba .tomarebalink-link1 .shoplinkyahoo a { background: #ff0033; border: 2px solid #ff0033;}/* Yahoo!トラベル */
    .cstmreba .tomarebalink-link1 .shoplinkhis a { background: #004bb0; border: 2px solid #004bb0;}/*** HIS ***/
    /* カエレバ */
    .cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#ff0033; border:2px solid #ff0033; letter-spacing:normal;} /* Yahoo!ショッピング */
    .cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#84be24 ; border: 2px solid #84be24;}	/* ベルメゾン */
    .cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#8d124b; border: 2px solid #8d124b;} /* セシール */
    .cstmreba .kaerebalink-link1 .shoplinkwowma a { background:#ea5404; border: 2px solid #ea5404;} /* Wowma */
    .cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#314995; border: 2px solid #314995;} /* 価格コム */
    /* ヨメレバ */
    .cstmreba .booklink-link2 .shoplinkkindle a { background:#007dcd; border: 2px solid #007dcd;} /* Kindle */
    .cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000;} /* 楽天kobo */
    .cstmreba .booklink-link2  .shoplinkbk1 a { background:#0085cd; border: 2px solid #0085cd;} /* honto */
    .cstmreba .booklink-link2 .shoplinkehon a { background:#2a2c6d; border: 2px solid #2a2c6d;} /* ehon */
    .cstmreba .booklink-link2 .shoplinkkino a { background:#003e92; border: 2px solid #003e92;} /* 紀伊國屋書店 */
    .cstmreba .booklink-link2 .shoplinkebj a { background:#f8485e; border: 2px solid #f8485e;} /* ebookjapan */
    .cstmreba .booklink-link2 .shoplinktoshokan a { background:#333333; border: 2px solid #333333;} /* 図書館 */
    /* カエレバ・ヨメレバ共通 */
    .cstmreba .kaerebalink-link1 .shoplinkamazon a,
    .cstmreba .booklink-link2 .shoplinkamazon a {
    	background:#FF9901;
    	border: 2px solid #ff9901;
    } /* Amazon */
    .cstmreba .kaerebalink-link1 .shoplinkrakuten a,
    .cstmreba .booklink-link2 .shoplinkrakuten a {
    	background: #bf0000;
    	border: 2px solid #bf0000;
    } /* 楽天 */
    .cstmreba .kaerebalink-link1 .shoplinkseven a,
    .cstmreba .booklink-link2 .shoplinkseven a {
    	background:#225496;
    	border: 2px solid #225496;
    } /* 7net */
    /****** ボタンカラー ここまで *****/
    
    /***** ボタンデザイン マウスオーバー時ここから *****/
    .cstmreba .booklink-link2 a:hover,
    .cstmreba .kaerebalink-link1 a:hover,
    .cstmreba .tomarebalink-link1 a:hover {
    	background: #fff;
    }
    /* トマレバ */
    .cstmreba .tomarebalink-link1 .shoplinkrakuten a:hover { color: #76ae25; }/* 楽天トラベル */
    .cstmreba .tomarebalink-link1 .shoplinkjalan a:hover { color: #ff7a15; }/* じゃらん */
    .cstmreba .tomarebalink-link1 .shoplinkjtb a:hover { color: #c81528; }/* JTB */
    .cstmreba .tomarebalink-link1 .shoplinkknt a:hover { color: #0b499d; }/* KNT */
    .cstmreba .tomarebalink-link1 .shoplinkikyu a:hover { color: #bf9500; }/* 一休 */
    .cstmreba .tomarebalink-link1 .shoplinkrurubu a:hover { color: #000066; }/* るるぶ */
    .cstmreba .tomarebalink-link1 .shoplinkyahoo a:hover { color: #ff0033; }/* Yahoo!トラベル */
    .cstmreba .tomarebalink-link1 .shoplinkhis a:hover { color: #004bb0; }/*** HIS ***/
    /* カエレバ */
    .cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover {color:#ff0033;} /* Yahoo!ショッピング */
    .cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { color:#84be24 ; }	/* ベルメゾン */
    .cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { color:#8d124b; } /* セシール */
    .cstmreba .kaerebalink-link1 .shoplinkwowma a:hover { color:#ea5404; } /* Wowma */
    .cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover {color:#314995;} /* 価格コム */
    /* ヨメレバ */
    .cstmreba .booklink-link2 .shoplinkkindle a:hover { color:#007dcd;} /* Kindle */
    .cstmreba .booklink-link2 .shoplinkrakukobo a:hover { color:#bf0000; } /* 楽天kobo */
    .cstmreba .booklink-link2 .shoplinkbk1 a:hover { color:#0085cd; } /* honto */
    .cstmreba .booklink-link2 .shoplinkehon a:hover { color:#2a2c6d; } /* ehon */
    .cstmreba .booklink-link2 .shoplinkkino a:hover { color:#003e92; } /* 紀伊國屋書店 */
    .cstmreba .booklink-link2 .shoplinkebj a:hover { color:#f8485e; } /* ebookjapan */
    .cstmreba .booklink-link2 .shoplinktoshokan a:hover { color:#333333; } /* 図書館 */
    /* カエレバ・ヨメレバ共通 */
    .cstmreba .kaerebalink-link1 .shoplinkamazon a:hover,
    .cstmreba .booklink-link2 .shoplinkamazon a:hover {
    	color:#FF9901; } /* Amazon */
    .cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover,
    .cstmreba .booklink-link2 .shoplinkrakuten a:hover {
    	color: #bf0000; } /* 楽天 */
    .cstmreba .kaerebalink-link1 .shoplinkseven a:hover,
    .cstmreba .booklink-link2 .shoplinkseven a:hover {
    	color:#225496;} /* 7net */
    /***** ボタンデザイン マウスオーバー時ここまで *****/
    .cstmreba .booklink-footer {
    	clear:both;
    }
    
    /*****  解像度768px以下のスタイル *****/
    @media screen and (max-width:768px){
    	.cstmreba .booklink-image,
    	.cstmreba .kaerebalink-image,
    	.cstmreba .tomarebalink-image {
    		width:100%;
    		float:none;
    	}
    	.cstmreba .booklink-link2>div,
    	.cstmreba .kaerebalink-link1>div,
    	.cstmreba .tomarebalink-link1>div {
    		width: 32.33%;
    		margin: 0.5%;
    	}
    	.cstmreba .booklink-info,
    	.cstmreba .kaerebalink-info,
    	.cstmreba .tomarebalink-info {
    	  text-align:center;
    	  padding-bottom: 1px;
    	}
    }
    
    /*****  解像度480px以下のスタイル *****/
    @media screen and (max-width:480px){
    	.cstmreba .booklink-link2>div,
    	.cstmreba .kaerebalink-link1>div,
    	.cstmreba .tomarebalink-link1>div {
    		width: 49%;
    		margin: 0.5%;
    	}

    [/ac-box01]

    設定後は自分でクリックしてみて、ちゃんとリンクが飛ぶか確認してください。

    最後に

    上記コードを使わない人は、カエレバのカスタマイズはオンラインで探せるので、「カエレバ カスタマイズ」で検索してみて下さい。

    もしもアフィリエイトのIDの調べかた

    もしもアフィリエイトに行き、検索窓で楽天市場と検索します。

    もしもアフィリエイトのID調べ方 カエレバ設定方法

    ●楽天市場の商品購入と書いてあるリンクの、広告リンク取得をクリック。

    もしもアフィリエイトのID調べ方 カエレバ

    ●バナー広告のソースの中にある、a_id=1234567の数字部分をコピペして貼り付けます。

    登録方法の説明に戻るには、ここをクリック

    バリューコマースpid sidの調べ方

    既に登録している人は、バリューコマースから「既に登録済みの方」をクリックしログイン、トップページの検索窓からYahoo!ショッピングと検索。必ず「!」を付けて検索してください。

    カエレバ設定方法 バリューコマースの設定

    ●ここで「広告素材を選ぶ」をクリック

    カエレバ設定方法 バリューコマースの設定

    ●画面左の「MyLink」→「再検索」→「広告主のサイトを見る」でURLコピーし、下に貼り付け→「適当な名前を入れる」→「MyLinkコードを取得」をクリック。

    カエレバ設定方法 バリューコマースの設定

    ●コードの中に、sid pidが記載されているので、これをコピペで完了です。

    カエレバ設定方法 バリューコマースの設定登録方法の説明に戻るには、ここをクリック

  • はてなブログにYoutubeの動画を埋め込む方法

    はてなブログにYoutubeの動画を埋め込む方法

    はてなブログに自分がやっているYoutubeチャンネルを載せたり、紹介で他人の動画を載せたいと思った事ありますよね?

    実はすっごく簡単なんですよ。

    今回はササっと動画を埋め込む方法を紹介します。

    Youtube動画をはてなブログに埋め込む方法

    方法が2つあるので、それぞれ紹介します。

    URLをコピペする方法

    1 YoutubeのURLをコピペ

    はてなブログにYoutube動画を貼り付ける方法

    もしくは「共有」ボタンをクリックし、URLをコピペ

    はてなブログにYoutube動画を貼り付ける方法

    2 「見たまま編集」でリンクを貼り付け、そのURLを選び、リンクマークをクリック

    はてなブログにYoutube動画を貼り付ける方法

    3 「プレビュー」をクリックし、「埋め込み」を選び、「選択した形式でリンクを挿入」をクリック

    はてなブログにYoutube動画を貼り付ける方法

    ちなみに緑のカッコの「URLを貼り付けた時にこのウィンドウを開く」にチェックを入れると、次回からリンクを貼り付けただけで形式を選ぶ画面が開きます。

    はてなブログにYoutube動画を貼り付ける方法

    これで完了。見たまま編集でもプレビューでも、Youtubeが表示されます。

    HTMLから埋め込みする方法

    この方法は動画の開始時間が設定できるので、特定の位置から動画を紹介したい場合におすすめです。

    1 「共有」ボタンをクリックし、「埋め込む」を選ぶ

    はてなブログにYoutube動画を貼り付ける方法

    2 右下の「コピー」をクリック

    はてなブログにYoutube動画を貼り付ける方法

    3 HTML編集でコピペ

    はてなブログにYoutube動画を貼り付ける方法

    以上です。

    はてなブログにYoutube動画を貼り付ける方法

    最後に

    以前「はてなブログにyoutubeの曲を使って大丈夫?音楽著作権の話」で紹介したように、はてなブログに音楽の動画をアップするとJASRAC的に著作権の侵害になるので、ルール的には著作権切れのものしかアップできません。(ルール的には)

    広告を一切貼っていないサイトならOKなのですが、無料版を使っていてもはてなブログの広告が出るのでNGです。

    基本的にYoutube上にアップされている動画は拡散OKなので、著作権の問題などは発生しません。ただし、音楽に限ってはJASRACとはてなブログが契約を結んでないので問題が起こる可能性があるのでご注意を。

  • はてなブログ・ボタンリンクの作り方とアフィリエイトリンクでの使い方

    はてなブログ・ボタンリンクの作り方とアフィリエイトリンクでの使い方

    WordPressでは使っている人が多いボタンですが、はてなブログの人は使っていない人が多いですね。

    私も多用はしませんが、アフィリエイトリンクの時は目立たせるようにボタンを使っています。特にスマホで見た時は、大きいので押しやすいですよね。

    こんなやつですね。(正確に言うとこのブログはwordpressなのでちょっと仕様が違いますが、ほぼ一緒です)

    ボタン

    記事に入れる内部リンクはテキストリンクを使うことが多いですが、やっぱりアフィリエイトのリンクは目立たせた方がいいこともあるので、ぜひ使ってみて下さい。

    テキストリンクの効率的な使い方は、「テキストリンクの使い方!これを学べば収益・PVがぐっと上がるよ」を参考にどうぞ。

    ボタンリンクのカスタマイズ

    まずはFont Awesomeをアイコンを使うために、設置します。と思いましたが、Font Awesomeなどの装飾を使うと表示速度が落ちるので、辞めました。(笑)

    CSSだけでやります。

    完成図はこんな感じになります。再生ボタンが見にくいですが、中央あたりにあります。

     

    下のコードを私はフッタで読み込んでいますが、デザインCSSに入れてもOKです。場所「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「フッタ」です。(デザインCSSに入れる場合は、<style></style>を削除してください)

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

     

    <style>
    .button1 a{
    display: block;
    padding: 1em 3em;
    width:50%;
    background: #ffcd44;/*ボタン色*/
    color: #ffffff !important;
    border-bottom: solid 4px #B28F30;
    border-radius: 15px;
    text-decoration: none !important;
    font-size: 120%;
    text-align:center;
    }
    .button1 a:hover {
    background: #ffa500;/*ボタン色*/
    }
    .button1:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
    }
    </style>

    色や形のカスタマイズの方法を紹介しますね。

    今の色は黄色ですが、6行目のbackground: #ffcd44;/*ボタン色*/の#の数字を変えたら色が変わります。カラーコードは原色大辞典で調べることが出来ます。(下は画像です)

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

    次にカーソルが上に来たらオレンジに変わります。この色を変えるのは、14行目の#の数字です。(下は画像です)

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

    クリックしたら下に沈むようになっているので、クリック感が出ますね。

    ちなみに7行目の color: #ffffff !important; の#部分を変えると文字の色が変わり、8行目の border-bottom: solid 4px #B28F30; の#部分を変えたら、ボタン下部の濃ゆくなっている部分の色を変えることが出来ます。

    最後にHTML編集で、以下のコードを使って記入したら完成です。

    <center>
    <p class=”button1″><a href=”リンク先のURL”>ボタン(自由に変更)</a></p>
    </center>

    はてなブログ リンクボタン

    ちなみに、ボタンの文字はお好きな文字に替えて使ってください。(下はスクショです)

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

    もし2つボタンを使うなら、もう一つ同じように準備しておけば楽になりますね。

    はてなブログ リンクボタン カスタマイズ方法

    <style>
    .button2 a{
    display: block;
    padding: 1em 3em;
    width:50%;
    background: #3cb371;/*ボタン色*/
    color: #ffffff !important;
    border-bottom: solid 4px #006400;
    border-radius: 15px;
    text-decoration: none !important;
    font-size: 120%;
    text-align:center;
    }
    .button2 a:hover {
    background: #ffa500;/*ボタン色*/
    }
    .button2:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
    }
    </style>

    HTML編集は上と同じですが、 名前がbutton2になります。

    <center>
    <p class=”button1″><a href=”リンク先のURL”>ボタン(自由に変更)</a></p>
    </center>

    当然レスポンシブなので、スマホで見たらこんな感じです。

    もっとボタンが欲しい人は、buttonの後ろの数字を変えればいくらでも作れます。

    <center>
    <p class=”button3″><a href=”リンク先のURL”>ボタン3(自由に変更)</a></p>
    </center>

    他のデザイン

    シンプルなデザインです。

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

    [su_accordion][su_spoiler title=”コードを見る” open=”no” style=”default” icon=”plus” anchor=”” anchor_in_url=”no” class=””]

    <style>
    .button3 a{
    display: block;
    padding: 1em 3em;
    width:50%;
    background: #FFFFFF;/*ボタン色*/
    color: #1B95E0 !important;
    border-bottom: solid 4px #006400;
    border: double 4px #1B95E0;
    border-radius: 15px;
    text-decoration: none !important;
    font-size: 120%;
    text-align:center;
    }
    .button3 a:hover {
    background: #F7F8F9;/*ボタン色*/
    }
    .button3:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
    }
    </style>

    HTML編集には以下のコード

    <center>
    <p class="button3"><a href="リンク先のURL">ボタン(自由に変更)</a></p>
    </center>

    [/su_spoiler]

    細長くしてみました。

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

    [su_spoiler title=”コードを見る” open=”no” style=”default” icon=”plus” anchor=”” anchor_in_url=”no” class=””]

    <style>
    .buttonlong a{
    display: block;
    padding: 1em 3em;
    width:80%;
    background: #3cb371;/*ボタン色*/
    color: #ffffff !important;
    border-bottom: solid 4px #006400;
    border-radius: 15px;
    text-decoration: none !important;
    font-size: 120%;
    text-align:center;
    }
    .buttonlong a:hover {
    background: #ffa500;/*ボタン色*/
    }
    .buttonlong:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
    }
    </style>

    <center>
    <p class=”buttonlong”><a href=”リンク先のURL”>ボタン(自由に変更)</a></p>
    </center>

    [/su_spoiler] [/su_accordion]

    アフィリエイトリンクに使う方法

    では、アフィリエイトリンクでこのボタンを使っても見ましょう。例としてもしもアフィリエイトでやってみますが、どのASPでも同じです。

    1 任意の広告に行き、テキストを選び、ソースコードをコピー

    アフィリエイトリンクでボタンを使う方法・はてなブログ

    2 はてなブログの記事編集に行き、HTML編集で<a href=”リンク先のURL”>ボタン(自由に変更)</a>部分にコードを貼り付ける

    3 プレビューで確認

    アフィリエイトリンクでボタンを使う方法・はてなブログ

    簡単でしょ?

    最後に

    以前も「はてなブログのヘッダーにおすすめ記事を作ってwordpressの様に見せる方法」でも紹介したのですが、このボタンってかなりwordpressっぽいのでおしゃれになりますよね。

    皆さんもぜひ使って、収益アップを狙ってください。

  • はてなブログのヘッダーにおすすめ記事を紹介するカスタマイズ

    はてなブログのヘッダーにおすすめ記事を紹介するカスタマイズ

    他のブログを見てて、「あ~、このデザインいいな~。あっ、wordpressか・・・」って思ったことないですか?

    wordpressに引っ越しも面倒だし、でもこのデザイン欲しいし・・・(ちなみにwordpressに引っ越ししたらこんなことをしないといけません)

    って私が思ったのは、ヘッダーにおすすめ記事を入れるものなのですが、はてなでも出来ちゃいました。

    ちょっと時間はかかりますが、はてなブログのヘッダーをかっこよくカスタマイズしましょう!

    基本的にはてなブログProを使っている方を対象にした記事なので、無料版での動作確認はしておりません。

    この機会にProの利用を検討される人は、はてなブログPro登録からどうぞ

    ヘッダーのおすすめ記事

    ヘッダーのおすすめ記事は、こう言ったものになります。

    はてなブログのヘッダーにおすすめ記事を入れる コピペ

    はてなブログのヘッダーにおすすめ記事を入れる コピペ

    これ、かっこいいですよね。ずっと憧れてたんです。

    今回もほぼコピペでOKなカスタマイズなので、是非やってみましょう。

    おすすめ記事のCSS

    貼り付ける場所は2か所あります。

    まずはこちらを、「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「デザインCSS」に貼り付けます。

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

    <style>
    /* ヘッダー下おすすめ記事 */
    .toprecommend-toptitle{/*おすすめ記事のタイトル*/
    background: yellow;/*お好きな色*/
    text-align: center;
    color: #000;/*お好きな色*/
    margin-bottom:-1em;
    padding-top:1em;
    font-weight: bold;/*太文字*/
    }
     
    .toprecommend {/*おすすめ記事の大枠*/
    background: #f0f8ff;/*お好きな色*/
    width: 100%;/* コンテンツ幅と合わせる */
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    margin: 0em auto;
    text-align:center;
    padding-bottom:2em;
    margin-bottom:2em;
    }
    .toprecommend-box {/*おすすめ記事1つの枠*/
    width: 24%;
    height: 250px;
    padding: 8px;
    margin-left: 1em;
    background: #fff;/*お好きな色*/
    box-sizing: border-box;
    margin: 2em 0.5em;
    border-radius: 3px;
    }
    .toprecommend-box:hover{/*触れた時*/
    background: Deepskyblue;/*お好きな色*/
    }
    .last-box {
    margin-right:1em;
    }
    .toprecommend-image img {
    width: 100%;
    height: 180px;/*画像の高さをいじるところ*/
    object-fit: cover;
    }
     
    .toprecommend-boxtitle a{
    display:block;
    font-size:85%;
    font-weight: bold;/*太文字*/
    color:#555; /*お好きな色*/
    line-height: 1.5!important;
    }
     
    .page-entry .toprecommend-container,
    .page-entry .toprecommend-toptitle,
    .page-archive-category .toprecommend-container,
    .page-archive-category .toprecommend-toptitle
    {
    display:none;/*記事ページなどには表示しない*/
    }
     
    /* パソコン */
    @media screen and (max-width: 1100px) {
    .toprecommend-image img {
    width: 100%;
    height: 150px;/*画像の高さをいじるところ*/
    object-fit: cover;
    }
    }
     
    /* タブレット・スマートフォン向け */
    @media screen and (max-width: 768px) {
    .toprecommend {
    flex-wrap: wrap;
    justify-content: space-between;
    padding:1em;
    }
     
    .toprecommend-box {
    width: 47%;
    height: 150px;
    margin:0.5em auto;
    }
     
    .toprecommend-box:nth-child(2n) {
    margin-right:0.5em;
    }
    .toprecommend-image img {
    width: 100%;
    height: 80px;/*画像の高さをいじるところ*/
    padding:0;
    object-fit: cover;
    }
     
    .toprecommend-boxtitle a{
    font-size:75%;
    }
    }
    </style>

    色の変更を紹介します。

    13行目のbackground: #f0f8ff;/*お好きな色*/の#の文字を変えると、おすすめ記事の背景の色が変わります。

    今はうす水色ですが、分かりやすい様にピンクに変えてみました。

    はてなブログのヘッダーにおすすめ記事を入れる コピペOK

    はてなブログのヘッダーにおすすめ記事を入れる コピペ

    カラーコードは、原色大辞典で探せます。

    次は、34行目のbackground: Deepskyblue;/*お好きな色*/のDeepskyblueを変えると、PCではカーソルが上にある時、スマホはタップした時の色が変わります。

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

    はてなブログのヘッダーにおすすめ記事を入れる クリック時の色を変える<Deepskyblueを#fdd35cに変えました>

    色は先ほどの原色大辞典で探せます。

    今の設定ではトップページのみにおすすめ記事が表示されるので、もし各記事にも表示したい場合は、57.58.59行目の

    {
        display:none;/*記事ページなどには表示しない*/
    }

    を削除すればOKです。

    ヘッダーに入れるコード

    お次は、次のコードを「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「ヘッダ」→「タイトル下」に入れます。

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

    <div class="toprecommend-container">
    <div class="toprecommend">
    <div class="toprecommend-box">
    <span class="toprecommend-image"><a href="記事のURL"><img src="画像URL"></a><br></span>
    <span class="toprecommend-boxtitle"><a href="記事のURL">記事タイトル</a></span>
    </div>
    <div class="toprecommend-box">
    <span class="toprecommend-image"><a href="記事のURL"><img src="画像URL"></a><br></span>
    <span class="toprecommend-boxtitle"><a href="記事のURL">記事タイトル</a></span>
    </div>
    <div class="toprecommend-box">
    <span class="toprecommend-image"><a href="記事のURL"><img src="画像URL"></a><br></span>
    <span class="toprecommend-boxtitle"><a href="記事のURL">記事タイトル</a></span>
    </div>
    <div class="toprecommend-box last-box">
    <span class="toprecommend-image"><a href="記事のURL"><img src="画像URL"></a><br></span>
    <span class="toprecommend-boxtitle"><a href="記事のURL">記事タイトル</a></span>
    </div>
    </div>
    </div>

    ここからが各自手直しが必要なので、説明しますね。

     <span class=”toprecommend-image”><a href=”記事のURL“><img src=”画像URL“></a><br></span>
      <span class=”toprecommend-boxtitle”><a href=”記事のURL“>記事タイトル</a></span>

    変える部分は記事のURLと書かれた部分で、2か所同じURLが必要です。これは読者が画像をクリックしても、記事のタイトルをクリックしても同じページに移動するようにするためです。

    画像のURLの一番簡単な方法は、記事を書く画面で写真を投稿する、もしくはすでにある写真を選び、「選択した写真を貼り付け」をクリックします。

    はてなブログのヘッダーにおすすめ記事を入れる カスタマイズ

    すると画面に写真が表示され、次にHTML編集をクリックすると画像URLが見れるので、https://cdn-ak.f.st-hatena.com/images/fotolife/n/xxx/20200130/20200130073544.jpg部分をコピペします。

    はてなブログのヘッダーにおすすめ記事を入れる カスタマイズ

    残りも同じように作業していきます。

    ちなみに、おすすめ記事を増やしたかったら増やせますが、減らすとどうしても位置がおかしくなるので、最低4つはおすすめ記事が必要です。

    はてなブログのヘッダーにおすすめ記事を入れる 記事を増やす方法<おすすめ記事6つの場合>

    増やし方は分かると思いますが、念のために。

    <div class=”toprecommend-box”>
      <span class=”toprecommend-image”><a href=”記事のURL”><img src=”画像URL”></a><br></span>
      <span class=”toprecommend-boxtitle”><a href=”記事のURL”>記事タイトル</a></span>
    </div>

    枠を増やすコードは上記したものが1つの枠になるので、上のコードをコピペすれば増やせます。

    ちなみにスマホ表示を考えて、偶数個にした方がいいですね。

    <コードをちょっと変えましたが参考にさせていただいたのは、Migaru-daysさんです。ありがとうございました>

    最後に

    これでブログの見た目がwordpressっぽくなったので、PVが増えるかもしれないですね。(そんなわけないです(笑))

    まぁ、wordpressっぽいというのは抜きにしても、読んで欲しい記事をアピールできるので、PVは増えるでしょうね。

    1つ注意点として、ヘッダーで画像を読み込む=ページの表示速度が落ちるので、Lazy loadの設定も一緒にやって、画像の遅延読み込みをしておきましょうね。

    はてなブログでLazy loadを使う方法!コピペで簡単に使えるを参考にどうぞ。