<style> *{line-height:2} .markdown-body hr{margin:40px 0} .markdown-body img {margin-top:8px} </style> # 記事の書き方 ## ページビルダーとは ページビルダーはWordPress(以下WP)での記事作成を簡単かつ魅力的に仕上げてくれるツールです。 少しだけ慣れが必要ですが、適切に運用を行えば、どんな人が書いても記事の質を担保できます。 <br><br> # 操作方法 ## 基本操作 ページビルダーは、使い込めばコーディング無しとは思えない記事を書くこともできますが、ひとまず記事を書くために覚えるべきことは「**行の追加・コンテンツの追加**」の2つだけです。 ``` 行の追加=文章や画像などを置くためのスペースを確保すること コンテンツの追加=スペースに文章や画像を書くこと ``` と覚えてください。 <br> ## 行を追加する ### ①ページビルダーを起動 ![](https://i.imgur.com/fUt5ucP.png) --- ### ②行を追加をクリック ![](https://i.imgur.com/r6nML0d.png) --- ### ③「カラムの数」を選択して、追加を押します。 カラムの数を変更することで、文字と画像を横並びにしたり、 画像を3枚並べることができます。 ![](https://i.imgur.com/UfJRUGa.png) <br> > 例:文字と画像の横並び > ![](https://i.imgur.com/blxch0f.png) <br> > 例:画像を3枚並べる > ![](https://i.imgur.com/48jY9Ts.png) <br><br> ## コンテンツを追加する ### ①コンテンツを追加する をクリック ![](https://i.imgur.com/yOjmdIQ.png) <br> ### ②追加するコンテンツを選択する ![](https://i.imgur.com/er7dH02.png) ``` コンテンツの編集・削除 追加したコンテンツは、クリックで再度編集したり、「複製する」「削除する」することも可能です。 ``` <br><br> ## コンテンツの内容 追加できるコンテンツは色々ありますが、必須覚えなければいけないのは「文章」と「画像」のみです。 <br> ### 文章 ![](https://i.imgur.com/ukxjWuT.png) コンテンツに「文章」を追加したあとはワード感覚で文章を書くことができます ※改行する際は必ず「Shift + Enter」で改行してください。 Shiftを押さないと大きく改行されてしまいます。 <br><br> #### 見出しタグ ![](https://i.imgur.com/TsNRdia.png) 「見出しタグ」とは各セクションの題字のようなものです。 これを設定することにより、見出しとして目立たせたい部分のフォントサイズや色を毎回指定しなくても、規定のスタイルが当たるようになります。 また、SEOの観点からも非常に良いとされているので、必ず行ってください。 ``` ■見出しタグの付け方 OK例: <見出し2>驚きのメイク術をご紹介!   <見出し3>ポイント1 〜〜〜〜 <見出し3>ポイント2 〜〜〜〜 <見出し3>ポイント3 〜〜〜〜 NG例: <見出し2>驚きのメイク術をご紹介!   <見出し3>ポイント1 〜〜〜〜 <見出し4>ポイント2 〜〜〜〜 <見出し5>ポイント3 〜〜〜〜 ★見出しタグは「数の順番」ではなく「意味の強さ」でつけましょう 上記の場合、ポイント1〜3は同じ強さなので見出しタグはすべて「見出し3」を使用しています ``` <br><br> #### 囲み枠 ![](https://i.imgur.com/26slWZ4.png) 強調したい文章などを「囲み枠」で表示することができます。 ①「クイックタグ」をクリックして囲み枠を選択 ②文章を入れてください ※必ず先に**囲み枠を作ってから**文章を入力してください。 文章を範囲選択して囲み枠を作ることはできません。 <br><br> <!-- #### 引用 #### 関連記事 #### リンクボタン #### Youtube動画 #### 広告 --> ### 画像 ![](https://i.imgur.com/JhdgsAI.png) ①コンテンツを追加する をクリック ②画像 をクリック ③上記画面が出てきますので、「画像を選択する」で画像を入れてください <br> >画像を横幅いっぱいにする > ![](https://i.imgur.com/UH8QTVU.png) > カラムの数=横並びになる画像の数 になります。 > 1つにすると記事横幅いっぱいに画像が表示されます。 <br> > 画像を横3列にする > ![](https://i.imgur.com/qx6tvKq.png) > PCで横並び時、スマホでは自動で左から順番に上から並びます。 > もし「スマホになっても横並びにしたい」場合には下記画像のように設定してください。 > ![](https://i.imgur.com/dFavcrK.png) <!-- ### Googleマップ -->