無料お見積りBLOG
ブログ
【超初心者向け】WordPressの投稿をコピペだけで簡単おしゃれにカスタマイズ！【CSS/HTML】
こちらの「記事」は、Wordpress超初心者向けの内容となっています
・おしゃれに見やすくしたい
・検索しても書いてあることが分からない
・コピペで簡単に終わらせたい
ブログや記事の更新は何とかできるけど、 もっと見やすくおしゃれにしたい！
けど、HTMLとかCSSは調べてみたけどさっぱりわからない！
そもそもどこに何をかけばいいの？
という超初心者向けに、コピペ（コピーと貼り付け）だけでいい感じになるコードをご紹介！
目次
１．どこにどうやって記述するの？
投稿の新規投稿を開くと、画面に「+」のアイコンがあるかと思います！
まずは
➀「+」をクリック！
②すべてを表示
③ウィジェットのカテゴリーから、カスタム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;
テキストを太文字に。
3．まとめ
htmlって触るのすこし怖いですが、コピーと貼り付けで使えるように記載しましたので、この記述を使っていつもと違う記事に挑戦してみてください！
愛知県内から 名古屋市 を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17 花車ビル南館5F
TEL： 052-890-7007（2021-12/16～変更）
※ ホームページ制作や活用サポートのお問い合わせはコチラから
おすすめの記事
人気の記事
おすすめ記事
アーカイブ
- 2023年 12月 (13)
- 2023年 11月 (10)
- 2023年 10月 (10)
- 2023年 9月 (9)
- 2023年 8月 (9)
- 2023年 7月 (10)
- 2023年 6月 (9)
- 2023年 5月 (10)
- 2023年 4月 (8)
- 2023年 3月 (9)
- 2023年 2月 (7)
- 2023年 1月 (9)
- 2022年 12月 (10)
- 2022年 11月 (7)
- 2022年 10月 (6)
- 2022年 9月 (6)
- 2022年 8月 (6)
- 2022年 7月 (4)
- 2022年 6月 (4)
- 2022年 5月 (5)
- 2022年 4月 (5)
- 2022年 3月 (10)
- 2022年 2月 (10)
- 2022年 1月 (11)
- 2021年 12月 (12)
- 2021年 11月 (13)
- 2021年 10月 (13)
- 2021年 9月 (13)
- 2021年 8月 (14)
- 2021年 7月 (14)
- 2021年 6月 (14)
- 2021年 5月 (13)
- 2021年 4月 (13)
- 2021年 3月 (18)
- 2021年 2月 (12)
- 2021年 1月 (14)