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

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

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

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

こんな感じで変更

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

こだわりポイント

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

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


このサイトの環境

テーマ
子テーマ
プラグイン

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

カスタマイズの準備

カスタマイズ方法

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

追加CSSの使い方はこちら

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

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

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

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

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

まとめ

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

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