小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

スマホ対応 レスポンシブWebデザインの CMS(Bootstrap版)

最終更新日: 2016-06-08
「すぐ使えるCGI」の管理画面テンプレートを編集して、PCだけでなくスマホ(スマートフォン、スマートホン)やタブレットからも更新可能な管理画面にする方法をご案内します。一つのHTMLコードでPC・スマホ・タブレット全てに対応させる「レスポンシブWebデザイン」という手法を使います。
レスポンシブWebデザインのCMS管理画面

レスポンシブWebデザインとは?

「レスポンシブWebデザイン」とは、一つの HTML ファイルで PCのみならずタブレット、スマホ(スマートフォン)にも対応させる Webデザイン手法の事です。

具体的には CSS(スタイルシート)を表示幅ごとに違うレイアウトで設定しておくことにより、さまざまな幅の端末に対応させます。

レスポンシブWebデザインのCMS オンラインデモ

下記のデモにアクセスして下さい、ブラウザの幅を変更すると、幅に応じて画面の見た目が変わります。

レスポンシブWebデザインCMSの選択肢

「すぐ使えるCGI」はVer. 5.0 から、初期設定でもレスポンシブWebデザインに対応しました。このページからダウンロードできるツールは初期設定とはデザインが異なるパターンです。

具体的には、初期設定のデザインテンプレートが Pure というCSSフレームワークを利用しているのに対し、このページではBootstrap(v2.2.1)というCSSフレームワークを利用しています。見た目が違うだけで機能は同じです。

初期設定(Pure)とこのページのツール(Bootstrap)の比較

Bootstrap に慣れている方はこのページからダウンロードできるツールがお勧めです。どちらでも特にこだわりない方は、Pure を利用したサンプルをダウンロードしてご利用下さい。

このツールの使い方

以下の2種類のページ構成の製品が用意されています。いずれかをダウンロードしてデザイン調整してお使い下さい。

なお、ダウンロードできる製品は、管理画面だけでなく書き出されるホームページ側も HTML5 でレスポンシブWebデザインにしてありますが、これは、Webサイトのデザインに合わせて自由に変更して下さい。レスポンシブWebデザインでなくPC専用にしたり、HTML4やXHTMLに変更する事も可能です。また、画像を削除する方法、ページ分割を行わないで使う方法も後述します。

タイムラインタイプ(お知らせ用)

お知らせ欄用調整済スマホ対応CMS

「お知らせ」欄などに使える、タイムラインタイプ(1ページに内容を全て掲載していく方式)のCMSです。「すぐ使えるCGI」の「添付ファイル付 ウェブページ更新ツール 大容量版」をベースに使っています。

表示デモ 管理画面デモ

ブログタイプ(目次+詳細ページ)

ブログ向け調整済スマホ対応CMS

ブログや長めのお知らせ、イベント報告などに使うために、目次+詳細ページを書き出すタイプに調整してあります。「すぐ使えるCGI」の「添付ファイル付 ウェブページ更新ツール 大容量版」をベースに使っています。

表示デモ 管理画面デモ

ダウンロードと設置

上のボタンから製品をダウンロードしたら、ダウンロードが終わったページからリンクしている「ステップ by ステップガイド」をご覧になりながら製品を設置して下さい(ダウンロードしたファイル内にも同梱されています)。

「ステップ by ステップガイド」手順の「実行テスト」まで行ったら、テストで記事を登録し、管理画面が一通り動く事を確認して下さい。以下では、一通り設置が終わった後のデザイン調整方法等をご案内します。

このページでご案内するデザインカスタマイズが不要なケース

初期設定のテンプレートを調整するのではなく、全く自由に編集する事も可能です。この場合は下記ページをご参照下さい。
デザインサンプルを「すぐ使えるCGI」のテンプレートに反映する方法

また、レスポンシブ(スマホ対応)は管理画面だけでよいという場合は、ホームページ(公開ページ)側のテンプレート(templates/article/)は別のサンプルから組み合わせてお使いいただく事も可能です。別のデザインサンプルは下記ページからご覧下さい。
CMSデザインサンプル デモ一覧

デザインカスタマイズの方法

以下では、このページ(上のボタン)からダウンロードした製品のデザイン調整方法をご案内します。

CSSファイルの場所

ベースとなるCSSとして、Bootstrap(ブートストラップ)というCSSライブラリを使用しています。サイト固有のデザイン調整が必要な部分は、適宜このライブラリの定義を上書きする事で行います。

具体的には、それぞれ以下のCSSファイルを編集して下さい。

ホームページ側のCSS: webdir/parts/css/site.css
管理画面のCSS: webdir/parts/css/admin.css

Bootstrap(ブートストラップ)について詳しくは下記ページをご覧下さい。
Bootstrap(ブートストラップ)とは何ですか?

全一覧の画像のサイズ(タイムラインタイプ)

