ラーメン、それは人類が到達した光

日々の気づきと思ったことをそのまま書き連ねるブログ

【初心者向け】無課金ではてなブログを始めた人が最初にやるべき基本設定はこれ!

こんばんは。
今回は、かなりありふれていますが「自分がやってよかった」と感じた設定やツールについて記載していきます。

基本的に、いろんなサイトを参考にやってみたもののあまり統一的に書かれている記事が見つからなかったので、後に自分がもう一つブログを作るとして、参考になればという気持ちです。

何をやったらいいのかをざっくり分けると、以下の3つに分けられるかと思います。

  1. はてなブログの基本的な設定(プライバシーポリシーちゃんと設定しとくと後で楽そう)
  2. Google AnalyticsやGoogle Search Consoleの設定(自分自身のアクセス除外設定忘れている人多そう)
  3. はてなブログのデザイン面の設定(ググると色んな情報が出てくるところ)

それぞれ細かく書いていたら結構な分量になったので、上記の項目についてそれぞれ1記事ずつ書く形で紹介しようと思います。
ということで、今日は「はてなブログの設定編」の記事です。

はてなブログの設定編

1. アカウント設定を行う

まずはここからです。
はてなブログのサイドバーの一番下に、「アカウント設定」という項目があるのでそこをクリックします。

f:id:yassie-tp-0243:20190827211856p:plain

アカウント設定はここです

ここでは好きなニックネームとプロフィール画像を設定できるのでしておきましょう。
また、初めてはてなブログを使うと見落としがちなのですが、上の方にタブがあります。
デフォルトでは「基本設定」をいじる画面に入りますが、「外部サービス連携」も最低限Twitterだけはやっておくと良さそうです。

f:id:yassie-tp-0243:20190827212201p:plain

外部サービス連携は設定しておきましょう。

この、設定画面の上部に切り替えタブがあるのは結構初心者だと見落としやすい(僕はめっちゃ見落としてました)ので、意識して見るようにしておくと良さそうです。
ちなみに、僕はこのブログ用に開設と同時にTwitterアカウントを作りました(つまり0フォロワーから始まりました)が、それでもTwitter経由の流入が多いです。

2. はてなブログの基本設定を作る

もうキャプチャがなくても分かると思うので、ここからは基本文字で説明します。
はてなブログのサイドバーに「設定」という項目があるのでそこをクリックします。

すると、上部に「基本設定」「詳細設定」「公開設定」の3つのタブがある画面になるので、まずは基本設定から作っていきます。
とはいえ、ここではブログ名とブログアイコン, ブログの説明をつけるだけです。

編集モードやコメントについては、好きな設定を反映すれば良いと思います。
特にこだわりがなければ、デフォルト設定のままで良いと思います。

諸々設定したあとに、「変更する」というボタンを押さないと反映されないのでそこだけ注意です。
「aboutページ編集」というところをクリックすると、別タブで開いたりせず普通にURL遷移して設定していた内容が保存されないのは結構罠でした。

3. aboutページを作る

基本設定の中に、「aboutページ編集」というリンクがあるのでそれをクリックします。

f:id:yassie-tp-0243:20190827231705p:plain

aboutページ編集ボタンです。

ここでは、aboutページの内容をHTMLやはてな記法で編集できます。
記事を書く際には、「見たまま編集」モードがあるのに何故かaboutページにはないので、MarkdownとかHTMLとか分からない!!という人は一旦記事として内容を書いて、HTML編集モードにして出てきた文字列を全コピペするのがオススメです。

また、amazonアソシエイトなどアフィリエイトプログラムを申し込もうと思っている人はaboutページにプライバシーポリシーを書いてしまうのもオススメです。
面倒な人は、以下に僕のサイトのaboutページの内容のHTMLを貼っておくので、それをそのままサイト名とかサイトの説明部分だけ変えて使ってもらって構いません!

