ショートコード「display-posts」で生成した記事リストにカーソルをあてたときに概要文が表示されるようにする

2013年8月10日現在、一部表示に不具合が発生することがわかりました。

WordPress.com では、ショートコード「display-posts 」を使うことにより、記事のリストを作成することができますが、記事の設定や CSS の追加により、記事リストにカーソルをあてると概要文を表示させるようにすることができたので、その覚書です。
テキストウィジェットの方に以下のようなものを貼ります。「author」のところには自分のアカウントを入力します。

<div class="boxlist">

 </div>

記事の方には「抜粋」と

asdfasd

アイキャッチ画像を設定しておきます。

asdgfagads

以下の CSS を CSS スタイルシートエディターに貼りつけます。

/* ショートコード「display-post」で生成した記事リストにカーソルをあてると概要文が表示されるようにする */
@media (max-width:768px) {
	#page {
		cursor: pointer;
	}
}

.boxlist ul.display-posts-listing {
	padding-left: 0 !important;
	text-align: left;
	margin-top: 20px;
	margin-left: 0;
}

.boxlist ul.display-posts-listing > li {
	width: 100%;
	cursor: pointer;
	list-style: none;
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	word-wrap: break-word;
	font-size: 13px;
	line-height: 1.2;
	margin: 0;
	padding: 7px 2px;
	border-bottom: 1px dashed #ccc;
	position: relative;
}

.boxlist ul.display-posts-listing > li > a {
	font-size: 14px;
	line-height: 1.5em;
}

.boxlist ul.display-posts-listing li > a > img {
	display: block !important;
	border: 1px solid #d0a600 !important;
	height: 40px !important;
	width: 50px !important;
	float: left !important;
	margin: -2px 8px 4px 2px !important;
	padding: 2px !important;
	background-color: rgba(230,230,230,0.4) !important;
	border-radius: 3px;
}

.boxlist ul.display-posts-listing li .excerpt {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	font-size: 14px;
	line-height: 1.5em;
	height: auto !important;
	display: block;
	float: right;
	color: #eee;
	background-color: #000;
	background-color: rgba(0,0,0,0.7);
	padding: 8px 3% 0;
	border-radius: 7px;
	border: 3px solid #e9e9e9;
	visibility: hidden;
	z-index: 1;
	cursor: default;
}

.boxlist ul.display-posts-listing li:hover .excerpt {
	visibility: visible;
	min-height: 100%;
}

.boxlist ul.display-posts-listing li .excerpt a {
	font-size: 11px;
	float: right;
	position: relative;
	overflow: visible;
	display: inline-block;
	padding: .2em 1em !important;
	border: 1px solid #d4d4d4;
	margin: 5px 0;
	text-decoration: none;
	text-align: center;
	text-shadow: 1px 1px 0 #fff;
	font: 11px/normal sans-serif;
	white-space: nowrap;
	outline: none;
	background-color: #ececec !important;
	border-radius: .2em;
}

.boxlist ul.display-posts-listing li .excerpt a:hover,
.boxlist ul.display-posts-listing li .excerpt a:focus,
.boxlist ul.display-posts-listing li .excerpt a:active {
	border-color: #3072b3;
	text-decoration: none;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	color: #fff !important;
	background-color: #92c8b3 !important;
}

以上の設定をすると、以下のような感じで記事リストが表示され、

adfagsdf

記事リストにカーソルをあてると概要文が表示されるようになります。

adfafads

ただし、テーマ「Twenty Eleven 」や「Twenty Ten 」ではうまくいきますが、例えば「Twenty Twelve 」の場合は「続きを読む」が表示されないので、

asgsgsdf

左側に表示させて、個別記事にリンクできるようにするなど、

dsgsgsdf

一工夫必要です。

なお、CSS の設定を外すと以下のような感じで表示されます。

adgagsdf

以上、非常にざっくりとですが、ショートコード「display-posts」で生成した記事リストにカーソルをあてると概要文が表示されるようにする方法についての覚書でした。

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。