この手順で、一週間から10日程度でほぼ今の僕のブログと同じものが作れます。
ここ2ヶ月やったすべてのことを記載しました。
まず目次だけ見てもらうと手順の把握に役立つと思います。
ブログサービスの選択
僕がWordPressをメインにしていない理由
WordPressから始めそうになりますが、読んでくれる人が増えて、なおかつWEBデザインのスキルが上がってからにしたほうがいいです。
コンテンツのない初心者がWordPressからはじめる場合、サーバーの選択、WordPressのインストール、開設後に何か月もアクセスが伸びない、という部分で困難が待ち受けています。
今の段階で苦労するより、将来のはてなからのWordPressへの移行での苦労のほうが知識、経験があると思うので楽だと思います。
はてなPROを選んだ理由
FC2、アメーバ、SEESAAを検討しましたが、はてなに決定。
はてなはとりあえず最初に読んでくれる人が多いそうです。
そして有料サービスのProにしてください。スマホサイトにアフィリエイトがつけられ、またカスタマイズができるようになります。
アフィリエイトを申し込むまでの1週間
はてなPROでブログを２つ開設
メインのブログとテスト用のブログを一つずつ作ります。
1日1記事、500字から1000字の記事を7個作る
メインのブログでは、完全ノーマルな設定で、1日1記事、500字から1000字の記事を、写真なし、リンクなしで8記事作ってください。
アフィリエイトの審査のために書きます。
アフィリエイトの申し込み時、250字程度でサイトの自己紹介をします。
今後このブログがどのように世界に貢献できるかを書く必要があるので、ちょっと固めに書いたほうがいいと思います。
メインブログと同時進行でテスト用ブログでWEBデザインをかじる
「かじる」ということが重要。目的は、ほかの人が書いたプログラムのコードを適切な場所に張り付け、重複や間違いがあったら見つけて張りなおせるようになることです。
見出しなど、左上のメニューすべてを使った記事を書く
記事を書く画面で、左上にいろいろメニューが出ています。
http://netbiz-kigyo.com/704.html
この記事を参考に、テスト用ブログに適当な記事を５個程度作ってください。
１日で５個作っても構いません。
５個すべての記事で、このメニューの要素を入れてください。
このメニューの内容が、HTMLやCSSと連携して記事のデザインに反映されます。
ProgateでHTMLとCSSの入門をクリアする
入門部分は無料、４時間で終わります。
エディターはAtomを使っています
コードを確認するのにエディターが必要になると思います。でもなくても構いません。
エディターは一長一短で、ProgateのようにHTMLとCSSがリアルタイムでプレビューできるものが見つけられませんでした。
もしかしたらあるのかもしれませんが、今のところコードの確認だけでいいので、デザインがいい、無償ということでAtomを使用しています。
参考ブログ「Literaly」
はてなブログを一瞬でおしゃれにする最強のデザインカスタマイズ方法（テーマDUDEの手引き） – Literally
これを読んで、テスト用ブログでできる限りのカスタマイズをしてください。
- デザインテンプレート「DUDE」インストール
- タイトル変更（必要なら）
- タイトル画像＆ブログ紹介文設定
- おすすめ記事３つをBOXに表示
- サイドバー表示変更
- 署名
以上を設定。
サイドバー並び替えたりもできます。
また、何かと色を変えるときに参考になるサイトはこちら。
WEB色見本 原色大辞典 – HTMLカラーコード
スマホ用サイトに着手
ヘッダー（タイトル部分）変更
【スマホ版】はてなブログのヘッダー部分のカスタマイズ方法まとめ（グローバルナビ・フォント変更・デフォルト表示削除など） – Awesome
ヘッダー（他ブログタイトル部分）はこちらを参考にします。
こちらの記事のグローバルメニューは設定せず、googleフォントの設定をしておきます。
記事一覧のデザインを変更
はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 – Literally
を参考に、スマホ用の設定をします。
DUDEを設定しても、スマホのデザインは変わっていません。
TESTのブログで試してください。
- フォント変更
- 記事一覧のデザイン変更
以上の設定をします。
右上にメニューボタンを設置
参考記事
【はてなブログ】スマホ版にクールなトグルメニューを設置してみた – Warorince＠Advice
アフィリエイトに申し込む
1週間経ち、記事が7つそろったら以下4つを申し込みます。
googleアドセンス
amazonアソシエイツ
楽天アフィリエイト
itunes アフィリエイトプログラム
アフィリエイトの審査結果が出るまでの間も1日1記事を書きます。
アフィリエイトの審査が4つとも降りたら、つぎに進んでください。
僕の場合は三日で審査がすべておりました。
アフィリエイト承認後
承認後は、記事の書き方がデザインに反映される感覚を覚えます。
googleアドセンス設置
アドセンスは３つ貼れます。場所はほんとに人それぞれだと思います。
記事中に設置したい場合はこちらを参考にしてください。
はてなブログへのアドセンス設置を全自動化するコード（コピペOK） – 45 For Trash
PC用、スマホ用それぞれ、利用する方に張ります。
記事の書き方
見栄えの良い記事を書くために覚えておくことがあります。
Flickrの使い方を覚える
ログインのためにyahoo.comに登録します。
また、著作権のある写真なので、クリエイティブコモンズのライセンスについて知る必要があります。
クリエイティブコモンズとは？フリッカーで簡単に無料写真を探す方法
ライセンスについてこちらが参考になります。
カエレバ、ヨメレバの使い方を覚える、デザインをカスタマイズする。
はてなの設定にアフィリエイトのIDを入れて使う方法や、amazon、楽天それぞれのサイトで商品のリンクを作る方法などありますが、アフィリエイトのリンクを作るときはこのカエレバのサイトのみを使います。
一つの商品の広告に複数のアフィリエイト先を記載するツールです。
その購入先のボタンのデザインを変更します。
コピペ一発！はてなブログでカエレバ・ヨメレバをオシャレにカスタマイズ！ – いつ俺〜いつから俺ができないと錯覚していた？〜
ここまでが現時点での僕のやったことのすべてです
ここまでで、引用させていただいたデザインを使わせていただき、２か月前の自分では想像もできなかったページで、、広告をつけて記事を書くことができました。
今後はいい記事を積み重ねて、SEOの意識とデザインの両面を磨いていくことになります。
SEOについてはgoogleアドワーズ、googleアナリティクスについての確認と、はてな自体の仕組みについて勉強して行く必要があると思います。
あとはもっとデザインを変えたくなれば変えるかもしれませんし、WordPressのほうも勉強するかもしれません。
より遠くへ、より多くの人に届くようにBlogをつづけていきたいと思います。
最後まで読んでいただきありがとうございます！
ノイズキャンセリングイヤホンを使用したおすすめの勉強方法をこの記事で紹介しています。騒がしい場所で集中するためのアイデアです。
コメントを残す