ブログ テーマ
スポンサーリンク

 

ブログでおしゃれなボックスを使いたいけど、作り方がわからない

 

今回はこんな悩みを解決します。

 

本記事の内容
・おしゃれなボックスの実装方法
・カスタマイズするにあたって注意するべき点

*僕がCocoonを使用していることからこの記事ではCocoonでのやり方を紹介していきます。

おしゃれなボックスのカスタマイズ方法

ブログ テーマ

CSSのコード書けないけど少しでも見やすくしたい!!

こんな思いから色々調べたところY&K Studioさんの記事を発見しました。

コピペでOKとのことから使わせていただきました。

僕はコードをかけないのでいったんY&K Studioさんの【WordPress】コピペ可!おしゃれなボックスデザイン9選! へ飛んでください。

ここでは、見やすくおしゃれなボックスデザインがFont Awesome4、Font Awesome5のバージョン別に2種類用意されています。

ご自身のCocoon がFont Awesome4なのか5なのかはCocoon設定➡全体➡サイトフォトアイコンで確認できます。
今後の流れ
1.気に入ったボックスのCSSをコピぺする
2.CSSとセットで書き出されているでHTMLをコピペする
3.うまく反映されているかの確認をする

CSSをコピー&ペーストする

Y&K Studioさんの所で気に入っボックスのCSSをコピーします。

コピーができたら、外観➡テーマエディターへと進んでください。

CSS追加

CSSは以下の手順で追加できます。

CSSを追加する方法
1.Cocoonの子テーマが選択されていることを確認する
2.スタイルシートを選択してコピーしたCSSを追加する
3.ファイルを更新する
スタイルシートへのCSS追加
これでCSSの追加は完了です。

HTMLをコピー&ペーストする

今度はHTMLのコードをコピーします。

これをAddQuickTagというプラグインに貼り付けます。

AddQuickTagを使うことで記事の装飾をボタン1つで簡単にできるようになります。
このプラグインがなければ、記事の装飾をしたい場所のたびにHTMLのコードを書くかメモ帳などからコピペをしなければいけません。
これでは、記事更新もはかどりませんよね。
しかし、AddQuickTagを使い予め自分の好きな装飾を登録しておくことで、ボタン1つで記事を装飾できるようになります
AddQuickTagにHTMLを貼り付ける方法

1.プラグインの新規追加よりAddQuickTagをダウンロード

2.AddQuickTagを有効化する

3.ラベル名を決める

4.開始タグと終了タグのところにコピーしたHTMLをペーストする

5.右側のチェック欄でどの画面で表示したいかの設定をする
(全部チェック付けてOKです)

6.設定を保存する

後は追加されたのかの確認をするだけです。

AddQuickTag確認

Quicktagsの▼をおして自分がAddQuickTagで設定したラベル名が表示されるのでそれを押してください。

MEMO

ここにテキストを入力

⇑僕はこれを追加しましたが、ラベル名を押した時にこのように自分が追加したものが表示されれば成功です。

 

カスタマイズをする際の注意点

 

「コピペするだけだしでこれならできそう!」と思いきや反映されませんでした。

軽くパニックになりかけましたが、落ち着いてやり直したらすぐに反映されました。

ここでは、カスタマイズをしていくにあたっての注意点を紹介していきます。

コードのコピーミスをしていないか

自分が貼ったコードに誤りがないのかの確認をしてみてください。

コピーをしなければいけないものが抜けているなんてことはありませんか?

コピー漏れがあってなにかが抜けてしまっているとうまく動いてくれません。

反映されない時は自分がコピーしたものが漏れなくしっかりコピペできているかの確認をしてみましょう。

貼り付ける場所を変えてみる

ダッシュボードの追加CSSにカスタマイズのためのCSSコードを貼りつけたけど反映されませんでした。

しかし、テーマエディターからスタイルシートに直接貼り付けたところ反映できたので試してみる価値はあると思います。

おしゃれなボックスを使う方法まとめ

いかがでしたか?

今回はおしゃれなボックスを使う方法のまとめでした。

追加したボックスの色を変えたい等自分好みに編集する場合でも、コードのどこを編集すればいいのかがY&K Studioさんのコードでは書かれており非常にわかりやすいです

知識は全くありませんでしたが、簡単に実装できたのでぜひ挑戦してみてください。

 

 

 

 

 

 

 

 

 

スポンサーリンク
おすすめの記事