結論から言うとタイトルの通り「アクセス数は激減」しております。

はじめに

レポートの前に僕たちOHAMAstyleは夫婦2人で運営しています。そしてもともと夫婦別々ではてなブログを利用してブログをやっていました。当サイトは、夫婦2人のブログを1つに合体したもので、ただはてなブログからWordpressに移行した訳ではありません。

僕自身、2つのサイトを1つにする作業は初めてでした。

2年間続けたはてなブログから、ワードプレスに引っ越した理由

2018年1月21日

はてなブログ時代のステータス

僕のブログは、はてなブログのカスタム記事やWEB系の記事が多く、妻のブログは商品レビューが主体となっていました。そして共通しているのが「北海道移住」の記事です。

北海道に移住して5年。東京育ちの夫婦が北海道に移住した理由から現在まで

2018年2月6日

ドメインは二人とも独自ドメインを使わず、「はてなブログPro」会員でありながら、はてなの無料ドメインを利用していました。

これは僕に関しては、独自ドメインへの移行タイミングを逃したからです。もう一年以上更新していなかったので…。妻に関しては、ブログに本気を出し始めたのが最近で、この頃にはもうWordpressに移行を考えていたからです。軽い気持ちでWordpressに引越すときに独自ドメインにしようと計画していました。

移行後はこうなる予定だった

のちのち詳しく書きますが、2つのはてなブログに301リダイレクトを仕込んだので、

1. Google検索で旧サイトが表示される
2. クリックされたら現サイトにリダイレクト
3. Googleが「このサイト引越したのね」と理解
4. 新サイトがインデックスされる
5. 旧サイトが検索結果から消える
6. ドメイン評価引き継ぎ
7. PVも下がらない
8. 夫婦仲良くブログ更新

といった夢のような計画をしていました。

しかし移行手順を検索しても2つのブログを1つにまとめたという報告をしてくれている記事は見当たらず（あるにはあるけど）、ならば僕らが人柱になってやろうという気持ちもありました。

ならば僕らが人柱になり、実験・報告してやろう。

WordPressに引越して1ヶ月のレポート

では1ヵ月間のレポートです。

結果から言うと、当初の予定では2人のPVが合体されるので、月6万PVくらい行けばいいなぁと考えていましたが、2万PV程度でした…。当初の予定・目標の3分の1に激減しました。

移行の段取りとして計画していたのが、

1. 妻のブログを引越し
2. インデックスが終わったら僕のブログを引越し

と、2段階で引っ越し作業をしました。これはGoogleの偉い人（Matt Cuttsさん）が「順番にやった方が良いよ。」と言っていたのを見つけたのでその通りに実行した次第です。

AとB、C、Dの4つのドメインを所有していて、Aにすべてを統合したいと仮定する。

このケースなら301リダイレクトを使う。

トラフィックがいちばん少ないドメインから僕なら始めるね。Dがいちばんトラフィックが少なかったとしたら、Dを、Aの適切な場所に直接送る。おそらく新しいサブディレクトリを作ってそこにコンテンツを置くだろう。
間違っても、新しい場所のルート（Aドメインのトップページ）に全部をリダイレクトしてはいけない。ページ単位でリダイレクトするんだ。基本的には、対象物を統合することは間違いなく可能だ。

僕だったらいちばんトラフィックが少ないドメインから始めてそれからその次のドメインに移って最終的にすべてを傘下に統合する。
4つのドメインを完全に新しいドメインに移動するなら、きちんと登録してあってパークドメインや何かそういった状態に長い間なっていないことを確認しておかなければならない。

あとはさっきと同じように301リダイレクトを使ってトラフィックがいちばん少ないドメインから始める。

やってはいけないことは一度にすべてを動かすことだ。移行が順調にいっているか確かめられるように段階を経て移動するといい。

と言っているので、完璧にこの手順を踏みました。

移行後のアナリティクス推移

この推移を見ると大きな山が2回できています。グラフの左側が妻のブログの移行直後です。そして真ん中辺にある山が僕のブログを移行した日です。

一つ目のブログ移行（オハマのブログ）

移行した二日後、はてなブログ時代は500/日PV程度でしたが、なんといきなり1500PVも集めました！

しかしこれは東京で大雪が降っていた日で、たまたまこちらの記事（滑らない！転ばない！北海道で大活躍のオススメ長靴）が読めれまくっていただけで、Wordpressに移行した影響ではありません（残念）。

そこから2週間、80記事ほどの記事がサーチコンソールでインデックスされていくと平行して、PVは右肩下がりになっていきました…。2月頭の時点で150/日PV位です。

全記事のインデックスが2週間で終わり、検索結果にも旧サイト（はてなブログ）が表示されなくなったことを確認して、僕のブログの移行に移ります。

2つ目のブログ移行（ジョージのブログ）

移行した初日が最大のPV数で、1つ目の移行と同じように2週間右肩下がりです…。

ここで分かることは、移行直後は『はてなドメイン』が検索結果に表示されているが、記事の移行がGoogle側で完了して独自ドメインが検索結果に表示され始めたタイミングで、ものすっごい順位が落っこちた。ということです。

検索1位を獲っていた記事も2ページ目以降に吹き飛んでいたり。

今後の希望とまとめ

まだ現時点では失敗したとは思っていません。まだドメイン評価が移行されきっていないと信じています。信じるしかありません。お願いします。信じているんで。

でもさっきのGoogleの偉い人（Matt Cuttsさん）も新規ドメインに移行するなら、評価の引継ぎは90日から180日掛かると言っているので、実際のところ安心していますが。

完全にアクセス数が元通りになるまで、コツコツと記事を増やし続けていくしかないですね。

ただこうなるなら、はてなブログ時代から独自ドメインで運営していれば…と思っているので、はてなユーザーの方でまだ独自ドメインにしていないならすぐに変更しましょうね！

今後も変化があったらレポートします！

サイトをSSL化したら当然サイトのURLが「http」から「https」に変更されたので、Search Consoleに「URL変更したよ」と教えてあげなければなりません。

Search Console｜Google

WEBサイトの全バージョンを追加する

一番最初のこの作業、URLをプロパティに追加をするということが最重要です。この作業がキチンと出来ていなくて「あれ？どういうこと？」という方が多くいます。

1ミリも難しいことはないので安心して下さい。

プロパティを追加

サーチコンソールのホーム画面右上にあるプロパティを追加をクリック！これはいつも通りですね。

4つのURLを追加

初めての人は「え？」と思うはずです。当サイトOHAMAstyleを例にしてみると、

1. http://ohama-style.com/
2. http://www.ohama-style.com/
3. https://ohama-style.com/
4. https://www.ohama-style.com/

上記の4パターンを追加します。

いっぺんに全部は登録できないので、1つずつ追加していきます。

所有権の確認【アナリティクスで確認】で簡単に

追加するとサイトの所有権の確認に移行します。こんな画面です。

最初に追加していた、サイトがGoogleアナリティクスを使用していた場合、所有権の確認は一瞬で終わります。

