マークアップ言語を使用してホームページを整える

弊社で制作したWordPressテーマは一般的に使われる様々なマークアップ言語を使用した際のデザインの最適化にも対応しております。

そもそもマークアップ言語って何?

マークアップ言語マークアップげんご、英: markup language)は、文章の構造(段落など)や見栄え(フォントサイズなど)が明確に表された文章を表現するための形式言語である。 テキストファイルであることが多いが、バイナリデータによる形式もある。

ウィキペディアより抜粋

マークアップ言語は一般的にはなじみにくい言葉ですが、正しく使用することで皆様のホームページを回覧するユーザーはメリハリのある見やすいレイアウトにする働きがあります。

また、検索ロボットが皆様のホームページに巡回して来た際にも、「ここは重要要素だよ」「ここは抜粋してきた記事だよ」など、明確に伝えることができるようになり、SEO対策の有効手段の一つとされています。

マークアップの仕用例

皆さんもよくあると思いますが、例えば他のホームページから参考記事をコピーして自分のブログなどに掲載する場合、そのままの状態で利用してしまうとGoogleからコピーサイトと判断されることがあり、最悪の場合、ペナルティーが科せられて大幅に検索順位が下がる危険を伴います。

この際、「ここからここまでの記事は他のページより抜粋してきました」ということをマークアップ言語を使用して宣言することでコピーサイトと判断させることを防ぐことができるようになります。

他のホームページより引用してきた場合の書き方

見た目は下記のようになります。

これは引用しています。これは引用しています。これは引用しています。

※上記はManyFaceでの見え方です。他のテーマでは違うデザインの場合もありますし、マークアップ言語を利用しても実際の見た目に何も変化がない場合もあります。

マークアップ言語を使用する際のルール

マークアップ言語にはルールがあり、始まりは<コード>から始まり、終わりは</コード>で閉じます。

<コード>ここに文章を入力</コード>

上記はcodeタグを使用し、HTMLコードですというのを宣言しています。

実際の書き方はこうです。

最後は必ず</コード>で閉めないとどこまでも適応されてしまうので注意してください。

また、使用する際は「ビジュアルモード」から「テキストモード」に変更して行って下さい。

ili

TinyMCE Advancedなどのプラグイン使用すると誰でも簡単に装飾ができます。

gfgf

マークアップを使用例

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

引用 <Blockquote>を使用

 

他のページからテキストを流用した場合は<blockquote>を使用します。他のページからテキストを流用した場合は<blockquote>を使用します。他のページからテキストを流用した場合は<blockquote>を使用します。他のページからテキストを流用した場合は<blockquote>を使用します。

リストタグ

※使用方法はHTMLクイックリファレンス様のホームページを参照

  • リスト項目 1
    • リスト項目 1
      • リスト項目 1
      • リスト項目 2
      • リスト項目 3
      • リスト項目 4
    • リスト項目 2
    • リスト項目 3
    • リスト項目 4
  • リスト項目 2
  • リスト項目 3
  • リスト項目 4

HTML 要素タグ

住所タグ

<address> タグ

〒100-0000東京都千代田区1-1-1日本
 

Code タグ

<code> タグ

word-wrap: break-word;

Keyboard タグ

<kbd> タグ

Ctrl

Preformatted タグ

<pre> タグ

複数行のコードのスタイリングに使用

Subscript タグ

Subscript タグ <sub> を使用すると H2O のような表示の際に「2」が下付きになります。

Superscript タグ

Superscript タグ <sup> を使用すると E = MC2 のような表示の際に「2」が上付きになります。

その他にも様々なマークアップ言語の装飾が隠れているかもしれませんのでぜひとも探してみてください。