【随時更新】 WordPress記事作成時デザインコードとよく使うコード配布！

WordPressで執筆活動に尽力してらっしゃるあなたのような勇敢なWordPresser様に、見出し（h2、h3、h4、h5、h6）、囲み枠などの便利なデザインコードとよく使うコードを配布していきます！

この記事は便利なコードを見つけ次第随時更新していきます。

デザインが苦手な方も、記事をさらに彩りを持たせたい方もお使いになれますので、ご自由に使ってみてください☆

※人気が出てきた場合有料になる可能性もございます。

1.カラーコード参考サイト

まず初めに、これから配布するコードをアレンジしていただくために線や背景などの色を変更するのに必要な見本となる参考サイトをご紹介致します。

1-1.HTMLカラーチャート

上記のカラーチャートからお好きな色をクリックすると、赤枠のカラーコードに「#000000」という形でコードが出現します。

そのコードをコピーして、 WordPressグーテンベルグエディターのカスタム
HTMLで記入した変更したい部分のカラーコードに貼り付けします。

1-2.原色大辞典

HTMLカラーチャートと同じく、上記のお好きなカラーコードをコピーし、エディターのカスタムHTMLで変更したいコードを選択して貼り付けるだけです。

2.見出し（h2）

<h2><div style="padding: 1em 1.5em;margin: 2em 0;background-color:#21759B;color:#FFFFFF;">WordPresser</div></h2>

3.見出し（h3）

<h3><div style="padding: 1em 1.5em;margin: 2em 0;background-color:#FFFFFF;border-left: solid 10px #21759B ;color:#000000;">WordPresser</div></h3>

4.見出し（h4）

<h4><div style="padding: 1em 1.5em;margin: 2em 0;color:#21759B;">WordPresser</div></h4>

5.よく使うコード

主に記事制作で使用するコードになります💡

コピペのみで使えて、あとは指定のURLや数値、文字を入力するだけでなので簡単です😄

5-1.文字を中央寄せ

２通りあるのですが、”文字を中央寄せ”の部分を変更すれば、指定の文字が中央に寄ります。

<div align="center">文字を中央寄せ</div>

<p style="text-align: center;">文字を中央寄せ

5-2.フォントの大きさ変更

"4"の部分を変更すれば大きさが変わります。

画像の数値は"10"です。

<font size="4">フォントの大きさ変更</font>

5-3.文字色変更

"red"の部分を"blue"や"green"に変更することで指定の文字色が変わります。

<font color="red">文字色変更</font>

5-4.文字を太くする

”文字を太くする”の部分を指定の文字にすれば太くなります。

<strong>文字を太くする</strong>

5-5.1行あける（段落）

このコードは”段落”を意味するものなので見た目は変わっていませんが、このコードの後に入力した文字は一段下に入力されることになります。

<p>1行あける</p>

5-6.改行

文字と文字の間に空白ができます。

見た目的にはこちらが”1行あける”です。

<br>改行</br>

5-7.画像をのせる

<img src="htt://xxx.com（画像のURL）.画像の拡張子（.png、.JPEGなど）">

5-8.文字にリンク追加

<a href="htt://xxx.com（リンク先のURL）">リンクのテキスト</a>

5-9.画像にリンク追加

<a href="htt://xxx.com（リンク先のURL）"><img src="htts://xxx.com（画像のURL）.画像の拡張子（.png、.JPEGなど）"></a>

まとめ

最後まで見ていただきありがとうございます！

WordPressは意外と奥深いものです。

これらのコードは随時追加し、コーディングの視点からもどんどん追求して簡略化を目指していきますのでお楽しみに♪