ぷらいべったー装飾覚え書き
@da_mo8
ぷらいべったー、便利だけど前後にもう少し余白があればもっと見やすいのにな～
と思いながらも都度工夫するのめんどくさい。
というわけで見出し装飾などコピペ用に書きました。ご自由にお使い下さい。
※行頭の＜は全角になっています。半角に直して使ってください。
※色は#f5f5f5#cccを変更してください。Googleで#f5f5f5検索したらカラーパレットが出てとても便利！
※線の種類はsolidの部分。ボーダースタイルで検索すると色々出てきます。
※＜span style="">～はどんなに長くても改行してはいけません。ぷらいべったー側で改行とみなされて表示が変わってしまいます。
見出し系
背景色
＜span style="font-size:1.8rem; display:block; margin-top:30px; padding:10px; background-color:#f5f5f5;">背景色
囲い線
＜span style="font-size:1.8rem; display:block; margin-top:30px; padding:10px; border:solid 1px #ccc;">囲い線
背景色＋囲い線
＜span style="font-size:1.8rem; display:block; margin-top:30px; padding:10px; background-color:#f5f5f5; border:solid 1px #ccc;">背景色＋囲い線
下線のみ
＜span style="font-size:1.8rem; display:block; margin-top:30px; padding:10px; border-bottom:solid 2px #ccc;">下線のみ
左に太いライン
＜span style="font-size:1.8rem; display:block; margin-top:30px; padding:10px; border-left:solid 20px #ccc;">左に太いライン
マーカー線みたいなやつ
＜span style="font-size:1.8rem; display:block; margin-top:30px; padding:10px; background: linear-gradient(transparent 60%, #f5f5f5 0%);">マーカー線みたいなやつ
前後に余白をつけるだけ
最上部の行と最下部の行をこれで囲えば、文全体に余白がついたような感じになるかも。
（この記事にも使っています。前後にちょっと余白が……）
最上部
＜span style="display:block; margin-top:30px;">最上部
最下部
＜span style="display:block; margin-bottom:30px;">最下部
文字を白くして仕切り線
＜span style="display:block; border-bottom:solid 3px #ccc; color:#fff;">文字を白くして仕切り線＜/span>
ポイントはdisplay:block;です。
もともとspanはインライン要素なので、paddingとかが利かないんですが、ブロック要素にすることで利くようにしています。
marginのマイナス値は認識しないようでした。
あと改行込みの長文などを＜span style="display:block;"＞でブロック要素にしても、ブロック要素扱いにならないみたいです。あくまで単一行の装飾という感じです。
以上、ぷらいべったー装飾覚え書き でした。
これを使って広告を極端に下げるなどの行為は望みません。広告も大切です。無料でぷらいべったーを快適に使えることに感謝！