画面上部の『別の方法』をクリックして、Googleアナリティクスを選択。

これでプロパティに追加の作業は終了です。こんな感じでホーム画面に4つのサイトが並びます。

SSL化サイトの優先するバージョンを選択する

もうこの時点でサーチコンソールは4つのサイトが同じサイトだと認識はしてくれています。しかしどれがメインかは教えてあげなければなりません。

先ほどの作業が終わると、新しく登録したサイトにサーチコンソールからメッセージが届きます。

1番はもう終わっているはずなので、2番の「優先するバージョンを選択する」をやっていきます。

青いボタンを押して下さい。

ここで僕は【www.】無しを選択していますが、お好きな方を選んで下さい。クロール頻度は（推奨）されている方を選択したほうが良いです。

ターゲットとなる国を選択

お次は国を選択です。

ページを開くと【言語】に何だか見慣れないタグが書かれていますが、これは完全にスルーで問題ありません。【国】に移動しましょう。

OHAMAstyleを運営している僕たち夫婦は、夫婦揃ってジャパニーズでして（ジョージって名前だけど）、もちろんジャパン向けにブログを書いているので、ターゲットユーザーの地域は【日本】ですね。

SSL化サイトのサイトマップファイルを送信する

【優先するバージョンのURL】で設定したURLのサイトで新たにサイトマップを送信しましょう。

Fetch as Googleでインデックスをリクエスト

最後に、登録したサイトを早急にGoogleにクロールしてもらうために【Fetch as Google】でリクエストします。

優先するサイトを選択し、のサーチコンソールでサイドバーの【Fetch as Google】をクリック。

URLは空欄のままで、【PC】で【取得】。

ページが更新されたら、【インデックス登録をリクエスト】

僕はロボットでなく人間なので、「私はロボットではありません」と宣言。そして【このURLと直接リンクをクロールする】を選択して送信。

【このURLと直接リンクをクロールする】は普段は使用しません。こちらは月に10回しか使えないボタンです。なので大々的にサイトを更新・変更した際のみ、僕は利用しています。今回はもちろん大々的にサイトを変更したので、こちらを選択します。

同じFetch as Googleでの作業を【モバイル・スマートフォン】を選択して行いましょう。

まとめ

サイト運営の初心者の方たちには難しい用語ばかり出てくるので、チンプンカンプンになっている人を良く見かけますが、この手順でサーチコンソールを登録すればもう大丈夫だと思います！

パーマリンクに記事IDを設定している場合は、簡単に調べることができますが、そうでないといちいち面倒です。

ですがそんな痒い所に手が届くプラグイン『Show IDs』を紹介します。

『Show IDs by 99 Robots』のインストール方法

Show IDs by 99 Robots

まずはWordpress管理画面の「プラグイン」＞「新規追加」へ移動します。

画面左上の「プラグインの検索」に「Show IDs by 99 Robots」と入力。

『Show IDs by 99 Robots』が表示されるので「今すぐインストール」

からの「有効化」

以上でインストールは終わりです。

プラグインの設定

プラグインの設定等は一切ありません。インストールするだけでOKな超簡単プラグインです！

各IDの調べ方

このプラグインを調べることが可能な、記事ID・カテゴリID・固定ページIDの調べ方です。

記事IDの調べ方

プラグインをインストールするだけで「投稿一覧」ページに「ID」という項目が追加され、記事IDを確認することができます。便利！

カテゴリIDの調べ方

同じように、カテゴリIDも「投稿」＞「カテゴリー」のページに表示されます。便利！

固定ページIDの調べ方

同じように「固定ページ一覧」にも表示されます。

まとめ

「Show IDs by 99 Robots」のようなプラグインは他にも数種類ありますが、こちらのプラグインはとても簡単で使いやすいので特にお勧めです。プラグインを使わずに表示する方法もありますが、初心者の方は無理せずプラグインを利用するのが無難だと思います。

では素敵なWordpressライフを！

前回は、『はてなの画像URL』をWordPressに一括変換する方法と、はてなブログからワードプレスへの移転に特化した記事でしたが、神プラグイン『Search Regex』はまだまだ便利な使い方があるので紹介したいと思います。

本当に便利なプラグイン！Search Regexのおかげでどれくらいの時間をロスしないで済んだか！

はじめに

見出しタグはSEO的に必須！

見出しタグはSEO（検索エンジン最適化）的に本当に大事な設定です。まず見出しタグのルールを確認します。

1. ページ構成と関係ない意図で使ってはいけない！
2. 見出し1は１ページに１つ！
3. 見出しタグの順番を守る！

これは基本中の基本です。

ワードプレスでは、記事のタイトル部分がh1として設定されています。つまりその時点で記事内に使っていい見出しタグはすべてh2以降のタグです。

このルールに沿って例をだすと、

このようにh1は一つで、h2からをループさせていくように見出しを設定していきます。h2の後にh3がなくてh4になっているということは厳禁です。

「見出しの一括返還」の目的と目標

以前僕は、はてなブログでブログを2年ほど運営してきました。そしてワードプレスに移行を決め移行作業をしているとあることを思いました。

そういえば、はてなブログってh2がないじゃん。

そう、はてなブログの仕様で何故かはてなブログにはh2が抜けているのです。記事タイトルがh1タグで、記事内の大見出しはh3タグです。

これを解決させるためのスクリプトやツールを作ってくれているはてなユーザーもいましたが、ワードプレスに移ったのならキチンと設定し直さなければなりません。僕ははてなブログしか使ったことがありませんが、他のブログサービスからワードプレスに移転する時も同じようなことがあるみたいですね。

また、ワードプレスで使用しているテーマのバージョン変更などでも、見出しの構成が変わることもあるようです。

そこで今回は、はてなブログから移転してきた約100記事の見出しを一撃で簡単に、最速で修正しようと思い立ったわけです。

元はてなブロガーは必須の作業なので必ずやりましょう！！

全手順を解説！はてなブログの画像をWordPressに一括移行する方法【はてなフォトライフ】

2018年1月30日

作業の注意点

• この作業では、ワードプレスの無料プラグインを使用します
• プラグインの使用においてはすべて自己責任でお願いします
• もしものためにバックアップを取ることをお勧めします

『Search Regex』とは

Search Regex は、検索のための完全な正規表現をサポートし、WordPress に強力な標準検索機能と置き換え機能を追加します。これらは、標準の検索機能を超えて、あなたのサイトに保存されているほぼすべてのデータを検索置換することができます。単純な検索に加えて、PHP の正規表現をフルパワーで自由に使うことができます。

引用元：https://ja.wordpress.org/plugins/search-regex/

とても難しそうな文章ですが、要は検索して置換です。Wordpress上の様々な文字列を検索して、一気に置換することができます。Search Regexは英語のプラグインで日本語化もできますが、とても簡単なので気にならないかと思います。

『Search Regex』をインストール

Search Regexをインストールするには、