タイプラインタイプの製品で全一覧に表示する画像のサイズを変更するには、 webdir/parts/css/site.css を編集して下さい。

以下の青字部分を変更するとサイズが変わります。

/* 画像サイズの規定 */
.newsitem img {
	height: 150px;
	margin-right: 9px;
	margin-bottom: 9px;
}

/* タブレット縦置き以下のサイズを想定 */
@media (max-width: 767px) {
	.newsitem img {
		width: 25%;
		height: auto;
	}
	/* 指でスクロールできる幅を残す */
	body {
		margin-right: 30px;
	}
} /* max-width: 767px */

画像の形の変更

サンプルでは、画像の表示の形が角丸、楕円、枠付きと3パターン設定されています。CSSのクラス設定でこの表示を変更できますが、これはあらかじめBootstrapで定義されているCSSクラスです。変更する場合はCSSのクラス設定を下記のように変更して下さい(青字のクラス)。

対象テンプレートファイル

templates/article/article_list.txt
templates/article/short_list.txt (画像を表示する場合)
templates/article/article_image_N.txt (Nは数字)


画像を角丸で表示

<img src="(画像パス)" alt="(代替テキスト)" class="img-rounded">

画像を楕円で表示

<img src="(画像パス)" alt="(代替テキスト)" class="img-circle">

画像を枠付きで表示

<img src="(画像パス)" alt="(代替テキスト)" class="img-polaroid">

全一覧(目次)の画像位置(ブログタイプ)

ブログタイプのサンプルの場合は、全一覧(目次)にはタイトルの他、サマリー(本文抜粋)と「画像1」が右寄せで表示されるようになっています。この右寄せの画像は、クラス設定をする事で左寄せに変更できます。

対象テンプレートファイル

templates/article/article_list.txt
templates/article/short_list.txt (画像を表示する場合)


画像を右寄せで表示(初期設定)

<div class="media blog-entry">
<a class="pull-right catch-image" href="%_d_%.html">
<img class="media-object" src="%_d_%/%_imagename_escaped_1_%" alt="%_imagetext_1_%">
</a>
<div class="media-body">
<h3 class="media-heading"><a href="%_d_%.html">%_subject_%</a> <small>(%_yyyy_%-%_mm_%-%_dd_%)</small></h3>
<p>%_summary_%</p>
</div>

画像を左寄せで表示する設定

<div class="media blog-entry">
<a class="pull-left catch-image" href="%_d_%.html">
<img class="media-object" src="%_d_%/%_imagename_escaped_1_%" alt="%_imagetext_1_%">
</a>
<div class="media-body">
<h3 class="media-heading"><a href="%_d_%.html">%_subject_%</a> <small>(%_yyyy_%-%_mm_%-%_dd_%)</small></h3>
<p>%_summary_%</p>
</div>

全一覧(目次)の画像位置以外の変更(ブログタイプ)

ブログタイプサンプルの全一覧(目次)テンプレートには以下のようにクラス指定がありますが、このうち赤字のクラス「blog-entry」と「catch-image」はこのサンプルのためのクラス付で、webdir/parts/css/site.css を編集する事で表示調整が可能です。青字の「media」、「pull-right」(「pull-left」)、「media-object」、「media-body」、「media-heading」は Boostrapに定義された画像配置のためのクラスですので、レイアウトを全く変更したい場合はクラス指定を削除して自由に設定して下さい。

<div class="media blog-entry">
<a class="pull-right catch-image" href="%_d_%.html">
<img class="media-object" src="%_d_%/%_imagename_escaped_1_%" alt="%_imagetext_1_%">
</a>
<div class="media-body">
<h3 class="media-heading"><a href="%_d_%.html">%_subject_%</a> <small>(%_yyyy_%-%_mm_%-%_dd_%)</small></h3>
<p>%_summary_%</p>
</div>

全一覧(目次)のページ移動リンクのタイプ選択

全一覧にはページ移動リンクが付いています。ページの上の方にはページ番号でのページ移動リンクを、下の方には「前へ」「次へ」という順次移動リンクを付けていますので、不要な方を削除して使って下さい。テンプレートファイルは templates/article/artilce_list.html です。

ページ番号でのリンク(ページネーション、上の方のサンプル)には、Boostrapで簡単に調整できるバリエーションがあります。変更する場合は templates/article/artilce_list.html 内にある下記の部分を編集して下さい(下記例)。

初期設定

<div class="pagination">

大きなサイズでページ番号を表示

<div class="pagination pagination-large">

小さなサイズでページ番号を表示

<div class="pagination pagination-small">

ミニサイズでページ番号を表示

<div class="pagination pagination-mini">

ページ番号をセンタリング

<div class="pagination pagination-centered">

ページ番号を右寄せ

<div class="pagination pagination-right">

例:小さいサイズで右寄せ

