今回は、メインビジュアルのタイトルとサブタイトルをタグで装飾する方法を解説します。
メインビジュアルのタイトルとサブタイトルとは、私のブログで言えばトップページにあるこの部分です。
デフォルトでは太字のゴシック体でしょうか。
カクカクしい感じがサイトの雰囲気に合っていて、私は割と気に入っているのですが、ふとカスタマイザーを見ているとタイトルとサブタイトルがタグ編集できるのに今更改めて気が付きました。
特に変更する気はないのですが、どこまで装飾できるのか興味が沸き、試してみることにしました。
「ところでタグってなに？」
という人のために少し簡単にタグについて説明しますね。
タグ（tag）
そもそもタグとは英語では「tag」と表記して、意味としては「フダ、荷札」で目印みたいな感じです。
身近なものでいうと付箋みたいなものですね。
情報処理関係でのタグとは、テキストや画像などに別個の意味（情報）を付与するという意味で使われます。
タグは何種類かありますが、今回使うタグは「HTMLタグ」といってテキストや画像などをWEB上に表示するためのタグになります。
WordPressでブログを書いている人は使ったことがあると思いますが、文字を強調する時に使う「太字」、文字を斜めに装飾する「イタリック」、文字の色を変更する時もタグで表示を変更しています。
まあ、WordPressではビジュアルエディタを使っていると馴染みは無いかもですが、ビジュアルエディタで文字装飾したあとでテキストエディタに変えてみたらタグ付けされているのが分かりますよ。
少し例を出して説明します。
例えば、「テキスト」という文字をタグで装飾します。
太字にする場合、
テキスト ⇒ <strong>テキスト</strong>
と表記します。
イタリックにする場合、
テキスト ⇒ <em>テキスト</em>
見ての通り、タグは対象の前後に＜＞で囲ったタグ名で挟むように記述します。
対象の前に配置するタグを開始タグ＜タグ名＞、対象の後ろ配置するタグを終了タグ＜/（スラッシュ）タグ名＞とも言います。
タグの話しはなかなか奥が深いので、ここではこれ以上説明は省きます。
Googleなどで、「HTMLタグ とは」みたいな感じで検索すると詳しい説明がされてるサイトがたくさんあるので、興味がある人は勉強してみても良いでしょう。
では本題のメインビジュアルのタイトルとサブタイトルをタグで装飾してみましょう。
タイトルをタグで装飾しよう！
まずはダッシュボード「外観」⇒「カスタマイズ」から「TOPページ設定［THE］」⇒「メインビジュアル設定」を開きます。
今回は私のサイトを例にとって説明しますね。
私のサイトのメインビジュアル表示モードは「静止画」なので、カスタマイザーを「静止画時の設定」までスクロールします。
今回は赤枠の「タイトルを入力」部分をカスタマイズしていきます。
今のタイトルは、
強調タグ<strong></strong>
イタリックタグ<em></em>
文字色を変更<span style=”color: #カラーナンバー;”></span>
文字サイズ変更<span style=”font-size: 文字サイズ;”></span>
リンクタグ<a href=”リンク先URL”></a>
リンクタグ
分かり難いかもですが、「THE THOR」の文字にカーソルを当てると色が変わり、クリックするとサイトマップページにリンクされました。
次はフォントも変更できるか試してみます。
文字フォント変更
アルファベットでは分かり難いので「完全攻略サイト」の方を「MS明朝」に変更します。
ちゃんと変更されましたね。
まとめ
いかがでしたか？
今回はメインビジュアルのタイトル文字を装飾する方法を解説しました。
HTMLタグは他にもありますが、今回解説したタグが主に使うタグかと思います。
興味がある人は他のタグを試してみても良いかもですね。