https://ja.wordpress.org/plugins/search-regex/からダウンロードしてサーバーにアップロードするか、

1. WordPress管理画面
2. プラグイン
3. 新規追加
4. プラグインの検索に「Search Regex」
5. 今すぐインストール
6. 有効化

でインストールする手順のどちらかになります。こちらの方が簡単でおススメです。

インストールすると、管理画面の『ツール』のタブの中に表示されます。

『Search Regex』で見出しを正規表現で一括変換する方法

さっそくインストールしたSearch Regexを開いてください。

ワードプレス管理画面 ＞ ツール ＞ Search Regex

赤枠で囲んだ個所は

• Search pattern …置換する前の文字列
• Replace pattern…置換したい内容の文字列

という意味です。

下の3つのボタンの意味です。最終的には右の「Replace & Save」を押しますが、これを押すと後戻りはできなくなるので、慎重にしてください。逆に「Replace & Save」以外は何度押しても大丈夫なので、確認しながら作業しましょう！

h3をh2に置換する場合

まず上の段（Search pattern）にこれを入力してください。

入力したら「Regex」にチェックを入れて「Search」を押してください。「Regex」にチェックを入れると「正規表現を使用する」という意味合いになります。

きちんと検索出来ていたら次に行きます。

下の段（Replace pattern）。

入力したら真ん中のボタン「Relace」で置換してみましょう。まだ保存されるわけではないので安心してください。

するとこんな感じで置換前の文字列と置換後の文字列が表示されましたね？確認してOKなら「Replace & Save」を押して作業終了です！

続いて、他のh4やh5の見出しを変更するときは、数字を変化させるだけなので簡単ですね！

解説

今回使用した”正規表現”を使ったコードを簡単に解説します。

まず

h3に挟まれた『(.*)』の部分は、何文字でも何語でもいい文字列という意味です。「h3に挟まれているところを探してね！」ということです。

ただここで注目するのは、

|<h3(.*)</h3>|

の赤い部分です。

h3の右側の「＞」がないんです。これは何を意味するのかというと、h3に付随させていたIDやクラス、スタイルも指定したかったからです。

今度は、置換したい文字列です。

この「$1」は置換前の（）の中身を貼り付けるという意味です。カッコの中身が入っている状態の例を出すとこうなります。

僕の記事内に使用していた見出しのコードには、クラスやスタイルがたくさんくっついていました。これも一緒に引き継ぎたいという思いがあり、このような形のコードになりました。

このコードのいいところは、上記の理由の他に、思いも寄らないクラスやスタイルが付いちゃっている見出しのパターンもフォロー出来るところです。ブログの編集をビジュアルモードで書いている人あるあるです。

単純に『Search Regex』を使って<h3>を<h2>にするっていう置換も全然OKなのですが、それだとクラスが付いているタグは検索できないんです！ね、便利でしょ？

我ながらとても分かりやすい図ですね。

“正規表現”に関してはこちらのサイトがとても分かりやすく解説しているので、気になる方はチェックしてみてください。

まとめ

検索しても意外に、今回の内容のようなサイトが見当たらなかったので中々苦戦しました。正規表現とか初めてでしたし。世の中便利なプラグインがたくさんあって、本当に助かります。製作者様たちには感謝と尊敬しかありませんね。

『Search Regex』で『はてなの画像URL』をWordPressに一括変換する方法

2018年2月1日

移行作業の中でも最大の難所だった、はてなフォトライフのURLをWordpressの画像URLに一括変換する作業にスポットを当てて紹介していきたいと思います。

▼完全な移行手順はこちら▼

全手順を解説！はてなブログの画像をWordPressに一括移行する方法【はてなフォトライフ】

2018年1月30日

はじめに

「はてなフォトライフ」はWordpressでも使うことができる。

本来は、作業的に本当はスルーしても良いところなんです。

何故かというと、はてなブログで使用している画像は「はてなフォトライフ」というクラウドストレージ上に画像が保存されていて、はてなのアカウントさえ削除しなければWordpressに移行しても使い続けることができます。つまり、はてなブログを削除しても使えます。

とりあえず記事の移行が終わって、新しいブログを見てみるとそっくりそのまま画像が表示されています。画像を表示させているHTMLのimgタグの画像がリンク形式だから、そりゃそうなんですけどね。

HTMLが苦手な方に簡単に説明すると

1. ユーザーがあなたのブログにアクセス
2. ページを表示する
3. 記事はあなたのサーバーからダウンロード
4. 画像ははてなフォトライフからダウンロード
5. 表示

といった仕組みです。

しかし、せっかくWordpressに移行を決断し、自分でサーバーを借りて自分だけのブログを作っていくなら、画像も自分のサーバーに保管してなるべく外のサービスに依存したくないという気持ちがあります。きっとこの記事を見てくれている方も同じなのではないでしょうか？

極端な話ですが、はてなフォトライフのサービスが無くなったらパーですからね。

そして重い腰を上げて作業を始めたからには、「完全にはてなブログから脱却してやる！」という気持ちで頑張りました。

「完全にはてなブログから脱却してやる！」とは言ってもはてなブログは大好きなんだけどね。

作業の注意点

• この作業では、ワードプレスの無料プラグインを使用します
• プラグインの使用においてはすべて自己責任でお願いします
• もしものためにバックアップを取ることをお勧めします

『Search Regex』とは

Search Regex は、検索のための完全な正規表現をサポートし、WordPress に強力な標準検索機能と置き換え機能を追加します。これらは、標準の検索機能を超えて、あなたのサイトに保存されているほぼすべてのデータを検索置換することができます。単純な検索に加えて、PHP の正規表現をフルパワーで自由に使うことができます。

引用元：https://ja.wordpress.org/plugins/search-regex/

とても難しそうな文章ですが、要は検索して置換です。Wordpress上の様々な文字列を検索して、一気に置換することができます。Search Regexは英語のプラグインで日本語化もできますが、とても簡単なので気にならないかと思います。

“正規表現”に関してはこちらのサイトがとても分かりやすく解説しているので、気になる方はチェックしてみてください。

『Search Regex』をインストール

Search Regexをインストールするには、

https://ja.wordpress.org/plugins/search-regex/からダウンロードしてサーバーにアップロードするか、

1. WordPress管理画面
2. プラグイン
3. 新規追加
4. プラグインの検索に「Search Regex」
5. 今すぐインストール
6. 有効化

でインストールする手順のどちらかになります。こちらの方が簡単でおススメです。

インストールすると、管理画面の『ツール』のタブの中に表示されます。

『Search Regex』で画像URLを変換

はてなフォトライフのURLとWordpressのURLの差

プラグインを使う前に確認しなければならないことがあります。このプラグインを使う目的は記事内の文字列を置き換えるためです。

僕らが置き換えたいものは、はてなフォトライフのURLをWordPressのURLです。

では、はてなフォトライフのURLを確認してみます。

はてなフォトライフのURLの「はてなIDの頭文字」と「はてなID」はそれぞれ違うので、ご自分のをあらかじめ調べておいてください。僕のはてなIDは「george-gogo」なので、はてなIDの頭文字には「g」が入ります。

