この記事は【アメブロの新CSS編集デザイン】を対象とした内容です。
アメブロを自分でカスタマイズする方法として、
WEB集客@poppyou
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://poppyou.com/wp-content/uploads/2020/02/1-3.jpg)
自分で簡単に! アメブロにヘッダー画像を設置するカスタマイズ方法:画像作りをすこし頑張るVr. | WEB集客...
アメブロでヘッダー画像を自分で設置するやり方。手順通りに行えば、誰でも自分自身でヘッダー画像を表示することができます。画像作成するためのポイントやソフトもご紹介...
WEB集客@poppyou
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://poppyou.com/wp-content/uploads/2020/02/391e935f418ce46f61665238170e0c58_s.jpg)
自分で簡単に! アメブロにメニューバー・ボタン(グローバルナビ)をコピペで設置する方法 | WEB集客@popp...
「アメブロの上部にメニューバーを設置したい!」コピペするだけで簡単にできる方法をご紹介。メニューバーを設置できると、読者さんに見てもらいたい記事や、読者さんが求...
をご紹介をしました。
![](https://poppyou.com/wp-content/uploads/2020/02/6-819x539.png)
その他の部分もカスタマイズしたくなった方へ、エリア毎のコードをご紹介します。
メニューバーの色やヘッダーで使っている色と合わせて、他の部分の色も変えたり、不要と思う線を削除してすっきりさせたり……お好みの部分を変えてみてください。
一文字でも消してしまうと、表示されなかったり、表示が崩れる恐れがあります。修正はご注意ください。
いずれのコードも、どこに挿入すれば良いか分からない場合、基本的にCSS編集の一番下に挿入すれば大丈夫です。
カラーコードはご自身でお好みの色のコードに替えてくださいね。
参照:応用編:色を変える方法
目次
【カスタマイズ方法】それぞれの場所とコード
背景色を変える:記事エリア以外
![](https://i1.wp.com/poppyou.com/wp-content/uploads/2020/03/1515a66c47e9285321738e2db8d64270.png?fit=790%2C751&ssl=1)
/* 背景色を変える 記事エリア以外
----------------------------------*/
.skin-page , .skin-bgHeader , .skin-blogBody, .skin-blogBodyInner , .skin-blogHeaderNav{
background-color: #fbfded;/*カラーコードを書き換える*/
}
上下線を削除:ヘッダー下の「ブログトップ・記事一覧・画像一覧」エリア
![](https://poppyou.com/wp-content/uploads/2020/03/cd8318fc0f9edd8b4fd89776ae42ae4b-819x124.png)
/* 上下線を削除 ヘッダー下の「ブログトップ・記事一覧・画像一覧」エリア
----------------------------------*/
[data-uranus-layout="headerNav"]{
border: none;
}
余白を挿入:上部
お好みですが、背景色をつけたり、上下線を削除したり・・・すると、上部に余白を入れた方が、画像が少し際立ってバランスが取れるような気がします。
![](https://i1.wp.com/poppyou.com/wp-content/uploads/2020/03/8c55422c63b22a813cb875ae31f7fb56.png?fit=790%2C457&ssl=1)
/* 余白を入れる 上部
----------------------------------*/
.skin-bgHeader{
padding-top: 50px;/*数値を変えることで余白の縦幅の変更可能*/
}
アイコンの色を変える:ヘッダー下の「ブログトップ・記事一覧・画像一覧」エリア
![](https://poppyou.com/wp-content/uploads/2020/03/02e6d59463a068f3c478b86fb6e0a8e1-819x142.png)
/* アイコンの色を変える ヘッダー下の「ブログトップ・記事一覧・画像一覧」エリア
----------------------------------*/
.skin-topNavIcon{
color: #56ea2d;/*カラーコードを書き換える*/
}
下線をひく:サブカラムの項目&記事タイトル
ここでは、破線にしています。
![](https://poppyou.com/wp-content/uploads/2020/03/1515a66c47e9285321738e2db8d64270-1-819x611.png)
/* 下線をひく サブカラムの項目&記事タイトル
----------------------------------*/
.skin-widgetTitle{
border-bottom: 2px dashed #5ec1b4!important;/*カラーコードを書き換える*/
padding-bottom: 1em!important;
margin-bottom: 1em!important;
}
.skin-entryTitle{
border-bottom: 2px dashed #5ec1b4;/*カラーコードを書き換える*/
}
リンクの文字色を変える:デフォルト&一度押したことのあるリンク
![](https://i1.wp.com/poppyou.com/wp-content/uploads/2020/03/39f7bb47a7b1e41bf0d775d4efc17b2c.png?fit=790%2C506&ssl=1)
/* リンクの文字色を変える デフォルト&一度押したことのあるリンク
----------------------------------*/
a , a:visited {
color: #5ec1b4;/*カラーコードを書き換える*/
}
背景色・枠線・文字色を変える:フォローボタン
![](https://i2.wp.com/poppyou.com/wp-content/uploads/2020/03/d114d5c9b99ce993bcc38ff0915d4a73.png?fit=790%2C449&ssl=1)
/* 背景色・枠線・文字色を変える フォローボタン
----------------------------------*/
.skin-btnSidePrimary{
background-color: #5ec1b4;/*背景色:カラーコードを書き換える*/
border-color: #5ec1b4;/*枠線:カラーコードを書き換える*/
color: #ffffff;/*文字:カラーコードを書き換える*/
}
背景色・枠線・文字色を変える:サブカラム内の「一覧を見る」ボタン
![](https://i1.wp.com/poppyou.com/wp-content/uploads/2020/03/1515a66c47e9285321738e2db8d64270-2.png?fit=790%2C581&ssl=1)
/* 背景色・枠線・文字色を変える サブカラム内の「一覧を見る」ボタン
----------------------------------*/
.skin-btnSide, .skin-btnSide:hover, .skin-btnSide:visited{
background-color: #ffffff;/*背景色:カラーコードを書き換える*/
border-color: #5ec1b4;/*枠線:カラーコードを書き換える*/
color: #5ec1b4;/*文字:カラーコードを書き換える*/
}
背景色・枠線・文字色を変える:記事エリア上のボタン
![](https://i0.wp.com/poppyou.com/wp-content/uploads/2020/03/39f7bb47a7b1e41bf0d775d4efc17b2c-1.png?fit=790%2C406&ssl=1)
/* 背景色・枠線・文字色を変える サブカラム内の「一覧を見る」ボタン
----------------------------------*/
.skin-btnPaging , .skin-btnPaging:hover, .skin-btnPaging:visited{
background-color: #eae779;/*背景色:カラーコードを書き換える*/
border-color: #eae779;/*枠線:カラーコードを書き換える*/
color: #333333;/*文字:カラーコードを書き換える*/
}
丸の背景色を変える:カレンダー
![](https://poppyou.com/wp-content/uploads/2020/03/0130707e5c73e355855fc0d17e339245.png)
/* 丸の背景色を変える カレンダー
----------------------------------*/
.skin-calendarDate.is-active {
background-color: #fffffff;
}
まとめ
以上を全て行うと・・・
じゃん!!
![](https://i1.wp.com/poppyou.com/wp-content/uploads/2020/03/a41ea63669e42b8be984c7515a382bc6.png?fit=790%2C881&ssl=1)
こんな感じになります。色合わせのセンスが必要ですが、「メニューバーやヘッダーで使った色」を他の部分でも使っていくと綺麗にまとまります。
ではでは。
COMMENT