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」が必要です。

カスタマイズの準備

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

コードを追記するための方法は3つ

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

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

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

コメントあり

コメントなし

赤系とカスタムカラー

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

赤系

カスタムカラー

うまくいったか確認

確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新

ちょっとプラス

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

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

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

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

まとめ

追加CSSのまとめ

MENくん

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

くま3号

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

MENくん

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

くま3号

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

MENくん

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

くま3号

そか、よかったやん