アメブロのサイドタイトルも
可愛くカスタマイズしたいあなたへ♡
テーマタイトルの色と大きさ
下線の太さ
この二つの変え方をシェアします♡
元々のグレーから文字大きくしてピンクへ
この記事でわかること- アメブロサイドテーマのカスタマイズ
- フォントの色の変え方
- フォントのサイズの変え方
- 下線の太さ
今回のサイドバーのカスタマイズは「CSS編集可能デザイン」のみに対応できるやり方となります
CSS編集デザインの確認
アメブロのデザインを
オリジナルにカスタマイズする場合は
管理トップ→デザイン設定
→カスタム可能
こちらのデザインの中で
「CSS編集用デザイン」の３つの中から
選んでいただくことで
今回のカスタマイズが可能です♡
CSS変更サイドバー編集部分の探し方
デザイン変更→CSS編集
ページへ行き
下へスクロールして
サイドバーの部分を探す
サイドエリア部分へ
(1)基本のスタイル
(2)ヘッダーエリアのスタイル
(3)メインエリアのスタイル
(4)サイドエリアのスタイル
(5)ボタン設定
(6)その他、拡張
数字順に並んでいるので
変更するため
(4)サイドエリアのスタイル
--------------------------------------------*/
/* サイドモジュールタイトル */
.skin-widgetTitle {
color: #666666;
border-bottom: 1px solid #e5e5e5;
padding-bottom: 10px;
margin-bottom: 6px;
}
こちらを変更していきます♡
文字の大きさ、色、下線の変更方法
もともとはグレーで小さく
「プロフィール」
「テーマ」などのタイトル
こちらを変えていくために
(4)サイドエリアのスタイル
のCSSを編集していきます！
最初は英語や数字が羅列されていて
むずかしく感じるかもですが
覚えると簡単なのでレッツチャレンジ♡
サイドテキストへ
■ピンクの部分がフォントの色変更
■オレンジの部分が下線の太さ変更
■紫の部分が下線の色変更
--------------------------------------------*/
/* サイドモジュールタイトル */
.skin-widgetTitle {
color: #666666;
border-bottom: 1px solid #e5e5e5;
padding-bottom: 10px;
margin-bottom: 6px;
}
■下記の色の中でお好きな色をコピーし
タイトル色や下線色を変更してください♡
#FFB6C1 ▶ プロフィール
#FF7B00 ▶ プロフィール
#5fd70f ▶ プロフィール
#0ABAB5 ▶ プロフィール
#4E42FC ▶ プロフィール
#a7a3db ▶ プロフィール
#E353FC ▶ プロフィール
#FC86A0 ▶ プロフィール
■オレンジの部分は数字を変えることで
太い線になっていきます！
フォントを大きくしたい場合
■フォントのサイズを変えるには
下記のCSSコードを追加
--------------------------------------------*/
/* サイドモジュールタイトル */
.skin-widgetTitle {
color: #666666;
border-bottom: 1px solid #e5e5e5;
padding-bottom: 10px;
margin-bottom: 6px;
}
■数字を大きくするほどに
文字が大きくなっていきます♡
わかりやすいように「２５」サイズだと
こんなイメージに♡
CSSは見えないスペースや
小さな「;」などがとても大切
ひとつでも消してしまうと
変更できないのでご注意を！
サイドバーカスタマイズまとめ
❶管理画面からデザイン設定へ行き
「CSS編集デザイン」を選択
❷CSS編集ページから
/* (4-1) サイドテキスト全体
という部分を見つける
❸文字の色変更はピンク部分
.skin-widgetTitle {
color: #666666;
❹下線色変更はオレンジ、色は紫
(数字は太さ、＃は色)
border-bottom: 1px solid #e5e5e5;
❺フォントの大きさは下記を追加
(数字を増やすと大きくなる)
font-size:２５px;
アメブロのサイドバーが可愛くなると
読みやすさとイメージがUP♡
ちょっと難しく感じるけど
いざやってみてうまくいったら
めちゃめちゃ嬉しくて
ブログを書きたくなること間違いなし♡
ぜひやってみてくださいね！
ちなみにフォローボタンは
こちらから色変更できるので
ぜひ一緒におそろいカラーも可愛いよ♪
