　サイト構築 2020-09-09 2022-05-07 投詞家

【WordPress】ブログに装飾となる簡単なコードやタグ

ワードプレス　ブログ投稿に　簡単な装飾タグをつける

これをすれば　読みやすさが少しアップかなと　参考にでもどうぞ

HTML CSS　初学者級でも　使えるレベルのものだと思います

１．AddQuicktag　プラグインを活用する

プラグイン機能で　タグ作成をする　今現在はこの方法が何かできませんでした　原因不明

２．クラシックエディタのテキスト

そのまま書き込みをするやり方　今現在はこの方法で　記述　装飾しています

そのまま書き込む　コードは

プラグイン機能のタグ作成に　応用可と思う

ボタン名　開始タグ　終了タグ　と　定義すれば　プルグインの方が便利です

コピペしてしたり　自分なりに　色指定変更したり　使いやすいように　してみてください

1行空ける

 

太字

<b>ここに文字</b>

<h3>ここに文字</h3>

見出し3のような付箋型　青色系

<div style="border: #B3E5FC solid 1px; border-left: #4865B2 solid 10px; padding: 20px; background: #f7f7f7;">ここに文字</div>

文字色　赤色系

<span style="color:#E74C3C;">ここに文字</span>

文字下線マーカー　黄色系

<span style="background:linear-gradient(transparent 60%, #ffdc00);">ここに文字</span>

枠シンプル影付き

<div style="background: #fff; border: 1px #ccc solid; box-shadow: 0 2px 3px 0 #ddd; padding: 1.2em;">ここに文字</div>

枠角丸み　薄紫色系

<div style="border: 0.3rem solid #DEA7CA; padding: 0.5rem; border-radius: 0.5rem; padding: 1.2rem;">ここに文字</div>

枠　破線枠　背景色薄青系

<div style="border: 0.2rem dashed #5b8bd0; padding: 0.5rem; border-radius: 0.5rem; background: #f0f7ff; margin: 2em; padding: 1.2rem;">

ここに文字</div>

リンクを別ウィンドウで出す　新規タブで開く

<a href="ここにリンク先アドレス" target="_blank" rel="noopener noreferrer">ここに文字</a>

今後　追加する可能性もあります　参照くだされば　幸いです

ブログの装飾に簡単なコード
よいサイト構築を応援しています

読者のあなたに　これからの人生で何かよりよい機会や影響を　与えること贈ることができれば
とても嬉しく光栄で幸福なことです　ご愛読感謝します　またお逢いしましょう