はてなブログのタグの付け方や見出しをカスタマイズして表示する方法
こんにちは、株式会社フレンドマークの五十嵐です。
はてなブログは初心者でも使いやすいブログとして有名です。
はてなブログのタグの付け方を調べている人もいるようですが、はてなブログでは「カテゴリー」がタグの役割を果たします。
また「デザイン」→「カスタマイズ」→「デザインCSS」に自分が好きなソースコードを貼り付ければ、記事中の見出しのデザインをカスタマイズできます。
記事を書いて「公開する」のボタンを押したあとの完了画面で、TwitterなどのSNSに記事をシェアできます。その際にハッシュタグも付けておくとアクセスが増えることがあります。
目次
ブログの完成予想図を描こう
ブログを作る前に、ブログの完成予想図を描いておくと良いです。
デザインで参考になる他社のサイトや、ブログ記事の構成をあらかじめ考えておくと、その後のブログの運営がスムーズです。
タグの付け方を学ぶ前に、ブログを作る目的から逆算して考えてみましょう。
ブログの作り方
ブログの作り方は主に2つあります。
1つはWordPressのように、自社で契約したサーバーとドメインを使って立ち上げる方法。
もう1つは、はてなブログのようなブログサービスを使って運営する方法です。
はてなブログのデザインの選び方
タグの付け方に入る前に、はてなブログのデザインの変更のやり方についてご紹介します。
はてなブログのデザインはメニューからかんたんに変えられます。
上の画像のように、パソコン版の画面から右上のアカウント名をクリックし「デザイン」をクリックすると、ブログのテーマが選べるメニューが出ます。
その中から好きなデザインを選べば完了です。ご自身のブログのジャンルやカテゴリーやターゲットに合わせて、好みのデザインをお選びください。
はてなブログの背景の変え方
はてなブログでは、上の画像のように「デザイン」→「カスタマイズ」を選択すれば、ブログの背景や背景色を変えることができます。
かんたんな操作でデザインが変更できるので初心者にもありがたいですね。デザインや背景はタグの付け方などを覚えなくてもかんたんに変更できます。
背景画像も背景色もデフォルトでいろいろなバリエーションが用意されています。自分のブログのジャンル(カテゴリー)に合わせたイメージカラーなどを選択してみてください。
はてなブログのタグとは
はてなブログではタグを付けることで、タグを付けた言葉の「タグページ」に自分の記事が連携されます。
アクセスを増やすためにもタグをつける機能は使いたいところです。
記事の編集画面から「タグをつける」というボタンをクリックすることでタグを付けられます。
「タグをつける」機能を開く
記事にタグを入れるには、はてなブログにログインし記事の投稿画面から上の図にある赤い囲いのように「タグをつける」というボタンをクリックします。
パソコン版で使える機能のようですので、タグを付けるときにはパソコンから操作をしてください。
ちょうど上の図でも表示されていますが、記事にタグをつけることで同じ興味の人に読まれやすくなります。
設定したいタグを選ぶ
記事にタグを付けるには、パソコン版で記事の編集画面の左下から「タグをつける」をクリックします。
すると、上の図のようにタグを追加する画面が現れます。
上の図で中央に赤く囲った場所に、記事に追加したいタグを入力してEnterを押せば自動的に記事にタグが追加されます。
タグを削除する
記事につけたタグを削除したいときは、先ほどと同じように記事の投稿画面から「タグをつける」をクリックしてタグの編集画面を開いてください。
すると上の図のように、すでに追加したタグが表示されています。
すでに追加したタグの終わりに「×」がありますので、削除する場合は「×」をクリックすれば完了です。
タグとカテゴリーの使いわけ
はてなブログにおける「タグ」と「カテゴリー」は似た機能でもあるので、どのように使いわけるのか迷う人もいるでしょう。
イメージとしては、タグは「タグページ」と連携することで新しいアクセスをブログに呼び込みやすくなる機能です。
カテゴリーは、あなたのはてなブログ内の記事を同じような種類ごとに整理する機能です。
はてなブログを整理するカテゴリー機能
自分のはてなブログ内の記事を整理するときは「カテゴリー」を使います。
はてなブログでは、タグは「タグページ」からの新規の読者さんの誘導、カテゴリーはブログ内の記事の整理という考え方です。
上の画像のようにパソコン版の画面から右上のアカウント名をクリックし、「記事の管理」をクリックします。タグを付けたい記事を選択し、「チェックした記事にカテゴリーを追加」というボタンから追加できます。
記事を書くときにカテゴリーを設定する
もちろん、記事を書くときにもカテゴリーを設定できます。
ブログは記事が増えていくと、カテゴリーを設定することで訪問者が見やすいブログに仕上がります。
ユーザーの満足度が高いブログは検索エンジンからも評価されやすいので、ぜひカテゴリー機能も使いましょう。
新しいカテゴリーを作成する
まずは上の図のように、記事の投稿画面の右側のメニューから「カテゴリー」のボタンをクリックします。
すると、上の図のようにカテゴリーの編集画面が出ますので、その中から上で赤く囲った場所にある「新しいカテゴリー」をクリックします。
上の図はMacで操作している画面ですが、「新しいカテゴリー」をクリックすると入力欄が出てきますので、追加したいカテゴリーの言葉を書いて「OK」をクリックすると記事にカテゴリーを追加できます。
作成済みのカテゴリーを設定する
すでに作成したことがあるカテゴリーを記事に設定する方法はとてもかんたんです。
上の図のように、記事の投稿画面からカテゴリーのメニューを開くと、すでに作成したことがあるカテゴリーが表示されています。
その中から、編集中の記事に設定したいカテゴリーをクリックすれば下の図のように設定ができます。
複数のカテゴリーを設定する
記事には一つではなく、複数のカテゴリーを設定できます。
やり方は、ここまでに説明した方法と同じです。
すでに設定したことがあるカテゴリーから選ぶか、「新しいカテゴリー」から追加できます。
カテゴリーを削除する
設定したカテゴリーを削除したいときには、上の図のようにカテゴリーの文字の最後に表示されている「×」をクリックすれば良いです。
ブログのカテゴリーを増やしていくと、一度カテゴリーを設定した過去の記事についてもカテゴリーの見直しが必要な場合があります。
過去の記事も、定期的に見直して最適なブログへと強化しましょう。
カテゴリーを整理しよう
ブログの記事が増えれば、それに合わせてカテゴリーも増えるでしょう。
カテゴリーが増えると、過去の記事で設定したカテゴリーが不適切な場合もあります。
ブログ全体のカテゴリーの種類が増えてきたら、過去の記事のカテゴリーの分け方もチェックしながらブログ記事をきちんと整理して、ユーザーが見やすいブログにしましょう。
ブログのサイドバーにカテゴリーを設定
はてなブログのサイドバーにカテゴリーの一覧を追加できます。
まずは下の図のように、はてなブログのトップページから右上のアカウント名をクリックし、「ダッシュボード」へ進んでください。
次に、開いたダッシュボードの左側のメニューから下の図のように「デザイン」へ進みます。
次に、下の図のようにデザインのページに左上にある工具のようなマークをクリックすると「カスタマイズ」のメニューが出ます。その中から「サイドバー」へ進んでください。
サイドバーの編集のメニューが下の図のように出るので、「モジュールを追加」へ進みます。
次の画面で、下の図のような手順で編集を進めます。まず左側のモジュールの一覧の中から少し下にスクロールすると「カテゴリー」があるのでクリックをします。下の図の2に示したように、サイドバーに表示させるタイトルと並び替え順と表示件数を設定して、3で示した「適用」をクリックすれば設定が完了します。サイドバーに表示させるタイトルは「カテゴリー」と入力すれば良いでしょう。
HTML編集でタグを入れる
ブログとしてユーザーに見えている姿は、あくまでブログの表面です。
本来の姿はHTMLというコンピューター言語で書かれた構文です。わからない人から見れば、英語や記号の羅列のように見えます。
言ってみれば、私たちが洋服を着たり、化粧をしたり、髪の毛をセットしたりして着飾っているのは本来の姿ではなく、本当は生身の人間でその中には骨や血液や筋肉という組織があるのと同じ感じです。
HTMLなどのコンピューター言語を使えばサイトのデザインをカスタマイズできます。それを踏まえてこの章では、はてなブログの見出しタグの付け方について解説をします。ぜひご自身のブログのジャンル(カテゴリー)に合わせたデザインにカスタマイズしてみてください。
hタグとは
先程説明をしたHTMLというコンピューター言語の中でも、見出しを作るためのタグを「hタグ」と言います。
見出しとは、上の「hタグとは」と書かれた部分のように、記事中の小さなタイトルのような役割を果たすものです。書籍でも、全体をいくつかの章にカテゴリーをわけて構成されていますよね。サイトの記事の見出しはそれを同じ役割があります。
検索エンジンも見出しでしっかり構成されているブログが好きなので、hタグを使って見出しを付けることはアクセスアップのためにも効果があります。もちろんはてなブログでも見出しを付けられます。
hタグの付け方
はてなブログの見出しタグの付け方としては、上の図のように、見出しにしたい文字を範囲指定して左上の「見出し」というタブから選択をするだけで、かんたんに見出しを付けられます。
これはとてもかんたんな方法です。
しかし、見出しのデザインを自分の好みに変えたいという場合には、次のような方法があります。
まずは、サルワカさんのサイトから、自分の好みの見出しのコードをコピーしておきます。
次にパソコンの画面で以下の画像のように、「アカウント名」→「デザイン」→「カスタマイズ」→「デザインCSS」と進み、初めから書いてあるコードの続きに、先程コピーした見出しのコードを貼り付けて「変更を保存する」をクリックします。
上の図の例だと、hタグは「h1」となっていますが、はてなブログの場合は記事中の大見出しは「h3」、中見出しは「h4」、小見出しは「h5」です。
変えたいの見出しのデザインを上の作業でコードを貼り付けるときに「h1」の部分を「h3」「h4」「h5」に変えて記載をすれば変更できます。
大見出しとは別に中見出しや小見出しのデザインを変更したい場合には、先程の画面で「デザインCSS」の続きに希望のデザインのコードを貼り付けて「hタグ」の数字の部分だけ「h3(大見出し)」「h4(中見出し)」「h5(小見出し)」に変えれば、それぞれ変更ができます。
ちなみに、さらに細かい色の変更もできます。
サルワカさんのサイトのコードにはタグがどういう意味なのかが書かれています。
上の図で赤く囲った部分を原色大辞典さんのサイトから好みの色のコードをコピーして書き換えれば見出しの色も変更できます。
たとえば、先程の例で文字色を黒、線色をオレンジにしたいなと思えば、「#364e96」を文字色は「#000000」に、線色は「#ff4500」に変更して、はてなブログの「デザインCSS」に貼り付ければ希望の色に変更できます。ご自身のサイトのジャンル(カテゴリー)やイメージに合った色を選んでみてくださいね。
プレビューで確認をしよう
はてなブログでは、記事の投稿画面の上部に「プレビュー」というボタンがあります。
多くの場合、「編集 見たまま」のタブで編集をすると思いますが、実際に公開された時の見た目は「プレビュー」を選択すると見られます。
見出しタグや画像が実際にどのように表示されるのかをプレビューでチェックをしてみてください。ご自身のブログのジャンル(カテゴリー)に合ったデザインであるかを確認しましょう。
はてなブックマークのタグについて
はてなのサービスには「はてなブログ」のほかに「はてなブックマーク」があります。
はてなブックマークでは、気に入ったサイトにブックマークを付けるときに「コメント」を書けます。
このコメントに上の図のように[]で囲んだ文字列を入力することで、下の図のようにブックマークをカテゴリーごとに分類できます。
また、一度ブックマークしたものについても、上の図の右上で丸く囲った鉛筆のマークからコメントを編集できますので、タグを付けたい文字列を[]で囲って入力すると、上の図の左下で四角く囲ったようにタグを分類できます。
最後に
この記事では、はてなブログやはてなブックマークに関してのタグの使い方を説明しました。
「タグ」と言っても、カテゴリーを分ける意味でのタグと、コードを意味するタグがあります。
それぞれ使い方を覚えてしまえば利用できますので、この記事を活用してくださいね。
【PR】チェックシート無料プレゼント
弊社は、自由なライフスタイルを手にしてもらうための成功戦略についてコンサルティングを提供しています。
株式会社を経営し1億円を売り上げる五十嵐が、インターネット集客のポイントをまとめた「マーケティング完全シート」や「動画講座」をプレゼントしています。
最新事例などを、LINE＋メールマガジンでお伝えしていますので、どうぞ無料プレゼントをお受け取りください。
