ブログの日付アイコンをお手軽に変更する

訂正記事(212/5/23) 

ブログの日付画像のデザインが標準機能で変更可能に

今は標準機能でもっとお手軽な方法があります!

以前ログの日付アイコンを変更する方法を紹介しましたが、今回はよりお手軽にソースコードをコピー&ペーストするだけで日付アイコンを変更できるようにしてみました。

 

次のように操作して、ヘッダー部にコードを貼り付けてみてください。

「変更したいアイコンの下のコードを選択」→「右クリックしてコピー」

 →「設定」→「ヘッダー部分を編集」→「右クリックして貼り付け」→「保存」

 

「プレビュー」か「ログアウト」するとアイコンが適用されます。

 

ブログ日付アイコンピンク

<style type="text/css">

/*<![CDATA[*/

<!--
.blogselection .datetime,

.post .datetime

{

float:right;

width:44px;

height:45px;

margin:0 10px 10px 0;

background:url(http://liyuan.pa.land.to/img/datesticker-bg-pink.png) no-repeat center center;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(

    src='http://liyuan.pa.land.to/img/datesticker-bg-pink.png',

    sizingMethod = 'crop');

_background:none


-->

/*]]>*/

</style>

 

ブログ日付アイコンオレンジ

<style type="text/css">

/*<![CDATA[*/

<!--
.blogselection .datetime,

.post .datetime

{

float:right;

width:44px;

height:45px;

margin:0 10px 10px 0;

background:url(http://liyuan.pa.land.to/img/datesticker-bg-orange.png) no-repeat center center;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(

    src='http://liyuan.pa.land.to/img/datesticker-bg-orange.png',

    sizingMethod = 'crop');

_background:none


-->

/*]]>*/

</style>

 

ブログ日付アイコンイエロー

<style type="text/css">

/*<![CDATA[*/

<!--
.blogselection .datetime,

.post .datetime

{

float:right;

width:44px;

height:45px;

margin:0 10px 10px 0;

background:url(http://liyuan.pa.land.to/img/datesticker-bg-yellow.png) no-repeat center center;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(

    src='http://liyuan.pa.land.to/img/datesticker-bg-yellow.png',

    sizingMethod = 'crop');

_background:none


-->

/*]]>*/

</style>

 

ブログ日付アイコングリーン

<style type="text/css">

/*<![CDATA[*/

<!--
.blogselection .datetime,

.post .datetime

{

float:right;

width:44px;

height:45px;

margin:0 10px 10px 0;

background:url(http://liyuan.pa.land.to/img/datesticker-bg-green.png) no-repeat center center;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(

    src='http://liyuan.pa.land.to/img/datesticker-bg-green.png',

    sizingMethod = 'crop');

_background:none


-->

/*]]>*/

</style>

 

ブログ日付アイコンレッド

<style type="text/css">

/*<![CDATA[*/

<!--
.blogselection .datetime,

.post .datetime

{

float:right;

width:44px;

height:45px;

margin:0 10px 10px 0;

background:url(http://liyuan.pa.land.to/img/datesticker-bg-red.png) no-repeat center center;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(

    src='http://liyuan.pa.land.to/img/datesticker-bg-red.png',

    sizingMethod = 'crop');

_background:none


-->

/*]]>*/

</style>

 

アイコンファイルは別サーバにホスティングしています。

お手軽ではなくなってしまいますが、削除されても大丈夫なようにご自身のJimdoページにアイコンをアップロードすることをお勧めします。

 

アイコンのアップロードとリンクの設定方法については次のようにします。

まず、このページのアイコンを右クリックして保存します。

次に「ナビゲーション」で「新規ページを追加」します。ページ名は「画像倉庫」などとして、非表示にしておきます。

このページに「写真」か「写真付き文章」でアイコンをアップロードします。

「プレビュー」でアイコンを右クリックして「プロパティ」を表示します(IEの場合)。

プロパティ画面の「アドレス」に表示されるURLを選択してコピーします。

コピーしたURLでリンク(コードの青い箇所)を書き換えます。

 

この方法であれば、独自レイアウトでも既成レイアウトでも同じように画像ファイルを扱うことができます。

 

アイコンを元に戻したいときは、貼り付けたコードを削除してください。