【初心者でも簡単!】「はてなブログ」立ち上げ方法

今日も元気に、こんにちは★キャロリーナです! 初心者の私が、やってみて感じたこと、難しかったことを紹介していきます。

 

今回は、「はてなブログを立ち上げる」です。

会社が企業に所属しなければ副業がオッケーになり、そうだブログを始めてみようと思い立ち上げました。

 

私はというと、大学の頃1年程度C言語は学びましたが、全て忘れてほぼ初心者です。

まずは、結果!

なんとか1日で形ができました!細かい設定や独自ドメインの設定が難しく、まだ設定しきれていませんが、「はてなブログの立ち上げ」自体は簡単!

フッダの文字のかえ方とURLの紐づけに手こずったので、ぜひ参考にしていただければと思います。

これからカスタマイズしていくのが楽しみです。

何故はてなブログを選んだか

ずばり、初心者でも簡単にブログがはじめられるとの口コミが多かったからです!

最初から課金するつもりだったので、Worf Pressも検討しましたが、はてなブログと比べると少し難易度が高そうでした。

初心者の私が、無理せずに続けられることを一番に考え、はてなブログを選択しました。

はてなブログの登録

まずは、はてなブログに登録しましょう。

登録は、簡単です!こちらのページを参考にして登録しました。

無料でも登録ができますので、ぜひ思いったったら行動してみてください。

【2022年5月版】超簡単!!はてなブログの始め方!初心者でも楽に作れる無料ブログ!|hitodeblog(ヒトデブログ)

はてなブログProと無料版はてなブログの違い

はてなブログPROというのは、はてなブログの有料プランの事です。

有料プランの中で特に魅力的だなと思ったものは、以下の4つです。

  • 独自ドメインの設定
  • 広告の非表示
  • 写真のアップロードできる量が増える
  • ブログのカスタマイズ(デザイン)の幅が広がる

まずは、無料版でもいいかなと思っていたのですが、収益化も視野に入れていたので、はてなブログProに登録しました。

私は自分を追い込むタイムなので、お金を払えばやる気がでる!途中でやめられないから続けることができる!というメリットもあります。

デザインの選択

登録ができたらまずは、ワクワクのデザインの設定をしました!

ブログ書かないんかいって!まずは、見た目からテンションを上げていきます。

 

やったことは、以下の5つです。

  • haruriのテーマダウンロード
  • 蛍光ペン風アンダーラインの導入
  • フッダの変更

haruniのテーマのダウンロード

まずは、トップページのデザインを選択してください。

デザインを選択すると、右のような画面になりますので、一番下までスクロールしてテーマストアでテーマを探すを選択してください。

テーマストアが開かれますので、好きなテーマを選択してください。

私は、人気順にしてかわいくて見やすいと評判の「Haruni」を選択しました。

テーマを使ったブログがこちらです。

プロフィール - 私の夫は変なところでこだわりが強い! (hatenablog.com)

 

テーマを選択したら、プレビューしてインストールを選択します。

これで、テーマが変更できます。

最後に上の「変更を保存する」を押すのを忘れずに。

蛍光ペン風アンダーラインの導入

重要な場所にこのようにアンダーラインが引けます。

先程のようにトップページのデザインを選択してください。

デザイン選択しスパナのマーク(カスタマイズ)を選択します。

デザインCSSを選択し、ピンクの枠の中に右の文字列(コード)をコピペしてください。

 article em{ font-weight:bold; font-style: normal; margin:0 0.1em; padding:0.1em 0.2em; background:#fcfc60 !important; background:linear-gradient(to bottom, transparent 60%, #ccffff 60%) !important; } article i{ font-style:oblique !important; }。

 

 

 

 

 

「変更を保存する」を選択してください。

こちらの設定を行うと、記事を編集鵜する画面で斜体(i)にすると蛍光ペン風アンダーラインが引かれます。

 

デフォルトの設定では、アンダーラインの色は、青です。

変更したい場合は、「#ffd700」の部分を好みのカラーコードにします。

以下のページを参考に、色々な色に変更してみてください!

WEB色見本 原色大辞典 - HTMLカラーコード (colordic.org)

 

スマホ画面もPC画面と同じデザインにするには、「デザイン」>「スマホのアイコン」>「詳細設定」>「レスポンシブデザイン」にチェックを入れます。

スマホ画面もこのようなかわいい画面なりました!

フッダの変更

最後にフッダの変更をしました。

フッターを変更するには、デザイン>スパナマーク(カスタマイズ)>ヘッダを選択します。

ブログタイトル下をタップすると以下のような文字列(コード)がでてきます。

 

16行目あたりに、フッダの題名を変更する文字列とURLを紐づけることができる場所があります。

ピンクの部分に「題名」、青の部分に「紐づけたいURL」を記入して下さい。

<li><a href="ここにURLを入力">自己紹介</a></li>

 


こちらを行うことで、Haruniのテーマを自分のブログらしくすることができます。


どんどんブラッシュアップしていきます。

次は目次の作り方を勉強していこうと思います。