LION MEDIAをインストールして数日使ってみたとき、ボックススタイルがシンプルすぎる感じがしました。
ボックススタイルのBOXで使える「ポイント」や「ビックリマーク」、「クエスチョン」は見たとき分かりやすいので良いと思うけど、私がよく使う「ペーパー」や「背景」、「引用」は色がライトグレーなので、もう少し背景色を明るくしてみたいと思いました。
ボックススタイルは記事内で使うので、見出しカラーとのバランスを考えたカラーにすれば記事で使いやすくなると思うからです。
しかし、LION MEDIAデフォルトのボックススタイルのデザインも好きなので、背景色だけ変えて記事内のボックスの見た目も良くするというイメージでカスタマイズ。
背景色を変える事がカスタマイズと言えるのか疑問を感じながら記事を書いてる自分がいる…
LION MEDIAのボックススタイルの種類
カスタマイズしたのは次のボックススタイル10個
- 枠線
- 二重線
- 背景
- ペーパー
- 太文字
- 括弧
- はてな
- びっくり
- ポイント
- 引用
ボックススタイルの背景色を変更する
枠線、二重線、太文字、括弧の４つは枠だけカラーをカスタマイズして変更
背景、ペーパーは背景色をカスタマイズ。
はてな、びっくり、ポイント、引用は背景色とアイコンカラーも好きな色に変更します。
引用はボックススタイルにないですが、使う事が多いのでカラーを変更します。
それぞれのボックススタイルのカラーを変更するだけで、どのくらい変化があるのか変更前と後を比べながら1つずつ見ていきます。
枠線
枠線 変更前
LION MEDIAデフォルトのボックススタイル「枠線」が上記です。
ライトグレーの薄い枠線だと、なんか物足りない感じなんですよね。
では、枠線の枠のカラーをカスタマイズして変更してみます。
枠線変更後
LION MEDIAのボックススタイル「枠線」だと枠線の太さが1pxだったので2pxにして少し太い枠線のボックスにしました。
そしてborder-rediusで角を丸くしています。
カラーを変えるだけで違うし使いたくなってきたです。
次のボックスを見ましょう。
二重線
二重線変更前
ボックススタイル「二重線」もライトグレーがLION MEDIAのボックススタイルです。
まだ一度も使ったことがないボックススタイルですが、二重線の線を好きなカラーに変更してみます。
二重線変更後
ただカラーを変えただけです。でも実際に記事内で使ってみるとカラー次第で使いやすくなります。
どんどん見ていきましょう。
背景
背景変更前
LION MEDIAのボックススタイルの「背景色」はやっぱりライトグレーです。背景のボックススタイル内に使う文字が見やすい事は良い部分だといつも思いますが、もう少し背景カラーを好きな色で明るくして使いたいので背景に好きなカラーを使ってみます。
背景変更後
背景色をオレンジに変えてみました。オレンジが濃いとボックステキスト内の文字が見ずらくなるので薄いオレンジにしてボックス内の文字に影響がないくらいの色にカスタマイズ。
LION MEDIAのライトグレーだったボックススタイルの「背景」の時よりはボックススタイルという事を主張できました。
では次のボックススタイルへ。
ペーパー
ペーパー変更前
これは、ボックススタイルのペーパー。
ペーパーもLION MEDIAのボックススタイルのままだと少し寂しい色です。
なのでペーパーにも自分の好きな色を付けて使えるようにします。
ペーパー変更後
ペーパーの右下の角は折れた仕様になってます。折れた部分はペーパーの背景色よりも濃い色にしました。
それ以外の角は丸くしましたが、右下に角があるので少し微妙な仕上がりに…
まぁ角を丸くしたのを戻せばいいだけなので良しとしよう。
やっぱり気になるので左角だけ丸くしないでやってみました(笑)
カスタマイズするときに「border-radius」を使って四つ角の値を変更するだけで、角を丸くしたり四角にしたりできます。
太文字
太文字変更前
太文字…使ったことないなぁ…LION MEDIAのボックススタイルにある「枠線」に近いものを感じるのは私だけ？
太文字のボックススタイルも枠のカラーを黒から好きな色に変えるだけで使い方が変わるかもしれない。
太文字変更後
LION MEDIAのボックススタイルのままだった時は一度も使ったことがないテキストボックスの太文字ですが、自分の好きなカラーに変更したり、記事内に合う色に変えるだけで使ってみたくなってきました。
括弧
括弧変更前
ボックススタイルの「括弧」は、カラーを絶対に変更したほうが良いと思う私がいます。
括弧変更後
しかもカラーを変更するだけではなく、括弧が1pxだったので2pxの太さに変えたら使ってもいいかな。と思うボックススタイルになりました。
カラーって大切。
はてな
はてな変更前
LION MEDIAで使えるボックススタイル「はてな」は背景もアイコンカラーも青色系です。
背景色とアイコンカラーを違うカラーにカスタマイズするとアイコンが強調できると思うのでやってみます。
はてな変更後
私の配色センスは考えないことにして、ボックススタイル「はてな」の背景色とアイコンカラーを同色にしない事で、アイコンがハッキリしたかもしれない。
LION MEDIAのボックススタイルの時より色を自分の好きにカスタマイズしたので、これも使いやすいボックススタイルになりました。
びっくり
びっくり変更前
ボックススタイルの「びっくり」を見るとアイコン背景色も赤を使ってるのでびっくり感が強いです。
びっくりさせる時の使い方としては、しっかり役立ちます(笑)
びっくりのボックススタイルは何色にしようか決まらなかった..。なので
びっくり変更後
アイコンの赤を薄くしただけ(笑)
記事内で赤を使う時が少ないので、はてなのアイコンの赤が強すぎなくても十分にびっくりの役割を果たせてると思います。
ポイント
ポイント変更前
ボックススタイル「ポイント」もこのままでも使いやすいですね。
でもせっかくなんで、アイコン部分の「POINT」と枠のカラーを別の色にカスタマイズしたらどうなるかやってみます。
ポイント変更後
枠の薄い赤にしてアイコンのPOINTは、記事の見出しが青なので同じ青にします。
青系をよく使うサイト内の記事のポイントとして使うので、アイコンのPOINTも青にした。という分かりずらい理由でした(笑)
二色使うとイメージが変わりますね。
逆に枠を青、アイコンを赤にすればよかったかもしれません。
アイコンが赤のほうが「ポイント」として使いやすい気がしてきた…
「引用」を最後に見てみましょう。
引用
引用 変更前
ボックススタイルにないけど、LION MEDIAで使える「引用」のアイコン部分を変えてみます。
引用 変更後
やっぱり背景色なんですよね…カラーを変えたほうが良い部分って
「引用」のアイコンと背景色もカスタマイズしたパターンもやってみます。
相変わらず配色センスがないけど配色をサイトのテーマカラーと合わせたり、見出しカラーと合わせる事で使いやすくなると思います。
ボックススタイルは好きな背景色だけで良くなる
もっと素晴らしいカスタマイズ方法は探せばありますが、簡単にできる方法を使いたかったので背景色を変更するだけで終わりにします。
LION MEDIAのボックススタイルで背景色やアイコンカラーを好きに変えただけでしたが、それでもボックススタイルの使い方が今までより変わると思います。
今回はボックススタイルのカスタマイズでしたが、ヘッダー画像やカテゴリーヘッダー、目次や見出しもLION MEDIAのカスタマイズをしています。
良かったら見てください。
