現役Webデザイナーが、初めての「はてなブログ」で カスタマイズした事まとめ♪①

  • 投稿日: 2017/02/06
  • 更新日: 2018/09/14

					現役Webデザイナーが、初めての「はてなブログ」で カスタマイズした事まとめ♪①

どうも!カワウソ女子のアラサー日記ブロガーの「カワウソ」です。
今日はWebデザイナーをしている私が、初めてのはてなブログで戸惑った事、
便利だった事、カスタマイズした事等を少しずつ書いていきたいと思います!
これを全部見ればあなたも素敵なブログができるかも!
今日は初心者の方向けに第一弾を書いみたいと思います!!

「待ってくれ、はてなブログ難しいんだが!(´ཀ`)」

実は言うと私、少々はてなブログをナメていましたw

私今在宅で開発をしていまして
結構時間があるのです。

と言う事で、
「在宅してるし、ブログやろー!せっかくならアフェリエイトやろう!」
「でも、Wordpressだとカスタマイズとかしなきゃだからー、さくっとはてなブログや!」
ってな事でスタートしたのです。


はてなブログのページを開く。 ٩( ‘ω’ )و
最初の登録を終える。
普段はWordpressの構築に慣れているので、
「はてなブログ」ってもっとわかりやすく、
他の方がはてなブログで載せているカスタマイズ内容
(綺麗なSNSのフォローボタンとか、綺麗に分けられた関連記事のパーツとか)は
あらかじめあるものだと思っていました。

ブロガーの方本当すいません(笑)


はてなブログでアフェリエイトとかやっている方とか、
本当色々とカスタマイズされているんですよ!
めんどくさカスタマイズが大変そうで、開設5分で挫折しかけました。囧rz

落ち着いて!まずは計画や!( T_T)\(^-^ )

そうです、ちょっと心の準備ができてなかっただけなんでー、
自分、ビビってねーですから!
と言うわけで、カスタマイズしていく順番を考えました!

  • まずは骨組みになるテーマを決めよう!
  • ドメインを決めよう
  • SNSに登録しよう
  • ヘッダー・フッター・サイドバーをごにょごにょ
  • SNSのボタンを付けよう
  • アフェリエイトの申請と独自ドメイン化して公開

大きく分けると、この6つです。
今のところここまで出来ているので
ポイントだけ説明しておきます。


まずは骨組みになるテーマを決めよう!

HTML、CSS等がわかっていれば大抵どのテーマでも変わらないと思うのですが、
そうでない場合は、なるべくコピペでカスタマイズできるもの
を選ぶのがいいかもしれませんね!
「レスポンシブ?なんやそれ!」という方でしたら
テーマの説明事項に「スマホに対応しています」とか「レスポンシブです」
というテーマ一択だと思います。(今結構あります)
私が今現在使っているのは【CONTENTS】というテーマなのですが、
インストールした状態のままでも使いやすい印象でした。

また、最近新しく追加されていた【DUDE】というテーマも
キュレーションメディアみたいでよかったのですが、
まだレスポンシブデザイン化されていないので、
レスポンシブ対応したら乗り換えるかもしれません!٩( ᐛ )و
フォントとかは、Google web fontsで少し似せましたー!


独自ドメインを決めよう(任意)

次に決めた方がいいのがドメインです。
独自ドメインはURLのことで、はてなブログを始める時に決めたのとは異なります。
はてなブログ初期に決めたものは、あくまでもはてなブログの傘下に収まっているURLなので
自分だけの、ブログ名.comとかmyblog.comとかそうゆう固有のドメインを独自ドメインといいます。
まずは .comでも.netでも.jpでもなんでもいいと思います。
決まりはないですが、一般的に.comは商用サイトに多く、
.netはIT関係とか非営利団体に多く、
.jpは日本国内の大きい会社等でよく使われています。
私は、なんとなく「どっとこむ」っていう響きが好きなので
.comにしています٩( ‘ω’ )و
任意と書いたのは、別に独自ドメインがなくてもブログの運営ができるから
という理由ですが、有料プランでアフェリエイトをやる方は必須ですね!


SNSに登録しよう

独自ドメインまで獲得したら、ブログ名がしっかり固まったという事なので
SNSに登録しましょう!
私は、Facebook/Twitter/Instagramに登録しています。
なお、はてなブログでfacebookの連携等はしていません。
理由は、昔と違ってfacebookページは個人のアカウントの一部として作られます。
どうしてもはてなブログと連携すると、個人アカウントに紐付いてしまっているので
あまりオススメしません。
※facebook/twitterに関しては、記事を書き終わって公開した後に
共有ボタンがありますので、そちらで十分と思います(๑╹ω╹๑ )


ヘッダー・フッター・サイドバーをごにょごにょ

ここが一番大変かもしれません!あと時間もかかる;
自分でレイアウトが自由になるという事は、
「自分で良いと思うデザインにする」という意思が関わるからです。
でもでも、自分が見てる中で見やすいなと思ったものをどんどん作っていけばいいと思います。
私の場合は、ヘッダーのメイン画像はPhotoshopで、
フッターとナブゲーションはテーマのカスタマイズページを見て、
サイドバーはgoogleパイセンに聞きながら変えていきました。
細かい技術的な部分は、後日別の投稿でお教えします。


SNSのボタン(ウィジェット)を付けよう

ある程度形になったら、記事を拡散してもらうためのSNSシェア(いいね)ボタンと、
SNSのページに「いいね」してもらうためのボタンをつけます。
あと、ウィジェット(タイムラインとか見れる枠みたいなやつです)
これらは、みんなSNS側で用意されていますので、下記を参考にTRY!!

★facebookのいいねボタン生成ページ
developers.facebook.com

★facebookのウィジェット生成ページ
developers.facebook.com

★twitterのフォロー・ウィジェット作成ページ
(今は、この画面から両方作成できるようです!)
Twitter Publish

★instagramのバッジ作成ページ
Instagram

※いずれも、該当アカウントでログインしてから作って見てくださいねー!


アフェリエイトの申請と独自ドメイン化して公開

ここまできたらページは一旦公開していいと思います!
独自ドメインを取ってある方は、
諸々記事を書いてしまう前に独自ドメインに変更してから、
公開して記事を書き始める事をおすすめします!
SEO的にちょっとめんどくさいので( ˊ̱˂˃ˋ̱ )

  • まずは骨組みになるテーマを決めよう!
  • ドメインを決めよう
  • SNSに登録しよう
  • ヘッダー・フッター・サイドバーをごにょごにょ
  • SNSのボタンを付けよう
  • アフェリエイトの申請と独自ドメイン化して公開

まとめ②では、つまずいた点とかを書ければいいなと思います!
でわ!

この記事が気に入ったら
いいね ! しよう

Twitter で