ボックスデザインを表示させたい
こんばんは、羊です。
ブログを見やすく、可愛らしくするにはどうしたらいいか考えているのですが、初っ端から壁にぶち当たりました。
何やら可愛らしい素材は見つけたんだけどだがしかし。
挿入の仕方がわからないぞ･･･？
これは無事入れられた結果なのですが、ここにいたるまでにひと悶着が･･･。
ので、自分の復習も兼ねて記録しておくよ！
素材を探そう！
とても可愛らしいサンプルがたくさんあったのでこのサイトを参考にしました。
今回利用したのはこちらの15. ピンクverです。
「コードを表示」をクリックすると、そのデザインのHTMLとCSSのコードを見ることができます。この2つをまるっとコピペしてそれぞれブログの該当箇所に貼るといいようだ、ふむふむ。
さて･･･、ここから初心者羊はいりまーす。
エンジニアでもデザイナーでもないため、解釈間違ってるかも･･･？
（でもブログの書き方調べてみても、この段階でつまづく記事が見つけられないからね･･･。何事も経験！）
HTMLとCSSとは？～ど素人のざっくり理解風味～
とりあえずボックスを挿入するためにはHTMLとCSSというものが必要らしい。
【HTML】
ウェブページを作成するときに使う言語。
このボックスの場合下記のようなコードになっている。
<div class="box15"> <p>ここに文章</p> </div>
ので、そのままコピペすると･･･
「この素材はbox15という名前で、ここに文章と表示するよ～」
と言っているらしい。
ここに文章 の部分に表示したいものを入れるべし。
でも、これだけだと名前と文章を決めただけでボックスの形状の欠片も指定されていないので、そこでCSSの出番。
【CSS】
ウェブページのスタイルを指定するための言語。
このボックスの場合下記のようなコードになっている。
|
.box15 { |
「box15についての詳細を書くね～」 |
|
padding: 0.2em 0.5em; |
「内側の余白はこのくらい」 |
|
margin: 2em 0; |
「外側の余白はこれくらい」 |
|
color: #565656; |
「文字の色はこの色ね」 |
|
background: #ffeaea; |
「背景色はこの色」 |
|
box-shadow: 0px 0px 0px 10px #ffeaea; |
「ボックスにはこの色の影をつけるよ」 |
|
border: dashed 2px #ffc3c3; |
「こんな飾り線をつけるよ、この太さでこの色ね」 |
|
border-radius: 8px; |
「ボックスの四隅は丸くするよ」 |
|
} |
「詳細おーわり！」 |
|
.box15 p { margin: 0; padding: 0; } |
「ボックスの中の文字は余白０ね」 |
･･･と。
ここまで色々細かく決めて初めてbox15と名付けられたコイツはボックスとして形になることができるらしいよ！
※このbox15という名前は、参考サイトさんがこのボックスデザインを紹介するために便宜上決めたものであって、HTMLとCSSで共通してれば多分なんでもいい、はず。
でもとりあえずコピペしてそのまま使うのでこの名前のままにしておく。
HTML部分をコピペして入れよう！
うん、どこに？？？？
ってなるんだよね(´·ω·`)
それはまず、こうして･･･
こうじゃ！
あ、羊のは箇条書きにして頭に・がついているからこの書式だけど、シンプルにいくとこれでいいはず。
･･･あれ？
箇条書きすると<p></p>がどこにも入ってなくて.box15 p { margin: 0; padding: 0; }意味ないな？
これはまたシンプルバージョン版にして余白を確認しなければ。
CSS部分をコピペして入れよう！
ほう･･･どこに？？？？？？？
ですよねー(´·ω·`)
CSSの場合は
管理画面→デザイン→カスタマイズ（工具のマーク）→{}デザインCSS
で。
赤枠の位置に貼り付け！
ふー･･･。
これでやっと最初の画像のように表示できたよ！！
とりあえず、どこにコードを挿入したら表示されるのか問題は解決したので、この調子でこれからも色々な表示を試していきたいとおもいます。
ではでは。
