ゼロからWordPress8 記事を装飾する1

 

WordPressで記事を装飾したい!

 

WordPressの操作に慣れてくると「他のサイトのように自分のサイトも見やすく装飾したいっ!」という欲求が出てきます。

しかしながら、通常の記事投稿画面ではカッコイイ装飾機能はありません。本記事ではこれらの方法について解説しています。

 

 

どうやって装飾するの?

例えば上のタイトルのような装飾ですね。これは一体どうやってやるのでしょうか。これらの装飾はCSS(Cascading Style Sheets)のパラメータ次第で自由に変更ができます。

CSSとは「こういった感じに装飾したい!」という情報(文字色はコレ、背景色はコレ、大きさはコレなど)をパラメータ化して、それらをまとめた1集団というイメージでしょうか。分かりにくいですね。

 

Point

✓ CSSを編集する

✓ プラグイン「AddQuicktag」をインストールする

✓ 微調整する

✓ ブラウザのキャッシュを消去する

単純に装飾の登録と追加だけであれば、上記のうち上2項目で可能です。

 

✓CSSを編集する

まずはお気に入りの装飾を見つけましょう!
googleなりで「CSS 装飾 おすすめ」などで検索してみるとたくさんの装飾がヒットします。これらの中から自分の好みにあった装飾を選ぶと良いと思います。

 

便宜的に以下の装飾を例に示したいと思います。

この囲みを気に入ったとします!

 

この装飾のCSSは以下のようなものです。先頭行に書かれている「ueobi」つまり上帯びがこのCSSの名前です。
このCSS全体を右クリックコピーしてください。ipadの場合は全体を選んでコピーです。
——————————————-
.ueobi{
padding: 1em 1em;
margin: 2em 0;
color: #234c8e;
background: white;
border-top: solid 5px #234c8e;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.ueobi p {
margin: 0;
padding: 0;
}
——————————————-

 

 

wordpress css 編集
次に自分のサイト内の管理画面(ダッシュボード)にて「外観」→「CSS編集」を選択します。

 

 

wordpress css 編集
追加CSSに先ほどコピーしたものを貼り付けます。貼りつけ後は必ず「公開」を押して保存してください。
これでひとまず装飾「ueobi」がCSSに登録された状態です。

これを記事上で使う(呼び出す)には、html言語にて「ueobiをここで使え!」という指定をしなければなりません。
この感覚が最初は難しいのですが、1度使えば慣れます。

 

先ほど登録した「ueobi」を呼び出すhtml言語は以下の通りです。
——————————————-
<div class=”ueobi”>
<p>ここに書く</p>
</div>
——————————————-

<div>から</div>で囲まれた部分が先ほど登録したCSS「ueobi」の適用範囲です。
その中に<p></p>があり、その間に書かれている「ここに書く」の部分が実際のテキスト部になります。

 

このCSSを呼び出す際に自分でhtml言語を1から書いていたらとても疲れますので、一発で書いてくれるプラグインを御紹介いたします。

 

 

プラグイン「AddQuicktag」をインストールする

自分のサイトの管理画面(ダッシュボード)にて「プラグイン」→「新規追加」をクリックします。そこで「AddQuicktag」をインストールします。インストール終了後、このプラグインの設定画面に行ってください。

 

 

wordpress css addquicktag 使い方
設定画面の青四角には今回のCSSを呼び出すためのhtml言語に対して名前をつけます。写真では便宜的に「ボックス」という名称を入力しています。

赤四角にはCSSを呼び出すためのhtml言語を書きます。先ほどご説明した以下のhtmlをここにコピペしてください。
——————————————-
<div class=”ueobi”>
<p>ここに書く</p>
</div>
——————————————-

 

緑四角は今回の登録をどの場面で使いたいかを定義するところですが、全部に✓してください。

 

これらを設定した後に「変更の保存」をクリックして登録をします。

 

 

wordpress css addquicktag 使い方
「AddQuicktag」をインストールすると、投稿画面にて「Quicktags」という項目が追加になります。
ここを押すと、先ほど登録した「ボックス」が追加されています。

 

 

wordpress css addquicktag 使い方
これを選択すると、テキスト入力画面に「ここに書く」が出てきます。
現在の表示が「ビジュアルモード」でhtml言語が見えない状態なので、こんな感じに見えます。

 

 

wordpress css addquicktag 使い方
表示モードを「テキストモード」に切り替えると、先ほど登録した「ボックス」のhtmlがキチンと表示されていることが分かります。では、これで実際の表示がどうなっているかを確認しましょう。

 

 

wordpress css addquicktag 使い方
画面の右上あたりに「公開」サイドバーがあり、そこに「プレビュー」がありますので押してみると、記事を公開せずに現在の状態をブラウザーを介して見ることができます。きちんと表示されていれば成功です!

同じ要領で自分の気に入った装飾をバシバシ登録して、見やすくカッコイイ記事に仕上げていきましょうっ!
ひとまずここまでで微調整なしで装飾ができました。

 

ただ、記事を書いていると「帯の色を変えたい」とか「囲み文字を段落文章ではなく最初からh3タグにしたい」といった欲求がでてきます。それらについては次の記事で解説していきたいと思います。

コメントを残す

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