そしてWordpressの画像URLは、

となっています。赤い部分は共通しているのでそのままに、青い部分を一括で置換します。

WordPressのURLの緑の部分「2018/01」というのは、僕が画像をWordpressにアップロードをしたのが2018年1月なので「2018/01」が入っています。もし2020年10月に画像をアップしたなら「2020/10」と考えてください。

「Search Regex」の使い方

URLのどこの部分を置換すればいいか分かったので、早速変換していきます。

管理画面の「ツール」の中の「Search Regex」を選択して下さい。

この画像の赤い部分と同じ設定にしてください。

そして、Search patternに

をコピペして、青い箇所を修正してください。

次に、Replace patternに

をコピペ。（日付は画像をWordpressにアップした年月に変えてね！2020年10月なら「2020/10」）

そして「Search」ボタンを押してください。この時点では保存されないので大丈夫！

失敗例

何かしらが間違えていると、このように何も出てきません。この例では「ID」が間違えています。もう一度見直してください。もしくは、僕とURLの形が違う可能性もあります。

注意事項は上の段の両端に「#」が入っているか、「IDの頭文字」と「ID」は合っているか。

さらに僕のWordpressはSSL化しているので、下の段が「http」ではなく、「https」になっています。ご自身のサイトがどちらかで変わるので調整してください。はてなフォトライフは「https」なので上の段はそのままでOK！

どーーしても分からなければこのプラグインを使わずコツコツやるのがベストです。

成功例

この画像では一件しか引っかかっていませんが、成功するとズラーーっと検索に引っかかったURLが出てくるはずです。

成功したら変換と保存

成功したなら「Repace」で変換できます。さらに、確認して大丈夫そうなら「Replace & Save」で完了です。

これをやると全部書き換わるので、下の段（Replace pattern）が間違えていると、全部間違えたURLに変わってしまいますので注意して下さい！

まとめ

今回の作業で、僕は正規表現を理解していなかったので滅茶苦茶苦労しました。しかし！全記事の全画像を一つ一つ交換していくよりは、はるかに早いスピードで終わることができました！プラグインの制作者様に感謝ですね。

「Search Regex」は本当に便利な神プラグインなのでほかにも色々なことができるので、重宝しています。是非楽しいWordpressライフを！！

2018年、ついにはてなブログからWordpressにブログを完全移行しました。この記事を読んでくれている方は、これから移行を考えている方、今まさに移行作業中の方だと思います。画像を移行する段階まで辿り着いた方、本当にお疲れ様です。

そして「よし、次は画像の移行だ！」と思い立ったわけですね。僕もそうでした。でも今回の内容ですが、結論から言ってとっても面倒です。

でもやらなきゃ！！（使命感）

2年間続けたはてなブログから、ワードプレスに引っ越した理由

2018年1月21日

はてなブログで使っていた画像はワードプレスでも表示される

とりあえず記事の移行が終わって、新しいブログを見てみるとそっくりそのまま画像が表示されています。画像を表示させているHTMLのimgタグの画像がリンク形式だから、そりゃそうなんですけどね。

HTMLが苦手な方に簡単に説明すると

1. ユーザーがあなたのブログにアクセス
2. ページを表示する
3. 記事はあなたのサーバーからダウンロード
4. 画像ははてなフォトライフからダウンロード
5. 表示

つまり画像を表示させるためのリンクははてなフォトライフのままなので、僕らがお金を払っているサーバーには保存されていないわけです。

なんか嫌じゃないです？

せっかくはてなブログを卒業したのに、今後もはてなに依存し続けるって。断定的な欠点は１つもないのですが、せっかくだから完全にはてなから卒業したいと僕は思います。自分の画像は自分の物！という訳です。

さ、移行の説明に入ります！

Windowsで画像を一括ダウンロードする準備

移行作業をWindowsで行ったので、今回はWindows専用の記事になります。ここからは全ての手順を順番に追って行きます。

『DSダウンローダー』をダウンロード・インストール

まず『DSダウンローダー』をいうフリーソフトをダウンロードしましょう。他にも同じようなソフトはありますが、本ソフトはとても簡単で使いやすいのでお勧めです。

DSダウンローダー

「ダウンロード」と書かれたボタンを押して、ダウンロードしたファイル（dsdl212.exe）を開いてください。
「次の不明な発行元からのプログラムにこのコンピューターへの変更を許可しますか？」は「はい」で。

【次へ（N）>】をクリック

【同意する】同意したらクリック

【次へ（N）>】をクリック

【次へ（N）>】をクリック

完了を押したらインストール完了です。僕の写真の通りならPCのデスクトップにDSダウンローダーのショートカットが出来ているはずです。
さて、ここで一旦DSダウンローダーから離れます。

はてなフォトライフの画像URLを一括で取得しよう

はてなフォトライフに保存してあるすべての画像URLを一気に取得するためにRSSリンクを取得します。

ご自身のブラウザの検索ボックスに

http://f.hatena.ne.jp/あなたのはてなID/Hatena%20Blog/rss?page=1

をコピペしてください。そして「あなたのはてなID」の部分をご自分のはてなIDに変更しましょう。で、変更したら開いてください！

こんな感じの画面が出たら成功です！

上の画像の赤ライン部分が画像のURLとなっています。ただし一回で表示できるのは50件分です。「画像が何百枚もあるよ」って方も安心してください。ちゃんと追って説明します。

さあ、これでダウンロードの準備が整いました。先ほどダウンロードした「DSダウンローダー」を起動してください！

はてなフォトライフの画像を一括ダウンロード

画像の保存用フォルダの設定

設定と言っても大したことではないのですが、大体の方が大量の画像をダウンロードすると思います。で、DSダウンローダーを使ってダウンロードした画像はパソコンのドキュメントフォルダに保存されるようにデフォルトで設定されています。なのでそのままダウンロードすると、ドキュメントフォルダに超大量の画像が保存されてしまいます。（僕はやってしまった…。）

そこで自分の分かりやすい場所にフォルダを作って、そこに保存させれば安心って訳です！

とりあえずデスクトップなどご自分の使いやすいところにフォルダを作って下さい。（解説ではデスクトップに「hatena_photo」というフォルダを作りました）

「オプション」を選択

赤〇の箇所を押して、フォルダを選択して下さい。選択後「リスト」を押して設定終了です。

はてなフォトライフでコピーしたURLを貼り付け

今度はDSダウンローダーのリストに、先ほどコピーしたはてなフォトライフのURLを貼り付けます。

貼り付けは「Ctrl + V」、もしくは右クリックで「貼り付け」を選択すれば貼り付けることができます。

するとこのように、はてなフォトライフの必要なURLのみが貼り付けられます。

ここから残りをどんどん貼り付けます。

はてなフォトライフの画像URLは一回で50件までしか取得できません。51件目からは一回づつURLを変えていく必要があります。

これが先ほど開いたURLです。

