THOR(ザ・トール)メインビジュアルのタイトルをタグで装飾してみよう!今回は、メインビジュアルのタイトルとサブタイトルをタグで装飾する方法を解説します。メインビジュアルのタイトルとサブタイトルとは、私のブログで言えばトップページにあるこの部分です。デフォルトでは太字のゴシック体でしょうか。しい感じがサイトの雰囲気に合っていて、私は割と気に入っているのですが、ふとカスタマイザーを見ているとタイトルとサブタイトルがタグ編集できるのに今更改めて気が付きました。変更する気はないのですが、どこまで装飾できるのか興味が沸き、試してみることにしました。「ところでタグってなに?」という人のために少し簡単にタグについて説明しますね。まとめタグ(tag)そもそもタグとは英語では「tag」と表記して、意味としては「フダ、荷札」で目印みたいな感じです。身近なものでいうと付箋みたいなものですね。情報処理関係でのタグとは、テキストや画像などに別個の意味(情報)を付与するという意味で使われます。タグは何種類かありますが、今回使うタグは「HTMLタグ」といってテキストや画像などをWEB上に表示するためのタグになります。WordPressでブログを書いている人は使ったことがあると思いますが、文字を強調する時に使う「太字」、文字を斜めに装飾する「イタリック」、文字の色を変更する時もタグで表示を変更しています。WordPressではビジュアルエディタを使っていると馴染みは無いかもですが、ビジュアルエディタで文字装飾したあとでテキストエディタに変えてみたらタグ付けされているのが分かりますよ。例を出して説明します。「テキスト」という文字をタグで装飾します。<strong>テキスト</strong>と表記します。<em>テキスト</em>見ての通り、タグは対象の前後に<>で囲ったタグ名で挟むように記述します。対象の前に配置するタグを開始タグ<タグ名>、対象の後ろ配置するタグを終了タグ</(スラッシュ)タグ名>とも言います。タグの話しはなかなか奥が深いので、ここではこれ以上説明は省きます。」みたいな感じで検索すると詳しい説明がされてるサイトがたくさんあるので、興味がある人は勉強してみても良いでしょう。本題のメインビジュアルのタイトルとサブタイトルをタグで装飾してみましょう。タイトルをタグで装飾しよう!まずはダッシュボード「外観」⇒「カスタマイズ」から「TOPページ設定[THE]」⇒「メインビジュアル設定」を開きます。今回は私のサイトを例にとって説明しますね。私のサイトのメインビジュアル表示モードは「静止画」なので、カスタマイザーを「静止画時の設定」までスクロールします。今回は赤枠の「タイトルを入力」部分をカスタマイズしていきます。THOR<br>完全攻略サイトとなっています。間に入っている<br>というタグはちょっと特殊なタグで、本来<開始タグ>~</終了タグ>で囲われるのですが、このタグは終了タグが必要ないタグなのです。意味は「改行」になります。THOR」で次は改行されて「完全攻略サイト」と表示されています。文字サイズは大体50pxくらいでしょうか。THOR」のテキストを強調(太字)にしてみましょう。THOR</strong>と書き換えます。強調表示ん~、変わったような変わらないような。次は「イタリック」にしてみましょう。THOR」の文字がちょっと斜体になりましたね。次は文字色を青に変更してみます。THOR</span>「#0000ff」は青色のカラーナンバーです。ここの部分を変えると色が変わります。文字色を青に変更うん、ちゃんと青の文字色になっていますね。次は文字サイズを変更してみましょう。文字サイズ;”></span>デフォルトが50pxなので、70pxに変更します。大きくしたらインパクトが出てきたような気がしますね。次はリンクタグも使えるか試してみます。href=”リンク先URL”></a>このサイトのサイトマップページにリンクさせてみます。THOR」の文字にカーソルを当てると色が変わり、クリックするとサイトマップページにリンクされました。次はフォントも変更できるか試してみます。文字フォント変更アルファベットでは分かり難いので「完全攻略サイト」の方を「MS明朝」に変更します。文字フォント変更(MS明朝)ちゃんと変更されましたね。まとめいかがでしたか?今回はメインビジュアルのタイトル文字を装飾する方法を解説しました。HTMLタグは他にもありますが、今回解説したタグが主に使うタグかと思います。興味がある人は他のタグを試してみても良いかもですね。柚子こんにちは!柚子(ゆず)と申します。普段は「TAKE-PRESS」というWordPress専門サイトを運営しているタケ坊のアシスタントをしています。THOR(ザ・トール)」の専門サイトを立ち上げたため、こっちの担当になりました。TAKE-PRESSともども、よろしくお願いしますね。コメントをキャンセルメールアドレスが公開されることはありません。柚子こんにちは!柚子(ゆず)と申します。普段は「TAKE-PRESS」というWordPress専門サイトを運営しているタケ坊のアシスタントをしています。THOR(ザ・トール)」の専門サイトを立ち上げたため、こっちの担当になりました。TAKE-PRESSともども、よろしくお願いしますね。柚子こんにちは!柚子(ゆず)と申します。普段は「TAKE-PRESS」というWordPress専門サイトを運営しているタケ坊のアシスタントをしています。THOR(ザ・トール)」の専門サイトを立ち上げたため、こっちの担当になりました。TAKE-PRESSともども、よろしくお願いしますね。THOR(ザ・トール)マニュアル・カスタマイズNAVI.ホームシェアメニューお問い合わせTOPへ。