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

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

チョロ太郎

副業ブロガー/本業+副収入を得るべく独学でブログを開設/見た人のタメになる記事を鋭意製作中/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/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

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

2022/12/26

目次におすすめ記事のタイトルが表示されてしまう時の対処法【AFFINGER6】

記事の最後におすすめ記事のブログカードを載せたら目次に記事のタイトルが表示されてしまい気持ち悪い思いをしていませんか? この記事は上記問題を1分で解決します! この記事で解決できる問題 目次におすすめ記事のタイトルが長々と表示される問題!   では早速直しておきましょう!   対処法 この問題は「Table of Contents Plus(以下TOC+)」という目次を作成してくれるプラグインを入れている人によく見られる問題です。 TOC+の設定に問題があるので直します。 まずブログ編 ...

ReadMore

株式関係

2022/12/20

【メリットとデメリット解説】ほぼ儲かると言われるIPOとは?危険?

こんにちわ!チョロ太郎です! 生活が苦しかったり、老後のお金問題で今のうちからお金をなんとか工面したいと思っていても、給与は上がらないし節約しても固定費の値上がりで貯蓄に回す余裕も中々ないですよね。 私も同じく、今のことも将来のことも給料だけでは厳しいと感じてきました。 そこで自分の小遣いから株を始めることにしたのですが、勉強していてもほぼ確実に株は損をすることがあります。 リスクが少ない投資はないものかと調べて出てきたものが「IPO」 皆さんはIPOってご存じですか? 簡単に説明するとこれから上場する企 ...

ReadMore

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

チョロ太郎

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

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