トップページイラスト(たあぼ様作成)

イラストの情報はこちらから≫

03

9月

2011

Jimdo・みんビズカスタマイズ Jimdoブログ日付編集用CSS

知らない人から「何この数字?」と言われたJimdoのブログ日付

Jimdoでブログを制作した際、標準だと「年が表示されない」「月と日が逆」なので、初めてサイトを見た人から「何この数字?(日付として認識されない)」と言われる事がよくありました。
そこで、日付部分を編集するCSSを用意しました。

Jimdoブログ日付編集用CSS

下記が本サイトで使用しているCSSです。
独自レイアウト用ですが、標準レイアウトでも応用できます。
コピペする際は、コピー後、一度「メモ帳」に貼り付けてから作業すると「余計なコード」が表示されずにうまく貼り付けることができます。

更新情報

2014年10月10日
CSSを現在使用している最新の情報に更新しました。

2013年12月4日
CSSを現在使用している最新の情報に更新しました。
iOS等でレイアウトが崩れる事象を改善しました。

2013年8月20日
「設置の際の注意」の文面を修正しました。
当サイトで設定している「ブログスタイル」の画像を追加しました。

2013年5月9日
最新のCSSに更新しました。あわせて記事も修正してあります。
また、ブログタイトル部分の設定も追加しました。

2013年3月23日
最新のCSSに更新しました。あわせて記事も修正してあります。
また、ブログタイトル部分の設定も追加しました。

設置時の注意

本CSSを設置する際、ブログスタイルの「日付のスタイルを選択」部分は「標準」を選択してください。「独自レイアウト」を選択すると、ソースがうまく反映されません。

当サイトでのブログスタイル設定画面(クリックで拡大します)
当サイトでのブログスタイル設定画面(クリックで拡大します)

CSSコード

/* ブログ
----------------------------------------------- */
/* 日付部分背景 */
.blogselection .datetime,
.post .datetime {
    position: relative;
    width: 52px;
    height: 57px;
    margin: 0 0 0 80px;
    padding: 2px 0 0 0;
    background: none;
    /* for IE */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cdn.jimdo.com/s/img/cc/datesticker-bg.png', sizingMethod = 'crop', enabled='false') !important;
}

/* 日付部分日本語化 */
.blogselection .datetime p.day,
.post .datetime p.day{
    position:absolute;
    top:10px;
    left:0px;
    width:52px;
    color:#222222;
    font-size:14px;
    line-height:14px;
        font-weight: bold;
    text-align:center;
    padding:0;
}

.blogselection .datetime p.mon,
.post .datetime p.mon{
    position:absolute;
    top:10px;
    left:-35px;
    width:52px;
    color:#222222;
    font-size:14px;
    line-height:14px;
        font-weight: bold;
    text-align:center;
    padding:0;
}

.blogselection .datetime p.yr,
.post .datetime p.yr{
    display:block;
    position:absolute;
    top:10px;
    left:-85px;
    width:60px;
    color:#222222;
    font-size:14px;
    line-height:14px;
        font-weight: bold;
    text-align:center;
    padding:0;
}

/* 年・日追加 */
.blogselection .datetime p.yr:after,
.post .datetime p.yr:after{
    content: "年";
}

.blogselection .datetime p.day:after,
.post .datetime p.day:after{
    content: "日";
}

/* ブログ単独記事表示タイトル*/
.post > h1
{
    font-size: 16px;
    font-weight: bold;
    margin: 5px;
    padding: 0;
}

.post > h1 a
{
    text-decoration: none;
}


/* ブログ記事タイトル一覧表示部分 */
.blogselection h1
{
    margin: 0;
    padding: 0;
    font-size:16px;
    font-weight:bold;
    line-height:20px;
}

.blogselection h1 a
{
    color: #111111;
    border: none;
    text-decoration: none;
    font-weight:bold;
}

/*ブログ一覧表示間隔設定*/
.blogselection .clearover {
    margin: 0;
}

/* 続きを読む・コメント非表示 */
.blogreadmore,
.comment
{
display: none;
}

▲このページのトップへ