ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ 記事日付横の「NEW !」を画像に変える方法
投稿日: 2015/01/30 投稿者:webコラム
こんにちは、駆け出しライターのMAKIです。
今日は、アメブロ記事の日付横に出る文字 NEW ! を画像に変えてみよう!って記事を書いちゃいます。
ご存知ですよね、↓これです。更新すると24時間表示されます。
これを
こ〜んな画像に変えちゃいます。
では、レッツトライ!
「ブログを書く」→「デザインの変更」→「CSSの編集」とクリックします。
画像をアップロードすると、「この画像のパス」というのが表示されるので、コピーしておきます。
これで下準備は完了です!
「現在使用中のブログデザインCSS」の一番下に、次の文を追加してください。
/*記事日付横のNEW!*/
time{
display:block;
float:left;
}
.contentNew{
background-image:url(画像のパス);
width:20px;/*画像の横のサイズ*/
background-position: 0 -3px;/*画像の表示位置*/
background-repeat:no-repeat;
display:block;
float:left;
text-indent:-9999px;
}
青の文字のところは、ご自分の画像に合わせたパスと数字を入れてください。
特に画像の表示位置は、その画像によって微妙〜に変わりますので、ちょっとずつ変えて調整してくださいね。数字は「ー3」から「3」くらいのどれかになると思います。
こんな感じ↑になりまーす。可愛いでしょ?