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

WordPress

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

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

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

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

ということで、

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

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

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

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

0.概要

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

1.使用したもの

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

ロリポップ!レンタルサーバー
ホームページ運営なら、ずっと使えるレンタルサーバー「ロリポップ!」簡単、多機能、充実サポート、高速性能で、初心者から商用サイトまで安心してご利用いただけます。WordPress、EC-CUBEもたったの60秒で設置可能。まずは無料お試し10日間。

・WordPress 4.9.8

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

・テーマ Hueman

Hueman – WordPress テーマ | WordPress.org
Free WordPress Themes

・プラグイン AddQuicktag

AddQuicktag
AddQuicktag は HTML エディター・ビジュアルエディターへのクイックタグの追加を容易にします。

2.手順

①「枠」のCSSをコピー

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

CSSで作るおしゃれなボックス(囲み枠)のデザインサンプル13パターン
ブログ記事をちょっとおしゃれにするボックス・囲み枠のデザインサンプルをCSSコード付きでご紹介します。コピペだけで使えるので、ブログに合わせて調整してみてください。ブログがおしゃれになれば記事を書くのも楽しくなりますよ!

②CSSの追加

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

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

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

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

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

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

④AddQuicktagの設定

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

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

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

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

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

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

⑤確認

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

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

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

お疲れ様でした(^^♪

3.追記

今回使用したテーマ「Hueman」では、テーマの編集から、CSSを追加する方法は、うまくいきませんでした。

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

SHOWROOM(ショールーム)
SHOWROOMはアーティストやアイドル、タレント等の配信が無料で視聴でき、さらに誰でもすぐに生配信が可能な、双方向コミュニケーションの仮想ライブ空間です。

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

※無料版あり Unity学習100日記念本(0~30日編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! これからUnityをはじめる人、Unityの勉強が続かなかった人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(30~60日編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習30~60日編です! Unityのスクリプトを読んでみたい人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(60~100編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習60~100日編です! 主に、Unityでのアウトプット法について書きました 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(Progate編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習Progate編です! これから、Progateをはじめる人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!

コメント

タイトルとURLをコピーしました