キャリカク岡山

昔、HTMLをメモ帳にベタ書きして、

FTPでサーバーにアップし、

HPを書いていた人々にとって、

「WordPressって、何ぞ？」

などと、言っているうちに、

各種、HP、ブログ、ECサイト構築では、

WordPressが必須条件になってしまいました。

そこで、自分の様なHTML5以前の人々が、

HTMLの応用として、

WordPressを使えるようになるヒントを書きたいと思います。

基本的に細かいところを表すのは、HTMLです。

しかし、WordPressを記述するための約束事があります。

WordPressの基本構造は、

ページ内の「ブロック単位」の集合体

であるということが最大のポイントになります。

現在、この記事の下書きは

WordPressの ビジュアル・エディターというもので書いていますけど、

左上の縦3点リーダーみたいな所をクリックすると、

一覧の中に「コードエディター」が有りますので、

そこを開いてみて下さい。

昔ながらのHTMLに混ざって、

<!-- wp:paragraph -->

<p>ここが記述された文章</p>

<!-- /wp:paragraph -->

これが、WordPressが「これは段落ブロックですよ」と

判断するための目印になります。

段落間のスペースを入れたり、

ページ内に画像を入れたりする場合、

WordPressのブロックエディターで正しく扱うためには、

このようなWordPress独自のブロック記法が使われます。

以下に、コアブロック名の一部抜き出したモノを

表形式にして、お見せしようと思います。

WordPressには、ほかにもたくさんのコアブロックがあります。

ただし、全部を覚える必要はありません。

必要になった時に、この一覧から、

あるいは下記の公式の Text Blocks探せば大丈夫です。

公式の Text Blocks には、

Paragraph、Heading、List、List Item、Quote、

Pullquote、Table、Code、Preformatted …

などが載っています。

基本的にはHTMLです。

しかし、「WordPressできちんと表示させる」には、

「コードブロックの仕組み」を覚えておかないと、

(または、直ぐに参考文書を見る癖を付けないと)

「自分が想定しているような表示」が出来ない事が多くなります。

そして、コレが、一番重要なことなんですけど、

最終的な見た目は、CSSの指定によって大きく変わります。。

ですので、CSSの設定次第では、

上手く表示されない可能性が有ります。

※ CSS は「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略です。

ざっくり言うと、

・HTML → ページの「構造・内容」を作る

・CSS → ページの「見た目・デザイン」を整える

という役割分担です。

もし、わかりづらい場合、以前のページで

できるだけ、わかりやすく書いているので、

ご参照頂けたら幸いです。

・ホームページを表示するには？

・HTMLって、どうやって使うの？

・主なHTMLタグ一覧

・WordPressって、どういうもの？

キャリカク岡山:F.K.