BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ 記事日付横の「NEW !」を画像に変える方法

このエントリーをはてなブックマークに追加

アメブロカスタマイズ 記事日付横の「NEW !」を画像に変える方法

   投稿日: 2015/01/30    投稿者:webコラム

m1-3.jpg

こんにちは、駆け出しライターのMAKIです。

今日は、アメブロ記事の日付横に出る文字 NEW ! を画像に変えてみよう!って記事を書いちゃいます。
ご存知ですよね、↓これです。更新すると24時間表示されます。

m1-1.jpg

これを

new.gif

こ〜んな画像に変えちゃいます。

では、レッツトライ!

CSSの編集画面を開きます

「ブログを書く」→「デザインの変更」→「CSSの編集」とクリックします。

m1-4.jpg

画像をアップロードします

画像をアップロードすると、「この画像のパス」というのが表示されるので、コピーしておきます。

m1-5.jpg

これで下準備は完了です!

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」くらいのどれかになると思います。

m1-2.jpg

こんな感じ↑になりまーす。可愛いでしょ?

まとめ

ちょっとの手間でアメブロに、ぐっと自分らしさをプラスできますね。
ぜひトライしてみてください!

では、また〜^^

カテゴリ:

TOPへ