ライブドアブログのヘルプ(PC向け)

主な特徴

• 広く使えるメインカラム

• サイドカラム

カスタマイズについて

お客様のCSS・HTML編集に伴い、ブログ表示が崩れる可能性がございますので、
デザイン保存機能を利用して、編集前に保存してください。
また、ブログ崩れが発生しても弊社では対応いたしかねますので、予めご了承ください。

・ブログデザインのカスタマイズについてのヘルプページはこちら
・カスタマイズしたデザインの保存についてのヘルプページはこちら

　項目一覧　
（確認したい項目をクリックしてください）

1. トップページに記事の概要と記事に貼り付けた最初の画像を表示する
2. トップページに記事の概要と記事の見出し画像を表示する
3. トップページに記事の概要と記事の見出し画像を表示し、横並びに表示する

1.トップページに記事の概要と記事に貼り付けた最初の画像を表示する

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「PC」をクリック
4. 「カスタマイズ」タブをクリック
5. 「トップページ」タブをクリック
6. 下記変更後①、②のようにタグを書き換える
7. 「保存する」をクリック

<div class="article-body entry-content">
<div class="article-body-inner">
<$CommonTheme$>
<ArticleBody$>>
<IfArticleBodyMore><span class="article-continue"><a href="<$ArticlePermalink$>#more" title="この記事の続きを読む">続きを読む</a></span></IfArticleBodyMore>
</div>
<$ArticleTagsList$>
</div><!-- articleBody End -->

【▼変更後②】

<div class="article-body entry-content">
<div class="article-body-inner">
<IfArticleFirstImage><img border="0" src="<$ArticleFirstImage$>" height="200" /><br /></IfArticleFirstImage>
<$ArticleDescription$>
<span class="article-continue"><a href="<$ArticlePermalink$>#more" title="この記事の続きを読む">続きを読む</a></span>
</div>
<$ArticleTagsList$>
</div><!-- articleBody End -->

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

<div class="article-body entry-content">
<div class="article-body-inner">
<$CommonTheme$>
<ArticleBody$>>
<IfArticleBodyMore><span class="article-continue"><a href="<$ArticlePermalink$>#more" title="この記事の続きを読む">続きを読む</a></span></IfArticleBodyMore>
</div>
<$ArticleTagsList$>
</div><!-- articleBody End -->

【▼変更後②】

<div class="article-body entry-content">
<div class="article-body-inner">
<IfArticleCoverImageThumbnail><img border="0" src="<$ArticleCoverImageThumbnail$>" height="200" /></IfArticleCoverImageThumbnail>
<$ArticleDescription$>
<span class="article-continue"><a href="<$ArticlePermalink$>#more" title="この記事の続きを読む">続きを読む</a></span>
</div>
<$ArticleTagsList$>
</div><!-- articleBody End -->

3.トップページに記事の概要と記事の見出し画像を表示し、横並びに表示する

<IfArticleCoverImageThumbnail><img border="0" src="<$ArticleCoverImageThumbnail$>" height="200" /></IfArticleCoverImageThumbnail>

【▼変更後②】

<IfArticleCoverImageThumbnail><img src="<$ArticleCoverImageThumbnail$>" align="left" hspace="10"  vspace="10"></IfArticleCoverImageThumbnail>

【▼お好みに応じて記事概要と記事の見出し画像の間隔を作成】

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「PC」をクリック
4. 「カスタマイズ」タブをクリック
5. 「CSS」タブをクリック
6. 一番下に下記内容を記載
7. 「保存する」をクリック

.article-body-inner img{
margin-right: 20px;
}