ブログでおしゃれなボックスを使いたいけど、作り方がわからない
今回はこんな悩みを解決します。
＊僕がCocoonを使用していることからこの記事ではCocoonでのやり方を紹介していきます。
目次
おしゃれなボックスのカスタマイズ方法
CSSのコード書けないけど少しでも見やすくしたい！！
こんな思いから色々調べたところY&K Studioさんの記事を発見しました。
コピペでOKとのことから使わせていただきました。
僕はコードをかけないのでいったんY&K Studioさんの【WordPress】コピペ可！おしゃれなボックスデザイン９選！ へ飛んでください。
ここでは、見やすくおしゃれなボックスデザインがFont Awesome4、Font Awesome5のバージョン別に2種類用意されています。
2．CSSとセットで書き出されているでHTMLをコピペする
3．うまく反映されているかの確認をする
CSSをコピー＆ペーストする
Y&K Studioさんの所で気に入っボックスのCSSをコピーします。
コピーができたら、外観➡テーマエディターへと進んでください。
CSSは以下の手順で追加できます。
2．スタイルシートを選択してコピーしたCSSを追加する
HTMLをコピー＆ペーストする
今度はHTMLのコードをコピーします。
これをAddQuickTagというプラグインに貼り付けます。
1．プラグインの新規追加よりAddQuickTagをダウンロード
2．AddQuickTagを有効化する
3．ラベル名を決める
4．開始タグと終了タグのところにコピーしたHTMLをペーストする
5．右側のチェック欄でどの画面で表示したいかの設定をする
(全部チェック付けてOKです)
6．設定を保存する
後は追加されたのかの確認をするだけです。
Quicktagsの▼をおして自分がAddQuickTagで設定したラベル名が表示されるのでそれを押してください。
ここにテキストを入力
⇑僕はこれを追加しましたが、ラベル名を押した時にこのように自分が追加したものが表示されれば成功です。
カスタマイズをする際の注意点
「コピペするだけだしでこれならできそう！」と思いきや反映されませんでした。
軽くパニックになりかけましたが、落ち着いてやり直したらすぐに反映されました。
ここでは、カスタマイズをしていくにあたっての注意点を紹介していきます。
コードのコピーミスをしていないか
自分が貼ったコードに誤りがないのかの確認をしてみてください。
コピーをしなければいけないものが抜けているなんてことはありませんか？
コピー漏れがあってなにかが抜けてしまっているとうまく動いてくれません。
反映されない時は自分がコピーしたものが漏れなくしっかりコピペできているかの確認をしてみましょう。
貼り付ける場所を変えてみる
ダッシュボードの追加CSSにカスタマイズのためのCSSコードを貼りつけたけど反映されませんでした。
しかし、テーマエディターからスタイルシートに直接貼り付けたところ反映できたので試してみる価値はあると思います。
おしゃれなボックスを使う方法まとめ
いかがでしたか？
今回はおしゃれなボックスを使う方法のまとめでした。
追加したボックスの色を変えたい等自分好みに編集する場合でも、コードのどこを編集すればいいのかがY&K Studioさんのコードでは書かれており非常にわかりやすいです。
知識は全くありませんでしたが、簡単に実装できたのでぜひ挑戦してみてください。
