BETA

【WordPress】テーマ「Hueman」で文字を枠で囲む方法

投稿日:2019-01-26
最終更新:2019-01-26
※この記事は外部サイト(https://hk-ryukyu.club/hideto/archives/292)からのクロス投稿です

【やりたいこと】文字をで囲んで見やすくしたい!


WordPressをはじめて、まだ2週間も経っていないWordPress超初心者のブロガーです。

「そんなこと当たり前だろ」ってみなさんが思うことも、私にとっては、大発見なのです!

つまり、WordPressに関しては、毎日が大発見なのです!

ということで、

今回は、文字を枠で囲む方法です(^^)/

※テーマ「Hueman」を使用しています。

【10分でできる!】はじめての追加CSS


※ダウンロード時間は10分の中に含まれていません。

0.概要


追加CSSに「枠」のCSSを追加し、AddQuicktagプラグインを使用して、簡単に「枠」を追加できるようにします。

1.使用したもの


・ロリポップレンタルサーバー スタンダードプラン

https://lolipop.jp/

・WordPress 4.9.8

※WordPressはロリポップユーザー専用ページからインストールしました。

・テーマ Hueman

https://ja.wordpress.org/themes/hueman/

・プラグイン AddQuicktag

https://ja.wordpress.org/plugins/addquicktag/

2.手順

①「枠」のCSSをコピー


こちらの記事からお好きな「枠」のCSSをコピーしてください。

https://naifix.com/css-box-design/#i

②CSSの追加


外観のカスタマイズをクリックします。

詳細設定をクリックします。

追加CSSをクリックし、上記の画像のように、①でコピーしたCSSをペーストします。

③プラグインAddQuicktagのインストール


プラグインの新規追加をクリックします。

AddQuicktagを検索し、インストールします。 インストール後、有効にします。

④AddQuicktagの設定


設定のAddQuicktagをクリックします。

ボタンのラベルに今回の「枠」の名前を設定します。

開始タグには、「<p class=”midori-box”>[]</p>」を参考にして、記入してください。※1

右側のチェック欄には、すべてチェックをつけます。

以上の設定が完了したら、変更を保存をクリックします。

※1「””」には追加したCSSのクラス名を記入します。下記の画像の場合だと「midori-box」を記入します

⑤確認


ビジュアルエディターを表示し、 Quicktagsをクリックし、④で設定したボタンのラベル名を選択します。

実際に「枠」が表示されているか、変更をプレビューをクリックして、確認してみましょう。

上記の画像のように「枠」が表示されていたら成功です。

お疲れ様でした(^^♪

詳細

画像が見づらい場合は、以下のリンク先に移動することをおすすめします。

https://hk-ryukyu.club/hideto/archives/292

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

パソコン関連で役に立った情報を発信します

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!