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

ブログ運営

この記事は

 

  • wordpressブログを始めたばかり
  • htmlとかcssとかよくわからん
  • とりあえず簡単に色んなボックスリストを出したい

 

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

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

 

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

 

基本的には全てコピー&ペーストで反映可能ですがクラシックエディターを使用している方はテキストに、Gutenbergを使用している方は「htmlとして編集」という方に貼り付けてください

 

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

 

 

スポンサーリンク

ボックスリスト

スタンダードタイプ

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

  • テキスト
  • テキスト
  • テキスト

 

これをテキスト画面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でのブログ作成は最初は本当に大変ですよね。

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

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

 

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

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

コメント

タイトルとURLをコピーしました