デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

WordPress 記事中に使える装飾まとめ

こんにちは、koheiです。

WordPressでブログを書き始めると、文章に枠をつけたり、アンダーラインを引いたり、色んな装飾をつけたくなりますよね。
ということで、今日はWordPressで記事中に使える装飾(CSS)をまとめて紹介します!
※一部の装飾は、WordPressのプラグインを使います。

スポンサーリンク

1.シンプルな囲み

シンプルな囲み線です。要点をまとめたり、外部リンクを記載したりシンプルなので何にでも合わせやすいですね。

サンプル
・シンプルな囲みです。

・シンプルな囲みです。

・シンプルな囲みです。

CSSコード

style.cssに以下をコピペしましょう。
※WordPress管理画面からcssを編集する方法は、こちらを参照ください。

使い方

WordPressの記事投稿画面で、枠で囲みたい文章の前後にdivタグを入力し、class名は、”box_simple”と入力します。
※クラス名は、先ほどCSSに追加したクラス名です。

2.ブルーの囲み

背景を淡いブルーにしています。冷静で知的な印象を与えます。
記事のポイントを記載したり、まとめたりする時に使用すると良いと思います。

サンプル
・ブルーの囲みです。

・ブルーの囲みです。

・ブルーの囲みです。

CSSコード

style.cssに以下をコピペしましょう。
※カラーコードや線の太さなどを変えれば色んな枠ができます。アレンジしてみてください!

※WordPress管理画面からcssを編集する方法は、こちらを参照ください。

使い方

WordPressの記事投稿画面で、枠で囲みたい文章の前後にdivタグを入力し、class名は、”box_blue”と入力します。
※クラス名は、先ほどCSSに追加したクラス名です。

3.ドラクエ風な囲み

ドラクエ風な囲みを作ってみました。使い所がかなり限定されますが、ドラクエ風な記事を書きたい時に使えると思います。

サンプル
ドラクエ風の囲みです。
CSSコード

style.cssに以下をコピペしましょう。
※WordPress管理画面からcssを編集する方法は、こちらを参照ください。

使い方

WordPressの記事投稿画面で、枠で囲みたい文章の前後にdivタグを入力し、class名は、”box_doraque_out”,”box_doraque_in”と入力します。
※黒い背景の内側に白の枠を付けるため、2つのdivタグで囲みます。

4.エディタ風ソースコード貼り付け

以下のようなエディタ風にソースコードを貼り付けたい場合は、WordPressプラグイン「Crayon Syntax Highlighter」を使用します。

サンプル

プラグインをインストール

WordPress管理画面から「プラグイン」→「新規追加」をクリックします。
キーワードに「Crayon Syntax Highlighter」を入力し、検索します。
「Crayon Syntax Highlighter」が出てきたら、「今すぐインストール」をクリックします。

インストール完了したら、「有効化」しましょう。

使い方

「Crayon Syntax Highlighter」をインストールし、有効化したら、投稿の編集画面に「crayon」というボタンが出てきますので、クリックします。

AddCode画面が開きますので、ブログにのせたいソースコードを貼り付け、Addボタンをクリックします。

【エディタのデザインを変える場合】
AddCode画面の下にはデザインの設定が可能です。エディタのデザインを変えたい場合は、Themeを変更してみましょう。
以下の例は、Themeを「Monokai」に設定した例です。

【行数にマークを付ける場合】
行数にマーカーのようなマークを付けることもできます。
AddCode画面のMarked Linesにマークしたい行数を記入しましょう。

5.アンダーライン

記事中のキーワードや重要箇所にアンダーラインを引く時に使います。

サンプル

これは、アンダーラインのサンプルです。

CSSコード

style.cssに以下をコピペしましょう。
※カラーコードや線の太さなどを変えて、アレンジしてみてください!

※WordPress管理画面からcssを編集する方法は、こちらを参照ください。

使い方

WordPressの記事投稿画面で、アンダーラインを引きたい文字の前後にunderタグを入力します。

6.引用

他のコンテンツから文章などを引用する時に使います。

サンプル

これは、引用のサンプルです。

CSSコード

style.cssに以下をコピペしましょう。

使い方

WordPressの記事投稿画面で、枠で囲みたい文章の前後にblockquoteタグを入力します。

補足:WordPress管理画面からstyle.cssを編集する方法

WordPress管理画面からstyle.cssを編集することができますので説明します。
(※このやり方は、直接サーバーのstyle.cssを編集しますので、FTPツールなどは不要です。)

WordPress管理画面の「外観」→「テーマの編集」をクリックします。

テーマの編集画面に入ると、スタイルシート(style.css)の編集画面になります。
ここで直接CSSファイルを変更することが可能です。
編集画面でCSSコードを追加、編集し、ファイルを更新ボタンをクリックして完了です。

最後に

以上、記事中に使える装飾を紹介しました。
是非参考にして、記事を充実させていきましょうー!

それでは!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン