ブログ備忘録シリーズ ブログ関係

【ワードプレスブログ】装飾のボックスカラーを自由に変える方法

チョロ太郎

副業ブロガー/本業+副収入を得るべく独学でブログを開設/見た人のタメになる記事を鋭意製作中/32歳既婚♂/子供2歳とお腹の中(一月出産予定)/

こんにちわ!チョロ太郎です!

ブログ記事を作成していて、ボックスを利用することありますよね?

もう少し暗い色にしたいんだけどなあ

実は簡単に変えられるんです!

読者に読みやすく見てもらうには必要不可欠な装飾ですので、マスターして使いこなしましょう!

この記事を読むと・・・

このBOXの色を自由に変えられます!

 

装飾色の変え方

st-mybox title="この記事を読むと・・・" webicon="st-svg-check-circle" color="#FFD54F" bordercolor="#FFD54F" bgcolor="#FFFDE7" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"

このBOXの色を自由に変えられます!

/st-mybox

 

上記コードの中の色を指定するコードはこちら↓

color="#FFD54F 文字の色
bordercolor="#FFD54F 外枠の色
bgcolor="#FFFDE7 背景の色

赤文字部分が色のコードになっています。

このコードを書き換えることで別の色に変えることが出来ます

試しに緑系の色で試してみましょう

この記事を読むと・・・

このBOXの色を自由に変えられます!

上記ボックスのコードは

st-mybox title="この記事を読むと・・・" webicon="st-svg-check-circle" color="#54A836" bordercolor="#54A836" bgcolor="#DDFBC1" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"

このBOXの色を自由に変えられます!

/st-mybox

文字と外枠のコードを「#FFD54F」→「#54A836」に変更

背景色のコードを「#FFFDE7」→「#DDFBC1」に変更しました。

色コードはAFFINGER6をテーマとして使っていれば投稿画面上部の「タグ」→「ショートコード補助」→「HTMLカラーコード」を開くと大まかな色であれば選択できます。

 

ブログ装飾のカラー変更に関するよくある質問

カラー変更についてのよくある質問を掲載しておきます

AFFINGER6を導入しておらず、簡易的なコードもないのですがどうすればよいですか?

EXCELから色コードを引っ張ってきましょう!

テーマによっては簡易的な方法でコードを呼び出せますが、そういった機能がないテーマもありますよね。

好きな色にしたい場合はEXCELで色コードを調べてそのまま使うことが出来ます!

またこの方法は記事の装飾のみならず、全体レイアウトの装飾などもコード管理されているものであれば変更できるようになるのでぜひお試しください!

EXCELを開いたら文字の色かセルの色を変更するアイコンを押して「その他の色」をクリックします。

 

色の設定のタブを「ユーザー設定」にして「Hex(H)」の「#~」が色コードになります。

ちなみに色のどの部分を選択しても「#FFFFFF」から変わらないのは白のままだからです。

色を選択したらバーを動かしましょう

 

あとは表示されたコードをコピーして前述した色コードをペーストすれば任意の色に変わります!

終わり

ご一読いただきましてありがとうございました。

当ブログでは本記事以外にも様々な記事を掲載しておりますので、記事作成のお役に立てれば幸いです。

ブログ関係

2023/5/28

AFFINGER6で魅力的なブログを作ろう!WordPress有料テーマのおすすめ理由

本記事でわかること 有料テーマが初心者におススメされる理由 有料テーマ「AFFINGER6」の概要 wordpressのテーマはブログデザインや記事の装飾などかなり大事な役割を担います。 そんなテーマには無料の物と有料の物があるのですが実際のところ 「有料テーマと無料テーマのどちらを選ぶべきなのか?」 という疑問が発生します。 そこで突然ですが質問です。 あなたは遠方地へ出かける際に以下の選択肢があった場合どちらを選びますか? お金をかけて最短時間でたどり着く方法で向かう(飛行機・新幹線・高速道路) お金 ...

ReadMore

お金のお勉強

2023/3/4

本当に誰でもできる「ココナラ」でお小遣い稼ぎ!出品のやり方も解説

皆さんこんにちわ!チョロ太郎です! 突然ですが「ココナラ」というサイトをご存じですか? ココナラは自分のスキルを販売できるサイトなのですが、スキルというとイメージするのは「WEBページ制作」や「イラスト制作」など一芸のようなものを想像しがちですが、実はそうじゃないんです。 結論から言いますと、相談を聞くだけでお小遣いが稼げちゃいます。 びっくりしましたか?私にもできそう・・・と思いましたか? 今回はそんな「ココナラ」を使ったお小遣い稼ぎの方法と出品のやり方をご説明しますので、ぜひご覧ください! もくじ1 ...

ReadMore

お金のお勉強

2023/1/20

【年間5万節約】自宅回線を解約してテザリングを使おう!やり方も解説

皆さんこんにちわ! 何から何まで値上がりして家計費圧迫がすさまじくないですか?嫌になってきますよね。 電気をこまめに消したり、空調の設定温度を変えたり、とは言っても出来ることに限界はありますし、目に見えるほどの違いもないので中々難しいのが現実です。 そんな皆さんに一つ聞いてみますが、家のネット回線にこだわりはありますか? もし、普段はネットサーフィン程度しかしないのになんとなく自宅のネット回線を契約している方・・・   解約しちゃっても大丈夫! 自分のスマホをルーター替わりにする「テザリング」を ...

ReadMore

お金のお勉強

2023/1/15

【格安SIM】格安スマホのおすすめ会社8選を料金表付きでご紹介!

こんにちわ!チョロ太郎です! 皆さんは固定費の見直ししてますか? 私は昨今の物価高騰や増税などに危機感を感じて固定費の見直しをしております。 そんな中で一番劇的に変わったのが通信料(スマホ使用料)。 大手の会社(ソフトバンク・au・ドコモ)だと一か月1万を超えるときもありましたが、現在は一か月機種代も含めても3千円で収まっています。 つまり 10,000-3,000=7,000 一か月7,000円浮きました。 つまり一年で7,000円×12か月=84,000円 一年で9万近く浮いたら皆さん何をしますか?夢 ...

ReadMore

お金のお勉強

2023/1/9

【動画なし読み物のみ】無料でお金の勉強ができるサービス5選

皆さんこんにちわ!チョロ太郎です。 ここ最近の物価高騰や増税など、お金の話題が尽きない昨今。 どうにかしてしないといけないとわかってはいるものの、何から手を付けていいのかわからない方も多いのではないでしょうか。 収入なんてすぐには増えないしなあ・・・ 今すぐに出来ることと言えば節約!ただし単純に安いものを買うような節約は限度がありますので、お金についての理解を深める必要があります。 今回はそんなお金の勉強が無料でできるサービスをまとめてみましたのでぜひご覧ください!   もくじ1 お金の勉強が無 ...

ReadMore

  • この記事を書いた人
  • 最新記事

チョロ太郎

副業ブロガー/本業+副収入を得るべく独学でブログを開設/見た人のタメになる記事を鋭意製作中/32歳既婚♂/子供2歳とお腹の中(一月出産予定)/

-ブログ備忘録シリーズ, ブログ関係