【超初心者向け】WordPressでのボックスリストを簡単表示　基本コピペのみ【Cocoon】

この記事は

そんな人向けの内容です。

こういった上の様なボックスリストがコピペで出せる様になります。

自分の備忘録も兼ねて僕が普段使用しているいくつかのボックスリストを載せておくので、良かったらコピペで使ってみて下さい。

「エディターとか良くわからん」という人は先にこちらを見て頂ければ少しわかるかと思います。

【超初心者向け】WordPress画面の表示が違う？変更する方法【Cocoon】

WordPressでブログを始めたけど、「使い方」などで検索して出てくる画像や投稿画面が自分のとなんか違う・・ もしそう感じるなら、それは使ってるエディターの違いかも知れません。 この記事は ✔　WordPressでブログを始めたばかり ✔...

jagakuro.net

ボックスリスト

スタンダードタイプ

まずは良くあるこういうやつです

これをテキスト画面or html画面に貼り付けてみて下さい☟

<div style="background: #fffaf0; padding: 10px; border: 2px solid #ff6666;">
<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
</div>

恐らく同じ様に反映されたと思います。

あとはテキストの部分を任意の文章に入れ替えればOKです。

二重線タイプ

☟

<div style="background: #ffffff; padding: 10px; border: double 10px #0099ff;">
<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
</div>

小さい点々タイプ

☟

<fieldset style="background: #FFFFFF; padding: 12px; border: 2px dotted #33ccff;">
<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
</fieldset>

角が丸い点々タイプ

☟

<div style="border: 2px dashed #CCC; padding: 10px; border-radius: 10px;">
<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
</div>

ぷちカスタマイズ

カスタマイズと言える程のものでは無いですが、ボックスを自分好みに変更する方法も書いておきます。

例えば冒頭のボックスリストのこれだと

こうなりますが☟

<div style="border: 10px dotted #cccccc; padding: 10px; background: #ffffff;">
<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
</div>

これを少しいじってみます。

何となくわかるとは思いますが、コードの「dotted」や「background」の後の「#～」はカラーの指定になっています。

この場合「dotted」は水玉の、「background」は背景のカラーです。

「#ffffff」は真っ白なので白抜きのボックスになってますね。

例えば上のボックスの、「#」以降の部分をこう変更すると

<div style="border: 10px dotted #33FF66; padding: 10px; background: #fffacd;">
<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
</div>

この様になります☟

僕の場合、カラー表記はこちらの　☛　原色大辞典　さんの所を参考にさせて貰っています。

• 赤だと「#ff0000」
• 青だと「#0000ff」
• 紫なら「#800080」

と言った感じですね。

またこのボックスの場合「boader」の後の数字「10px」という部分は水玉の大きさになってますので

水玉の大きさや配色も自由に試しながら変更して、是非自分好みのボックスリストを作ってみて下さい。

他の紹介したボックスも同じ要領で大体OK。

一旦、好みのものさえ出来てしまえば、とりあえずはコピペで何とかなります。

少々手間ですが、このページも自由に使って貰って構わないのでドンドン記事を書いていきましょう。

好みのボックスリストが出来たり、よく使うものがあればプラグインのAddQuicktagを使って登録しておくと便利です。 少し余裕があればインストールして使っていきましょう。

こちらで解説記事を書いていますので、良ければ読んでみて下さい。

【WordPress】囲みボックスや定型文をAdd Quicktagを使ってワンタッチ表示する方法【初心者向け】

WordPressでブログを書いていると、だんだん良く使う定型文やボックスの表示などが決まってくると思います。 「コピペも悪くないけど、もう少し手軽に出せないか」と思う時もありますよね。 そんな時はプラグインのAddQuicktagが便利で...

jagakuro.net

最後に

WordPressでのブログ作成は最初は本当に大変ですよね。

覚えなきゃいけない事は沢山あるし、最初は記事を書くだけでもしんどいのに思ったような装飾も表示出来なくて、それだけで時間が経ってしまう・・

というのは大半の人が経験してるんじゃないでしょうか。

ブログは見た瞬間の「見やすさ」というのはかなり大事ポイントなのでこういったボックスリストも上手く使っていきましょう。

少しでも作業が楽になる様に、良ければ参考にしてみて下さい。