PR

Livedoor blogのトップページに見出し画像と記事概要を表示する

ブログ

Livedoor blogのトップページに、見出し画像と記事概要を並べたいと思っていました。
やっとその方法がわかったので、記録しておきます。

スポンサーリンク

1.見出し画像を指定する

まずは、各記事で見出し画像に使いたい画像を指定します。

記事を書く - livedoor Blog 2015-09-05 00-55-49

記事を書くページの下の方のオプション設定に
見出し画像というところがあります。
「画像を選択」ボタンを押すと、アップロードした画像から好きな画像を選ぶことができます。
※選択しない場合は、各記事の最初の画像が見出し画像に使われます。

2.見出し画像をトップページに表示する

デザイン設定→カスタマイズ→トップページの
<!– ArticlesLoop Start –>と<!– ArticlesLoop End –>の間の配置したい場所に

<ifarticlecoverimage>
<figure><img src="<$ArticleCoverImage$>" vspace="10" hspace="10" align="left"></figure>
</ifarticlecoverimage>

を入れます。
hspace=”10″ vspace=”10″は画像の上下左右に空白を入れるタグです。
記事概要を画像の横に並べるためにalign=”left”を入れてあります。
width= height= で画像のサイズを規定することもできます。

3.記事概要をトップページに表示する

記事概要のタグは<$ArticleDescription$>です。

<div class="article-title-outer">
<h2 class="article-title entry-title">
<a href="<$ArticlePermalink$>" title="個別記事ページへ" rel="bookmark"><$ArticleTitle ESCAPE$></a></h2>
		</div>
    <IfArticleCoverImage>
       <img src="<$ArticleCoverImage$>" align="left" hspace="10"  vspace="10">
    </IfArticleCoverImage>
	<div class="article-body entry-content">
		<div class="article-body-inner" >
<$ArticleDescription$>
<a href="<$ArticlePermalink$>" title="個別記事ページへ" > …記事を読む</a>
		</div>
		<$ArticleTagsList$>
	</div>

こんな感じにしてみました。
わーい、できた~


どれか1つクリックお願いします。
 easteurope88_31 にほんブログ村 ライフスタイルブログ セミリタイア生活へ にほんブログ村 海外生活ブログへ 
スポンサーリンク

関連コンテンツ
ブログ
スポンサーリンク

コメント

タイトルとURLをコピーしました