タグを設定しよう

THE THOR(ザ・トール)メインビジュアルのタイトルをタグで装飾してみよう!

今回は、メインビジュアルのタイトルとサブタイトルをタグで装飾する方法を解説します。

メインビジュアルのタイトルとサブタイトルとは、私のブログで言えばトップページにあるこの部分です。

メインビジュアルタイトルサブタイトル

デフォルトでは太字のゴシック体でしょうか。

カクカクしい感じがサイトの雰囲気に合っていて、私は割と気に入っているのですが、ふとカスタマイザーを見ているとタイトルとサブタイトルがタグ編集できるのに今更改めて気が付きました。

特に変更する気はないのですが、どこまで装飾できるのか興味が沸き、試してみることにしました。

「ところでタグってなに?」

という人のために少し簡単にタグについて説明しますね。

タグ(tag)

タグとは?

そもそもタグとは英語では「tag」と表記して、意味としては「フダ、荷札」で目印みたいな感じです。

身近なものでいうと付箋みたいなものですね。

情報処理関係でのタグとは、テキストや画像などに別個の意味(情報)を付与するという意味で使われます。

タグは何種類かありますが、今回使うタグは「HTMLタグ」といってテキストや画像などをWEB上に表示するためのタグになります。

WordPressでブログを書いている人は使ったことがあると思いますが、文字を強調する時に使う「太字」、文字を斜めに装飾する「イタリック」、文字の色を変更する時もタグで表示を変更しています。

まあ、WordPressではビジュアルエディタを使っていると馴染みは無いかもですが、ビジュアルエディタで文字装飾したあとでテキストエディタに変えてみたらタグ付けされているのが分かりますよ。

少し例を出して説明します。

例えば、「テキスト」という文字をタグで装飾します。

太字にする場合、

テキスト ⇒ <strong>テキスト</strong>

と表記します。

イタリックにする場合、

テキスト ⇒ <em>テキスト</em>

見ての通り、タグは対象の前後に<>で囲ったタグ名で挟むように記述します。

対象の前に配置するタグを開始タグ<タグ名>、対象の後ろ配置するタグを終了タグ</(スラッシュ)タグ名>とも言います。

タグの話しはなかなか奥が深いので、ここではこれ以上説明は省きます。

Googleなどで、「HTMLタグ とは」みたいな感じで検索すると詳しい説明がされてるサイトがたくさんあるので、興味がある人は勉強してみても良いでしょう。

では本題のメインビジュアルのタイトルとサブタイトルをタグで装飾してみましょう。

タイトルをタグで装飾しよう!

まずはダッシュボード「外観」⇒「カスタマイズ」から「TOPページ設定[THE]」⇒「メインビジュアル設定」を開きます。

今回は私のサイトを例にとって説明しますね。

カスタマイザーを開く

私のサイトのメインビジュアル表示モードは「静止画」なので、カスタマイザーを「静止画時の設定」までスクロールします。

今回は赤枠の「タイトルを入力」部分をカスタマイズしていきます。

カスタマイザー静止画の設定

今のタイトルは、

THE THOR<br>完全攻略サイト
となっています。
間に入っている<br>というタグはちょっと特殊なタグで、本来<開始タグ>~</終了タグ>で囲われるのですが、このタグは終了タグが必要ないタグなのです。
意味は「改行」になります。
この状態でのPC表示は、
最初の状態
この様に「THE THOR」で次は改行されて「完全攻略サイト」と表示されています。
文字サイズは大体50pxくらいでしょうか。
それでは最初に「THE THOR」のテキストを強調(太字)にしてみましょう。

強調タグ<strong></strong>

強調は<strong>テキスト</strong>のタグで囲むので、
<strong>THE THOR</strong>
と書き換えます。
強調タグカスタマイザー
カスタム前
元の表示
強調表示
強調タグ
ん~、変わったような変わらないような。
ちょっと分かり難いですね。
では次は「イタリック」にしてみましょう。

イタリックタグ<em></em>

<em>THE THOR</em>
カスタム前
元の表示
イタリック
イタリック
分かりますか?「THE THOR」の文字がちょっと斜体になりましたね。
次は文字色を青に変更してみます。

文字色を変更<span style=”color: #カラーナンバー;”></span>

<span style=”color: #0000ff;”>THE THOR</span>
「#0000ff」は青色のカラーナンバーです。ここの部分を変えると色が変わります。
カスタム前
元の表示
文字色を青に変更
文字色を青に変更
うん、ちゃんと青の文字色になっていますね。
次は文字サイズを変更してみましょう。

文字サイズ変更<span style=”font-size: 文字サイズ;”></span>

デフォルトが50pxなので、70pxに変更します。
<span style=”font-size: 70px;”>THE THOR</span>
カスタム前
元の表示
文字サイズを70pxに変更
文字サイズを変更
大きくしたらインパクトが出てきたような気がしますね。
さて次はリンクタグも使えるか試してみます。

リンクタグ<a href=”リンク先URL”></a>

このサイトのサイトマップページにリンクさせてみます。
<a href=”https://thor-navi.site/sitemap/”>THE THOR</a>
カスタム前
元の表示

リンクタグ
リンクタグ

分かり難いかもですが、「THE THOR」の文字にカーソルを当てると色が変わり、クリックするとサイトマップページにリンクされました。

次はフォントも変更できるか試してみます。

文字フォント変更

アルファベットでは分かり難いので「完全攻略サイト」の方を「MS明朝」に変更します。

<span style=”font-family: ‘MS 明朝’, ‘MS Mincho’;”>完全攻略サイト</span>
カスタム前
元の表示
文字フォント変更(MS明朝)
文字フォントをMS明朝に変更

ちゃんと変更されましたね。

まとめ

いかがでしたか?

今回はメインビジュアルのタイトル文字を装飾する方法を解説しました。

HTMLタグは他にもありますが、今回解説したタグが主に使うタグかと思います。

興味がある人は他のタグを試してみても良いかもですね。

メルマガ登録バナー1

タグを設定しよう
最新情報をチェックしよう!