- ブログメディアを開設するのに最適なテンプレートを紹介している
- 記事の見出しや本文エリアなど、大きく使えるメインカラムを用意
- サイドカラムは幅180pxが2列と幅を広めに設けてある
「ブログメディア（2ch,コバルトブルー,3カラム）」は文章をしっかり書きたい！、 まとめ系サイトをやってみたい！など、ブログメディアを開設するのに最適な デザインテンプレートです。
（例）
主な特徴
- 広く使えるメインカラム
幅560pxと本文エリアを大きく設けてあります。 これにより1行に入る文字量も増え、しっかり文章を見せることができます。 - サイドカラム
幅180pxが2列と幅を広めに設けてあります。 テンプレート見本のフリーエリアでは、スクエア型の広告をイメージした画像を当て込んでおりますが、使い方は自由自在です。
カスタマイズについて
ブログデザインのCSS・HTML編集は、 サポートガイドライン記載の通り
サポート対応の範囲外です。 お客様ご自身にてご確認・操作をお願いします。
また、ブログデザインのCSS・HTML編集はPC版のみ可能であり、
スマートフォン版や携帯版は編集できません。
デザイン保存機能を利用して、編集前に保存してください。
また、ブログ崩れが発生しても弊社では対応いたしかねますので、予めご了承ください。
・ブログデザインのカスタマイズについてのヘルプページはこちら
・カスタマイズしたデザインの保存についてのヘルプページはこちら
項目一覧
（確認したい項目をクリックしてください）
1.トップページに記事の概要と記事に貼り付けた最初の画像を表示する
※トップページには通常記事全文と画像がそのまま表示されます。
サンプルイメージ
※手順※
1.ブログ管理画面にログイン
2.「ブログ設定」をクリック
3.デザイン／ブログパーツ設定の「PC」をクリック
4.「カスタマイズ」タブをクリック
5.「トップページ」タブをクリック
6.下記変更後①、②のようにタグを書き換える
7.「保存する」をクリック
【▼変更前①】
- HTML
<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.トップページに記事の概要と記事の見出し画像を表示する
サンプルイメージ
上記「1.トップページに記事の概要と記事に貼り付けた最初の画像を表示する」の手順と同じです。
変更点は以下になります。
【▼変更前①】
- HTML
<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.トップページに記事の概要と記事の見出し画像を表示し、横並びに表示する
※上記「2.トップページに記事の概要と記事の見出し画像を表示する」設定後の手順です。※
サンプルイメージ
「1.トップページに記事の概要と記事に貼り付けた最初の画像を表示する」の手順と同じです。 変更点は以下になります。
【▼変更前①】
- HTML
<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.「保存する」をクリック
- CSS
.article-body-inner img{
margin-right: 20px;
}
※margin-right: 20px;の「20」は適宜数値を変更してください。（数値が大きくなるほど幅が大きくなります）