二回目は

このように末尾の数字を増やして行きます。

新しいページを開いては、コピーしてDSダウンローダーに貼り付けます。リストに貼り付けるときは、適当にどこの場所でもいいので「Ctrl + V」。

数が多くなってくると「今のちゃんと貼り付けできかたな？」という不安感に襲われます。しかし同じURLを2回貼り付けてもダウンロードされるのは1回分だけと、意外に優秀だったので、不安な時はもう一回貼り付けておきましょう！（実証済）

ダウンロード

準備が出来たら、右上の「Download」ボタンを押すとダウンロード開始です。ただし一度で貼り付けられるURLは2000件までなので、オーバーする場合は同じ作業を繰り返してください。

この段階で「DSダウンローダー」を使っての作業は終わりなので、終了してOKです！

ワードプレスへ画像のアップロードの準備

これまでの作業で、僕の場合はデスクトップに「hatena_photo」というフォルダにすべての画像が保存されました。皆さんもダウンロードする際に作ったフォルダをチェックしてみましょう。

お分かりでしょうか？同じ画像が3個ずつできています。これは仕様なので、オリジナルだけを残していらない画像をサクッと消します。（これは簡単！）

重複した画像を削除

同じ画像が3個に重複していますが、微妙に名前が違います。

この画像の一番左側がオリジナルですが、真ん中と右側の画像の名前が

「_120」
「_m」

がすべての画像に追加されています。

まずは画面右上の検索ボックスに「_120」を打って絞り込みます。

これでファイル名に「_120」と付く画像だけが絞り込まれました。あとは全選択で削除するだけです。

同じように「_m」も削除しましょう！

画像をWordpressにアップロード

いよいよWordpressに画像をアップロードします。Wordpressのメディアからアップすることも可能ですが、FTPを使った方が早いし簡単です。まだFTPを使ったことがない人は、どの道ワードプレスでブログ運営をしていく上で必要になってくるので、設定してしまいましょう！

FTPを使って画像をアップロード

Windowsだと「FFFTP」という無料ソフトがとても使いやすいのでお勧めです。

設定が終わったら、

1. wp-content
2. uploads

の順にファイルを開きます。（見つからない人は手当たり次第に探してみましょう。必ず見つかります！）

そしてuploadsの中に先ほどダウンロードしたときに作ったフォルダごとアップロードしましょう。僕の場合は「hatena_photo」です。（フォルダ名は半角アルファベット）

プラグインを使って画像をメディアライブラリに！

無事にアップロードは終わりましたが、まだ作業は続きます…。さっきの時点でもうWordpressに画像はアップできていますが、Wordpressの管理画面にあるメディアライブラリを見ても反映されていません。でも安心してください、ちゃんとできています！

今度は、メディアライブラリに反映させる作業になりますが、必ずやらなければならない訳ではありません。でもやったほうが便利です！

プラグイン「Media from FTP」をインストール

「Media from FTP」というプラグインがとても簡単で使いやすいので紹介します。

Media From FTP

プラグインをインストールするには、

1. WordPress管理画面の「プラグイン」
2. 「新規追加」
3. 「Media from FTP」と検索
4. 「今すぐインストール」
5. 「有効化」

すると「設定」の下に「Media from FTP」というコーナーが増えます。

「検索＆登録」をクリックしてください。

あとは一番上のチェックボックスにチェックを入れて、「メディアを更新」をクリックするだけです。これでメディアライブラリへのアップロードは完了です。

僕はこのプラグインで特別にプラグインの設定はいじっていませんが、気になる方は制作者のサイトをチェックしてみてください。

画像のリンクURLの書き換え

最後の大仕事です！これが終わればすべて完了です、頑張りましょう！

はてなブログの記事をWordpressに移行したので、画像のURLが当然はてなフォトライフの画像URLになったままです。それを今アップロードしたWordpressのURLに書き換えて行きます。

『Search Regex』で『はてなの画像URL』をWordPressに一括変換する方法

2018年2月1日

プラグイン「Search Regex」をインストール

先ほどと同じように「Search Regex」というプラグインをインストールします。このプラグインは、記事内の文字列やHTMLタグなどを一括で検索・置換できる、ちょーーーー優秀なプラグインです！

1. WordPress管理画面の「プラグイン」
2. 「新規追加」
3. 「Search Regex」と検索
4. 「今すぐインストール」
5. 「有効化」

有効化が済むと、管理画面の「ツール」の中に「Search Regex」ができています。

はてなフォトライフのURLとWordpressのURLの差

プラグインを使う前に確認しなければならないことがあります。このプラグインは記事内の文字列を置き換えるものです。

僕らが置き換えたいものは、はてなフォトライフのURLをWordPressのURLです。

では、はてなフォトライフのURLを確認してみます。

そして先ほどアップロードしたWordpressの画像URLは

となっています。赤い部分は共通しているのでそのままに、青い部分を一括で置換します。はてなフォトライフのURLの「はてなIDの頭文字」と「はてなID」はそれぞれ違うので、ご自分のをあらかじめ調べておいてください。僕のはてなIDは「george-gogo」なので、はてなIDの頭文字には「g」が入ります。

そしてWordpressのURLの緑の部分「2018/01」というのは、僕がこの作業をしたのが2018年1月なので「2018/01」が入っています。もし2020年10月に画像をアップしたなら「2020/10」にしてください。

「Search Regex」でURLを一括変換

URLのどこの部分を置換すればいいか分かったので、早速変換していきます。

管理画面の「ツール」の中の「Search Regex」を選択して下さい。

この画像の赤い部分と同じ設定にしてください。

そして、Search patternに

をコピペして、青い箇所を修正してください。

次に、Replace patternに

をコピペ。（日付は画像をWordpressにアップした年月に変えてね！2020年10月なら「2020/10」）

そして「Search」ボタンを押してください。この時点では保存されないので大丈夫！

何かしらが間違えていると、このように何も出てきません。もう一度見直してください。どーーしても分からなければこのプラグインを使わずコツコツやるのがベストです。

この画像では一件しか引っかかっていませんが、成功するとズラーーっと検索に引っかかったURLが出てくるはずです。

成功したなら「Repace」で変換できます。確認して大丈夫そうなら「Replace & Save」で完了です。これをやると全部書き換わるので、下の段（Replace pattern）が間違えていると、全部間違えたURLに変わってしまいますので注意して下さい！

終わった…。

まとめ

ここまでの作業お疲れさまでした。念のため全記事をチェックしてみてください（僕は完璧にできていました！）。本当に長くて大変な作業ですね、おかげでこの記事も凄いボリュームしなってしまいました。

僕ははてなフォトライフから1000枚ほどの画像を移行したのですが、結局この作業だけで1日掛かってしまいました…。ただ終わったときの達成感はやばかった。

しかし、はてなブログからついに独立した自分のブログです！どこまでも自己責任ですが、ワードプレスではとても沢山のことができます。ぜひ今後もブログライフを楽しんで行きましょう！

