アメブロ新デザインカスタマイズ サイドバータイトルをオリジナル画像にする方法

今回は、アメブロ新デザインCSS編集用カスタマイズ、サイドバータイトルをオリジナル画像に設定する方法です。そのままテキストだけのタイトルではつまらない!もっと見栄えを良くしたいって方必見です!

この記事は2016/3/8以降使えるようになったアメブロの新しいCSS編集用デザインのカスタマイズ方法について書いています。

※プロフィール画像が丸いタイプ

画像を準備する

画像サイズは幅300px、高さは30~50px程度が良いかと思います。

私の場合は 300×37px です↓

 

サイドバータイトルをオリジナル画像にする方法

ブログデザインのCSSの編集の末尾にこちらのコードをコピペしてください。

/* サイドバーウィジェットのタイトルを変更 */
.skin-widgetTitle {
 position: relative;
 overflow: hidden;
}
.skin-widgetTitle:before{
 position: absolute;
 display: block;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 box-sizing: border-box;
 padding: inherit;
 margin-left: -100%;
 -webkit-transform: translateX(100%);
 transform: translateX(100%);
 background: #ffffff; /* 元のタイトルが見えないよう塗りつぶす色 */
}
/* 「プロフィール」のタイトル */
#profile .skin-widgetTitle:before{
background-image: url(ここに画像URLを入れる);
height :40px; /* サイドタイトルの高さ */
 content: "";
}
/* 「テーマ」のタイトル */
#theme .skin-widgetTitle:before{
background-image: url(ここに画像URLを入れる);
height :40px; /* サイドタイトルの高さ */
 content: "";
}
/* 「最新の記事」のタイトル */
#recentEntries .skin-widgetTitle:before{
background-image: url(ここに画像URLを入れる);
height :40px; /* サイドタイトルの高さ */
 content: "";
}
/* 「最近のコメント」のタイトル */
#recentComments .skin-widgetTitle:before{
background-image: url(ここに画像URLを入れる);
height :40px; /* サイドタイトルの高さ */
 content: "";
}
/* 「月別」のタイトル */
#archive .skin-widgetTitle:before{
background-image: url(ここに画像URLを入れる);
height :40px; /* サイドタイトルの高さ */
 content: "";
}
/* 「カレンダー」のタイトル */
#calendar .skin-widgetTitle:before{
background-image: url(ここに画像URLを入れる);
height :40px; /* サイドタイトルの高さ */
 content: "";
}
/* 「ブックマーク」のタイトル */
#bookmarks .skin-widgetTitle:before{
background-image: url(ここに画像URLを入れる);
height :40px; /* サイドタイトルの高さ */
 content: "";
}
/* 「このブログの読者」のタイトル */
#readers .skin-widgetTitle:before{
background-image: url(ここに画像URLを入れる);
height :40px; /* サイドタイトルの高さ */
 content: "";
}
/* 「お気に入りブログ」のタイトル */
#favorites .skin-widgetTitle:before{
background-image: url(ここに画像URLを入れる);
height :40px; /* サイドタイトルの高さ */
 content: "";
}
/* 「ランキング」のタイトル */
#ranking .skin-widgetTitle:before{
background-image: url(ここに画像URLを入れる);
height :40px; /* サイドタイトルの高さ */
 content: "";
}

それぞれのタイトル項目の

background-image: url(ここに画像URLを入れる);
height :40px; /* サイドタイトルの高さ */
content: "";

部分を編集してください。

画像URLの取得

ここに画像URLを入れる部分に、記事を書くで画像をアップロードし、本文に入れたい画像をクリック追加し、HTML表示に切り替えて画像URLを取得してください。

▼このように表示されるので

<p><a href=”https://stat.ameba.jp/user_images/・・・.png“><img alt=”” height=”37″ src=”https://stat.ameba.jp/user_images/・・・.png” width=”300″></a></p>

赤文字部分のhttps://stat.ameba.jp/user_images/・・・.png(.jpgなど)が画像URLになります。

画像高さの設定

height :40px の部分を準備した画像高さに設定してください。私の場合は37pxです。


以上の流れで、それぞれの項目ごとに設定していってください。

こんな感じになります。

 

最後に保存したら完成です!

お疲れ様でした。

 

宜しければ、Facebookページに『いいね!』をお願いします


2017829 大阪・梅田
自分の魅力を発信しよう!コラボ朝食会

~タリーズ 梅田スクエアビルディング店~

コメントを残す

ABOUTこの記事をかいた人

流れ構築プロデューサー岩本あきら

起業家、サロン経営者、人気カウンセラー、セラピスト、飲食店などにブログ、SNSを使ったマーケティング、コンサルティングを行っています。WEBサイトの制作、WEBツールの活用でサポートを行っています。