【やりたいこと】文字を枠で囲んで見やすくしたい！
WordPressをはじめて、まだ2週間も経っていないWordPress超初心者のブロガーです。
「そんなこと当たり前だろ」ってみなさんが思うことも、私にとっては、大発見なのです！
つまり、WordPressに関しては、毎日が大発見なのです！
ということで、
今回は、文字を枠で囲む方法です(^^)/
※テーマ「Hueman」を使用しています。
【10分でできる！】はじめての追加CSS
※ダウンロード時間は10分の中に含まれていません。
0.概要
追加CSSに「枠」のCSSを追加し、AddQuicktagプラグインを使用して、簡単に「枠」を追加できるようにします。
1.使用したもの
・ロリポップレンタルサーバー スタンダードプラン
・WordPress 4.9.8
※WordPressはロリポップユーザー専用ページからインストールしました。
・テーマ Hueman
・プラグイン AddQuicktag
2.手順
①「枠」のCSSをコピー
こちらの記事からお好きな「枠」のCSSをコピーしてください。
②CSSの追加
外観のカスタマイズをクリックします。
詳細設定をクリックします。
追加CSSをクリックし、上記の画像のように、①でコピーしたCSSをペーストします。
③プラグインAddQuicktagのインストール
プラグインの新規追加をクリックします。
AddQuicktagを検索し、インストールします。 インストール後、有効にします。
④AddQuicktagの設定
設定のAddQuicktagをクリックします。
ボタンのラベルに今回の「枠」の名前を設定します。
開始タグには、「<p class=”midori-box”>［］</p>」を参考にして、記入してください。※1
右側のチェック欄には、すべてチェックをつけます。
以上の設定が完了したら、変更を保存をクリックします。
⑤確認
ビジュアルエディターを表示し、 Quicktagsをクリックし、④で設定したボタンのラベル名を選択します。
実際に「枠」が表示されているか、変更をプレビューをクリックして、確認してみましょう。
上記の画像のように「枠」が表示されていたら成功です。
お疲れ様でした(^^♪
3.追記
今回使用したテーマ「Hueman」では、テーマの編集から、CSSを追加する方法は、うまくいきませんでした。
【最後に】Showroomとマッハ新書の紹介
ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!
以下は、私のUnity学習体験記となっております。
「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!
コメント