WordPress 記事中に使える装飾まとめ
こんにちは、koheiです。
WordPressでブログを書き始めると、文章に枠をつけたり、アンダーラインを引いたり、色んな装飾をつけたくなりますよね。
ということで、今日はWordPressで記事中に使える装飾（CSS)をまとめて紹介します！
※一部の装飾は、WordPressのプラグインを使います。
1.シンプルな囲み
シンプルな囲み線です。要点をまとめたり、外部リンクを記載したりシンプルなので何にでも合わせやすいですね。
・シンプルな囲みです。
・シンプルな囲みです。
style.cssに以下をコピペしましょう。
※WordPress管理画面からcssを編集する方法は、こちらを参照ください。
|
1 2 3 4 5 6 7 |
.box_simple { padding: 5px; border: solid 1px #2E2E2E; border-radius: 2px; margin-top: 10px; margin-bottom: 10px; } |
WordPressの記事投稿画面で、枠で囲みたい文章の前後にdivタグを入力し、class名は、”box_simple”と入力します。
※クラス名は、先ほどCSSに追加したクラス名です。
|
1 2 3 |
<div class="box_simple"> 文章・・・・ </div> |
2.ブルーの囲み
背景を淡いブルーにしています。冷静で知的な印象を与えます。
記事のポイントを記載したり、まとめたりする時に使用すると良いと思います。
・ブルーの囲みです。
・ブルーの囲みです。
style.cssに以下をコピペしましょう。
※カラーコードや線の太さなどを変えれば色んな枠ができます。アレンジしてみてください！
※WordPress管理画面からcssを編集する方法は、こちらを参照ください。
|
1 2 3 4 5 6 7 8 |
.box_blue { padding: 16px; border: solid 1px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px; } |
WordPressの記事投稿画面で、枠で囲みたい文章の前後にdivタグを入力し、class名は、”box_blue”と入力します。
※クラス名は、先ほどCSSに追加したクラス名です。
|
1 2 3 |
<div class="box_blue"> 文章・・・・ </div> |
3.ドラクエ風な囲み
ドラクエ風な囲みを作ってみました。使い所がかなり限定されますが、ドラクエ風な記事を書きたい時に使えると思います。
style.cssに以下をコピペしましょう。
※WordPress管理画面からcssを編集する方法は、こちらを参照ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.box_doraque_in { padding: 15px; border: solid 4px #fff; border-radius: 3px; background-color: #000000; margin-top: 30px; margin-bottom: 30px; color: #fff; margin: 0; } .box_doraque_out { padding: 2px; background-color: #000000; margin: 30px 0 30px 0; } |
WordPressの記事投稿画面で、枠で囲みたい文章の前後にdivタグを入力し、class名は、”box_doraque_out”,”box_doraque_in”と入力します。
※黒い背景の内側に白の枠を付けるため、２つのdivタグで囲みます。
|
1 2 3 4 5 |
<div class="box_doraque_out"> <div class="box_doraque_in"> 文章・・・・ </div> </div> |
4.エディタ風ソースコード貼り付け
以下のようなエディタ風にソースコードを貼り付けたい場合は、WordPressプラグイン「Crayon Syntax Highlighter」を使用します。
|
1 2 3 |
<div class="sample"> サンプルコードです。 </div> |
|
1 2 3 |
<div class="sample"> サンプルコードです。 </div> |
WordPress管理画面から「プラグイン」→「新規追加」をクリックします。
キーワードに「Crayon Syntax Highlighter」を入力し、検索します。
「Crayon Syntax Highlighter」が出てきたら、「今すぐインストール」をクリックします。
インストール完了したら、「有効化」しましょう。
「Crayon Syntax Highlighter」をインストールし、有効化したら、投稿の編集画面に「crayon」というボタンが出てきますので、クリックします。
AddCode画面が開きますので、ブログにのせたいソースコードを貼り付け、Addボタンをクリックします。
【エディタのデザインを変える場合】
AddCode画面の下にはデザインの設定が可能です。エディタのデザインを変えたい場合は、Themeを変更してみましょう。
以下の例は、Themeを「Monokai」に設定した例です。
【行数にマークを付ける場合】
行数にマーカーのようなマークを付けることもできます。
AddCode画面のMarked Linesにマークしたい行数を記入しましょう。
5.アンダーライン
記事中のキーワードや重要箇所にアンダーラインを引く時に使います。
これは、
style.cssに以下をコピペしましょう。
※カラーコードや線の太さなどを変えて、アレンジしてみてください！
※WordPress管理画面からcssを編集する方法は、こちらを参照ください。
|
1 2 3 4 |
under { font-weight: bold; background: linear-gradient(transparent 40%, #ffff00 40%); } |
WordPressの記事投稿画面で、アンダーラインを引きたい文字の前後にunderタグを入力します。
|
1 |
これは、<under>アンダーライン</under>です。 |
6.引用
他のコンテンツから文章などを引用する時に使います。
これは、引用のサンプルです。
style.cssに以下をコピペしましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
blockquote{ background-color: #ddd; padding: 1em 1em 0.5em; position: relative; border: 2px solid #d7d7d7; margin: 0 1em 1.5em; } blockquote:before{ content: "“"; font-size: 400%; line-height: 1em; font-family: 'Times New Roman' ,"ＭＳ Ｐゴシック" ,sans-serif; color: #999; position: absolute; left: 5px; top: 0; } blockquote:after{ content: "”"; font-size: 400%; line-height: 0em; font-family: 'Times New Roman' ,"ＭＳ Ｐゴシック" ,sans-serif; color: #999; position: absolute; right: 5px; bottom: 0; } |
WordPressの記事投稿画面で、枠で囲みたい文章の前後にblockquoteタグを入力します。
|
1 2 3 |
<blockquote> これは、引用のサンプルです。 </blockquote> |
補足：WordPress管理画面からstyle.cssを編集する方法
WordPress管理画面からstyle.cssを編集することができますので説明します。
（※このやり方は、直接サーバーのstyle.cssを編集しますので、FTPツールなどは不要です。）
WordPress管理画面の「外観」→「テーマの編集」をクリックします。
テーマの編集画面に入ると、スタイルシート(style.css）の編集画面になります。
ここで直接CSSファイルを変更することが可能です。
編集画面でCSSコードを追加、編集し、ファイルを更新ボタンをクリックして完了です。
最後に
以上、記事中に使える装飾を紹介しました。
是非参考にして、記事を充実させていきましょうー！
それでは！
スポンサーリンク
