ブログや記事の更新は何とかできるけど、 もっと見やすくおしゃれにしたい！

けど、HTMLとかCSSは調べてみたけどさっぱりわからない！
そもそもどこに何をかけばいいの？

という超初心者向けに、コピペ（コピーと貼り付け）だけでいい感じになるコードをご紹介！

目次

1. どこにどうやって記述するの？
2. 実際に使用するコードはこちら
   ①枠をつける
   ②蛍光ペン風のラインをひく
   ③影をつけたい
   ④グラデーション背景
   ⑤グラデーションテキスト
3. まとめ

投稿の新規投稿を開くと、画面に「+」のアイコンがあるかと思います！
まずは

➀「+」をクリック！
②すべてを表示
③ウィジェットのカテゴリーから、カスタムHTMLを選択
④そこに、この記事の黒背景部分のhtmlをコピペ
⑤完了

の手順となっています。
下記動画を参考にどうぞ！

改行については<br>を入れないと改行しないので気を付けてください！

では実際に見ていきましょう!

①枠をつける

<div style="padding: 40px; border: 5px solid #333333;">
<p><strong>ここにが太文字になるよ！</strong><br><br>
ここが普通のテキストになるよ！</p>
</div>

※このまま使う人は読まなくても大丈夫！

◆ コードの説明

padding: 40px;
枠内の縦横の余白。40を減らすと余白も狭くなる。

border: 5px solid #333333;
枠の太さ、種類（点線とかではなく普通の線）、色。
太さ変えたい場合は5変える。色を変えたい場合は下記のサイト等で#と数字6桁の部分をコピーして貼り付ける。

「16進数のRGBの色をカラーピッカーで指定/確認する」
https://itsakura.com/html-color-codes#s2

②蛍光ペン風のラインをひく

蛍光ペン風のラインをひきたい

<p><span style="background: linear-gradient(transparent 70%,#fff070 30%);">
ここの文字にラインがひかれるよ！</span>
ここは普通のテキスト</p>

※このまま使う人は読まなくても大丈夫！

◆ コードの説明

transparent 80%
例で言うと黄色じゃない部分の割合。

#fff070 20%
色。黄色部分の割合。増やすと太くなる。
色を変えたい場合は下記のサイト等で#と数字6桁の部分をコピーして貼り付ける。

「16進数のRGBの色をカラーピッカーで指定/確認する」
https://itsakura.com/html-color-codes#s2

③影をつけたい

ボックスに影を付けて、浮いているようにしたい
こうするだけで少し目立ちますよね
大事な見て欲しい部分とかに使えます

<p style="padding: 40px; box-shadow: 0 2px 10px 2px rgba(0, 0, 0, .1);">ここに文章が入るよ！</p>

※このまま使う人は読まなくても大丈夫！

◆ コードの説明

padding: 40px;
枠内の縦横の余白。40を減らすと余白も狭くなる。

box-shadow: 0 2px 10px 2px
陰をつけるCSS。
左から順に
0→左右の向き 2px→上下の向き 10px→ぼかし 0→広がり

rgba(0, 0, 0, 0.1)
左3つの0は色の指定。0,0,0,は黒
0.1→透明度。増えるほど影が濃くなる。

④グラデーション背景

グラデーションの背景にしたい

<p style="padding: 40px; 
background-image: linear-gradient(to right, #eec0c6, #7ee8fa); 
background: -moz-linear-gradient(left, #eec0c6, #7ee8fa); 
background: -webkit-linear-gradient(left, #eec0c6, #7ee8fa); 
color: #ffffff;
font-weight:bold;">
ここにテキストが入ります</p>

※このまま使う人は読まなくても大丈夫！

◆ コードの説明

padding: 40px;
枠内の縦横の余白。40を減らすと余白も狭くなる。

linear-gradient(to right, #eec0c6, #7ee8fa)
右に向かって変わっていく。左の色。右の色

-moz-linear-gradient(left, #eec0c6, #7ee8fa);
-webkit-linear-gradient(left, #eec0c6, #7ee8fa);
左から変わっていく。左の色。右の色 。
この二つも必ず入れておく。
入れておかないと他のブラウザで見た時にうまくいかないことがあるため。

color: #ffffff;
フォントの色。

「16進数のRGBの色をカラーピッカーで指定/確認する」
https://itsakura.com/html-color-codes#s2

font-weight:bold;
テキストを太文字に。

⑤グラデーションテキスト

テキストもグラデーション！

Gradated text

<p style="font-size:30px;">
<span style="background-image: linear-gradient(to right, #eec0c6, #7ee8fa); 
background: -moz-linear-gradient(left, #eec0c6, #7ee8fa); 
background: -webkit-linear-gradient(left, #eec0c6, #7ee8fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
font-weight:bold;">ここにテキストが入ります</span></p>

※このまま使う人は読まなくても大丈夫！

◆ コードの説明

font-size:30px;
テキストのサイズ。増やすと大きくなる。

linear-gradient(to right, #eec0c6, #7ee8fa)
-moz-linear-gradient(left, #eec0c6, #7ee8fa);
-webkit-linear-gradient(left, #eec0c6, #7ee8fa);
背景グラデーションと一緒。上記参照。

background-clip: text;
背景をテキストでマスク（文字部分だけ背景がみえるようにする）

text-fill-color: transparent;
文字色を透過にする。

font-weight:bold;
テキストを太文字に。

htmlって触るのすこし怖いですが、コピーと貼り付けで使えるように記載しましたので、この記述を使っていつもと違う記事に挑戦してみてください！

愛知県内から 名古屋市 を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007（2021-12/16～変更）
※ ホームページ制作や活用サポートのお問い合わせはコチラから