カテゴリー: ブログ

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

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

    はてなブログの記事のタイトルって、超シンプルですよね。

    シンプルと言えば聞こえがいいですが、ダサいというか・・・

    一番最初に読者の目に付く個所なので、重要ですよね。簡単にコピペでカスタマイズできるので、やっていきましょう。

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

    テーマにもよりますが、何もしていない記事タイトルはこんな感じですよね。

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

    ちょっと、これ変えましょう・・・。以下に紹介するカスタマイズは、全て「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「デザインCSS」にコピペします。

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

    また、色を変える時のコードはこちら原色大辞典で探せます。

    例1 こんな感じ↓のタイトルになります。はてなブログ 記事タイトルのカスタマイズ

    .entry-title {
    font-weight: bold;
    font-size: 25px;
    padding: 10px 10px;
    position: relative;
    padding-bottom: .5em;
    border-bottom: 4px solid #ccc;
    }
    .entry-title::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    z-index: 2;
    content: '';
    width: 20%;
    height: 4px;
    background-color: #3498db;
    }

     

    7行目・border-bottom: 4px solid #ccc; このccc部分を変えると灰色の下線の色が変わります。

    最後のbackground-colorを変えると、青になっている部分の色が変わります。

    例2 下線2本のタイトル

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

    .entry-title {
    font-weight: bold;
    font-size: 25px;
    padding: 10px 10px;
    position: relative;
    padding-bottom: .5em;
    border-bottom: double 5px #FFC778;
    }

     

    例3 シンプルに左端に線を入れたもの

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

    .entry-title {
    font-weight: bold;
    font-size: 25px;
    padding: 10px 10px;
    position: relative;
    padding-bottom: .5em;
    border-left: solid 5px #55ACEE;
    }

     

    例4 上下に線を入れてみました

    .entry-title {
    font-weight: bold;
    font-size: 25px;
    padding: 10px 10px;
    position: relative;
    padding-bottom: .5em;
    border-top: solid 3px #000000;
    border-bottom: solid 3px #000000;
      }

     

    例5 下線のみのシンプルなもの

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

    .entry-title {
    font-weight: bold;
    font-size: 25px;
    padding: 10px 10px;
    position: relative;
    padding-bottom: .5em;
    border-bottom: solid 3px #000000;
    }

     

    例6 タイトルの文字色を変えたもの

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

    .entry-title {
    color: #ff69b4;
    font-weight: bold;
    font-size: 25px;
    padding: 10px 10px;
    position: relative;
    padding-bottom: .5em;
    border-bottom: solid 3px #ff69b4;
    }

    文字の色を変える時は、colorの#以降の文字を変えたら色が変わります。

    最後に

    他にもいろいろなカスタマイズを紹介しているので、下記リンクを参考にどうぞ。

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

    はてなブログで画像読み込み遅延・Lazyloadのカスタマイズ

    はてなブログ・収益化のまとめ

  • はてなブログ・バリューコマースの各リンクの使い方を丁寧に紹介

    はてなブログ・バリューコマースの各リンクの使い方を丁寧に紹介

    ASPはいろいろありますが、各社ちょっと仕様が違うので慣れないと「あれ?どうやるんだっけ?」ってなることもあると思います。

    今回は個人的に一番お世話になっているASP・バリューコマースの使い方を紹介します。

    ASPは10個近く登録していますが、バリューコマースは一番フェアで情報開示もしているので稼ぎやすいんですよね。

    もし登録がまだの人は、バリューコマースの評判と登録方法を参考にどうぞ。

    バリューコマースのリンクの使い方

    バリューコマースにはMyLinkとバナー、一番良く使う自由テキストにLinkSwitchというヘッダーに書き込むもの、そしてMyLinkBoxというカエレバやRinkerのような機能を持ったものがあります。

    バリューコマースのリンクの使い方

    以下にて、各広告の使い方の詳細を紹介します。

    MyLinkの使い方

    ログイン後のトップページの上部に検索窓口があるので、アフィリエイトしたい会社やブランド名を入れます。

    今回はNIKEの靴を売りたいという例で、ABC martを検索。社名の横にオレンジの文字があり、「即時提携」と書いてあります。

    意味はそのままで、ブログの審査が無く提携出来ますよって意味です。それでは、右の「広告素材を選ぶ(=提携)」をクリックします。

    アフィリエイトの設定方法 バリューコマース

    すると次のページでは提携済みになっています。審査がある会社は、数時間から数週間待つことがあります。

    バリューコマースのリンクの使い方

    画面左側にある広告タイプから、MyLinkを選び「再検索」をクリック。

    バリューコマースのMylinkの使い方

    次に「広告主のサイトを見る」をクリックし、お目当ての物を見つけたら、そのページのURLをコピーし、MyLinkのURLに貼り付けます。

    テキストは自分で考えて入れますが、分かりやすく誇大広告が無い表現にしましょう。最後に右下のMyLinkコードを取得をクリック。

    バリューコマースのリンクの使い方

    ポップアップのコードをコピペ。

    バリューコマースのリンクの使い方

    最後に「HTML編集」からコードをコピペして完了です。

    バリューコマースのリンクの使い方

    自由テキスト

    私は自由テキストは、MyLinkが無い場合に使います。MyLinkとの違いは、クリックしたら移動する広告のページが決められている点です。

    使い方は、画面左にある「広告タイプ」から「自由テキスト」を選んで再検索をクリック。

    バリューコマースの自由テキストの使い方

    下にコードが出てくるので、「広告作成」をクリックして出てきたコードを同じくテキストエディタで貼り付けます。

    バリューコマースの自由テキストの使い方

    コードを貼り付けると文が「自由テキスト」になっているので、この部分を好きな文に変えれば完了です。

    バリューコマースの自由テキストリンクの使い方

    バナー広告

    バナー広告はクリック率が悪いのであまり使いませんが、サイドバーに貼ったり、特定の商品の場合に記事に入れることもあります。

    バナー広告も上2つと同じで、「バナー広告」を選択し「再検索」をクリック。

    バリューコマースのバナー広告の使い方

    同じように、下に出てくるコードを貼り付けたらOKです。

    LinkSwitchの使い方

    私はほとんど使いませんが、Javaを使ったスクリプトをサイトのヘッダーに入れることによって、直接リンクがアフィリエイトリンクに変わるので手間が省けるものになります。

    例えば、www.example/shoes/nike.comという靴の販売広告があったとして、上で紹介したリンクは上記の手順でコードを作成して貼り付けないといけないのですが、LinkSwitchだったら、このURLを記事に貼り付けるだけでアフィリエイトリンクになっているんです。

    3手間くらい省けますね。

    ん?なぜ私が使わないかって?

    ヘッダーに余計なものを入れて、表示速度が遅くなるのが嫌だからです。

    ちょっとでも表示速度が遅くなるなら、手間を使ってリンクを作成します。

    また、全ての広告主がLinkSwitchに対応しているわけではないので、対応していない広告の場合は手作業で貼り付けることも必要です。

    設定方法は、広告検索のページ上部に下の画像のようなリンクがあるので、これをクリック。

    バリューコマース・LinkSwitchの使い方

    次のページで特徴紹介があり、下部にある「LinkSwitchを利用開始する」をクリック

    バリューコマース・LinkSwitchの使い方

    次にコードが表示されるので、これをヘッダに入れます。

    バリューコマース・LinkSwitchの使い方

    「ダッシュボード」→「設定」→「詳細設定」→「Headに要素を追加」に貼り付けます。

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

    以上です。

    MyLinkBox

    MyLinkBoxを使えば、今後は面倒なカエレバでの設定もなくなるし、バリューコマースで収益をまとめることによって振り込みの時期も速くなるのでお得ですね。

    また、amazonの審査に受かっていない人はバリューコマース経由で申請すれば提携しやすいですしね。

    リンクはこの様なものです。↓(実は記事編集画面に表示されていないのでプレビューで確認しないといけません。)

     

    1 トップページの上部、ツール→MyLinkBox→新規作成をクリック

    バリューコマースでMyLinkBoxを使う方法

    2 特徴や注意事項を確認し「利用を開始する」をクリック

    バリューコマースでMyLinkBoxを使う方法

    3 各項目を記入する

    1. MyLinkBox名・・・自分が分かる名前にすると次回使う時に便利
    2. 検索キーワード・・・任意の商品名を入れる
    3. タイトル・・・好きなタイトルを入れる
    4. カテゴリー・・・好きなカテゴリを選ぶ

    バリューコマースでMyLinkBoxを使う方法・設定方法

    4 必要な広告主と提携する

    バリューコマースでMyLinkBoxを使う方法・設定方法

    提携後は、この様にリンクに表示される広告主が増えます。

    バリューコマースでMyLinkBoxを使う方法・設定方法

    • リンク先の個別指定・・・設定しないにすると検索結果ページが表示されます。
    • 画像の表示・・・画像を検索するにすると次の項目で選んだ画像が表示されます
    • ユーザー向けお得情報・・・情報がある場合は表示され、無い場合は空欄です

    バリューコマースでMyLinkBoxを使う方法・設定方法

    リンク先の個別指定を設定するにすると、以下の様に1つづつURLを入れなくてはいけません。

    バリューコマースでMyLinkBoxを使う方法・設定方法

    ちょっと面倒ですが、サイトによっては商品ページに直接移動したいと思うので、便利でもありますね。

    5 全ての設定が終わったら画面右にあるプレビューを確認し、「MyLinkBoxを作成」をクリック

    バリューコマースでMyLinkBoxを使う方法・設定方法

    6 広告コードを貼り付ける

    • 1のコード 頻繁に使う人はHead内かbodyに貼り付けると今後楽です。あまり使わない人は記事を書いている時に「テキスト、もしくはHTML編集」で記事の一番最後に貼り付けたらOKです。
    • 2のコード 記事中の任意の場所に貼り付けます

    バリューコマースでMyLinkBoxを使う方法・設定方法

    リンクが表示されるまで時間がかかるので、すぐに表示されなくても心配しなくて大丈夫です。また、記事執筆画面では何も表示されないので間違ってスペースを消さないようにしましょう。

    バリューコマースでMyLinkBoxを使う方法3

    まとめ

    特にMyLinkBoxを使うと、今まで分散していた収益が1か所(バリューコマース)に集まるので、ランクも上がりやすくなるし、収益の振り込みも何ヶ月も待たずに振り込まれる可能性が高くなりますね。

    個人的にはバリューコマースが一番良いASPと思いますが、案件がそこまで豊富じゃないので、もしもアフィリエイトやA8ネットも併用しています。

    登録がまだの人は、これら他のASPも必ず提携しておきましょう。

  • もしもアフィリエイトの登録方法とメリット

    もしもアフィリエイトの登録方法とメリット

    もしもアフィリエイトは数あるASPの中でも人気だし、報酬が高いので稼いでいる人が多いASPです。

    色々な機能もあり、かんたんリンクというリンクはかなり使いやすいですよね。

    登録自体は5分くらいで終わるので、サクッとやってしまいましょう!

    もしもアフィリエイトに登録するメリット

    おすすめASPの紹介 ASPとは?

    簡単にASP(もしもアフィリエイトなどのアフィリエイト会社)について説明します。

    企業がサービスや商品を紹介してくれとASPに依頼し、それらを私たちが紹介し、読者が購入するという流れですよね。

    なので私たちは、商品を紹介したい企業に連絡を取って提携することなく、もしも経由で提携が出来るので、簡単に色々なものを売る事が出来るんです。

    なので、ASPは私たちと企業を結ぶ、仲介者の役割を果たしています。

    次にもしもアフィリエイトの特徴について、紹介します。

    • 登録・利用料は無料
    • 12%の報酬アップ制度
    • プレミアム報酬制度
    • 自動マッチング
    • もしもちゃんが教えてくれる

    登録や利用は無料と言うのは、どこのASP(アフィリエイトの会社)を使っても同じなので特筆することは無いですが、念のため紹介しました。

    それでは以下にて、詳しく紹介していきます。

    12%の報酬アップ制度

    もしもアフィリエイト W報酬制度

    もしもアフィリエイトの報酬は、12%アップで振り込まれます。(アマゾンや楽天などは対象外)

    単純に、1万円の報酬が出たら1万1200円振り込まれます。

    なぜこんなことが出来るのか?

    分かりません。

    ただし推測すると、何か商品が売れたらもしもアフィリエイト会社にも報酬が入りますよね。その報酬のいくらかを私たちに報酬として支払っているので、もしもの分を減らして私たちアフィリエイターに還元していると思います。

    収益が1000円くらいだとあまりうま味もないですが、1万円、10万円を超えてくるとかなり嬉しくなりますよ。

    私はメインでバリューコマースと言うASPを使っているので「もしも」ではそこまで稼いでないですが、それでも大体6桁くらい毎月報酬が出ています。

    これが12%割り増しで来るので、結構嬉しいです。

    プレミアム報酬制度

    もしもアフィリエイトの特徴・初心者向け解説

    プレミアム報酬とは、プロモーション(広告)によっては売り上げが1万円を超えるとボーナスをくれるものがあり、通常報酬とは別に報酬がもらえます。(楽天やアマゾンの売り上げは換算されません)

    始めたばかりの時はランクが「見習い」なので、+5000円の報酬です。

    例えば、1件成約で2000円の報酬があるプロモーションAを5件/月成約した場合は、

    2000円(通常報酬)X5+1万円(プレミアム報酬)=2万円

    の報酬になります。

    また、これは各プロモーションごとの報酬なので、

    1. プロモーションAで報酬が1万円/月超え
    2. プロモーションBで報酬が1万円/月超え
    3. プロモーションCで報酬が1万円/月超え

    プレミアム報酬5000円X3=1万5000円がプラスされて振り込まれます

    もしもは、アフィリエイターに還元する制度が多くあるので嬉しいですよね。

    プレミアム報酬が付いたプロモーションは、トップページの「プロモーション検索」からプレミアム報酬をクリックして探せます。

    もしもアフィリエイトの特徴・初心者向け解説、プレミアム報酬

    今自分が提携しているプロモーションが、プレミアム報酬かどうかを見る場合は、上で紹介した「プレミアム報酬プロモーション」をクリックした後に、「申請中」もしくは「提携中」をクリックしたら表示されます。

    もしもアフィリエイト登録方法・初心者向け

    自動マッチング

    もしもアフィリエイトの特徴・初心者向け解説、自動マッチング<今現在、私はマッチする広告がないですが・・・>

    これはそこまで性能がいいわけじゃないですが、自分のブログの記事ごとに合ったプロモーションを教えてくれる機能です。

    例えば「良い広告がないな~」と思ってアフィリエイトリンクを付けてなくても、もしもが判断して記事に合いそうなプロモーションがあれば通知してくれるサービスです。

    結構関係ないプロモーションが表示されることが多いですが、時には「あっ!これ合いそう」って言うものも有るので、こまめにチェックしましょう。

    アフィリエイトのやり方指南ページ

    もしもアフィリエイト登録方法。初心者向け

    もしもアフィリエイトには初心者向けに、アフィリエイトのやり方を紹介したページがあります。

    • どうやって稼ぐのか?
    • SEOについて
    • 税金について

    などなど、多くの疑問の答えてくれるページがあるので、これは助かりますね。

    次の項で登録方法を紹介するので、まだもしもアフィリエイトに登録していない人は、まずは登録しましょう。

    もしもアフィリエイトに登録する

    登録方法

    もしもアフィリエイトに行き、メディア・ブロガーの方の会員登録をするをクリックします。

    もしもアフィリエイト登録方法

    次のページで仮登録をするので、メルアドを入力し「確認メールを送信」をクリック。

    もしもアフィリエイト登録方法

    私はGmailだったので「Gmailを確認する」となっていますが、クリックしてメールを確認しましょう。

    もしもアフィリエイト登録方法

    もしもアフィリエイトからのメールをクリックすると、このようなメッセージが書かれたメールがあるので、メール内のリンクをクリック。

    24時間以内に手続きをしないと、また最初からになります。

    もしもアフィリエイト登録方法

    お次は、アカウント情報の入力です。

    ユーザーIDはアルファベットで任意のものを書きます。ブログ名とかニックネームとかなんでもいいですよ。

    もしもアフィリエイト登録方法

    最後に個人情報を入力し、確認したら完了です。

    もしもアフィリエイト登録方法もしもアフィリエイト登録方法

    これで登録が完了しました。

    登録したメルアドにもしもから「本会員登録完了の案内」というメッセージが来てると思うので、確認をしましょう。

    もしもアフィリエイト登録方法・確認メール

    審査に5営業日かかると書いていますが、私は次の日に完了メールが来ていました。

    もしもアフィリエイト登録方法・確認メール

    審査に通ると早速銀行の口座登録を促されますが、報酬が付いてからでもいいので、急ぐことはありません。

    もしもアフィリエイト登録方法・確認メール

    登録が終わったらさっそくリンクを貼っていきましょう!

    「もしもアフィリエイトの使い方・リンクの貼り方」を参考にどうぞ。

    最後に

    もしもアフィリエイトは、報酬も良いし、サイトも使いやすいし、質問があれば「もしも」に質問も出来ます。

    担当も親切丁寧なので揉めたこともないし、承認率も高いので初心者にはというか、誰にでも使いやすいので是非登録しましょう!

    もし登録していない場合は、他のおすすめASPも一緒にどうぞ。

    A8ネットの登録方法と広告リンク全ての使い方を紹介!

    バリューコマースの評判や登録方法・使い方 

    おすすめASP4選!ブロガーなら登録しておかないと損だよ

  • はてなブログのサイドバーを追従(固定)するコピペカスタマイズ

    はてなブログのサイドバーを追従(固定)するコピペカスタマイズ

    パソコンから読者来た場合、サイドバーを追従(固定・追尾など色々な名称があります)していないとスペースがあまって不格好だなと思っていたのですが、はてなブログを使っている人は簡単にCSSだけでサイドバーの追従ができますよ。

    以前Googleが「広告は追従しちゃダメ」なんて言っていましたが、今は解禁になっているので、アドセンスの広告も入れることが出来るし、他にもカテゴリを入れたり、おすすめ記事を追従したりと、好きなもの何でも固定できます。

    コピペで出来るので2分あれば完成します。

    サイドバーを固定(追従)する方法

    これは当然PCのみですが、サイドバーを追従するカスタマイズです。

    読者が記事を読み進めて下の方に行くと、サイドバーって見えなくなりますよね?なので、モジュールを追従するように設定してあげます。

    これはサイドバーの最後のモジュールを追従する方法なので、下図のように固定したいモジュールをサイドバーの最後に持ってきてください。

    まずは「デザイン」→「カスタマイズ」→「サイドバー」に行き、好みの項目をサイドバーの最後に持っていきます。私は、「アフィリンクもOK」というASPのHTMLを貼り付けたものです。(サイドバーに広告を貼る方法はこちらからどうぞ)

    はてなブログのサイドバーを固定する方法

    次に以下のコードを、フッタにコピペしてください。

    はてなブログのサイドバーを固定する方法

    <!–サイドバー固定–>
    <script>
    $(window).load(function() {
    var sideLast = $(“.hatena-module”).filter(“:last”);
    var sideLastTop = sideLast.offset().top + 450;
    var sideLastWidth = sideLast.width();
    var win = $(window);

    win.scroll(function(){
    if(win.scrollTop() > sideLastTop) {
    sideLast.css(“position”,’fixed’);
    sideLast.css(“top”,’20px’);
    sideLast.css(“width”,sideLastWidth);
    }else{
    sideLast.css(“position”,’relative’);
    };
    });
    });
    </script>

    するとこんな感じになっていると思います。

     

    最後に

    ほんとに2分で終わったでしょ?

    他にもいろいろなカスタマイズを紹介しているので、こちら「はてなブログのカスタマイズ集・すべてコピペでOK」も一緒にどうぞ。

  • はてなブログにアドセンスの関連コンテンツ広告を設定する方法

    はてなブログにアドセンスの関連コンテンツ広告を設定する方法

    関連コンテンツが使えるようになったら、ようやくGoogleに一人前に認められた気がしますよね。

    通常は記事下に入れることが多いですが、基本どこにでも入れることが出来、記事中、サイドバーなどHTMLで設定できるところであれば簡単に設定できます。

    はてなブログでの設定方法を紹介するので、一緒にやっていきましょう。

    関連コンテンツの設定方法

    まずはアドセンスの管理画面から、「広告」➡「広告ユニットごと」➡「関連コンテンツ」をクリック

    アドセンスの関連コンテンツの設定方法

    すると、コンテンツのカスタマイズというページに移動するので、各項目をチェックします。

    ユニット名は「ブログ名+kanren」とかでいいと思います。ブログが増えた時にどのブログの関連コンテンツが収益を出しているか分かりやすいので、ブログ名は入れた方がいいですね。

    私は以下の様に設定しました。

    • ユニット名・・・「ブログ名+Kanren」などがおすすめ
    • 広告オプション・・・「広告で収益化」がONになっているかチェック
    • スタイル・・・デフォルトでOK(フォント・タイトルの色・背景変更可能)
    • サイズ・・・デフォルト(レスポンシブ)

    注)広告オプションの「広告で収益化」が最初はない人もいるみたいです。その場合は、下のようなマークが出てくるまで待ちましょう。

    関連コンテンツの設定方法

    基本的にユニット名以外は扱わなくてOKです。

    最後に「保存してコードを取得」をクリック。次ページに出てくるコードをコピーします。

    アドセンスの関連コンテンツの設定方法

    次は、はてなブログでの設定です。

    はてなブログの設定

    関連コンテンツは一般的に記事下に設定することが多いので、記事下に入れる方法を紹介しますが、HTMLで編集できるところであればどこでも可能です。

    先ほど保存したコードを、「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「記事下」に貼り付けるだけです。

    はてなブログに関連コンテンツを設定する方法

    チョー簡単ですね!

    はてなの「関連記事を記事下に表示する」を使っていた人は、アドセンスの「関連コンテンツ」2重に関連記事が表示されます。アドセンスが選ぶ関連記事って関連してない時もあるので、はてなの関連記事を残すかどうかは意見が分かれるところですね。ちなみに、私ははてなの関連記事は表示していません。CTRがすごく悪くなったので。

    お疲れさまでした。これで関連コンテンツは表示されるはずなので、ひとまず安心ですが、もうひとつついでに、CTRをチェックしてみましょう。

    アドセンスの管理画面から確認すると、関連コンテンツを導入してから1か月後には0.7%上がりました。

    アドセンスの管理画面の「レポート」→「広告ユニット」からどの広告がクリックされたか分かるのですが、関連コンテンツのクリックは多くを占めていました。

    凄くないですか、コレ?

    結局はコレなんです、コレ。

    関連コンテンツが使えたらCTR上がっちゃうんですね。

    追記)1年後には、CTRが2%まで上がりました

    0.5%くらいが平均と言われている中、かなり高くなったのですが、その方法を「クリック率を2%まで上げたたった3つの方法」で紹介しているので併せてどうぞ。

    まとめ

    最初にも言いましたが、記事下以外にも関連コンテンツを設定することが出来ますが、ちょっとやりすぎ感があるのでやらない方がいいかなと思います。

    以前はそんなサイトも多かったですが、今ではほとんど見かけないですね。

  • はてなブログで表を使う方法・コピペHTMLで簡単にできる

    はてなブログで表を使う方法・コピペHTMLで簡単にできる

    ブログを書いていると表(Table)が必要な時ってありますよね。↓こんなやつですね。

    シンプル
    シンプル
    シンプル

    このTableってHTMLだけで作れるので、CSSをいじらなくてもいいんですよね。(頻繁に使うならスタイルをCSSに入れた方がいいかもしれないですが)

    今日はいくつかサンプルを紹介するので、コピペして使ってください。カスタマイズ方法も一緒に紹介するので、自分好みの表も作れますよ。

    表(table)の作り方

    表の作り方の前に、もしOfficeのエクセルが使える人はそこからコピペしたら簡単にできるって知ってました?

    はてなブログでエクセルを使って表を使う

    もしくは動画をどうぞ。(別タブが開きます)

    はてなブログでエクセルを使って表を使う

    Officeがない人は、Microsoft Officeオンラインに登録すれば無料で使えますよ。

    それではHTMLでの表記を紹介します。

    まずはシンプルなものから。

    シンプル
    シンプル
    シンプル
    border=の数字を大きくしたら枠の太さが変わります。

    行数を増やす場合は、上の表のコードの<tbody></tbody>の間に

    <tr>
    <td style=”width: 33.3333%;”></td>
    <td style=”width: 33.3333%;”></td>
    <td style=”width: 33.3333%;”></td>
    </tr>

    を足していけば、足した分だけ行数が増えます。

    例えば上のコードに1回足したのがこれ、3x4の表です。

    3x4
    3x4
    3x4
    3x4


    では次は列を増やしたバージョンで4x3です。

    4x3
    4x3
    4x3


    これを5列6列と増やしたい場合はレスポンシブなのでちょっと面倒なのですが、<tbody></tbody>の間に入れるコードの%をちょっと変える必要があります。

    4列 <tr>
    <td style=”width: 25%;”></td>
    <td style=”width: 25%;”></td>
    <td style=”width: 25%;”></td>
    <td style=”width: 25%;”></td>
    </tr>
    5列 <tr>
    <td style=”width: 20%;”></td>
    <td style=”width: 20%;”></td>
    <td style=”width: 20%;”></td>
    <td style=”width: 20%;”></td>
    <td style=”width: 20%;”></td>
    </tr>
    6列 <tr>
    <td style=”width: 16.6667%;”></td>
    <td style=”width: 16.6667%;”></td>
    <td style=”width: 16.6667%;”></td>
    <td style=”width: 16.6667%;”></td>
    <td style=”width: 16.6667%;”></td>
    <td style=”width: 16.6667%;”></td>
    </tr>
    7列 <tr>
    <td style=”width: 14.2857%;”></td>
    <td style=”width: 14.2857%;”></td>
    <td style=”width: 14.2857%;”></td>
    <td style=”width: 14.2857%;”></td>
    <td style=”width: 14.2857%;”></td>
    <td style=”width: 14.2857%;”></td>
    <td style=”width: 14.2857%;”></td>
    </tr>

    このコードを1つ足せば行が+1されるので、必要な分足していきましょう。

    次は、こんな感じの表です。

    20% 40% 40%
    見出し
    見出し
    見出し


    上で紹介した表の%を変えただけですが、左に見出しを入れる時はこんな感じがいいですよね。

    ただしこれじゃ素っ気ないので、左の列の見出しの背景を変えます。

    見出し1
    見出し2
    見出し3


    background-colorの#以降の数字を変えたら、背景の色が変わります。カラーコードは原色大辞典を参考に。

    行を増やす場合は同じように、

    <td style=”width: 20%; background-color: #e7f768;”>見出し</td>
    <td style=”width: 40%;”></td>
    <td style=”width: 40%;”></td>

    を追加していけば行が増えます。

    もしくは行に見出しを入れて背景色を変えると、こんな感じになります。

    見出し1 見出し2 見出し3
    A
    B
    C


    見出し4個はこんな感じです。

    見出し1 見出し2 見出し3 見出し4
    A
    B
    C


    見出しを5個にしたらこんな感じですが、レスポンシブなのであまり列が多いと見にくくなるので注意して使ってください。

    見出し1 見出し2 見出し3 見出し4 見出し5
    A
    B
    C


    <tr style=”background-color: #e7f768;”>と記述してある箇所の赤文字部分を変えたら背景色が変更できます。

    ちなみに文字を真ん中寄席にしたい場合は、面倒なんですよね。例えば↓こんな感じで左に寄っているHTMLは下の青枠のコードです。

    真ん中に
    したい

    <td style=”width: 50%;”>真ん中に</td>
    <td style=”width: 50%;”>したい</td>

    文字を真ん中に寄せる場合は、赤文字を一行一行足していかなくちゃいけません。wordpressだとショートカットキーで簡単なのですが、はてなはHTMLに記述しないと出来ないですね。

    <td style=”width: 50%; text-align: center;“>真ん中に</td>
    <td style=”width: 50%; text-align: center;“>なった</td>

    この表はレスポンシブですが、表をクリックすると四角のマークがでてきて、これを動かすと表の大きさがピクセルで指定されます。
    これをするとスマホの場合画面からはみ出す可能性があるので注意してください。

    まとめ

    慣れたらすぐに列や行を足すことが出来るので、使ってみて下さい。

    よく使う表はメモにコピペしておけばいちいちこの記事まで来なくていいので、使いやすいと思いますよ。

    でも、やっぱり一番簡単なのはエクセルですね。

  • はてなブログの始め方を分かりやすく解説

    はてなブログの始め方を分かりやすく解説

    ブログを初めて始める時ってわからないことが多いですよね。

    何を書いたらいいの?SEOって?お金は稼げるの?そもそもどうやって始めたらいいの?

    こんな疑問が湧いてくると思います。

    今日は1から10まで初心者でもやっていけるように、紹介していきます。

    そもそもはてなブログってどうなの?

    ブログを始めるには、色々な方法がります。

    はてなブログで始める。wordpressで、Seesaaブログ、アメブロなどありますが、収益化しやすいのははてなブログとwordpressですね。

    日記を書くって人はアメブロでもいいと思いますが、せっかくこれからいっぱい時間を使ってブログを書くので、ご褒美が(お金)欲しいですよね。

    私ははてなブログを3年ほど(今でも時々更新)、wordpressを3年ほどやっています。メインはwordpressですが、はてなってなんか愛着あるし、はてなブロガー同士の結束も固い感じがするので続けやすい面もありますよ。

    はてなブログには無料版と有料版(Pro)があり、最初は無料版でやる人が多いですね。続くかどうかわからないのに、初めからお金かけたくないですもんね。

    しかも始めるのも超簡単にできるので、今日からすぐにでも始めれますよ。

    という事で、あれこれ考えずにまずははてなブログを開設しましょう。

    はてなブログの始め方

    ブログを書ける状態にするには簡単ですが、時間があればその他の設定もやった方がいいので紹介します。ただし、1時間くらいかかります。

    まずはこちらはてなブログに行き、ブログを開設します。

    1 「はてなID」を作成をクリック

    はてなブログの開設方法

    2 Googleで登録、もしくはIDなどを記入します(現在ノマドワーカーで海外にいるのでところどころ英語で表記されていますが、日本にいる人は全部日本語で書かれています)

    はてなブログの始め方・はてなブログの開設方法
    1. IDは変更できないし、公開されるので本名を使う場合はご注意を。アルファベットでtaka530とかなんか名前っぽものやブログを表すものを入力
    2. パスワード
    3. 登録を完了するメールが来るので、本物のメルアドを。

    3 記入事項を確認し、登録をクリック

    はてなブログの始め方・はてなブログの開設方法

    4 登録したメルアドに確認メールが来るので、文中のリンクをクリックして登録完了です。

    はてなブログの始め方・はてなブログの開設方法

    5 ブログのURLと公開範囲を決める

    • URL・・・最近は自分の名前を使う人も多いです。もしくはブログを表すようなURL。例)tanaka’s-blog・kosodate
    • URLの後ろ部分がいくつか選べます。どれでもいいですが、hatenablog.comが一番ドメインが強いのでこれがいいかなと思います
    • 公開範囲は後から変えることが出来るので、「全ての人に公開」でOKです

    はてなブログの始め方・はてなブログの開設方法

    6 無料でブログを始めるをクリック

    はてなブログの始め方・はてなブログの開設方法

    完成です。これで自分のブログが出来ました。もう今から書き始める事も出来ますが、もうちょっと設定をやっていた方がいいので、このままやってしまいましょう。

    7 画面上部のリボン?マークを押して管理画面(ダッシュボード)に行きます

    はてなブログの始め方・はてなブログの開設方法

     8 基本設定をする

    • 画面左の「設定」をクリック

    はてなブログの始め方・はてなブログの開設方法

    はてなブログの始め方・はてなブログの開設方法 設定を触る部分のみ解説しますね

    1. ブログ名(タイトル)を決める
    2. ブログのアイコンを作ってアップロード(時間がある時にやる)
    3. ブログの説明をする・例)はてなブログの始め方を紹介するブログです
    4. 編集モードは「見たままモード」がおすすめ
    5. コメントは、「誰でも」か「ユーザー」が最初はおすすめ
    6. コメント承認・チェックを入れる(私は入れ忘れです(笑))
    7. 最後に「変更する」をクリック

    9 詳細設定を設定(実際のページはもっと項目が多いですが、変更するところ・重要なとこのみスクショしてます。)

    はてなブログの始め方・はてなブログの開設方法はてなブログの始め方・はてなブログの開設方法
    1. アイキャッチ画像は個別に設定するので触らずにOK
    2. Googleアナリティクスの設定はこちらを参考に
    3. サーチコンソールの設定
    4. Bingウェブマスターの設定
    はてなブログの始め方・はてなブログの開設方法
    1. ブログの概要・ブログの内容を記入。例)旅行ブログで世界一周旅行中です。
    2. ブログのキーワード・今は重要視されていないので無記入でOK
    3. 検索を避ける・グーグルにインデックスしない場合はチェック

    注)インデックスとは、グーグルが記事を読み込んで検索表示できるようにすることです。プライベートな事を書く人はチェックを入れた方がいいですが、普通はチェック無しで。

    最後にはてなブックマークというはてなオリジナルのブックマークで、最初のうちはコメントがあると嬉しいので「表示する」がいいかなと思います。ただしページが重たくなるし、役に立つものでもありません。

    はてなブログの始め方・はてなブログの開設方法

    これで詳細設定は完了です。次は「公開設定」です。

    はてなブログの始め方・はてなブログの開設方法
    1. すべての人に公開でOKです。カスタムで公開範囲を決めることが出来ますが、最初は読者がいないので設定しても意味がないです。
    2. 引用設定は、どちらでもいいですが、チェックしていた方がいいです
    3. 変更するをクリック

    これで完了です。

    テーマをインストールする

    これで初期の初期設定は終了です。が、このままだとブログがおしゃれじゃないのでテーマをダウンロードしましょう。

    1 ダッシュボードのデザインをクリック

    はてなブログ・テーマのデザイン

    2 ページををスクロールダウンして「テーマストアでテーマを探す」をクリック

    テーマのインストール方法

    次のページでテーマを探せますが、最初は人気のテーマから選んだ方がいいですね。というのも、不具合などあったらすぐにググって情報を見つけることが出来るので、楽です。

    はてなブログのテーマを選ぶ

    私はこの中からInnocentを使っていますが、同じものを選んだ人はカスタマイズテンプレートを用意しているので、コピペでかっこよくカスタマイズできます。

    こちら「Innocentのテンプレート」からフッタ以外の場所をコピペして使えます。フッタはProしか扱えないので、コピペすると2重でフッタが表示されます。

    もしくはどのテーマでも使えるカスタマイズをどうぞ。

    はてなブログ無料版?Pro?

    はてなブログには今登録した無料版と、有料版Proの2種類があります。

    はてなブログProの料金表

    詳しいサービス内容は公式ページのはてなブログProを見て欲しいのですが、大きな違いは以下になります。

    Proは

    • 独自ドメインを使える
    • はてなブログの広告が出ない
    • より多くのカスタマイズができる

    と言う特徴があり、収益化しやすいです。

    無料版でも稼げますが、Proの方が稼ぎやすいです。くわしくははてなブログの無料版で稼ぐ方法を読んでみて下さい。

    Proにするなら1年コースが良いと思いますが、続ける自信がない人やwordpressに乗り換えするかもという人は1ヶ月コースがいいですね。

    記事を書く

    まずダッシュボードの「記事を書く」をクリックし、編集画面に行きます。

    基本的に記事はこの順序で書きます。

    はてなブログ・記事の書き方、起承転結

    大見出しはいくつでもいいですが、中見出し、小見出しもあるので活用していきましょう。ただし使わなくてもOKです。

    各見出しの下に説明、解説文などを記入していきます。

    書けたらプレビューで確認です。下の画像は、左が執筆中で、右がプレビューです。

    はてなブログ・記事の書き方

    あまり文字数にこだわらなくていいですが、最初は1000文字を目標に書いてみましょう。

    文字の多さも大切なのですが、それよりも読者が知りたい事を的確に書いていたら300文字でも1位表示されるので、「何を書くか」を考えてやってください。

    長々だらだらと脱線しながら書いても意味ないし、キーワードが多すぎてもグーグルに評価されないから上位表示されない可能性もあります。

    私は5~6000文字のものも有れば、5~600文字のものも時々あります。サイトにもよりますが、平均したら2500文字くらいだと思います。

    ちなみにジャンルによって書き方は変わるので、一概にどんな書き方が良いとは言えません。

    私はブログやサイト10個ほど運営していますが、そのサイトによって構成も書き方も違います。起承転結がないものもあります。

    よくブログ運営者が、「記事はこの様に書く」など教えていますが、あれはブログ運営を書きたかったら真似したらいいですが、そうでない限りはどうでしょうね?

    まぁ、まずはうまくいっている人の真似をして、そこから自分で応用していけばいいと思います。

    一つだけ言えることは、収益化目的のサイトであれば「この商品・このサービスを使ったらあなたの未来はこうなりますよ」という、「素敵な将来が見える」ように書くことが多いです。

    SEOについて

    SEOは一言では言いにくいのですが、Search Engine Optimizationの略で、検索エンジン最適化を意味します。

    「意味わかんないよ」って思うかもしれませんが、実際は誰も正解を知らないので分かりません。(笑)

    意味としては、「グーグルなどの検索エンジンが記事を理解しやすい様に構成する」ことで、言い換えたら「Googleや読者が理解しやすい様に記事を書く」ことです。

    例えばタイトルにキーワードを左詰めに入れたり、見出しにもキーワードを入れるといった手法です。

    キーワードとは?この記事で言えば、「はてなブログ」と「始め方」ですね。

    グーグルなどで「はてなブログ 始め方」と検索した人に読んでもらえるようにキーワードを設定しています。

    注)実際は、この記事はまとめページ的に多くのキーワードが入っているので、グーグル検索では上位表示されないと思います。

    通常はキーワードを絞って2~3個を使い、記事を書きます。あまり多くの事を書くとグーグルが「書きすぎ!」って思い、評価が分散されるんですね。

    まぁ、SEOについてはまだ始めたばかりなので、深く学ぶよりも、書きながら学んでいった方がいいと思います。

    一番大事なことは、グーグルなど気にせずに、「読者の為になることを書く」です。

    収益化の準備

    まずはブログを始めたばかりなので、ASPに登録して収益化の準備をします。

    ASPとはアプリケーション・サービス・プロバイダーの略で、サービスの仲介者です。

    アフィリエイトの仕組み ASPとは?

    企業のサービスや商品を仲介して、コミッションをもらうために登録します。

    下記おすすめASPの登録方法や使い方を画像付きで紹介しているので、全部登録しておきましょう。

    収益化についてはまとめページ・はてなブログの収益化方法にすべて書いているので、こちらで詳しく見て下さい。

    あとは、はてなブログでお金を稼ぐ方法決定版!を参考にどうぞ。こちらでは、どのようにして稼ぐかを詳しく紹介しています。

    さて、ASPの次はGoogle広告のアドセンスです。

    今まで他人のサイトを見た時に、広告が出たことが無いですか?

    こんなやつ↓です。(これは画像なのでクリックできません)

    広告の例

    これを読者がクリックしたら、収益が上がるという仕組みです。

    通常、0.5%のクリック率があれば平均と言われています。0.5%とは、1000ページビューあれば5回クリックされる割合ですね。

    ちなみに、私は大体2%前後のクリック率があっています。

    簡単ではないのですが、ある程度のPV(約1000PV以上/日)があり、読者の為になることを分かりやすく書いていたらこの様になります

    アドセンスのクリック率を2%まで上げたたった3つの方法に詳しく解説しているので、読んでみて下さい。

    アドセンスの申請は5記事以上あれば受かると思うので、5記事書いたら申請していきましょう。

    グーグルアドセンス申請方法とはてなブログの設定を参考にどうぞ。

    まとめ

    これでスタートラインに立ったので、これからは焦らずにゆっくりやっていきましょう。

    私も実はブログだけで食べていけるようになるまで、1年半ほどかかりました。それまでは月5000円くらいの収益でしたね。

    ある日意外なことに気が付いて方針を変えたら、月1回のアフィリエイト発生が週1回になり、2日に1回、そして毎日収益が発生、そして今では1日2万円くらいコンスタントに上がっています。

    ブログって諦めなければ稼げるので、ぜひ頑張ってやっていきましょう!

    待った、待った。「意外な事に気が付いて方針を変えた」の意外な事ってなに?

    あ、言い忘れていました(笑)

    こちら「はてなブログでアフィリエイトをしてお金を稼ぐ方法」に書いていますが、一言で言うと「心構え」です。

    これを変えたら収益が爆上がりしました。

    みなさんは、まずは記事を書いていきましょう!

  • もしもアフィリエイトでamazonと提携する方法・リンクの使い方も紹介

    もしもアフィリエイトでamazonと提携する方法・リンクの使い方も紹介

    Amazonのアフィリエイトプログラムって、審査が厳しいって言いますよね。

    私も1度落ちた記憶があります。

    落ちても再申請が出来るので、めげずに申請していたらいつかは受かるんですけどね。

    待てない!ってひとは、まずはもしもアフィリエイト経由で提携し、Amazonに受かったらアマゾンに切り替えるという方法でもいいと思います。

    それでは、もしもアフィリエイトからアマゾンに提携する方法と、アマゾンのリンクの作り方を紹介します。

    今回の記事は、もしもアフィリエイトに提携していることが前提なので、まずは登録しましょう。

    もしもアフィリエイトに登録する

    amazonともしもアフィリエイトの報酬の違い

    アマゾンで提携と、もしもアフィリエイトでのアマゾンの提携に差はあるのでしょうか?

    報酬の違いを紹介しますね。

    結論から言うとアマゾンと提携しても、もしもと提携しても紹介料は変わらないです。

    アマゾンの紹介料<上・アマゾンの紹介料 下・もしものアマゾンの紹介料>

    もしもアフィリエイト アマゾンの紹介料

    コピペしたでしょ?ってくらい完全に同じです。

    ただしいくつか違うサービスがあるのですが、もしもアフィリエイトはW報酬制度と言って、全ての報酬が12%アップで振り込まれます。(アマゾンと楽天は対象外)

    もしもアフィリエイト W報酬制度

    アマゾンは対象外ですが、他の会社の商品などを紹介する場合は仮に10万円の売り上げがあれば、11.2万円振り込まれます。

    これはかなりお得ですね。

    ただしアマゾンも紹介料倍増キャンペーンがあり、期間限定ですがPrime会員やMusic unlimitedなどの紹介手数料が倍になったりします。

    また、特別プロモーションで紹介料が10%に上がったりもするので、どちらがいいかは個人の判断になりますね。

    ちなみに報酬の振込手数料は、アマゾンも、もしもも無料です。

    もしもアフィリエイトでのアマゾンの提携方法

    まだもしもアフィリエイトに登録していない人は、もしもアフィリエイトに登録するで登録してから設定をしましょう。

    まずは、トップページの検索窓口からamazonと検索します。

    もしもアフィリエイト アマゾンの提携方法

    下にスクロールダウンしていくとAmazon.co.jpがあるので、右にある「提携申請する」をクリック。成果2%と書いていますが、商品によって%は変わります。

    もしもアフィリエイト アマゾンの提携方法 提携申請したら、通常数日で登録しているメルアドに「提携が承認されました」と連絡が来ます。

    もしもアフィリエイト amazonアフィリエイト 設定

    アマゾンのリンクの貼り方

    色々な方法があるので、全て紹介しますね。

    かんたんリンク

    まずは一番簡単な「簡単リンク」の使い方です。これを使えば、Rinkerやカエレバを使わなくても、amazon、楽天、Yahoo!ショッピングのリンクを表示できます。

    1 もしもアフィリエイトのTOPページの「かんたんリンク」をクリック。

    もしもアフィリエイトでAmazonと提携する方法

    2 楽天とYahoo!ショッピングと提携していない場合は、ページ下部の「対応プロモーション」からクリックして提携します。

    もしもアフィリエイト 簡単リンクでamazonを使う方法

    3 商品名もしくは漠然とした商品を検索します。

    もしもアフィリエイト 簡単リンクでamazonを使う方法

    例として、「NIKE 靴」と検索したら色々と商品が出てきたので、目当てのものをクリックし、正確な商品名をコピペしてもう一度検索に掛けます。

    もしもアフィリエイト 簡単リンクでamazonを使う方法

    4 正確な商品名を入れたら、やっとプレビューが表示されるので、確認します。

    もしもアフィリエイト 簡単リンクでamazonをかんたんリンクで使う方法

    プレビュー通りで良ければ、その下の「HTMLソース」をコピーし、記事に貼り付けます。

    もしもアフィリエイト 簡単リンクでamazonをかんたんリンクで使う方法

    5 するとこの写真のようなリンクが表示されます。

    もしもアフィリエイト 簡単リンクの使い方 超簡単ですね。

    通常リンクの使い方

    次は、通常のリンクの設置方法です。amazon1社のみのリンクが欲しい場合は、こちらになります。

    トップページの「プロモーション検索」から「提携中プロモーション」を選び、アマゾンを選択します。

    もしもアフィリエイト amazonアフィリエイト 設定

    次のページでこのようにアマゾンが表示されるので、右にある広告リンク取得をクリック。

    もしもアフィリエイト amazonアフィリエイト 設定

    広告の種類が、「バナー・テキスト・メール・どこでもリンク・商品リンク」とあるので、任意の広告を選びます。

    バナー広告の使い方

    基本的にトップページに移動するリンクです

    バナー広告はクリック率が悪いので、使い方に気を付けて下さい。一般的に、サイドバーに貼る事が多いですね。

    「広告種別」のバナーを選ぶと色々なバナーが表示されるので、好きなバナーのソースをコピーし、記事内にHTML編集(wordpressはテキスト)から貼り付けます。

    もしもアフィリエイト amazonアフィリエイト 設定

    テキスト広告の使い方

    基本的にトップページに移動するリンクです

    テキスト広告は「自由テキスト」や、すでに決められたテキストを使うものがありますが、自由テキストがあればそちらを選びましょう。

    自由テキストだったら、文になじむように自分でテキストを変えるのでクリック率も上がります。(テキストリンクの使い方はこちらをどうぞ)

    使い方はバナーと同じで、「ソース」のコードを記事にコピペするだけです。

    もしもアフィリエイト amazonアフィリエイト 設定

    どこでもリンクの使い方

    好きなページのリンクを使えます

    どこでもリンクは一番アマゾンに合うと思います。というのも、個別の商品を宣伝できるからです。

    まずは「選んだプロモーションを別ウィンドウで開く」からアマゾンに行き、宣伝したい商品を見つけ、そのページのURLを「リンク先URL」にコピペします。

    次に、リンクテキスト欄に任意の文を入れます。

    もしもアフィリエイト amazonアフィリエイト 設定

    最後に「どこでもリンクを作成する」を押してソースを記事にコピペして完了です。

    商品リンクの使い方

    商品リンクはアマゾンの商品を検索できる機能で、検索窓に探している商品名を記入したら、下の写真の様に候補が出てきます。

    ただしアマゾンと完全に同じじゃないようなので、どこでもリンクを使ったほうがいいと思います。

    もしもアフィリエイト amazonアフィリエイト 設定

    目当ての商品があったら、「商品リンクを作る」をクリック。するとポップアップが出てきて、下の画像の様に詳細を設定できます。

    もしもアフィリエイト amazonアフィリエイト 設定 最後にソースをコピペすれば完了です。

    もしもアフィリエイトに登録する

    最後に

    アマゾンのアフィリエイトに受からなくても、世界の終わりじゃないし、もしもアフィリエイト経由でアマゾンの商品を紹介している人も多いので、あまり気にしないでいいと思いますよ。

    もしもからのamazonの提携は比較的簡単なので、落ちることはほとんどないと思います。

    また、もしもアフィリエイト以外にも重要なASPはあるので、登録していない人は収益化に向けて登録しておきましょう。

    おすすめASP4社を紹介・ブロガーなら登録していないと損だよも一緒にどうぞ。

  • 1発コピペで終了!はてなブログInnocentのカスタマイズテンプレート

    1発コピペで終了!はてなブログInnocentのカスタマイズテンプレート

    はてなブログを始めたばかりの人が思っている事。

    それは、「デザインがダサいのでカスタマイズしたいけど、何をしていいか分からない」。

    そんな悩み解消します。

    1から9までコピペでブログをかっこよく出来るように、カスタマイズのパッケージを作りました。

    ん?なんで10じゃないの?って思いますよね。

    フッタのプライバシーポリシーだけは、さすがに自分のブログ名とURLを入れないといけないので、ここだけは作業が必要になります。

    それ以外は全部コピペでできるので、5分もあったらかっこよくなりますよ。また、各色は自分で好きな色にできるので、時間がある時にやってみて下さい。

    まずは、このテンプレートを使って、簡単におしゃれなサイトにして、ブログを投稿しましょう。

    テンプレート1

    以下を使ったカスタマイズページはこちらから見れますが、トップページはこんな感じにカード型になります。

    はてなブログ カスタマイズ テンプレート

    記事はこのようになります。

    はてなブログ Innocent カスタマイズ テンプレートはてなブログ Innocent カスタマイズ テンプレート

    各色は好きな色に変更できるので、その際には以下の詳細ページを参考にしてください。(参考サイトは下記ページで紹介しています)

    先ほども言ったように、唯一プライバシーポリシーだけは、自分で「ブログ名・URL」を入れなくちゃいけません。

    色の替え方など細かいことは、上記の個別ページを参考にしてください。

    まずは、「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「スマホ」→「レスポンシブデザイン」にチェックを入れておいてください。

    はてなブログ Innocent カスタマイズ テンプレート

    Headに要素

    設定→詳細設定→Headに要素を追加に以下を入れます。

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

    フッタ

    「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「フッタ」に以下を入れます。この部分だけは、自分のブログに合わせて赤文字部分を変えて下さい。

    <div id="copyright">Copyright ©自分のブログ名 All rights reserved.<p><a href="https://www.example.com/privacy-policy">プライバシーポリシー </a><a href="https://www.example.com/profile">執筆者</a></p></div>

    記事上

    「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「記事上」に以下のコードをコピペ。

    SNSのシェアボタンですが、記事下に入れたい人は記事下に。記事上下に欲しい人は両方に入れてください。

    <div class="sns-share">
    <ul class="sns-area">
    <li>
    <a
    href="http://b.hatena.ne.jp/entry/{Permalink}"
    class="hatena-bookmark-button sns-bookmark sns-link"
    data-hatena-bookmark-title="{Title}"
    data-hatena-bookmark-layout="simple"
    title="このエントリーをはてなブックマークに追加">
    <i class="blogicon-bookmark lg"></i><span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span></a>
    </li>
    <li>
    <a
    class="sns-facebook sns-link"
    href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}"
    onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
    target="_blank">
    <i class="fab fa-facebook-f"></i><span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span></a>
    </li>
    <li>
    <a
    class="sns-twitter sns-link"
    href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank">
    <i class="fab fa-twitter" aria-hidden="true"></i><span class="sns-txt">Twitter</span></a>
    </li>
    <li>
    <a
    class="sns-line sns-link"
    href="https://social-plugins.line.me/lineit/share?url={URLEncodedPermalink}"
    target="_blank">
    <i class="fab fa-line"></i><span class="sns-txt">LINE</span></a>
    </li>
    <li>
    <a
    class="sns-pocket sns-link"
    href="http://getpocket.com/edit?url={URLEncodedPermalink}"
    onclick="window.open(this.href, 'pocket_window', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"
    >
    <i class="blogicon-chevron-down"></i><span class="sns-txt">Pocket</span></a>
    </li>
    </ul>
    </div>
    <!--jQueryを使用-->
    <script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <!--シェア数の取得-->
    <script>
    //はてなブックマークのシェア数
    function getHatenaBookmarkCount(entryUrl, selcter) {
    entryUrl = 'https://b.hatena.ne.jp/entry.count?url=' + encodeURIComponent(entryUrl)
    $.ajax({
    url:entryUrl,
    dataType:'jsonp',
    }).then(
    function(result){ $(selcter).text(result || 0); },
    function(){ $(selcter).text('0'); }
    );
    }
    //Facebookのシェア数を取得
    function getFacebookCount(url, selector) {
    $.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
    id:url
    }
    }).done(function(res){
    if ( res.share && res.share.share_count ) {
    $( selector ).text( res.share.share_count );
    } else {
    $( selector ).text( 0 );
    }
    }).fail(function(){
    $(selector).text('0');
    });
    }
    $(function(){
    getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count');
    getFacebookCount('{Permalink}', '.facebook-count');
    });
    </script>

    デザインCSS

    「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「デザイン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;
    }
    }
    /* トップページカード型終了 */
     
    /* ブルグタイトル背景・色 */
    body{background:#00bfff;}
    #title a,
    #blog-title #blog-description {
    color: #ffffff;
    font-size: 2em;
    }
    /* ブルグタイトル背景・色終了 */
     
    /* ブルグタイトル真ん中寄せ */
    #blog-title {
    padding-top: 0px;
    padding-bottom: 0px;
    height: initial;
    text-align: center;
    }
    /* ブルグタイトル真ん中寄せ終了 */
     
    /* レスポンシブシェアボタン */
    .sns-header, .sns-footer {
    padding: 0;
    }
    .sns-area {
    margin: 10px auto;
    padding: 0;
    overflow: hidden;
    table-layout: fixed;
    display: table;
    width: 100%;
    }
    .sns-area li {
    list-style-type: none;
    display: table-cell;
    vertical-align: middle;
    }
    .sns-area li:last-child {
    margin-right: 0
    }
    .sns-link {
    position: relative;
    display: block;
    color: #fff;
    text-align: center;
    text-decoration: none;
    outline: none;
    overflow: hidden;
    height: 42px;
    line-height: 42px;
    }
    .sns-link::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    }
    .entry-header-html a.sns-link,
    .entry-footer-html a.sns-link,
    a.sns-link:hover {
    color: #fff;
    text-decoration:none;
    }
    .sns-link:hover::after {
    -webkit-animation: circle .75s;
    animation: circle .75s;
    }
    @-webkit-keyframes circle {
    50% {
    opacity: 1;
    }
    100% {
    width: 300px;
    height: 300px;
    }
    }
    @keyframes circle {
    50% {
    opacity: 1;
    }
    100% {
    width: 300px;
    height: 300px;
    }
    }
    .sns-twitter {
    color: #fff;
    background: #55acee;
    }
    .sns-facebook {
    color: #fff;
    background: #3a5795;
    }
    .sns-bookmark {
    color: #fff;
    background: #00A5DE;
    }
    .sns-line {
    color: #fff;
    background: #00B900;
    }
    .sns-pocket {
    color: #fff;
    background: #EE4256;
    }
    .fa-twitter, .blogicon-facebook, .blogicon-bookmark, .fa-line, .blogicon-chevron-down, .fa-facebook-official {
    margin-right: 5px;
    }
    .share-text {
    padding-left: 4px;
    }
    @media only screen and (max-width: 767px) {
    .share-text, .sns-txt {
    display: none;
    }
    .blogicon-twitter, .blogicon-bookmark, .fa-google-plus, .blogicon-chevron-down, .fa-facebook-official {
    margin-right: 0;
    }
    }
    /* レスポンシブシェアボタン終了 */
     
    /* 目次カスタマイズ */
    .table-of-contents{
    padding: 20px 10px 20px 40px;
    border-radius: 5px;
    background: #f0ffff;
    }
    /* 目次カスタマイズ終了 */
     
    /* 大見出し */
    h3 {
    position: relative;
    padding: 0.6em;
    background: #00ffff;
    border-radius: 15px;
    }
     
    h3:after {
    position: absolute;
    content: ”;
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #00ffff;
    width: 0;
    height: 0;
    }
    /* 中見出し */
    h4 {
    background: linear-gradient(transparent 85%, #ffe4b5 80%);
    }
    /* 小見出し */
    h5 {
    background: linear-gradient(transparent 85%, #ffe4b5 80%);
    }
    /* 見出しカスタマイズ終了 */
     
    /* サイドバータイトル */
    .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;
    }
    /* サイドバータイトル終了 */
     
    /*コピーライト*/
    #copyright {
    padding: 20px;
    text-align: center;
    background: #33DDEE;/*背景色*/
    font-size: 14px;
    color:#ffffff;/*文字の色*/
    }
    /*コピーライト終了*/

    最後に

    どのコードがのカスタマイズか分かりやすい様に名前を入れているので、見やすいと思います。

    フッタ以外は完全にコピペのみなので、実質5分もかからずに結構おしゃれなサイトになりますね。

    他にも「グローバルメニュー」だったり、「おすすめ記事の紹介」などのカスタマイズがあったほうがいいのですが、自分でURLを入れたりしないといけないので今日は紹介していません。

    「はてなブログのカスタマイズ集」で必要なカスタマイズを紹介しているので参考にしてみて下さい。

  • Rinkerの設定を画像・リンク付きで紹介

    Rinkerの設定を画像・リンク付きで紹介

    Rinker(リンカー)使いたいですよね。

    Rinker経由で販売すると、すっごく楽なんですよね。

    以前はなぜだか「カエレバ」を使っていたのですが、設定が面倒くさい!Rinkerだったら簡単に商品の紹介が出来ちゃいます。

    速い人だったら10分以下で設定は終わるので、やってみて下さい。

    Rinker(リンカー)とは?

    リンカーは、これですね。アマゾンや楽天などのリンクを一緒に表示するものです。

    リンカーはWordpressの記事を書くページ内ですべてが済むので、すっごく楽ですよ。

    あっ!ちなみにこれはwordpressのプラグインなので、はてなブログなどを使っている人は使えません。

    はてなブログなど別のブログの人は、カエレバを使って商品を紹介しましょう。こちら「カエレバの使い方や設定方法を画像・リンク付きで紹介」を参考にどうぞ。

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

    • アマゾン
    • もしもアフィリエイト
    • バリューコマース
    • (楽天市場)

    楽天にカッコをつけたのは、楽天ってアフィの報酬ポイントで払うんですよね。なので使わない方がいいからです。

    注)3か月連続で月5万円の報酬(5000ポイント)を獲得し、審査に受かれば銀行振り込み可能です

    楽天の報酬はもしもアフィリエイト経由で、Yahooショッピングの報酬はバリューコマース経由で設定します。

    提携していない人は、下記リンクから提携出来ます。

    5分もあれば登録でき、必要なものはメルアドと住所などの情報です。各ASPに登録したら、もしもアフィリエイトで楽天市場と提携を、バリューコマースでYahooショッピングの提携もしてください。

    それでは、Rinkerの設定方法を紹介します。

    Rinkerの設定方法

    まずはRinker公式ページに行き、Rinkerをダウンロードします。

    Rinkerの設定方法

    Free DownloadをクリックするとSign inかSign upと出てくるので、Sign Upをクリック。

    Rinkerの設定方法

    ポップアップが出てくるので、メルアドとパスワードを入れるか、ツイッターやグーグルアカウントでサインインできます。

    Rinkerの設定方法

    すると最初のページに戻るので、再度Free Downloadをクリックします。

    ZIPファイルのRinkerが、ダウンロードされたと思います。次はこれをwordpressにアップします。Rinkerの設定方法

    wordpressにRinkerを設定する

    管理画面から「プラグイン」「新規追加」をクリック。

    wordpressにRinkerを設定する方法

    「プラグインのアップロード」をクリックし先ほどダウンロードしたファイルを選択し、「今すぐインストール」、最後に「プラグインの有効化」をクリックで完了です。wordpressにRinkerを設定する方法

    ASPをRinkerに設定する

    カーソルを「設定」に当て、Rinker設定をクリック。

    Rinkerの設定方法

    Rinkerの設定

    基本設定の「商品情報の再取得」ですが、「再取得をする」がいいと思います。リンク切れのチェックや価格表示もされるので、ユーザーにとって便利だと思いますよ。

    Rinkerの設定方法

    アマゾンの設定

    次は、アクセスキーとシークレットキーが必要です。キーはここから入手できます。リンク先ページの「認証情報を追加する」をクリックすると両方のキーが表示されます。

    キーが既に2つある人は古い方のキーを削除し、認証情報を追加するをクリックしてください。

    トラッキングIDはここから入手できます。xxxxxx-22というのがIDです。

    Rinkerの設定方法

    リンク先は、お好きな方で大丈夫です。私は商品のページに移動させたいので「詳細画面」を選んでいますが、漠然と何かを販売するのであれば、左の「検索画面」を選んだ方がいいですね。Rinkerの設定方法

    もしもアフィリエイトでアマゾンのリンクを貼ると、制限されてRinkerが使えなくなるので、必ずアマゾンの項目で登録してください。

    楽天の設定

    楽天は先ほど言ったように、使わないので触らなくてOKです。どうしても楽天を使いたい人は、こちらからIDを入手して貼り付けて下さい。

    Rinkerの設定方法

    バリューコマースの設定

    Yahooショッピングは先ほど言ったように、バリューコマースで設定をします。LinkSwitchかPid sidどちらか1つでOKです

    • LinkSwitchの取得方法は、「バリューコマース」→「ツール」→「LinkSwitch」→「LinkSwitch設定」→表示されたスクリプトを貼り付けます
    • sid pidの取得方法はこちらを参考にどうぞ。

    Rinkerの設定方法

    もしもアフィリエイトの設定

    最後にもしもアフィリエイトの設定です。

    もしもの楽天IDの取得方法は、ここからどうぞ。

    Rinkerの設定方法 商品リンクのクリックをトラッキングにチェックをしておけば、アナリティクスでどのページから商品が売れたかチェックできます。(行動→イベントで調べることが出来ます)

    もしもアフィリエイトでアマゾンのリンクを貼ると、制限されてRinkerが使えなくなるので、必ずアマゾンの項目で登録してください。

    Rinkerの使い方

    使い方はいたって簡単です。

    記事を書くページ上部に「商品リンク追加」という項目が出ているので、これをクリック。

    Rinkerの使い方

    ポップアップが出てくるので、商品名もしくは漠然としたカテゴリ(例・靴、Tシャツなど)を入れて検索。

    気に入った商品があったら、「商品リンクを追加」をクリック。

    Rinkerの使い方

    ビジュアルモードではこのように表示されますが、プレビューを見るとちゃんとリンクが表示されています。

    注意点として、Rinkerの検索はアマゾンの商品が全て表示されるわけじゃないので、特定のものを見つける時はアマゾンで検索し、商品名をコピペしてリンカーで検索するのがおすすめです。

    アマゾンに受かっていない人の設定方法

    最後にアマゾンのアフィリエイトに提携していない人の設定方法ですが、単純にアマゾンの項目を空欄にして、楽天とYahooショッピングのみリンクが表示されるようにすれば大丈夫です。

    アマゾンは審査が厳しいのですが、2~30記事あれば受かると思うので頑張ってください!

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

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

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

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

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

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

    設定に戻るにはここをクリック

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

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

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

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

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

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

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

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

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

    設定に戻るにはここをクリック