【WordPress】記事の本文を装飾する【プラグイン使用】

はい!こんにちは!
今回のテーマは

『記事の本文を装飾する』

です。
前回はプラグインを使わずに見出しを装飾する方法を説明させて頂きました。

参考記事 プラグインを使わずに見出しを装飾する方法
DIYer

はい!こんにちは! 今回のテーマは 目次 1 【WordPress】プラグインを使わずに見出しを装飾する1.0.0.1 …

今回はプラグインを使用して本文中の装飾をしていきたいと思います。


プラグインをダウンロードする。

 

今回使用するプラグインは『addQuicktag』『Simple Custom CSS』です。

まず初めにそれぞれのプラグインを左メニューの①『プラグイン』→②『新規追加』から検索欄にプラグインの名前入れて③『検索』して、出てきたら④『今すぐインストール』をします。

 


『addQuicktag』


『Simple Custom CSS』

2つとも、ダウンロードが完了したら有効化をして準備完了です。


スポンサーリンク

プラグインの設定をする。

 

今回はサンプルとして、

 

.moji1 『背景黄色』

 

.moji2 『二重線』

 

.moji3 『グラデーション』

 

.moji4 『チェック』

 

を作っていきましょう。

まずは投稿の編集欄にコマンドを設定するために、左メニューから設定『addQuicktag』をクリックしてこの画面を開きます。

こちらの画面から装飾(CSS)のコマンドボタンを追加していきます。

投稿記事を書くときのここに追加されます↓


それでは設定をしていきましょう

下の画像のように、

ボタン名に『背景黄色』

ラベル名に『.moji1』

開始タグに『<em class=”moji1″>』

終了タグに『</em>』

と打ち込んでいき、打ち込み終わったら一番右のチェックボックスをチェックします。

チェックしたら『変更を保存』ボタンを押して、1つ目のコマンドボタンの作成が完了です。

同じように名前を『二重線』、ラベル名を『.moji2』のように打っていきボタンを4つ作ります。

ボタン名が『背景黄色』『二重線』『グラデーション』『チェック』の4つが出来ましたか?

出来ましたら次の作業、

CSSを書いて(コピペして)いきましょう。

書く場所は左メニューの設定カスタムCSSというところです。

コピー用コードです。

下のコードをコピーしてカスタムCSSに貼り付けます。

.moji1{background-color: #ffff66;margin: 2em 0;padding: 1em;}.moji2{border: 4px double #ddd;margin: 2em 0;padding: 1em;}.moji3{background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);border: 1px solid #ccc;border-top: 4px solid #1c66fe;box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;margin: 2em 0;padding: 1em;}.moji4{border: 2px solid #da4033;border-radius: 4px;margin: 2em 0;padding: 1em;position: relative;}.moji4::before {background-color: #fff;color: #da4033;content: "CHECK";font-weight: bold;left: 1em;padding: 0 .5em;position: absolute;top: -1em;}

貼り付けが終わったらカスタムCSSの更新ボタンを押します。

これで本文装飾の準備は完了です。

表示の確認をする。

投稿のコマンド欄に↓この表示があると思います。

実際に使ってみてプレビューで表示を確認してみて下さい。

サンプルと同じように出来ていたら完成です。


追記

このタグ『en class』短い文章ですと、文字幅でピシッと決まるんですが、一列以上の文を書くとスタイル崩れします

肉まんが好きです。でもピザまんの方がもーっと好きです。っていう無駄な文章を作ってみた。

 

↑こんな感じです。これじゃ格好悪いですよね。

一列以上の文を書くときは『en class』を『div class』、『/en』を『/div』にしてボタンを作ってください。

そうすると、

肉まんが好きです。でもピザまんの方がもーっと好きです。っていう無駄な文章を作ってみた。

このようにキレイにまとまります。

長文を書くのが多い方でしたら、最初からタグを『div』で作る事をおススメします。


まとめ

お疲れ様でしたー!なんだか色々細かく書きたかったけど、自分で読んでいて分かりづらくなってしまったので、結構内容削りました(笑)

ざっくりしすぎてわからないよ!っていう方はお気軽にコメントからでもメールからでも質問頂ければ、1日以内には返信出来ると思います。

本文の装飾が出来るようになると記事のどこに注目してほしいのか、どこを重点的に伝えたいのか、が重要になってきますね。

っとなると、次のステップはいよいよ文章構成ですね。

私、ウェブで文章構成を教えられるほど文章力がないので、文章の理想的な構成については他サイトをあたってください(笑)


今回の記事はここまでになります。

最後まで読んで頂き感謝!

また次の記事で。。。

最新情報をチェックしよう!