アメブロのcss編集のテーマを選んで、カスタマイズが出来ます。
ただし、テーマを変更すると前のテーマに戻れません。上書きされるので注意です。
カスタマイズの方法
１。メニューとサイドバナーを配置します。コードは「設定・管理」フリースペース編集に記入します。
↓記載するコード（説明)
<div class=”nav-wrap”>（メニューのコード記載の始まり）
<nav><ul class=”nav-body”>（並びの始まり）
<li><a href=”リンクurl”><img alt=”画像のタイトル” src=”画像ファイル場所を指定”></a></li></ul></nav>
</div>（メニューのコード記載の終わり）
※「/」←閉じタグは必要。メニューボタンの個数に合わせて<li></li>が増える
<div id=”side_banner”><ul><li></li></ul></div>（サイドバナーの設置コード）
「画像ファイル場所を指定」のコードは以下の手順で取得する。
・画像をアップロードする
・画像urlをコピーする
・imgのsrc部分に貼り付ける
※画像はアップした時点でコードが変わる為、アップし直しした場合はコードを貼り付け直す必要がある。
２。メニューボタン、メイン画像の設定、サイドバナーの位置や装飾を設定します。コードは「デザインの設定」→「cssの編集」をクリックします。
設定は以下の手順です。
・「ブログデザインヘッダ・背景用画像の追加」でメイン画像をアップします。
・「現在使用中のブログデザインCSS」にコードを記載する。
対応する部分にコードを追加、修正する。おすすめはコード最後にカスタマイズとしてまとめて記載すると分かりやすい。
↓サンプルコード
/*カスタマイズ*/
/* ヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(アップした画像ファイルurl);
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout=”headerInner”]>a,
.skin-bgHeader [data-uranus-layout=”headerInner”]>a {
height: 400px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}
/* グローバルナビゲーションメニュー */
.nav-wrap {
position: absolute;
margin: 0;
padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
[data-uranus-layout=”columnB”] .skin-blogSubA .nav-wrap,
[data-uranus-layout=”columnC”] .skin-blogSubA .nav-wrap,
[data-uranus-layout=”columnE”] .skin-blogSubA .nav-wrap,
[data-uranus-layout=”columnB”] .skin-blogSubB .nav-wrap {
left: auto;
right: 0;
}
[data-uranus-layout=”columnA”] .skin-blogSubA .nav-wrap,
[data-uranus-layout=”columnD”] .skin-blogSubA .nav-wrap,
[data-uranus-layout=”columnC”] .skin-blogSubB .nav-wrap {
left: 0;
right: auto;
}
[data-uranus-layout=”columnE”] .skin-blogSubB .nav-wrap {
left: auto;
right: -360px;
}
.nav-body {
margin: 0;
padding: 0;
}
.nav-body:after {
display: block;
clear: both;
content: ” “;
height: 0;
visibility: hidden;
}
.nav-body>br {
display: none;
}
.nav-body li {
display: block;
float: left;
margin: 0;
padding: 0;
text-align: center;
border-bottom: 2px solid #ccc;
}
.nav-body li a {
display: block;
text-decoration: none;
}
.skin-blogBodyInner {
padding-top: 90px; /* メニューバーの表示場所確保 */
}
.nav-wrap {
top: -75px; /* メニューバーの上下位置調整 */
}
.nav-body {
width: 1120px; /* メニューバー横幅 */
background: #ffffff; /* メニューバー全体の背景色 */
}
.nav-body li{
border:1px solid #c8c9ca;
}
.nav-body li a {
width: 278px; /* ボタンの横幅 */
line-height: 80px; /* ボタンの高さ */
/*border:1px #fff solid; ボタンの隙間 */
color: #fff; /* 文字の色 */
background:#ffffff; /* ボタンの色 */
}
.nav-body li a:hover {
background:#f9d2e2; /* ボタンの色 */
}
/* サイド画像を設定する */
#side_banner{
position: absolute;
margin: 0;
padding: 0;
top:0;
left: 45px;
}
.skin-blogSubA li{
margin-bottom:-10px;
text-align:center;
}
.link_banner{
border:1px solid #9e9e9f;
padding:5px 0 8px;
width: 302px;
}
.link_banner h2{
text-align:left;
font-size:14px;
padding-left: 20px;
}
.link_banner p{
text-align:left;
font-size:12px;
padding-left: 20px
}
/* メニューの背景設定を隠す */
.skin-blogHeaderNav{
border-color: rgba(0, 0, 0, 0);
}
/*コンテンツ全体*/
.skin-blogBodyInner{
padding-top:0;
}
/*最新記事上*/
.skin-blogSubAInner{
margin-top:1510px;
}
/*最新記事の装飾*/
.skin-widgetHead{
background-color:#d6695a;
text-align:center;
}
.skin-widgetTitle{
color:#ffffff;
padding:10px 0;
}
.skin-paging{
padding-top: 40px;
}
スマホは別サイトになるので、pcのみのcssとなります。