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

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

03

9月

2011

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

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

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

何とかならないかな~と色々調べて、日付部分を編集するCSSを用意してみました。

Jimdoブログ日付編集用CSS

下記が本サイトで使用しているCSSです。

独自レイアウト用ですが、標準レイアウトでも応用できます。

コピペする際は、コピー後、一度「メモ帳」に貼り付けてから作業すると「余計なコード」が表示されずにうまく貼り付けることができます。

更新情報

<2013年12月4日>

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

iOS等でレイアウトが崩れる事象を改善しました。

 

<2013年8月20日>

「設置の際の注意」の文面を修正しました。

当サイトで設定している「ブログスタイル」の画像を追加しました。


<2013年5月9日>

最新のCSSに更新しました。あわせて記事も修正してあります。

また、ブログタイトル部分の設定も追加しました。

 

<2013年3月23日>

最新のCSSに更新しました。あわせて記事も修正してあります。

また、ブログタイトル部分の設定も追加しました。

【設置の際の注意】

本CSSを設置する際、ブログスタイルの「日付のスタイルを選択」部分は「標準」を選択してください。

「独自レイアウト」を選択すると、ソースがうまく反映されません。

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

/* ブログ
----------------------------------------------- */
/* 日付部分背景 */
#wrap .blogselection .datetime,
#wrap .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: "日";
}

/* ブログ単独記事表示タイトル*/
#wrap .post-title
{
    margin: 0 0 10px 0;
    padding: 0;
    font-size:16px;
    font-weight:bold;
    line-height:20px;
}

#wrap .post-title a
{
    color: #111111;
    border: none;
    text-decoration: none;
    font-weight:bold;
}

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

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

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

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

▲このページのトップへ