完全無料！誰でも簡単にブログ記事をプロ並みデザイン化する小ネタ２選
こんにちは
本日、自分のブログ記事を見てたらちょっとシンプルすぎない？
って思えてきて簡単に記事をドレスアップできる方法ないか調べてみましたので紹介します。
いろいろ調べてみると凝ったデザインはブログ内部のCSSなるファイルを編集しないと使えないことがわかりました。CSSの編集を一歩間違えるとブログが壊れてしまう可能性もあるみたいです！
そこで今回紹介するのは、サンプルコードをコピペするだけでお手軽に使えるデザインを２つ紹介します。
囲い枠
まず一つ目は、文章に囲い枠を付けるデザインです。
下のサンプルコードをコピーして、記事編集画面に貼り付けてみてください！
WordPressの方は、エディター画面が「ビジュアル」ではなく「テキスト」になっていることを確認してくださいね！
<div style=”background: #f7f7f7; padding: 10px; border-radius: 10px; border: 3px dotted #ffb6c1; width: auto; margin-left: auto; margin-right: auto;”>(ここにテキスト)</div>
ジャーン！簡単ですね！
(ここにテキスト)
no name
具体的にWord Pressの画面でやり方を見てみましょう！
①テキストになっていることを確認したら②コード貼り付けです。
これで作業終了です。思う通りのデザインになっているかエディターをビジュアルモードに変更してデザインの確認をしましょう！
やり方はこちら👇
これなら簡単！プロ並みデザインの完成〜♩
ちなみに
background: ??????の?の部分を変えるとバックグラウンドの色が変わります。
私は、白がいいので?の部分を白を表現するための#FFFFFFに変更しました。
ついでに囲い枠の線を青色にしてみます。
border: 3px dotted #ffb6c1 ➡︎ border: 3px dotted #0000FF
そして完成したのがこちらのコードになります。
<div style=”background: #FFFFFF; padding: 10px; border-radius: 10px; border: 3px dotted #0000FF; width: auto; margin-left: auto; margin-right: auto;”>(ここにテキスト)</div>
このコードをテキスト画面から貼り付けると
(ここにテキスト)
ジャーン！かっこよくなりました＾＾
ちなみに上の例で色を変えるのに変更した文字列のことをHTMLのカラーコードと言います。
下に、その他の色の対応表を掲載しておきますので皆さんお好きなデザインの囲い枠を作ってみてくださいね。
|
ふせん
お次は付箋です。
下のサンプルコードを同じく貼り付けてみてくださいね！
<table><tr><th> </th><td>(ここにテキスト)</td></tr></table>
ジャーン！
| (ここにテキスト) |