投稿記事用パーツ

ブログの見た目を美しく華やかに装飾

無料のワードプレステーマ GEMSTONE

このページでは投稿記事の管理画面内で使用するHTMLタグを中心に紹介していきます。
投稿記事の大きな特徴は連続改行ができることです。これによりブログ初心者でも、ある程度のレイアウト調整が可能になっています。
逆に固定ページではPタグやBRタグが自動入力されないので、直接タグを記入していくか、functions.php を調整して固定ページにもタグの自動挿入ができるように設定してください。

画像と文言

WordPressのデフォルトで用意されている、左寄せ(alignleft)、右寄せ(alignright)、中央寄せ(aligncenter)、なし(alignnone)のクラス設定が可能です。
また、画像の各サイズは、フルサイズ(size-full)、大サイズ(size-large)、中サイズ(size-medium)、サムネイル(size-thumbnail)の設定が可能です。

画像左寄せ

左寄せ画像と文章の組み合わせは投稿記事では最もよく見かける組み合わせかもしれません。左寄せにした画像の場合は追随して文章も左側に自動で寄せられます。画像と文章の組み合わせは投稿記事では最もよく見かける組み合わせかもしれません。左寄せにした画像の場合は追随して文章も左側に自動で寄せられます。


画像中央寄せ

中央寄せ画像と文章の組み合わせは投稿記事では最もよく見かける組み合わせかもしれません。中央寄せにした画像の場合は、テキストは一段落ちて挿入されるようになります。画像と文章の組み合わせは投稿記事では最もよく見かける組み合わせかもしれません。中央寄せにした画像の場合は、テキストは一段落ちて挿入されるようになります。


画像右寄せ

右寄せ画像と文章の組み合わせは投稿記事では最もよく見かける組み合わせかもしれません。右寄せにした画像の場合は追随して文章も右側に自動で寄せられます。画像と文章の組み合わせは投稿記事では最もよく見かける組み合わせかもしれません。右寄せにした画像の場合は追随して文章も右側に自動で寄せられます。


画像フルサイズ

seven-sisters-821647_1920

フルサイズの場合、パディングがなくなります。


画像大サイズ

画像大サイズ

画像中サイズ

画像中サイズ

画像サムネイル

画像サムネイル

文字の装飾1

ここから下は色々なタグを管理画面内のテキストエディタスペースで使用した場合に表示されるものをサンプル表示しています。太文字、罫線、打ち消し線、スパン、斜め文字、強調表現、大きい文字、小さい文字、等です。また、リストやテーブルなどもあります。あまり使わないものについては省略しています。

太文字タグを使用した場合

引用文タグは以下のようになります。引用文タグは以下のようになります。引用文タグは以下のようになります。引用文タグは以下のようになります。引用文タグは以下のようになります。引用文タグは以下のようになります。引用文タグは以下のようになります。引用文タグは以下のようになります。

文字の装飾2

その他のテキストによる表現は以下の通りです。

打ち消し線打ち消し線打ち消し線打ち消し線打ち消し線打ち消し線打ち消し線打ち消し線

追加テキスト追加テキスト追加テキスト追加テキスト追加テキスト

スパンは太文字になりますスパンは太文字になります

斜体タグは文字がななめになります斜体タグは文字がななめになります

さらにテキストの表示に関するタグはいくつかありますが、強調したいときより強く強調したいとき、普通のテキストに対して相対的にサイズを大きくしたいとき逆に小さくしたいとき、等により使い分けてください。

リスト
  • ul 通常リスト
  • リストリストリストリストリストリストリストリスト
  • リストリストリストリストリストリストリストリスト
  • リストリストリストリストリストリストリストリスト

  • ul 親子孫リスト
    • リストリストリストリストリストリストリストリスト
    • リストリストリストリストリストリストリストリスト
    • リストリストリストリストリストリストリストリスト
      • リストリストリストリストリストリストリストリスト
      • リストリストリストリストリストリストリストリスト
      • リストリストリストリストリストリストリストリスト

  1. ol 順序付きリスト
  2. リストリストリストリストリストリストリストリスト
  3. リストリストリストリストリストリストリストリスト
  4. リストリストリストリストリストリストリストリスト
  5. リストリストリストリストリストリストリストリスト
  6. リストリストリストリストリストリストリストリスト
  7. リストリストリストリストリストリストリストリスト
  8. リストリストリストリストリストリストリストリスト
  9. リストリストリストリストリストリストリストリスト
  10. リストリストリストリストリストリストリストリスト
罫線(ライン)

罫線タグを使用した場合、下記のようになります。


今後も導入すべきコードについてはどんどん取り入れていく予定です。見出しタグである「h1」〜「h6」を投稿記事内に使うことはないかもしれませんが、使う場合もあるかもしれないので導入しています。装飾は固定ページ同様、非常にシンプルなものになっています。