ブログの日付画像(色相)を変更する

訂正記事(212/5/23) 

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

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

Jimdoではブログの日付画像はデフォルトで水色であり、通常は変えることが出来ない為、全体の配色にマッチしないことがあります。

 

当サイトでは全体を緑系に配色した際に、ブログの日付画像もこれに合わせて色相を変更しました。

 

今回はこれを行ったときの手順を紹介します。

 

 

まず、デフォルトの日付画像を取得します。

 

FiraFox3.6 + Web Developer プラグインを使ってブログを表示しているJimdoのページを開き、Web Developer ツールバーの「CSS」→「CSSを表示」を選択します。

 

そうすると、次のような箇所が見つかります。(説明の為に適当に改行とインデントを行っています。)

 

div.datetime
{
        float:right;
        width:44px;
        height:45px;
        margin:0 10px 10px 0;
        background:url(/s/img/cc/datesticker-bg.png) no-repeat center center;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='http://s.jimdo.com/s/img/cc/datesticker-bg.png',
            sizingMethod = 'crop');
        _background:none
}

 

9行目のURLが画像ファイルです。

 

このURLをブラウザで直接指定して画像を表示し、画像を右クリックしてファイルとして保存します。

 

 

 

 

次にこの画像の色相を変更します。

 

画像を操作するソフトは何でもよいのですが、ここではGIMP2を使います。

 

先ほど保存したファイルを開いてメニューから「色」→「色相-彩度」を選択し、「色相」を-100に設定します。

 

これで黄緑の日付画像ファイルが出来るので、メニューの「ファイル」→「エクスポート」でファイル形式を"png"とした後に、ファイル名を”datesticker-bg-green.png”としてエクスポートします。

 

 

新しい日付画像をJimdoにアップロードします。

 

Jimdoにログインして、「レイアウト」→「独自レイアウト」→「ファイル」→「ファイルを選択」で、先ほどエクスポートしたファイルを選択し、「アップロード」をクリックします。

 

 最後に「独自レイアウト」の「CSS」を編集します。

 

先ほど取得したdatetimeクラスの内容を次のように修正して、CSSの最後に追加します。

 

.blogselection は記事のサマリを表示するパーツのクラスです。

 

.postは個別の記事のクラスです。

 

ここではやりませんが、記事のサマリと個別の記事の画像を個別に指定することもできますね。

 

.blogselection .datetime,
.post .datetime
{
float:right;
width:44px;
height:45px;
margin:0 10px 10px 0;
background:url(datesticker-bg-green.png) no-repeat center center;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='datesticker-bg-green.png', sizingMethod = 'crop');
_background:none
}   

 

最終的な結果は右の画のようになります。

 

 

既知の問題として、IEで拡大/縮小を行うと画像の淵が黒くなる問題があります。

(解決方法をご存知の方、コメントをいただけると助かります。)

 

Chrome,Firefoxであれば問題はありません。

(いずれもWindowsXP64上で確認しています。)

 

 

Jimdo Free の場合は Jimdo 広告自体の色合いを変えられませんから、完全には思い通りの配色にはなりませんが、ProやBusinessでブログを使用する場合には重宝するのではないかと思います。

 

※Jimdoからダウンロードしたファイルを改変して使用するあたりで問題があるかと思い、規約を確認しましたが、今回の方法は問題無しと判断しました。

 

ではまた~