PORIPUの吹き出し付きボックスをシャキッとカスタマイズ

MENくん

WordPressテーマSANGOのちょっとしたカスタマイズを紹介していきます

PORIPUの追加デザインにある「タイトルを自由に変更できる吹き出し」をシャキッとバージョンにカスタマイズしてみました。

これがそれです

デフォルトの色
  • 箇条書き
  • 箇条書き
  • 箇条書き

もともとのデザインがSANGOに合うように、柔らかいデザインになっていますね。

使い方など詳細は公式で

公式https://oldno07.com/poripu/add-design/#i-7

これをただ単にシャキッとさせるだけのカスタマイズになります。

こんな感じで変更

デフォルトの色
  • 箇条書き
  • 箇条書き
  • 箇条書き
ぼくの気持ち悪いこだわり
黒色は真っ黒ではなく適度に優しい黒(#5a5a5a)にすることでコントラストが少なくなり、目が疲れない。さらに枠の色は薄めの色にすることで圧迫感を減らしています。行間も広めにとることで、余白を活かし、line-heightでは、2行になった際にデザインが好ましくないため、liのpaddingで調整。タイトル部分は細文字にして字間をちょっとだけ広めにしていま…..など。
くま3号

他にも赤系とカスタムカラーの「タイトルを変更できる吹き出し」もカスタマイズしてます

赤系 BEFORE
  • 箇条書き
  • 箇条書き
  • 箇条書き

シャキ!

赤系 AFTER
  • 箇条書き
  • 箇条書き
  • 箇条書き

カスタムカラー BEFORE
  • 箇条書き
  • 箇条書き
  • 箇条書き

シャキ!

カスタムカラー AFTER
  • 箇条書き
  • 箇条書き
  • 箇条書き

このカスタマイズには、SANGO公認の子テーマ「PORIPU」が必要です。

カスタマイズの準備

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

3つのコード追加方法

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードの追加

コメントあり

コメントなし

赤系とカスタムカラー

こちらはデフォルトのコードを追加していないとうまく反映されません。

赤系

カスタムカラー

うまくいったか確認

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

ちょっとプラス

箇条書きの下に点線を入れてみたver

デフォルトの色
  • 箇条書き
  • 箇条書き
  • 箇条書き

追加するコード(デフォルトカラーの場合)

こちらを追加してあげると点線が追加されます。

まとめ

追加CSSのまとめ

MENくん

今回のカスタマイズはPORIPUを購入してからずっと使ってなかった吹き出し付きボックスをカスタマイズしたんだよね

くま3号

は?なんで使わんかったの?

MENくん

あるのは知ってたんだけどね、自分で作ったりしちゃっててさ(テヘ)

くま3号

じゃあ、今回カスタマイズしたし、使っていくんか??

MENくん

実は他のサイトでアホみたいに使ってるんだ!まじで使い勝手最高なんだけど!

くま3号

そか、よかったやん