実用性のあるボックス・背景色CSSカスタマイズをLuxeritasショートコード機能で簡単に導入してみませんか？
…ということで。
前回記事でご紹介したボックス・背景色のカスタマイズを気に入っていただけていて、なおかつご自身がお使いのテーマが「Luxeritas」である場合には簡単に導入できる方法をお伝えしていこうと思います。
ショートコードに登録しておくことで、記事作成画面から選択するだけで一瞬で記事内に挿入出来ますので便利であることうけあいなのです。
CSSカスタマイズをお使いになるために
サンプル
前回記事を読んでいただいてるかと思いますが、一応おさらいで各CSSサンプルを書いていきます。
背景色を赤色に装飾するサンプル
背景色を青色に装飾するサンプル
背景色を黄色に装飾するサンプル
背景色を緑色に装飾するサンプル
灰色っぽくして浮き立たせるサンプル
- 箇条書き1
- 箇条書き2
- まとめ1
- まとめ2
- まとめ3
…とこんな感じで作成しました。これらは全てショートコード機能で使用しています。
気に入っていただけた場合は、ご使用になる前に事前に
CSSを前回記事よりコピペし追記しておいてください。
…早速僕も使ってみるっていうｗ
ショートコード登録手順
さてここからショートコードを登録していきます。
スマホで見ると、ダメだな…↑ズレてますねｗ
少し文字サイズを下げてテスト。
画像を用いて、割と丁寧に辿っていきます。僕自身もテストサイトにて作成したあとに以降の手順で本サイトに導入していますのでご安心ください。
jsonファイルをダウンロード
僕自身がショートコードをエクスポートすると拡張子「json」というファイル形式となります。
これをご使用になりたいもののファイルをダウンロードしていただいて管理画面よりインポートして追加する、という手順を踏みます。
ファイル一覧
各項目、わかりやすいネーミングをしましたのでダウンロードしたいファイルの上で右クリックを押してください。
これを選ぶとjsonファイルとして保存出来ます。
リンク先を通常クリックしてしまうと、ファイルの中身が表示されるだけですので注意ですね。
保存先をデスクトップに指定してあれば、このようなファイルが追加されていると思います。無い場合はたいてい「ダウンロード」フォルダですかね。これは環境によって変わってきますので探してくださいｗ
WordPressの管理画面に進み、Luxeritas項目＞定型文登録へと進みます。
ショートコードタブへ移行しまして…
上の方にあるインポートをクリックします。
先程、ダウンロードしていただいたファイルを選択し「開く」ボタンを押すと…。
こうなります(´・ω・｀)
……
…すいません、ウソです。
ちゃんと登録されます。
登録後の使い方
ショートコードとして登録した後は簡単に記事内に挿入することが出来ます。
こんな感じですね。
ショートコードを使ったことない場合は少し戸惑うかも知れませんが…
バージョンが3.3.1より以前のものである場合はこちらの記事のものと使い方は同じですので、参考にしていただければと思います。
最新のものにバージョンアップされている場合だと若干仕様が異なります。
先に文章を書いて、ドラッグした上でショートコードを選択する仕様になってますので、使い勝手は若干向上していますね。
CSS全てをコピペしていただくとなると、おそらく200行近くなっていたと思うので、わずかながらページスピードに影響を与えるかも知れません。
そんな場合は非同期読み込みとすることで対処できますのでまた書いてみます。
それでは～(*´∀｀)