●掲載ソースを追加して正しく表示されないときは次を確認ください。
・ソースが文字化けしている可能性があります。一旦テキストエディタに貼り付けて確認してください。
・ご自身で全角スペースを入力している可能性があります。全角スペースを削除してください。
●画像は説明用のイメージサンプル画像です。
実際のブログや管理画面とは細部の表示が異なる部分がありますので予めご了承ください。
●CSS/HTMLソースの行数の番号/色は説明用です。
実施のブログでは、行数が違う・行数表示が無い・色が無い、となりますので予めご了承ください。
記事一覧を2段組みにする
記事一覧を、下記図のように、2段組みにする方法の説明です。
※スマホ・タブレットで横幅415px以下のときは、自動的に 縦並び になります。
※記事の概要は、収まりが悪いため、非表示にしています。
変更方法
この説明は アップデート版（2015-07-16以降のリリース分）を元に説明しています。
CSSに記述を追加する
書き替えしたメインCSSの■追加アレンジの箇所に次の記述を追加してください。
※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。
/*記事一覧2段組み*/
.kijilist-body {
padding: 15px 15px 0 15px;
}
.kijilist-body3 {
position: relative;
overflow: hidden;
margin: 0 auto;
padding: 0;
}
.kijilist-body3 ul li {
position: relative;
float: left;
width: 48%;
margin: 0 1% 15px 1%;
padding: 0 0 15px 0;
border-bottom: dotted 1px #d1d1d1;
}
.kijilist-body3 .kl-read {
right: 1%;
}
.kl-cat2,.kl-cat2 a,.kl-date2 {
line-height: 1.6;
color: #777;
}
.kl-cat2 a:hover {
color: #a00;
}
.kijilist-body3 .text01 {
overflow: auto;
zoom: 1px;
margin: 0;
}
.kltitle {
margin: 15px 0;
}
@media screen and (max-width: 415px) {
.kijilist-body3 ul li {width: 100%; margin: 0 0 15px 0;}
}
/*
.kijilist-body3 ul li {
width: 46%;
padding: 1% 1% 10px 1%;
border: none;
border-radius: 6px;
background: rgba(234,234,234,0.5);
}
@media screen and (max-width: 415px) {.kijilist-body3 ul li {width: 98%;}}
*/
/*
.kijilist-body3 .kl-read {display: none;}
.kijilist-body3 .kl-info {margin: 5px 0 0 0;}
.kijilist-body3 ul li {padding-bottom: 1%;}
*/
※背景を付けるときは
41行目 /* と 49行目 */ の記述を削除してください。
※「記事を読む」ボタンを非表示にするときは
50行目 /* と 54行目 */ の記述を削除してください。
HTMLを変更する（トップページの記事一覧の場合）
コンテンツ記事HTMLの
<!-- ▼記事一覧(インデックスページ) 開始▼ -->から
<!-- ▲記事一覧(インデックスページ) 終了▲ -->までの記述を次に変更してください。
※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。
<!-- ▼記事一覧(インデックスページ) 開始▼ -->
<% if:page_name eq 'index' -%>
<div class="kijilist1">
<div class="kijilist-title-outer"><div class="kijilist-title">
<h2 class="style04">記事一覧</h2>
</div></div>
<div class="kijilist-body">
<div class="kijilist-body3">
<ul>
<% loop:list_article -%>
<li>
<div class="kb-l">
<% if:article.first_image -%><a href="<% article.page_url -%>" title="<% article.subject | tag_break -%>"><img src="<% article.first_image.page_url_thumbnail -%>" alt="<% article.subject | tag_break -%>" /></a><% else -%><div class="noimage"><div class="noimage-in">No Image</div></div><% /if -%>
</div>
<div class="kb-r">
<div class="text01">
<p class="kl-list"><a href="<% article.page_url -%>" title="<% article.subject | tag_break -%>"><% article.subject | tag_break -%></a></p>
<div class="kl-info">
<p class="kl-date2"><% article.createstamp | date_format("%Y-%m-%d") -%></p>
<p class="kl-cat2"><a href="<% article_category.page_url -%>" title="<% article_category.name -%> カテゴリ関連記事"><% article_category.name -%></a></p>
</div>
</div>
<p class="kl-read"><a href="<% article.page_url -%>" title="記事を読む">記事を読む</a></p>
</div>
</li>
<% /loop -%>
</ul>
</div>
</div>
</div>
<% /if -%>
<!-- ▲記事一覧(インデックスページ) 終了▲ -->
※日付無しは 19行目 の記述を削除してください。
HTMLを変更する（カテゴリページの記事一覧の場合）
コンテンツ記事HTMLの
<!-- ▼記事一覧(カテゴリページ) 開始▼ -->から
<!-- ▲記事一覧(カテゴリページ) 終了▲ -->までの記述を次に変更してください。
※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。
<!-- ▼記事一覧(カテゴリページ) 開始▼ -->
<% if:page_name eq 'category' -%>
<div class="kijilist2">
<div class="kijilist-title-outer"><div class="kijilist-title">
<p class="style04">カテゴリ：<% category.name -%></p>
</div></div>
<div class="kijilist-body">
<div class="kijilist-body2"><% category.name -%>のカテゴリ記事一覧。<% blog.description | nl2br | tag_strip -%></div>
<div class="kijilist-body3">
<ul>
<% loop:list_article -%>
<li>
<div class="kb-l">
<% if:article.first_image -%><a href="<% article.page_url -%>" title="<% article.subject | tag_break -%>"><img src="<% article.first_image.page_url_thumbnail -%>" alt="<% article.subject | tag_break -%>" /></a><% else -%><div class="noimage"><div class="noimage-in">No Image</div></div><% /if -%>
</div>
<div class="kb-r">
<div class="text01">
<p class="kl-list"><a href="<% article.page_url -%>" title="<% article.subject | tag_break -%>"><% article.subject | tag_break -%></a></p>
<div class="kl-info">
<p class="kl-date2"><% article.createstamp | date_format("%Y-%m-%d") -%></p>
<p class="kl-cat2"><a href="<% article_category.page_url -%>" title="<% article_category.name -%> カテゴリ関連記事"><% article_category.name -%></a></p>
</div>
</div>
<p class="kl-read"><a href="<% article.page_url -%>" title="記事を読む">記事を読む</a></p>
</div>
</li>
<% /loop -%>
</ul>
</div>
</div>
</div>
<% /if -%>
<!-- ▲記事一覧(カテゴリページ) 終了▲ -->
※日付無しは 20行目 の記述を削除してください。
HTMLを変更する（月別ページの記事一覧の場合）
コンテンツ記事HTMLの
<!-- ▼記事一覧(月別ページ) 開始▼ -->から
<!-- ▲記事一覧(月別ページ) 終了▲ -->までの記述を次に変更してください。
※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。
<!-- ▼記事一覧(月別ページ) 開始▼ -->
<% if:page_name eq 'archive' -%>
<div class="kijilist2">
<div class="kijilist-title-outer"><div class="kijilist-title">
<p class="style04">月別アーカイブ：<% archive.createstamp | date_format("%Y年%m月") -%></p>
</div></div>
<div class="kijilist-body">
<div class="kijilist-body2"><% archive.createstamp | date_format("%Y年%m月") -%>の記事一覧。<% blog.description | nl2br | tag_strip -%></div>
<div class="kijilist-body3">
<ul>
<% loop:list_article -%>
<li>
<div class="kb-l">
<% if:article.first_image -%><a href="<% article.page_url -%>" title="<% article.subject | tag_break -%>"><img src="<% article.first_image.page_url_thumbnail -%>" alt="<% article.subject | tag_break -%>" /></a><% else -%><div class="noimage"><div class="noimage-in">No Image</div></div><% /if -%>
</div>
<div class="kb-r">
<div class="text01">
<p class="kl-list"><a href="<% article.page_url -%>" title="<% article.subject | tag_break -%>"><% article.subject | tag_break -%></a></p>
<div class="kl-info">
<p class="kl-date2"><% article.createstamp | date_format("%Y-%m-%d") -%></p>
<p class="kl-cat2"><a href="<% article_category.page_url -%>" title="<% article_category.name -%> カテゴリ関連記事"><% article_category.name -%></a></p>
</div>
</div>
<p class="kl-read"><a href="<% article.page_url -%>" title="記事を読む">記事を読む</a></p>
</div>
</li>
<% /loop -%>
</ul>
</div>
</div>
</div>
<% /if -%>
<!-- ▲記事一覧(月別ページ) 終了▲ -->
※日付無しは 20行目 の記述を削除してください。
HTMLを変更する（個別記事ページの記事一覧の場合）
コンテンツ記事HTMLの
<!-- ▼記事一覧(個別記事ページ) 開始▼ -->から
<!-- ▲記事一覧(個別記事ページ) 終了▲ -->までの記述を次に変更してください。
※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。
<!-- ▼記事一覧(個別記事ページ) 開始▼ -->
<% loop:list_article -%>
<% if:list_category_article -%>
<div class="kijilist4">
<div class="kijilist-title-outer"><div class="kijilist-title">
<p class="style04">関連記事</p>
</div></div>
<div class="kijilist-body">
<div class="kijilist-body3">
<ul>
<% loop:list_category_article -%>
<li>
<div class="kb-l">
<% if:article.first_image -%><a href="<% article.page_url -%>" title="<% article.subject | tag_break -%>"><img src="<% article.first_image.page_url_thumbnail -%>" alt="<% article.subject | tag_break -%>" /></a><% else -%><div class="noimage"><div class="noimage-in">No Image</div></div><% /if -%>
</div>
<div class="kb-r">
<div class="text01">
<p class="kl-list"><a href="<% article.page_url -%>" title="<% article.subject | tag_break -%>"><% article.subject | tag_break -%></a></p>
<div class="kl-info">
<p class="kl-date2"><% article.createstamp | date_format("%Y-%m-%d") -%></p>
<% loop:list_article -%><p class="kl-cat2"><a href="<% article_category.page_url -%>" title="<% article_category.name -%> カテゴリ関連記事"><% article_category.name -%></a></p><% /loop -%>
</div>
</div>
<p class="kl-read"><a href="<% article.page_url -%>" title="記事を読む">記事を読む</a></p>
</div>
</li>
<% /loop -%>
</ul>
</div>
</div>
</div>
<% /if -%>
<% /loop -%>
<!-- ▲記事一覧(個別記事ページ) 終了▲ -->
※日付無しは 20行目 の記述を削除してください。
HTMLを変更する（検索結果ページの記事一覧の場合）
メインHTMLの
<!-- ▼記事一覧(検索結果ページ) 開始▼ -->から
<!-- ▲記事一覧(検索結果ページ) 終了▲ -->までの記述を次に変更してください。
※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。
<!-- ▼記事一覧(検索結果ページ) 開始▼ -->
<% if:page_name eq 'search' -%>
<div class="pankuzu">
<ul><li><a href="<% blog.page_url -%>" title="ホーム">ホーム</a></li><li>»</li><li><% keyword -%></li></ul>
</div>
<div class="kijilist3">
<div class="kijilist-title-outer"><div class="kijilist-title">
<p class="style04">検索ワード：<% keyword -%></p>
</div></div>
<div class="kijilist-body">
<div class="kijilist-body2">
<% keyword -%>のワードを含む記事一覧。<% blog.description | nl2br | tag_strip | remove_emoji -%>
</div>
<% unless:list_article -%><p class="kltitle">該当するページが見つかりませんでした。</p><% /unless -%>
<div class="kijilist-body3">
<ul>
<% loop:list_article -%>
<li>
<div class="kb-l">
<% if:article.first_image -%><a href="<% article.page_url -%>" title="<% article.subject | tag_break -%>"><img src="<% article.first_image.page_url_thumbnail -%>" alt="<% article.subject | tag_break -%>" /></a><% else -%><div class="noimage"><div class="noimage-in">No Image</div></div><% /if -%>
</div>
<div class="kb-r">
<div class="text01">
<p class="kl-list"><a href="<% article.page_url -%>" title="<% article.subject | tag_break -%>"><% article.subject | tag_break -%></a></p>
<div class="kl-info">
<p class="kl-date2"><% article.createstamp | date_format("%Y-%m-%d") -%></p>
</div>
</div>
<p class="kl-read"><a href="<% article.page_url -%>" title="記事を読む">記事を読む</a></p>
</div>
</li>
<% /loop -%>
</ul>
</div>
</div>
</div>
<div class="page-navi1">
<div class="pagination">
<a href="<% blog.page_url -%>" title="ホーム">ホーム</a>
</div>
</div>
<% /if -%>
<!-- ▲記事一覧(検索結果ページ) 終了▲ -->
※日付無しは 26行目 の記述を削除してください。
HTMLを変更する（タグページの記事一覧の場合）
メインHTMLの
<!-- ▼記事一覧(タグページ) 開始▼ -->から
<!-- ▲記事一覧(タグページ) 終了▲ -->までの記述を次に変更してください。
※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。
<!-- ▼記事一覧(タグページ) 開始▼ -->
<div class="pankuzu">
<ul><li><a href="<% blog.page_url -%>" title="ホーム">ホーム</a></li><li>»</li><li><% tag.word | html -%></li></ul>
</div>
<div class="kijilist3">
<div class="kijilist-title-outer"><div class="kijilist-title">
<p class="style04">タグ：<% tag.word | html -%></p>
</div></div>
<% if:tag_service.service_key eq 'articles' -%>
<div class="kijilist-body">
<div class="kijilist-body2"><% tag.word | html -%>のタグが付いた記事一覧。<% blog.description | nl2br | tag_strip | remove_emoji -%></div>
<div class="kijilist-body3">
<ul>
<% loop:list_data -%>
<li>
<div class="kb-l">
<% if:article.first_image -%><a href="<% article.page_url -%>" title="<% article.subject | tag_break -%>"><img src="<% article.first_image.page_url_thumbnail -%>" alt="<% article.subject | tag_break -%>" /></a><% else -%><div class="noimage"><div class="noimage-in">No Image</div></div><% /if -%>
</div>
<div class="kb-r">
<div class="text01">
<p class="kl-list"><a href="<% article.page_url -%>" title="<% article.subject | tag_break -%>"><% article.subject | tag_break -%></a></p>
<div class="kl-info">
<p class="kl-date2"><% article.createstamp | date_format("%Y-%m-%d") -%></p>
</div>
</div>
<p class="kl-read"><a href="<% article.page_url -%>" title="記事を読む">記事を読む</a></p>
</div>
</li>
<% /loop -%>
</ul>
</div>
</div>
<% /if -%>
</div>
<!-- ▲記事一覧(タグページ) 終了▲ -->
※日付無しは 23行目 の記述を削除してください。