ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors
電話番号: 03-3986-2773
電話番号: 03-3986-2773
ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズＴＯＰ » ブログ » 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;
}
青の文字のところは、ご自分の画像に合わせたパスと数字を入れてください。
特に画像の表示位置は、その画像によって微妙〜に変わりますので、ちょっとずつ変えて調整してくださいね。数字は「ー３」から「３」くらいのどれかになると思います。
こんな感じ↑になりまーす。可愛いでしょ？
我社のマスコット『弁慶』です。
名前の由来：忠実な番犬
主な仕事：マスコットキャラとして認知度UP↑
不得意：電話
しゃべりが苦手なので、コンタクトはこちらから
我社のキャラクター「長フチ様」がユーザーに変わり、聞きづらい疑問を直球で投げかけるQ&A式コンテンツ。強面の顔からは想像も容易いほどのおバカさんが、弊社スタッフと対談します。
Copyright(C)2014 ｜ ホームページ制作・SEO対策を通じて集客向上↑売上UP↑Cyber Accel-Advisors. All Rights Reserved.
