テーマ「Adelle」の「最近の投稿」ウィジェットの日付の表示を補正するための CSS

5月 | 2013 | comemo | ページ 6

続きを読む

#2013

[WordPress.com] テーマ「Twenty Eleven」の「最近の投稿」ウィジェットの日付を左側にもってくるための CSS

テーマ「Twenty Twelve」に「最近の投稿」ウィジェットを設定した場合に日付の表示を左側にもってくる方法についての覚え書きです。

  • [WordPress]「最近の投稿」ウィジェットに日付をつける

    grdgsrgs

    一般にウェブサイトには、新着情報があるものですが、

    adgfadfadf
    首相官邸ホームページ

    WordPress.com の「最近の投稿」ウィジェットを使うと、同じようなものを表示することができます。

    例えば、テーマ「Adelle」の場合、こんな感じで表示されます。

    fgsgsdfg-1

    「最近の投稿」ウィジェットの管理画面はこんな感じです。

    dfafasfad

    配置やデザインを修正したりしたいときには、CSS スタイルシートエディターを使います。

    例えば、テーマ「Twenty Twelve 」の場合、初期状態ではこんな感じですが、

    fgdgsdfg

    以下のような感じの CSS を CSS スタイルシートエディターの方へ追加することで、

    /* 「最新の投稿」ウィジェットの日付を左側にもってくる -twenty twelve- */
    .widget_recent_entries .post-date {
    	margin-left: 0;
    	float: left;
    	position: absolute;
    	top: 4px;
    	left: 0;
    }
    
    .widget-area .widget.widget_recent_entries a {
    	position: relative;
    	top: 0;
    	left: 65px;
    	width: 70%;
    	display: block;
    }
    
    .widget-area .widget.widget_recent_entries li {
    	position: relative;
    }
    
    @media screen and (max-width: 599px) {
    	.widget-area .widget.widget_recent_entries a {
    		width: 85%;
    	}
    }

    日付を左側に持ってくることができます。

    fafadfasd

    日付の表示形式を変更するときには、「設定」→ 「一般」→「日付のフォーマット」のところで、表示形式を適宜、変更・設定し、

    dfgsdfd

    「変更を保存」ボタンをクリックし、

    ghfgfhf

    「最近の投稿」ウィジェットの方でも「保存」ボタンをクリックすると、

    dfasdfdas

    以下のような感じで、日付の表示形式を変更することができます。

    grdgsrgs

    #2013

以下のような感じの CSS を CSS スタイルシートエディターの方へ追加することで、
/* 「最新の投稿」ウィジェットの日付を左側にもってくる -twenty twelve- */
.widget_recent_entries .post-date {
	margin-left: 0;
	float: left;
	position: absolute;
	top: 4px;
	left: 0;
}

.widget-area .widget.widget_recent_entries a {
	position: relative;
	top: 0;
	left: 65px;
	width: 70%;
	display: block;
}

.widget-area .widget.widget_recent_entries li {
	position: relative;
}

@media screen and (max-width: 599px) {
	.widget-area .widget.widget_recent_entries a {
		width: 85%;
	}
}

日付を左側に持ってくることができます。

fafadfasd

「設定」→ 「一般」→ 「日付のフォーマット」のところで日付の表示形式を適宜、調整することができますが、その設定によって、日付の幅が変化しますので、適宜、「width: 70%;」等の数値を変更する必要があります。

#2013