しかし2018年1月にはてなブログを辞めて、Wordpressを使ってブログを運営することを決断し、移行に踏み切りました。そして夫婦2人のブログを合体させて１つのサイトを作りました。

2017年夏頃から有名はてなブロガーの方たちの『はてなブログ』退会が目立ってきましたが、僕たちなりの理由を紹介していきたいと思います。

はてなブログでのアクセス数・収益

まずWordpressに引っ越し前の僕たちのステータスを紹介します。

僕たち夫婦は二人とも、おこづかい欲しさにブログを運営し始めました。商品紹介などのレビュー記事や、得た知識や経験のアウトプットをメインに記事を公開しています。そのため大きなバズの経験はほぼなく、一番バズッたときでも1日1万PVくらいです。僕のはてなブログ（急がば急いでまわれ）はまだ残っていますが、オハマのブログはこの「OHAMAstyle」に完全に移行しました。

はてなブログでのアクセス数

実際の2017年の平均アクセス数は

• ジョージ→平均4.5万PV（記事数88）
• オハマ→平均1.5万PV（記事数81）

といった具合です。

僕は更新をストップしていたので更新していた頃の半分くらいになっています…。妻のオハマは本当にコツコツとロングテール狙いのレビュー記事を増やし、コツを掴んだのか、2017年秋頃からグイグイきています。ま、現時点では二人とも伸びしろたっぷりのブロガーですね（前向き）。

はてなブログでの広告収益

2人のブログで使用している広告ASP別に収益を紹介します。こちらは2つのブログ合わせての月の平均になります。

• Googleアドセンス →￥1万
• amazonアソシエイト →￥1万
• 楽天アフィリエイト →￥0.2万
• A8ネット →￥0.5万

こちらも特に凄いわけではなく、多分普通です。ごくごく普通です。2人合わせて月に3万円ほどおこづかいを頂いています。その他のASPもちょこちょこ使っていたりしますが、ほぼ稼ぎになっていません。

しかし僕なんか更新していないし、何にもやっていないのに毎月お金が貰えている状態なので有り難いですね。

はてなブログからワードプレスに引っ越した理由

さて僕ら夫婦の紹介がようやく終わりましたので、はてなからWordpressに移行した理由を紹介します。

理由① 運営コストを減らしたかった

収益を得るためにはてなブログをやられている方のほとんどがはてなブログProを契約していると思います。当然僕もオハマもPro契約をしています。つまり２契約しているという訳です。

はてなブログProを年間契約すると￥8,434かかるので単純にその倍の値段の￥16,868を支払っています。しかし、レンタルブログではなくサーバーを契約して、１つのサーバーで運営すればコストは下がる。分かっていたのですが、引っ越し作業が面倒だったのと契約期間が残っていたので手を出していませんでした。

理由② もう借りているサーバーはある（しかも2個）

さらに無駄なコストを使っていまして、僕はすでにアフィリエイトサイト運営用のサーバーと、仕事用に使っているサーバーを既に2つ契約して持っているのです…。そのどっちかのサーバーを使えば新たにかかるコストは無いのです。本当にお金の無駄をしていますね。

ちなみにロリポップ！とエックスサーバーを借りていましたが、ブログを移行したのはエックスサーバーで借りているサーバーです。

理由③ はてブを活用できていない

はてなブログでサイト運営する最大のメリットは「はてなブックマーク」ですよね。はてなブックマークによって、記事が拡散されバズが起きやすかったり、SEOに有利になったり。ブログ始めて一記事目で盛大にバズったブログはいくつも見てきました。

しかし！完全放置の僕のブログと、商品レビューばかりのオハマのブログは、ブックマークされないのですよ。僕も妻もはてなブログの人たちをターゲットにブログを書いているわけではなく、検索流入してくれる方たちをターゲットにしていました。それでもブックマークしてくれていた方たち、感謝。

理由④ もう有料テーマSTORKを持っている

僕はHTMLをはじめとするホームページを組み立てる技術があるのですが、妻のオハマは何にも出来ません。Wordpressは簡単で初心者でも使えると言いますが、さすがに超初心者には厳しいと思います。

そんな妻には簡単なはてなブログはピッタリでしたが、僕は以前に友人から頼まれてWordpressサイトを制作した時に、STORK（ストーク）というWordpressテーマを購入して使用しました。その友人もHTMLの知識なしです。そんな友人でもSTORKなら使えているので、「これなら妻でも更新できるのでは？」と思っていました。

WordPressの有料テーマには、1回購入したら1個しかサイト作ってはダメだよって言うケチ臭いテーマと、1回購入したら何個でもサイト作っても良いよっていう良心的なテーマがあります。幸い「STORK」は後者の複数サイトOKのテーマなだったので、最終的な後押しになりました。

理由⑤ はてなブログ（レンタルブログ）への不安感

ブログ記事がある程度増えてきて、収益が発生しだしたらブログ記事と言えど立派な財産になります。となると、レンタルブログサービスにお金を払い続けるより、自前でやった方が安心です。その代わりサーバーやドメインの保守をはじめ、「全て自前で運営していかなければならない」という苦労がありますが…。

インターネットの世界はGoogleの気分次第でコロコロとルールが変わって行きます。その点の対策は、はてなに任すより自分で行動していった方が時代には対応していけると思います。

理由⑥ 記事カテゴリが共通している

僕も妻も、メインのカテゴリで「北海道移住」がありまして、二人の記事を合算すると結構な数の「北海道移住」記事がありました。検索上位に立っているのは妻の記事でしたが、二人ともそこそこ数字を出していました。

次第に「別々でやっているの勿体ないな」、「読者的には1つにまとまっている方が読みやすいだろうな」という思いが強まってきていました。

ワードプレスに引っ越した結果

引っ越し作業はそこまで難しくはありませんでしたが、マジで面倒くさいです。引っ越し作業にかかった時間はガッツリ3日間ほど。妻のはてなブログからリダイレクトで新しい記事に飛ばしたので、とりあえず移行初日はアクセス数は変化なしです。今後の経過なども公開していこうと思っています。

もし引っ越しを悩んでいる方、一記事でも増える前に引っ越しをした方が良いと思います。悩むということは、はてなブログに不満や不安があるわけで、コスト的にも安いサーバーを使えばワードプレスの方が安く済みます。

それに初心者の妻も1時間程度、記事の追加方法を教えたら使えるようになりました。「今後もずっとブログをやっていこう！」と思うならはてなブログよりWordpressの方が、オススメです。

オハマとは

東京で生まれの私。

オハマは1985年生まれのB型アラサーです。

生まれてから30年間、東京育ちです。東京の端っこの千葉の近くにずっと住んでいました。そう！ディズニーランドにも自電車で行けちゃうところに住んでいました。

2013年にジョージと結婚。元々私たちは高校の同級生だったのですが、卒業してからは会うこともなく。2012年に再会。猛アプローチを受け。笑　色々と事情があってなんと交際3ヶ月で婚約！

