WordPressのcocoonテーマでの枠線の作り方についてまとめていきます。
cocoonテーマでの枠線の作り方について
ネットで検索するとCSSを活用した枠線の作り方は出てきますが、他のテーマでのブロックの作り方が出てこないため、一般的なブロック挿入ツールでは枠線は作れないのではないかと考えています。
cocoonではボックスを作成するツールが準備されているため、
ツールの検索方法から活用方法までをまとめてみたいと思います。
cocoonブロックを探そう
投稿画面左上の「＋」をクリックし、出てきたブロック挿入ツールから「cocoonブロック」の項目を探します。
すると上の画像のように、「アイコンボックス」「案内ボックス」「白抜きボックス」「付箋風ボックス」「タブボックス」があります。
アイコンボックスでの作り方
アイコンボックスでは左側にアイコンがついたボックスを作成することができます。
ブロックの左側の「！」マークは右上の設定をクリックすることで下の画像のように「？」「メモ」や「コメント」等に変更することが可能です。
案内ボックスでの作り方
案内ボックスではデフォルトではグレーの背景色、白文字のボックスを作成することができます。右の設定からテキストや背景色の変更が可能です。
白抜きボックスでの作り方
白抜きボックスはグレーの枠線で背景色は白、文字の色は黒のボックスを作成できます。
このボックスが一番枠線を作るイメージに近いのではないでしょうか？
このボックスでは枠線の色、背景色、文字色を変更することができます。
付箋風ボックスでの作り方
付箋風ボックスは左端に濃いグレーのアクセントと薄いグレーの背景、文字の色が黒がデフォルトとなっています。
右の設定からは付箋の色を「黄色」「赤色」「青色」「緑色」に変更することができます。
タブボックスでの作り方
タブボックスは左上に「✓CHECK」、枠線はグレー、背景色は白、文字色は黒がデフォルトとなっています。
チェックボックス以外にも、上の画像のように設定から「コメント」「ポイント」等、左上の表記を変えることが可能です。また、枠の色、背景色、文字色を変更することが可能です。
HTML、CSSで枠を作る方法
次に続けてHTML、CSSでの枠の作り方について記載していこうと思います。
カスタムHTMLに以下のように入力します
<p class="box1">ここにテキストが入ります</p>そして、投稿ページ下部のカスタムCSSに以下のように入力します。
.box1{
border:1px solid #000000
}すると以下のように表示されるようになります。
ここにテキストが入ります
これが基本の形になります。
それでは、各項目を説明していきます。
カスタムHTMLの入力方法について
まずはカスタムHTMLについてです。
<p class=”box1″>ここにテキストが入ります</p>
先ほど、上記のように入力しました。
最初の<pは段落を表すタグになります。普通の文章の入力の際にはこの「ｐ」タグが活用されます。
これにclassという名前を付けてあげます。
“box1″の部分は任意のものになりますが、分かりやすい名前、他と被らない名前、入力がしやすい名前を付けるといいと思います。
classの名前は英語でつけるようにしましょう。
・数字から始まるのはよくないため、必ずアルファベットから始めましょう。
・複数の単語を組み合わせる場合はハイフン(-)かアンダースコア(_)でつなぐようにしましょう。
半角スペースを空けてしまうと2つは別々のclassだと認識されてしまいます。
カスタムCSSの入力方法について
まずは、先ほどのクラス名を指定します。
「.box1」
クラス名の指定には最初にドット(.)を入力します。そしてクラス名を入力します。
次にCSSを指定するために「{}」を入力し、この中にCSSのプロパティや値を入力していきます。
「border:1px solid #000000;」
borderは枠線を作るためのプロパティになります。
次の1pxは枠線の太さになります。数字が大きいほど太い線を描くことができます。
次に「solid」は線の種類を表していて、
solid:実線
double:二重線
dotted:点線
dashed:破線
等の種類があるので、お好みに合わせて変更してください。
次に「#000000」は線の色を指定しています。今回は黒の線にしていますが、
WEB色見本で好みの色の値を見つけて変更することで線の色を変えることができます。
この他にも
.box1{
border:1px solid #000000
}の下に
.box1{
border:1px solid #000000
border-radius: 10px
}と入力することで枠線の角を丸くすることができます。border-radiusが角を丸くするプロパティで、
10pxが角をどれくらい丸くするかという値になります。数値が大きいほど角が丸くなっていきます。
まとめ
今回はcoconテーマでのブロックの作り方、HTML、CSSを使った枠線の作り方をまとめました。
cocoonには、元からこれだけの設定ができるように作られているため、CSSが分からない、難しそうと感じている方にとっては、手軽にデザイン性のあるブログ、ホームページを作成することができるのではないでしょうか。
ぜひ、ご自身で触ってみてお気に入りのボックスを作成してみてくださいね。
また、HTMLを使用した枠線の作り方に関しては、今回は基本のみをまとめましたが、枠線と文字の間に余白を付けたり、周囲の文字との間に余白を付ける、枠を画面の中央に寄せるなどのプロパティもあるので機会があれば紹介をしたいと思います。
コメント