【SANGOを自分でカスタマイズ】箇条書きボックスのデザインを変更してみる

ボックスのデザインを変えてみる

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

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

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


CUSTOM POINT
SANGOのショートコードで用意されている「ステッチ(水色)」をぼくのサイトにマッチするようにデザインしました。ぼくは「こんな人におすすめ」用にアイコンをつけました。

こんな感じで変更

Before
ボックスカスタマイズ前
After
ボックスカスタマイズ後

こだわりポイント

こだわっているポイント ※ふきだし部分のカスタマイズは別記事で掲載予定です。
MENくん

メインカラー(#424242)しか使わない、気が狂った配色です

カスタマイズの準備

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

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

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

ビジュアルエディタに記入するショートコード

ステッチの水色はこちらのショートコードになります。

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

 

確認の手順

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

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

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

   

まとめ

追加CSSのまとめ
手順をザクッと説明
変更手順
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
MENくん

オリジナルのボックスが出来上がり☆