そして、2015年に北海道に移住。まさか交際3ヶ月で結婚するなんて思わなかったし、まさか自分が北海道へ移住してくるなんて思ってもいなかったし、人生何が起こるかわからないとはこのことですね！今は夫婦2人でとっても楽しい毎日を過ごしています〜！

北海道に移住して5年。東京育ちの夫婦が北海道に移住した理由から現在まで

2018年2月6日

職業は主婦とプラスα

東京時代は色々な仕事をしてきましたが、北海道に移住してからは、今は生活の8割は主婦をしていましたが、ほんのちょっとだけ「ものづくり」をして販売しています。ものづくりとは、アクセサリーをデザイン・製作して販売をしています。2013年からはじめているので、5年続けています。今は、イベント出店や雑貨屋さんやカフェに委託販売をしています。

ハンドメイドアクセサリー初心者が最初に知っておきたいポイントを公開！

2017年10月28日

本ブログを始めるにキッカケ

元々、夫のジョージがブログを書いていました。私もせっかく北海道移住もしてきたし、長い冬もあって家にいる時間も多くとれるので私も書こうと決めた訳です！生まれも育ちも東京な夫婦が豪雪地帯の北海道へ移住するなんてなかなかないと思うので、私たちの視点から書こうと思っています。

ここでは、北海道へ移住してきた話。私の好きなもの。おすすめのお店やサービス。実際に使ってよかったもの。良くなかったものなどを正直に紹介していきたいと思います。

過去にも『読者になるボタン』のカスタム記事を書きましたが、今回はその他のフォローボタンもまとめて一新しました！複数のSNSをやっている方には、このボタンデザインはおススメ！

まずは完成形

マウスを乗せるか、タップしてみてくださーい！どう？横にビヨーンで伸びたり縮んだり！かわいいですね。キュートですね。

このデザインのおススメポイントは、画面サイズやサイドバーなどのサイズに自動でピッタリサイズになる点です。

というわけでさっそく使い方を説明していきます。

HTML

まずはHTMLに各自みんなのURLリンクを貼り付けていきましょう。

<div class="follow-btn">
<ul>
<!--読者ボタン-->
<li class="btn1">
<a href="http://blog.hatena.ne.jp/はてなID/はてなドメイン/subscribe"  target="_blank"><span class="btn1-icon"><br /></span>Hatena</a></li>
<!--Twitterボタン-->
<li class="btn2">
<a href="https://twitter.com/intent/follow?screen_name=ツイッターID" target="_blank"><span class="btn2-icon"><br /></span>Twitter</a></li>
<!--Feedlyボタン-->
<li class="btn3">
<a href="FeedlyのURL" target="_blank"><span class="btn3-icon"><br /></span>Feedly</a></li>
<!--Facebookボタン-->
<li class="btn4">
<a href="FacebookのURL" target="_blank"><span class="btn4-icon"><br /></span>Facebook</a></li>
</ul>
</div>

リンクの貼り方解説

赤色でコメントした部分についてです。

はてなIDは僕で言うと『george-gogo』です。自分のプロフィールで確認できます。

はてなドメインというのは、自分のブログのURLの『http://』を除いたものです。僕のブログはhttp://georges.hatenablog.jp/なので、georges.hatenablog.jpがドメインになります。

ツイッターIDは『@』を除いたものを貼って下さい。

FeedlyとFacebookは自分のページのURLをそのまま貼り付けてOKです。

いらないボタンは消してOK

「僕は読者ボタンとTwitterだけで充分だよー」などの人は、各ボタンのHTMLの『<li>から</li>』の範囲を削除しちゃって大丈夫です！ちょうど僕が青色でコメントを入れている間ですね。

HTMLコピペの場所

サイドバーに貼る（PC）

1. デザイン
2. カスタマイズ
3. サイドバー
4. モジュールを追加
5. HTML

記事下に貼る（PC）

1. デザイン
2. カスタマイズ
3. 記事
4. 記事下

記事下に貼る（スマホ）

1. デザイン
2. スマートフォン（スマホのマーク）
3. 記事
4. 記事下

CSS

もう後はCSSをコピペするだけ！終わったようなもんです。

