Formatting Blog Posts do not require you know much HTML but it definitely helps！
If you want to take serious then you master your blog post formatting.
これはまた、あなたの記事を面白く、一貫したスタイルにするのに役立ついくつかの基本的なHTMLトリックを学ぶことを意味します。
さて心配しないでください、私はあなたが魅力的で無知なブログ記事を作るためにプログラマや何かになる必要があるとは言いませんが、いくつかの必須スキルを拾うことは非常に役立ちます。
WordPressはCMS（コンテンツ管理システム）であり、したがって、自分ですべてをコーディングする必要がない。
コードのほとんどは、壊れたりしないように隠されており、ブログ記事やページを書いたりフォーマットするための WYSIWYG (What You See is What You Get) エディターがあります。
しばらく WordPress を使用していれば、コンテンツ エディターの右上に Visual と Text タブがあり、投稿のスタイル付きバージョンと生の HTML に切り替えできることを知っているでしょう。
Visual = WordPress Visual Editor
Text = WordPress HTML Editor / Raw Text
ほとんどの初心者は、初めてテキストタブの生の HTML を見たときに圧倒されて怖くなって、すぐに元に戻してしまうのです。
しかし、そうする必要はありません。このモードでの作業や編集に慣れるために時間をかけることで、より優れたブロガーになれるでしょう。
少し練習すれば、簡単に基本のいくつかをマスターできます。
シンタックス（コンピュータの定義）：コンピュータ言語におけるステートメントの構造。
HTML は Hypertext Markup Language の略で、Web ページやアプリケーションの作成に使用されるプログラミング言語です。
これは、1990 年に、私の個人的なヒーローであり、インターネットの発明者でもある Tim Berners-Lee によって作成されましたが、私は HTML とその歴史についてすべてを教えるつもりはありませんが、もしあなたが好奇心の強い方なら、Wikipedia で読み続けることができるでしょう。
ここでは、WordPress の投稿やページの作成と編集に HTML がどのように関係するかを見ていきます。
WordPressエディタのテキストタブに見慣れないコードがある場合、それはHTMLであり、場合によっては、CSSインラインスタイルが含まれている可能性もあります。
HTML の例
<h2>This is a title</h2>
赤くハイライトされている部分は HTML で、この例では、冒頭に h2 タイトル タグ、最後に h2 タイトル タグがあることに気づきましたか。
HTML with Inline CSS Example
<h2 style="color:red;">This is a title</h2>
上記の例では、同じ h2 を使用していますが、今回は HTML を使用して、色を赤に変更する CSS の 1 つのピースを呼び出しています。 理想的には、最良の方法は外部 CSS ファイルで HTML 要素をスタイル設定することであるため、インライン CSS はあまり見られませんが、これは WordPress テーマがブログ ページに自動的にスタイルを適用する典型的な方法です。
WordPress エディターで HTML をインラインでスタイル設定することは個人的にはお勧めしませんが、プラグインや他のソースからのコピー＆ペーストなど、他のソースから入ってきたコードを編集したりクリーンアップする必要がある場合に備えて、それを意識しておくことは重要です。
必然的に、グレムリン（専門用語ではありません）がコンテンツに入り込んだときに、物事をクリーンアップできることは有益です。
そこで、WordPress の投稿や記事、ページに HTML を追加する方法と、知っておくべきことを見ていきましょう。
WordPress Basic HTML Essentials
コンテンツをスタイルするために HTML を追加するときは、関連する開始タグと終了タグでコンテンツをラップすることを忘れないようにする必要があります。
例:
<p>Paragraphs should be wrapped with p tags</p>
自動的に閉じるので閉じタグを必要としない便利な HTML 要素の例もあります。
見出しタグ & Sub Headings
WordPress投稿の見出しにはいろいろあります。まず投稿タイトル見出し、これは<h1>で、その後コンテンツに見出しタイトルを付けて自分の考えをまとめることができるようになっています。
これらはh1（見出し1）からh6（見出し6）までの範囲で、通常、テーマは適切なサイズになるようにスタイルを設定します。
ページまたは記事のタイトルは自動的にh1になるので、他のインスタンスは記事の名前であるメインタイトルと競合するので、コンテンツではこれを使用しないようにしたいです。
その代わりに、意味的に正しい順序付けプロセスに従い、セクション見出しを最初に使用する必要があるときは、h2 見出しのタイトルに移動します。
これらは投稿エディタの WYSIWYG の左上にあるドロップダウンを使用して簡単に設定できますが、HTML 形式でどのように動作するかを知っておくと、間違いを修正するのに役立ちます。
すべての HTML 要素は、開始タグ <
終了タグ >
開始要素には単に要素名を含めることができます。
終了タグには開始タグ < と終了する HTML 要素名の前にスラッシュを含めます。
太字または斜体
ポイントを強調したいとき、特定の単語に注意を向けたいときは、太字または斜体を使って目立たせることができます。
太字の HTML は <strong> で、斜体は <em> です。
楽しい事実： 何かを太字にするために Strong は覚えやすいですが、なぜ斜体要素は em を使うのでしょうか。 Emは強調の略語です。
<em>This text is italicized, I am for gentle emphasis</em>
<strong>This text is bold, I am for strong emphasis</strong>
さらに、WordPress WYSIWYG はもちろん、修正したいテキストをハイライトしてから、ボールドは CTRL + B、イタリックは CTRL + I のキーボードショートカットを使用できます。
WordPressキーボードショートカットおよびその他のフォーマット、方法についてはこちらへどうぞ。
Practical Typography に、これらのルールの重要性を説明したすばらしい記事があります。
セールスコピーのように、人々を本当に魅了するコピーを書いている場合、これらのルールは曲げることはできますが、破ることはできません。
emphasis
すべてが強調されていると、何も強調されていないことを忘れないでください!
リスト – 順序付き & 順序なし
WordPress WYSIWYG でもサポートされている HTML を使用して追加できるリストのタイプは 2 つあります:
順序付きリスト – <ol>
順序付きリストは一連の番号付きアイテムとして表示されます。 これは、順序が重要なリストを書くときに便利です。
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
上記のコードは、次のように変わります。
- 項目 1
- 項目 2
- 項目 3
順序なしリスト – <ul>
順序なしリストは基本的に箇条書きリストであります。
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
そしてこれは下のような弾丸リストに変化していくのです。
- 項目 1
- 項目 2
- 項目 3
私たちはリストがいかに便利かを知っていますし、コンテンツを分割してより面白く見せる効果もあるのです。
ここで気づく重要な違いは、個々のリスト項目 <li> があり、それらは 1 つの <ol> または <ul> ラッパーで全体がラップされていることです。
画像
WordPress でブログ記事やその他のページをフォーマットする際のもうひとつの重要な側面は、画像の使用で、Yahoo 画像やその他の著作権フリーの画像サイトから入手できる興味深い写真を見つけるのに苦労はしないはずです。 これらのオプションの中には有料のものもありますが、多くは出典の記載とリンクでクレジットを提供すれば無料で利用できます。
ウェブサイトやブログにプロのビジュアルを掲載するために支払うべき小さな代償です。
これは読者の興味を引き続けるのに役立ち、画像を自分でコーディングする必要はありませんが、構文を理解することは有用です。
以下は画像コードの例で、エディタのテキスト タブで見るとどうなるかを示します。 src は単に URL の場所を呼び出すだけです。
WordPress では、画像を左や右に浮かせたり、中央に配置したりすることができます。 そうしてテキスト タブでコードを確認すると、それに応じて画像をスタイル設定するために使用されるクラスが追加されていることがわかります。
これは、外部 CSS が異なる画像に異なるスタイルを適用するために使用されている例です。 知っておくと便利です！
重要: 投稿やページに画像を追加する前に、それらが速度と検索エンジンのために最適化されていることを確認してください。
埋め込み
必然的に、外部 Web サイトから埋め込みコードを使用したくなるものです。
たとえば、YouTube や Vimeo のビデオを追加したい場合、共有に移動すると、コピーできる長いコードが表示されます。
覚えておくべきことは、コンテンツ エディタの視覚タブに HTML または他のコードを貼り付けることはできないということです。 そうすると、コードが乱れ、保存を押したときに使えなくなります。
必ずテキスト タブに移動し、表示したい場所に貼り付けます。
以下は、YouTube からの埋め込みコードの例です。
埋め込みコードを提供するほとんどの Web サイトは WordPress でネイティブにサポートされていないため、埋め込みコード、iframe、および投稿にマルチメディアを追加できるようにするための仕組みについて知っている必要があります。 プラグインやテーマの開発者が、私たちの Web ページや投稿に要素を追加する簡単な方法を作成できるようにする WordPress ネイティブ機能なのです。
ほとんどすべてのブログにある最も単純な例はコンタクト フォームのショートコードですが、ショートコードには追加する機能を含め、何千とは言わないまでも何百という潜在的な用途があります。
- テーブル
- ギャラリー
- 価格パッケージ
- ビデオ
- リードマグネット / オプトインフォーム
- Podcast エピソード
以下は Contact Form 7 プラグインが生成するコンタクト フォームのためのショートコードです。 弊社のサイトやブログの90%に導入している推奨プラグインの一つです。
注意: 実際にコンタクト フォームを表示しないようにするために、開き括弧の後と閉じ括弧の前にスペースを追加する必要があったので、スペースなしで想像してみてください。
Web ページが読み込まれるとき、このコンタクト フォームは実際には約 20 行の面倒な HTML を読み込むので、ショートコードにアクセスできるとはるかに楽になります。
ショートコードは知っておくと便利で、理解できない大量の HTML を使用して慎重に作業する必要がない場合、投稿の編集作業をかなり軽減することができます。
その他の書式に関するアドバイス
私が新しい WordPress の学習者に留意するようアドバイスしている他のヒントがいくつかありますので、簡単に説明します。 これは、<br> HTMLタグを使用しないようにし、絶対に必要な場合を除き、段落やセクションの間に2回Enterキーを押すことは避けてくださいことを意味します。 また、このような場合、”li “は “li “であることを意味し、”li “は “li “であることを意味します。 あなたは、ユニークなフォントでカスタムサイズの緑のタイトルが注目を集めると思うかもしれませんが、実際にはそれは一貫性がなく、専門家ではないとして突き刺さる。
それほど複雑なことではありませんが、こうした間違いを犯し、人生を難しくしている人をよく見かけます。
しかし、まもなく、状況は変わるかもしれません。
Gutenberg は WordPress によって一から構築されている新しいコンテンツ エディタで、まもなくあなたの近くにインストールされる予定です。
これはブログの未来なのでしょうか。 それは誰にもわかりません。 しかし、WordPress の未来であることは間違いないので、それに乗るときが来たのです。
ブログ用に Medium.com を使用したことがある場合、Gutenberg を初めて使用したとき、不気味なほど似ていると感じるでしょう。
私見ですが、これは良いことです。Medium の気が散らないコンテンツ エディターは美しく使いやすく、WP がこのことに注目するのは、WP で実行するブログとウェブサイトのすべてに関わる人にとってプラスになります。
これは、ページ ビルダー プラグインと特定のテーマが現在この種のドラッグ アンド ドロップ ソリューションを提供しているのと似ていますが、これらの機能はデフォルトで WordPress に提供されます。
現在のエディターでブログ記事の書式設定に苦労している場合は、ダッシュボードのプラグインから「Gutenberg」を検索してダウンロードおよびインストールすることにより、すでに Gutenberg を試すことができます。
Blog Post Formatting & Basic HTML Final Word
上記のことを少し練習すれば、コンテンツとその表示方法についてより大きなコントロールを得られるでしょう。
うまくいけば、ブログ記事の書式と基本の HTML の使い方に少し慣れてきたと感じていただけるでしょうか。
ほとんどのブロガーと WordPress ウェブサイトの所有者には上記の基本で十分ですが、もっと学びたい場合は、CodeAcademy や w3Schools などの HTML を学べる素晴らしい無料のウェブサイトがあります。
さて、コンテンツを美しくしましょう！ 🙂
もしこの記事が役に立つようなら、当社のブログ記事チェックリストなどの役に立つブログ ガイドもチェックしてみてください。 4818>
のような他の有用なブログガイドをチェックしてみてください。