位置とサイズの変更を組み合わせる場合は、両方のクラスを併記して下さい。

<div class="pagination pagination-right pagination-mini">

1ページ件数の変更

全一覧の1ページに記載する件数は変更できます。設定方法は下記ページをご覧下さい。
1ページの表示件数を変更する方法

ページ番号(ページネーション)での前後リンクをしている場合は、上のページでご案内する変更に加えて、templates/article/artilce_list.html 内の設定を変更して下さい(下記青字部分)。

1ページの件数変更の際の変更点

<!-- JavaScript と Bootstrap を利用したページネーション ここから -->
<div class="pagination">
<ul>
<li><a href="index.html" title="先頭">&#xab;</a></li><!-- href属性を全一覧のファイル名($conf{index_filename} で設定した値)に設定して下さい。 -->
<script type="text/javascript">
/* ページごとの件数:環境変数 $conf{index_list_no} で設定した値を設定して下さい。 */
var index_list_no = 10;

var page_first = '%_page_first_%';
 : (省略)

全一覧(目次)のページ名の変更

全一覧のページ名は変更できます。設定方法は下記ページをご覧下さい(admin/admin.cgi を変更して下さい)。
オプション設定:全一覧(目次)のファイル名

ページ番号(ページネーション)での前後リンクをしている場合は、上のページでご案内する変更に加えて、templates/article/artilce_list.html 内の設定を変更して下さい(下記青字部分)。

全一覧ページ名変更の際の変更点

<!-- JavaScript と Bootstrap を利用したページネーション ここから -->
<div class="pagination">
<ul>
<li><a href="index.html" title="先頭">&#xab;</a></li><!-- href属性を全一覧のファイル名($conf{index_filename} で設定した値)に設定して下さい。 -->
<script type="text/javascript">
/* ページごとの件数:環境変数 $conf{index_list_no} で設定した値を設定して下さい。 */
var index_list_no = 10;

var page_first = '%_page_first_%';
 : (省略)

詳細ページのページ移動リンクのタイプ選択

ブログタイプで書き出される詳細ページには、ページの上の方には楕円で囲った前後ページへのリンクが、下の方にはボタンで前後ページへのリンクと一覧への戻りリンクを付けてあります。不要な方を削除して使って下さい。テンプレートファイルは templates/article/artilce.html です。

詳細ページのカラム幅の変更

ブログタイプで書き出される詳細ページでは、PCで表示した場合テキスト(記事内容)が左、画像が右に表示され、スマートフォンの場合は画像がテキストの下に回り込むようになっています。このテキストカラムと画像カラムの幅の比率は3:1になっていますが、これを変える方法は以下の通りです。Bootstrapの機能を使っています。

Boostrapでの幅の設定方法概要

Boostrapの幅設定の機能は、ウィンドウ幅100%を「12」と数えて、「row-fluid」で囲んだ<div>内(下記青字)をどの比率で分割していくかをクラス名(下記赤字)に付いた数字で指定します。

初期設定は以下の通りで、「span9」と「span3」でそれぞれテキスト部分と画像部分を分けています。9+3=12 で100%、比率としては 9:3、つまり 3:1 という事になります。

詳細ページの初期設定(カラム幅 比率 3:1)

<div class="row-fluid">
<article>

<div class="span9 body-area">
%_body_%
</div><!-- /span9 -->

<div class="span3 images-col">
<!-- 画像の表示: generated from article_image_1.txt -->
: (省略)
</div><!-- /span3 -->

</article>
</div><!-- /row-fluid -->

カラム幅 比率 2:1 にするサンプル

左右のカラムの比率を例えば 2:1 にするには、2:1 = 8:4ですので、以下のように指定します。なお、足して12になる比率でないとうまく行かないので、「6:4」などの設定はできません。

<div class="row-fluid">
<article>

<div class="span8 body-area">
%_body_%
</div><!-- /span8 -->

<div class="span4 images-col">
<!-- 画像の表示: generated from article_image_1.txt -->
: (省略)
</div><!-- /span4 -->

</article>
</div><!-- /row-fluid -->

この機能については詳しくは、下記の Bootstrap の説明ページをご覧ください(英語)。なお、Bootstrap の機能を使わずに自由に編集しても問題ありません。
Boostrapの幅設定機能について

画像を削除

CMSを画像無しでお使いになる場合は、以下の方法で画像を削除して下さい。

管理画面から画像を削除する方法

ページネーション(ページの分割と前後リンク)を削除する

ページネーション(ページ分割)が不要な場合、全ての登録記事を1ページに表示する事ができます。設定方法は下記ページをご覧下さい。
1ページの表示件数を変更する方法

その他の情報

ベースとして利用しているCSSライブラリ Boostrap、およびアイコンフォントの詳しい情報は、下記サイトもご覧下さい。

関連リンク

さらに詳しく