<h3>プライバシーポリシー</h3>
<p>本文書は、当サイト(ラーメン、それは人類が到達した光)における個人情報の保護およびその適切な取り扱いについての方針を示したものです。</p>
<h3>このサイトについて</h3>
<p>このサイトのサイトアドレスは https://yassie-tp-0243.hatenablog.com です。<br />
このブログは、以下の話題が多めの雑記ブログです。<br />
株・投資 / 仮想通貨・DApps / (主に受験の)勉強方法 / ゲームや漫画などエンタメ<br />
<br />
これまでの仕事や、大学時代の経験から「手法よりも心のあり方」が何よりも成果に直結すると感じているのでそのあたりも発信するかもしれません。<br />
<!-- ここに読者になるボタンを入れると良さそうです。 -->
</p>
<h3>お問い合わせについて</h3>
<p>本サイトの管理者はTwitterアカウントを保有しております。<br />
何かありましたら、Twitterのダイレクトメッセージにてご連絡ください。<br />

<!-- ここにTwitterのフォローボタン入れると良さそうです。 -->
</p>
<h3>個人情報の収集について</h3>
<p>利用者は匿名のままで、当サイトを自由に閲覧する事ができます。お問合せ等、場合によっては、利用者の氏名やメールアドレスなどの個人情報の開示をお願いする事があります。しかし、利用者の個人情報を利用者の許可なく、当サイトから第三者へ開示・共有する事はありません。</p>
<h3>当サイトに掲載されている広告について</h3>
<p>当サイトでは、Amazon.co.jpアソシエイト、第三者配信の広告サービスを利用しています。このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報 「Cookie」(氏名、住所、メール アドレス、電話番号は含まれません) を使用することがあります。またGoogleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、<a href="https://policies.google.com/technologies/ads?hl=ja">ここをクリック</a>してください。</p>
<h3>当サイトが使用しているアクセス解析ツールについて</h3>
<p>当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。この規約に関して、詳しくは<a href="https://marketingplatform.google.com/about/analytics/terms/jp/">ここをクリック</a>してください。</p>
<h3>当サイトへのコメントについて</h3>
<p>当サイトでは、スパム・荒らしへの対応として、コメントの際に使用されたIPアドレスを記録しています。これはブログの標準機能としてサポートされている機能で、スパム・荒らしへの対応以外にこのIPアドレスを使用することはありません。全てのコメントは管理人が事前にその内容を確認し、承認した上での掲載となりますことをあらかじめご了承下さい。加えて、次の各号に掲げる内容を含むコメントは管理人の裁量によって承認せず、削除する事があります。</p>
<ul>
<li>特定の自然人または法人を誹謗し、中傷するもの。</li>
<li>極度にわいせつな内容を含むもの。</li>
<li>禁制品の取引に関するものや、他者を害する行為の依頼など、法律によって禁止されている物品、行為の依頼や斡旋などに関するもの。</li>
<li>その他、公序良俗に反し、または管理人によって承認すべきでないと認められるもの。</li>
</ul>
<h3>当サイトへのリンクについて</h3>
<p>当サイトは完全リンクフリーです。トップページ、記事など、正規に公開しているページであれば、どのページにリンクしていただいても問題ありません。ただしインラインフレームの使用や、画像への直リンクなどは禁止させて頂いております。</p>
<h3>免責事項</h3>
<p>当サイトに掲載する情報は記事公表時点の正しいものを提供するよう努めております。ただし、提供している情報、リンク先などにより、いかなる損失や損害などの被害が発生しても当サイトでは責任を負いかねますので、ご了承ください。</p>
<p>リンク先の商品は当サイトが販売しているのではなく、各リンク先店舗での販売となります。購入方法、その他お問い合わせは各店舗までご確認ください。商品購入に関するトラブルに関しては、当サイトでは責任を負いかねますのでご了承ください。</p>
<h3>著作権について</h3>
<p>当サイトに存在する、文章・画像・動画等の著作物の情報を無断転載することを禁止します。</p>
<p>初出掲載:2019年8月22日</p>

ちなみに、結構細かい話にはなりますが上記のHTMLコードの中の、以下の行の場所に読者になるボタンとTwitterフォローボタンを挿入すると良さげになります。

