はてなブログのタグの付け方や見出しをカスタマイズして表示する方法

はてなブログのタグの付け方や見出しをカスタマイズして表示する方法

 

こんにちは、株式会社フレンドマークの五十嵐です。

 

はてなブログは初心者でも使いやすいブログとして有名です。

 

はてなブログのタグの付け方を調べている人もいるようですが、はてなブログでは「カテゴリー」がタグの役割を果たします。

 

また「デザイン」→「カスタマイズ」→「デザインCSS」に自分が好きなソースコードを貼り付ければ、記事中の見出しのデザインをカスタマイズできます。

 

 

はてなブログのデザインの選び方

はてなブログのデザインの選び方

 

はてなブログのデザインはメニューからかんたんに変えられます。

 

上の画像のように、パソコン版の画面から右上のアカウント名をクリックし「デザイン」をクリックすると、ブログのテーマが選べるメニューが出ます。

 

その中から好きなデザインを選べば完了です。

 

 

はてなブログの背景の変え方

はてなブログの背景の変え方

 

上の画像のように、「デザイン」→「カスタマイズ」を選択すれば、ブログの背景や背景色を変えることができます。

 

かんたんな操作でデザインが変更できるので初心者にもありがたいですね。

 

背景画像も背景色もデフォルトでいろいろなバリエーションが用意されています。

 

 

はてなブログではタグはカテゴリー機能

はてなブログではタグはカテゴリー機能

 

はてなブログでのタグの付け方は「カテゴリーを追加」からできます。

 

いわゆるブログのタグは、はてなブログではカテゴリーが役割を果たしています。

 

上の画像のようにパソコン版の画面から右上のアカウント名をクリックし、「記事の管理」をクリックします。タグを付けたい記事を選択し、「チェックした記事にカテゴリーを追加」というボタンから追加できます。

 

 

HTML編集でタグを入れる

HTML編集でタグを入れる

 

ブログとしてユーザーに見えている姿は、あくまでブログの表面です。

 

本来の姿はHTMLというコンピューター言語で書かれた構文です。わからない人から見れば、英語や記号の羅列のように見えます。

 

言ってみれば、私たちが洋服を着たり、化粧をしたり、髪の毛をセットしたりして着飾っているのは本来の姿ではなく、本当は生身の人間でその中には骨や血液や筋肉という組織があるのと同じ感じです。

 

hタグとは

 

先程説明をしたHTMLというコンピューター言語の中でも、見出しを作るためのタグを「hタグ」と言います。

 

見出しとは、上の「hタグとは」と書かれた部分のように、記事中の小さなタイトルのような役割を果たすものです。

 

検索エンジンも見出しでしっかり構成されているブログが好きなので、hタグを使って見出しを付けることはアクセスアップのためにも効果があります。

 

hタグの付け方

hタグの付け方

 

はてなブログの見出しタグの付け方としては、上の図のように、見出しにしたい文字を範囲指定して左上の「見出し」というタブから選択をするだけで、かんたんに見出しを付けられます。

 

これはとてもかんたんな方法です。

 

しかし、見出しのデザインを自分の好みに変えたいという場合には、次のような方法があります。

 

まずは、サルワカさんのサイトから、自分の好みの見出しのコードをコピーしておきます。

好みの見出しデザインを選ぶ

 

次にパソコンの画面で以下の画像のように、「アカウント名」→「デザイン」→「カスタマイズ」→「デザインCSS」と進み、初めから書いてあるコードの続きに、先程コピーした見出しのコードを貼り付けて「変更を保存する」をクリックします。

はてなブックマークの見出しタグの付け方

 

上の図の例だと、hタグは「h1」となっていますが、はてなブログの場合は記事中の大見出しは「h3」、中見出しは「h4」、小見出しは「h5」です。

 

変えたいの見出しのデザインを上の作業でコードを貼り付けるときに「h1」の部分を「h3」「h4」「h5」に変えて記載をすれば変更できます。

 

大見出しとは別に中見出しや小見出しのデザインを変更したい場合には、先程の画面で「デザインCSS」の続きに希望のデザインのコードを貼り付けて「hタグ」の数字の部分だけ「h3(大見出し)」「h4(中見出し)」「h5(小見出し)」に変えれば、それぞれ変更ができます。

 

ちなみに、さらに細かい色の変更もできます。

 

サルワカさんのサイトのコードにはタグがどういう意味なのかが書かれています。

好みの見出しデザインを選択

 

上の図で赤く囲った部分を原色大辞典さんのサイトから好みの色のコードをコピーして書き換えれば見出しの色も変更できます。

原色大辞典

 

たとえば、先程の例で文字色を黒、線色をオレンジにしたいなと思えば、「#364e96」を文字色は「#000000」に、線色は「#ff4500」に変更して、はてなブログの「デザインCSS」に貼り付ければ希望の色に変更できます。

はてなブログの見出しタグの編集

 

 

プレビューで確認をしよう

はてなブログのプレビュー

 

はてなブログでは、記事の投稿画面の上部に「プレビュー」というボタンがあります。

 

多くの場合、「編集 見たまま」のタブで編集をすると思いますが、実際に公開された時の見た目は「プレビュー」を選択すると見られます。

 

見出しや画像が実際にどのように表示されるのかをプレビューでチェックをしてみてください。

 

 

はてなブックマークのタグについて

はてなブックマークのタグの付け方

 

はてなのサービスには「はてなブログ」のほかに「はてなブックマーク」があります。

 

はてなブックマークでは、気に入ったサイトにブックマークを付けるときに「コメント」を書けます。

 

このコメントに上の図のように[]で囲んだ文字列を入力することで、下の図のようにブックマークを分類できます。

はてなブックマークのタグの付け方

 

また、一度ブックマークしたものについても、上の図の右上で丸く囲った鉛筆のマークからコメントを編集できますので、タグを付けたい文字列を[]で囲って入力すると、上の図の左下で四角く囲ったようにタグを分類できます。

 

 

最後に

 

この記事では、はてなブログやはてなブックマークに関してのタグの使い方を説明しました。

 

「タグ」と言っても、カテゴリーを分ける意味でのタグと、コードを意味するタグがあります。

 

それぞれ使い方を覚えてしまえば利用できますので、この記事を活用してくださいね。

 

 

【PR】チェックシート無料プレゼント

弊社は、アフィリエイトやビジネスで人生を変えたい人に、「マーケティング完全シート」や「動画講座」をプレゼントして、自分らしいビジネスで年収1000万円以上稼げるようになっていただき、自由なライフスタイルを手にしてもらうためのウェブビジネスコンサルティングを提供しています。

 

「マーケティング完全シート」をご請求いただいたお客様へは、弊社から最新のネットマーケティングの解説をメールマガジンやLINEにてお送りいたします。

 

最新事例などを、マニュアル+メールマガジンでお伝えしていますので、どうぞ無料プレゼントをお受け取りください。

メールマガジンの登録



*メールアドレス