WordPressでブログを書く方法

WordPressでブログを書く方法には、大きく分けると2種類あります。1つは「ブロック」エディターで記載する方法と、「旧エディター」で記載する方法です。これは切り替える事が可能です。切り替え方法は、マニュアルに掲載しています。双方良い面があり、凝ったデザイン等を考える場合には、「旧エディター」「テキスト」モードで直にHTMLやCSSを駆使すると実現できます。

ここでは、「旧エディター」「テキスト」モードでの編集方法について特化して記載します。「旧エディター」自身も2種類の編集方法があります。開いて頂くとわかりますが、「ビジュアル」タブと「テキスト」タブがあります。「ビジュアル」タブのモードも、「ブロック」エディターと同様に簡単にWebサイトを制作するためのモードです。ただ、融通があまり効きません。ここでは、「テキスト」タブ(「テキスト」モード)での、HTML、CSSでの記載に特化してご説明致します。

【投稿】【指定のカスタム投稿タイプ(現在は「美容師のブログ」)】【固定ページ】を開くとわかると思いますが、「ビジュアル」タブと「テキスト」タブがあります。いろいろ慣れてくるとデザイン等、こだわりが出てくると思います。そうなってくると、「テキスト」モードで直にHTMLやCSSを駆使してブログを制作したくなると思います。ここでは、「テキスト」モードで制作する場合の部品を準備しているので、その内容について説明します。

見出しパターン

見出しパターンとして、以下の8種類、準備しています。実際のプログラムはWordPressにログインし、テキストモードで参照下さい。


種類1


種類2


種類3


種類4


種類5


種類6


種類7


種類8


文字を強調する物

ここでは、文字の強調に関するやり方を以下に記載します。実際のプログラムは、WordPressにログインし、テキストモードで参照下さい。


①HTML文で太文字にする。

昨日、私は友達と遊んだ

②マーカーでラインを引く

昨日、私は友達と遊んだ

段落分けに使える物

ここでは、ここでは段落分けに使える部品を記載しています。段落分けとは、左余白と最下部にスペースを空けてくれる部品です。実際のプログラムは、WordPressにログインし、テキストモードで参照下さい。


<p class=”afterarticle-p”>

記事のタイトル直後に使用する事を想定した段落の部品。最初にインデント1文字を開け、左余白1文字、下部40ピクセル分開ける。

<p class=”usedot-p”>

・(ポチ)や→(矢印)などで使用する事を想定した段落の部品。左余白1文字開けて、改行が起きた場合には1段落ずらして表示します。テストのため、長い分を意図的に書いてみます。ああああああああああああああああああああああああああああああああああああああああ。

<p class=”usedot-p-20px”>

・(ポチ)や→(矢印)などで使用する事を想定した段落の部品。左余白1文字開けて、改行が起きた場合には1段落ずらして表示します。加えて、下部20px分開けます。テストのため、長い分を意図的に書いてみます。ああああああああああああああああああああああああああああああああああああああああ。

<p class=”usedot-p-40px”>

・(ポチ)や→(矢印)などで使用する事を想定した段落の部品。左余白1文字開けて、改行が起きた場合には1段落ずらして表示します。加えて、下部40px分開けます。テストのため、長い分を意図的に書いてみます。ああああああああああああああああああああああああああああああああああああああああ。

<p class=”usedot-p-60px”>

・(ポチ)や→(矢印)などで使用する事を想定した段落の部品。左余白1文字開けて、改行が起きた場合には1段落ずらして表示します。加えて、下部60px分開けます。テストのため、長い分を意図的に書いてみます。ああああああああああああああああああああああああああああああああああああああああ。


<p class=”useregular-p”>

・通常の段落で使用する事を想定した段落の部品。左余白1文字開けて、改行が起きた場合には1段落ずらして表示します。テストのため、長い分を意図的に書いてみます。ああああああああああああああああああああああああああああああああああああああああ。

<p class=”useregular-p-20px”>

通常の段落で使用する事を想定した段落の部品。左余白1文字開けて、改行が起きた場合には1段落ずらして表示します。加えて、下部20px分開けます。テストのため、長い分を意図的に書いてみます。ああああああああああああああああああああああああああああああああああああああああ。

<p class=”useregular-p-40px”>

・通常の段落で使用する事を想定した段落の部品。左余白1文字開けて、改行が起きた場合には1段落ずらして表示します。加えて、下部40px分開けます。テストのため、長い分を意図的に書いてみます。ああああああああああああああああああああああああああああああああああああああああ。

<p class=”uuseregular-p-60px”>

・通常の段落で使用する事を想定した段落の部品。左余白1文字開けて、改行が起きた場合には1段落ずらして表示します。加えて、下部60px分開けます。テストのため、長い分を意図的に書いてみます。ああああああああああああああああああああああああああああああああああああああああ。