<!-- ここに読者になるボタンを入れると良さそうです。 -->
<!-- ここにTwitterのフォローボタン入れると良さそうです。 -->

 これは意外と簡単で、読者になるボタンについては設定画面の「詳細設定」タブの中にある「読者になるボタン」の中身のコードをそのまま貼り付けるだけです。

f:id:yassie-tp-0243:20190828000620p:plain

読者になるボタンのソースコード

Twitterのフォローボタンも簡単です。
※以下の説明は、GoogleChromeを使っている前提で説明しています。

まずaboutページの中にTwitter連携のボタンがあるので有効化します。

f:id:yassie-tp-0243:20190828000917p:plain

Twitter連携を有効化する

この状態でaboutページの変更を保存すると、「aboutページを確認する」というリンクが上部に表示されるのでクリックします。

f:id:yassie-tp-0243:20190828001104p:plain

aboutページを確認してください。

すると、aboutページに飛ぶのでそのページでChromeのデベロッパーモードを起動します。
デベロッパーモードは「その他のツール」の中にあります。macなら command + alt + i で起動します。

デベロッパーモードを開いたら、macならcommand+F, WindowsならCtrl+Fを押して検索モードに入ります。

f:id:yassie-tp-0243:20190828002255p:plain

こんな感じで、「Find by string, (以下略)」 みたいな検索ボックスが出てきたら正解です。

その検索ボックスの中に、以下の文字を入力してEnterを押してください。

twitter-widget-0

それができたら、検索結果が黄色くなってコードが見つかるはずです。
見つかったところにマウスカーソルを合わせて右クリックし、[Copy] > [Copy element] でコピーできたコードをそのままaboutページのTwitterのフォローボタンを貼りたいところに貼り付ければ完了です。

f:id:yassie-tp-0243:20190828002712p:plain

こんな感じになれば、コピーできたはずなのでそれを貼り付けてください。

この<iframe ~>ってのをHTML編集モードで貼り付ければ、はてなブログの好きなところにTwitterのフォローボタンを設置できるので割と便利で、覚えておいて損はないです。

↓こんな感じで設置できます。

4. はてなブログの詳細設定を行う

ここでは、アイキャッチ画像等を設定できます。
まぁぶっちゃけここの設定は好みによると思うのですが、一応僕の設定を記載しておきます。

まず、トップページの記事数は「3」に設定しています。
というのも、ブログの記事上下にソーシャルボタンを設置していると結構サイトが重たくなるので、3記事にしています。

「カテゴリー別記事一覧ページにタイトル(カテゴリー名)を表示する」はとりあえず有効にしています。

記事URLは正直好みだと思うのですが、僕は「タイトル」を設定しています。

(19/12/24 追記)SEOを意識して過去記事のタイトルを修正したりすることを考えるなら、毎回カスタムURLを設定する方が良いかもしれません。


なぜかというと、Google ChromeとかだとURLの欄から検索することって結構あると思うのですが、その際に記事のタイトルの日本語を入れたりすると、URLの候補に出てくるかな?と思うからです。

僕自身がそうなのですが、はてなブログとかで「この記事良いな」と思っても案外ブクマもスターもつけず、最初は流し読みでその時点では何もせずに閉じてしまうことって結構ある気がしています。
その際、「昨日読んだ記事もう一回読みたいけどなんだったっけな...?」とうろ覚えのタイトルで検索する時にURLが補完されると、僕は嬉しく感じます。

解析ツールについては、次回の記事で詳しく説明するので割愛します。
検索エンジン最適化の項目については、ググってみたところそんなに影響がない項目のようなので正直放置しています。
はてなブックマークのコメントは表示設定にしています。

5. はてなブログの公開設定を行う

ここは、たぶん半分プライベートな非公開のブログを書く人にとっては大事な設定なんだと思います。
僕は公開設定でブログを行なっているので、特に何もいじりませんでした。

まとめ

ということで、今日は自分がやってきた「はてなブログの設定」についてでした。
この記事の内容が、なんか殆どプライバシーポリシーの説明になっている気がするのは多分気のせいです。

ということで、後日また「Google系解析サービスのアカウント登録&連携」と「はてなブログのデザイン設定」については書きたいと思います。
それではまた〜。