HTMLのテキストの文字の表示位置を変更する方法として、CSSのtext-alignプロパティを指定することで表示位置を変えられます。 この記事では初心者向けに CSSでテキストの表示位置を左にする方法 CSSでテキストの表示位置を右にする方法 CSSでテキストの表示位置を中央にする方法 について解説をしていきます。 HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！ 目次 1text-alignでテキストの表示位置を左にする 2text-alignでテキストの表示位置を右にする 3text-alignでテキストの表示位置を中央にする text-alignでテキストの表示位置を左にする テキストの表示位置を左に移動させたいときは、CSSでtext-alignを用いて、「left」を指定することで変更出来ます。 以下は、「pタグのテキストの文字を左にする」例です。 HTML <p>このテキストを左に表示したい</p> CSS p{ text-align:left; } text-alignでテキストの表示位置を右にする 一方テキストの表示位置を左に移動させたいときは、CSSでtext-alignを用いて、「right」を指定することで変更出来ます。 以下は、「pタグのテキストの文字を右にする」例です。 HTML <p>このテキストを右に表示したい</p> CSS p{ text-align:right; } text-alignでテキストの表示位置を中央にする 続いて、テキストの表示位置を左に移動させたいときは、CSSでtext-alignを用いて、「center」を指定することで変更出来ます。 以下は、「pタグのテキストの文字を中央にする」例です。 HTML <p>このテキストを中央に表示したい</p> CSS p{ text-align:center; } 以上となります。
-
HTMLのテキストの文字を太字にする方法として、CSSのfont weightプロパティを指定することで文字を太字にすることが出来ます。 この記事では初心者向けに CSSでテキストの文字を太字に変える方法 太字を解除する方法 について解説をしていきます。 HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！ 目次 1font weightでテキスト文字を太字にする 2太字を解除する font weightでテキスト文字を太字にする テキストの文字を太字に変更したいときは、CSSでfont-weightを用いて、「bold」を指定することで変更出来ます。 以下は、「pタグのテキスト文を太字にする」例です。 HTML <p>このテキストを太字にしたい</p> CSS p{ font-weight:bold; } 太字を解除する 一方、既に太字になっているテキストの文字を解除したい、通常に戻したい場合はfont-weightに対して「normal」を指定します。 以下は、「pタグのテキストの太字を解除する」例です。 HTML <p>ここのテキストの太字を解除したい</p> CSS p{ font-weight:normal; } 以上となります。
-
CSSではfont-sizeプロパティを使って、文字の大きさを指定することが出来ます。 この記事では初心者向けに CSSで文字のサイズを変える方法 一部だけ文字サイズを変える方法 について解説をしていきます。 HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！ 目次 1font sizeの使い方 2テキストの一部だけ文字サイズを変える font sizeの使い方 テキストの文字サイズを変更したいときは、CSSでfont sizeで任意のサイズを指定することが出来ます。 以下は、「pタグのテキスト文に対して、フォントサイズを10pxに指定する」例です。 HTML <p>このテキストの大きさを変えたい</p> CSS p{ font-size:10px; } テキストの一部だけ文字サイズを変える 続いてテキストの一部だけサイズを変えたい場合は、変更したいテキストをHTMLのspanタグで囲みます。 以下は、「pタグ内のspanタグのテキスト文に対して、フォントサイズを10pxに指定する」例です。 HTML <p>テキストのなかで<span>ここだけ変えたい</span>です。</p> CSS p span{ font-size:10px; } 以上となります。
-
ワードプレスでは、WEBページを表示するときにPHPファイルを読み込みますが、その読み込む順番が決まっています。 この記事では初心者向けに ワードプレスのPHP読み込み順序とは？ 各WEBページの読み込む順序 について解説をしていきます。 ワードプレスを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！ 目次 1PHP読み込み順序の仕組みを解説 2ワードプレスのPHPファイル読み込み順序について ・トップページ表示 ・固定ページ表示 ・投稿ページ表示 ・カテゴリーページ表示 ・タグページ表示 ・カスタムタクソノミー表示 ・カスタム表示 ・作成者の表示 ・日付別の表示 ・検索結果の表示 ・404エラーの表示 ・添付ファイルの表示 PHP読み込み順序の仕組みを解説 繰り返しになりますが、ワードプレスではWEBページを表示する際に、PHPを読み込む順序が決まっていて、優先順位が高いものから探しに行って、見つかればそのファイルを読み込む（以降のPHPは読み込まれない）といった仕組みがあります。 例えば、トップページ用のPHPで言えば「front-page.php」 → 「home.php」 → 「index.php」という優先順位があります。最初はシステム上「front-page.php」を探しに行って、存在していればfont-page.phpを利用してトップページを表示します。 もし、「font-page.php」が存在しない場合、続いて「home.php」を探しに行きます。「home.php」が存在していれば、home.phpを利用してトップページを表示します。 また、「front-page.php」と「home.php」が共に存在しない場合は、「index.php」を利用してトップページを表示する。といった仕組みです。 以下では各ページのPHPの読み込み順序をお伝えします。 ワードプレスのPHPファイル読み込み順序について トップページ表示 front-page.php → home.php → index.php 固定ページ表示 カスタムテンプレート名.php → page-$slug.php → page-$id.php → page.php → singular.php → index.php 投稿ページ表示 single-$posttype → single.php → singular.php → index.php カテゴリーページ表示 category-$slug.php → category-$id.php → category.php → archive.php → index.php タグページ表示 tag-$slug.php → tag-$id.php → tag.php → archive.php → index.php カスタムタクソノミー表示 taxonomy-$taxonomy-$teram.php → taxonomy-$taxonomy.php → taxonomy.php → archive.php → index.php カスタム表示 archive-$posttype.php → archive.php → index.php 作成者の表示 auther-$name.php → auther-$id.php → auther.php → archive.php → index.php 日付別の表示 date.php → archive.php → index.php 検索結果の表示 search.php → index.php 404エラーの表示 404.php → index.php 添付ファイルの表示 MIME_TYPE.php → attachment.php → single.php → index.php 以上となります。