/*********フォローボタン**********/
.follow-btn{
 width: 100%;
 margin: 5px 0px 5px 0px;
}
.follow-btn ul {
 list-style: none;
 display: -webkit-flex;
 display: flex;
 margin: 0;
 padding: 0;
}
.follow-btn li {
 height:100px;
 width: 100%;
 -webkit-transition: width 0.3s ease-out;
 transition: width 0.3s ease-out;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
}
.follow-btn li:hover {
 width: 200%;
}
.follow-btn li span{
 line-height:2.5;
 font-size:180%;
 font-weight: normal;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.btn1{
 background: #5F5E5E;/*読者ボタンの背景色*/
}
.btn2{
 background: #6FB6C3;/*Twitterの背景色*/
}
.btn3 {
 background: #82C36F;/*Feedlyの背景色*/
}
.btn4 {
 background: #6998b9;/*Facebookの背景色*/
}
.btn1-icon:before{
 content: "\f000";/*はてなアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.btn2-icon:before{
 content: "\f035";/*Twitterアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.btn3-icon:before{
 content: "\f04e";/*Feedlyアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.btn4-icon:before{
 content: "\f036";/*Facebookアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.follow-btn a {
 width:100%;
 height:100%;
 font-size: 13px;
 line-height: 1;
 font-weight: normal;
 text-decoration: none;
 text-align: center;
 color: #fff;
 -webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}

はい！これをコピペして下さい！

PC

1. デザイン
2. カスタマイズ
3. カスタムCSS

スマホ（PROユーザー限定）

1. デザイン
2. スマートフォン
3. ヘッダー
4. タイトル下

もしこれが初めてのカスタムという人は、CSSを<style></style>で囲んで下さい！これをやらなきゃ、反映されないのでね。

<style>
ここにさっきのCSS全文をコピペ！
</style>

PCの方は囲まないで大丈夫です！

上手くアイコンが反映されない方

各ボタンのアイコンの箇所が数字の羅列になってしまうことがあるようです。正確な理由は分かりませんが、一応対処法です。

おそらく『\（バックスラッシュ）』が上手くコピーできていないのが原因だと思います。僕も何度も自分のコードのコピペを繰り返してみたら、この現象がたまに発生しました。何でかは分からないんだけど…。

とにかく『\』を使用している個所は緑色でコメントをしました。

このバグが出ている方は、自分のカスタムCSSに手打ちで『\』を追加してみてください。

windowsのキーボードでは、ひらがなの『ろ』の部分、Macでは『option+￥』で入力できます。これで解決できると思いますが、それでも上手く表示ができない方はご連絡ください。

さらにカスタマイズしたい人

サイズをコンパクトに

まず僕のこの記事の下のボタンを見てください。横幅いっぱいで極太です。これをスマートにします。

/*********フォローボタン**********/
.follow-btn{
 width: 400px;/*横幅*/
 margin: 5px auto 5px auto;
}
.follow-btn ul {
 list-style: none;
 display: -webkit-flex;
 display: flex;
 margin: 0;
 padding: 0;
}
.follow-btn li {
 height:100px;/*縦の幅*/
 width: 100%;
 -webkit-transition: width 0.3s ease-out;
 transition: width 0.3s ease-out;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
}
.follow-btn li:hover {
 width: 200%;
}
.follow-btn li span{
 line-height:2.5;
 font-size:180%;
 font-weight: normal;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.btn1{
 background: #5F5E5E;/*読者ボタンの背景色*/
}
.btn2{
 background: #6FB6C3;/*Twitterの背景色*/
}
.btn3 {
 background: #82C36F;/*Feedlyの背景色*/
}
.btn4 {
 background: #6998b9;/*Facebookの背景色*/
}
.btn1-icon:before{
 content: "\f000";
 display: inline-block;
 font-family: blogicon;
}
.btn2-icon:before{
 content: "\f035";
 display: inline-block;
 font-family: blogicon;
}
.btn3-icon:before{
 content: "\f04e";
 display: inline-block;
 font-family: blogicon;
}
.btn4-icon:before{
 content: "\f036";
 display: inline-block;
 font-family: blogicon;
}
.follow-btn a {
 width:100%;
 height:100%;
 font-size: 13px;
 line-height: 1;
 font-weight: normal;
 text-decoration: none;
 text-align: center;
 color: #fff;
 -webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}

こんな感じになります（スマホからこの記事を見ていると余り違いがないかも）。

これもいいねー。自分の使うボタンの数でCSSの一番上の横幅の設定をいじってみてください。ボタン1つあたり100pxくらいが丁度いいんじゃないかな。3つしかボタンを使わない方は300pxてな感じで。

さらにチョット下にある縦の幅で縦もお好きに調整してみてください！でも余り縦幅を小さくすると文字が入らなくなるので注意！

色の変更

CSSの途中で色が変更できるところにコメントを付けていますので、ご自分で好きな色に変更してください！

HTMLカラーコード

ちょっと解説（飛ばしてよし）

基本的には凄く簡単な仕組みです。マウスホバー時のwidthを可変させているだけ。でもtransitionを使ってビヨーンとなっている風に見せているんです。各ボタンにはwidthをかけないで親要素でボックス幅を決めているので、ホバーされたボタン以外は小さくなるってところがミソですな。

まとめ

どうでしょう、シンプルだけど他にあまりないデザインで、素敵な感じのボタンを目指したのですが。まいっか、僕は気に入りました！

もし動作が安定していなかったり、分からないことがあればコメントでもTwitterでも質問してくださいねー！

おしまい。

▼もしも勉強するならこの本がマジでおすすめ。学校で使ってました。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

created by Rinker

¥2,860 (2021/09/26 18:47:27時点 Amazon調べ-詳細)

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

AdSenseには広告のブロックという設定ができるのですが、Googleの使い方のヘルプって何だか無機質で読みづらいですよね。そんな理由でやったほうが良いことは分かってるけど、難しそうだからやってない方は多いはず。

そんな広告のブロックを驚くほど簡単に設定できる『Google Publisher Toolbar』というツールがあるので紹介します。

はじめに広告をブロックする理由

広告のブロックと言っても、広告全体をブロックするということではありません。この広告は収益性が悪いからこのブログには非表示にするということです。

一般的にAdSenseから配信されるAmazonや楽天の広告はブロックするのが常識です。それはAdSenseを導入しているブロガーの多くがAmazonや楽天のアフィリエイトもやっているからです。

せっかく記事内でAmazonのリンクを貼っているのに、AdSenseにAmazonの広告が表示されていて、その広告からAmazonに飛んでしまわれたらAmazonの収益がはいりません。逆にAdSenseの収益は当然入るのですが、とっても単価が安いのでAmazon・楽天のリンクを貼っている人は絶対にAdSenseでは広告をブロックしたほうが良いというわけです。

まあ本来は収益を上げるためではなく、コンテンツと広告をマッチさせるために存在している機能なのですが、結果的にそれが収益につながるので必須の設定です。

Google Publisher Toolbarとは

ようやく本題です。広告をブロックには広告のリンク先のURLを知る必要があります。しかし絶対に自分のサイトの広告を自分でクリックしてはいけません。ダメ、絶対。

そんなときに大活躍するのが『Google Publisher Toolbar』というChromeの拡張機能。ではこのツールで出来ることを簡単に書き出してみます。

1. AdSenseに行かなくても収益情報が見れる
2. 各広告のクリック情報なども一瞬で見れる
3. 広告のブロックもホントに一瞬で設定可能

主な機能はこんな感じです。Googleの公式のツールなので安心して下さい。

Google Publisher Toolbarの設定

はじめにパソコンのインターネットブラウザをChromeにしていない方はChromeにしましょう。Googleの機能なのでGoogleのブラウザにするのは当然です。

インストール手順

所要時間1分

まずはChromeに拡張機能をインストールしましょう。

これでインストールが完了です。インストールが終わるとGoogleアカウントの確認です。

Chromeの画面右上のアイコンをクリックして下さい。

どんどん進みます。

この後、ご自分のGoogleアカウントを設定して完了です。

Google Publisher Toolbarの使い方

ご自分のサイト上で先程のGoogle Publisher Toolbarのアイコンをクリックしてみましょう。

すごい便利！いちいち重たいAdSenseのページに行かなくても速攻で収益情報をチェックできます。

そして忘れちゃいけないのが『広告オーバーレイをON』にすること。一体全体広告オーバーレイとは何なのか。説明していきましょう。

広告オーバーレイの使い方

ONにしたらとりあえず自分のサイトをリロード（更新）してみてください。するといつものAdSense広告が緑色のフィルターがかけられます。

これで間違えて自分のサイトの広告をクリックしても大丈夫です。広告のリンク先に移動することはありません。そしてその代わりに、広告の設定がこの場でできちゃうんです！さっそくクリックしてみます。

ブログ全体の広告情報ではなく、各広告の詳しい詳細を確認することが出来ます。さらに左下では記事冒頭で紹介したように、広告のブロックの設定が本当に簡単にできちゃいます。

素晴らしい。

まとめ

僕はAmazonや楽天などの単価が低く相性の悪い広告の他に、Google系の広告もブロックしています。恐らくGoogle系の広告は、一般の広告が不足している時なんかに出やすいんだと思いますが、Google AdSenseの広告が出てたって誰も押しませんよね。

こんな感じでキチンと広告の設定をすることで、収益は上がることは間違いなし！と、多くの人は言っています。でも僕はそんなことを言えるほど稼いではいないので偉そうなことまだ言えないんだけどね（とほほ）。

本当に簡単に設定出来て、とっても便利な拡張機能なのでぜひ使ってみてください！

サンスター キャンパスノートA罫5冊パック SW(スターウォーズ) S2619920

posted with カエレバ

サンスター文具

Amazonで購入

楽天市場で購入