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

管理者専用 1行掲示板

最終更新日: 2016-06-19
管理者専用 1行掲示板

「すぐ使えるCGI」を使って管理者専用1行掲示板をホームページ(Webサイト、HP)に設定する方法をご紹介します。

管理者だけが書き込めるため、ちょっとしたお知らせを必要な時だけホームページに掲載する事ができます。必要の無い時は表示を削除できます。

管理者専用 1行掲示板の機能概要

管理者専用 1行掲示板の基本機能は以下の通りです。

お知らせの書き込みと削除

ブラウザからWebサイトの掲示板に書き込み

ブラウザから簡単なお知らせを書き込むことができ、不要な時は削除ができます。

色の切り替え

掲示板表示色の切り替え

赤枠・青枠・お悔み等に使えるグレーの枠のデザインが予め設定されており、お知らせの種類に合わせて切り替えて使う事ができます。

画像とファイルのアップロードに対応

画像とファイルのアップロード

画像とファイルのアップロードに対応しています。

スマホ対応レスポンシブWebデザイン

レスポンシブWebデザイン1行掲示板

レスポンシブWebデザインでスマートフォンからも快適に更新できます。

このツールの使い方

CMSの設置

下のボタンから製品をダウンロードし、ダウンロードが終わったページからリンクしている「ステップ by ステップガイド」をご覧になりながら製品を設置して下さい。

管理者専用 1行掲示板 ダウンロード ※お試しは1か月間無料です。

動作確認

「8. 設置完了」まで設置がうまく行ったら、テストで1件新規登録して下さい。

表示確認

テストの登録をしたら、ダウンロードした製品ファイル内に含まれていた index_sample.html もサーバにアップロードして下さい。このページが、トップページへの表示サンプルになります。

ホームページに組み込まれた1行掲示板

管理画面一覧の「チェック」のボタンから「組み込み先ページ」を選択すると、このファイルにアクセスできます。もしリンクがうまくつながっていないよ場合、直接ファイルにアクセスして下さい。

左の様なページが表示され、テスト登録した内容が表示されていれば設置完了です。

登録した内容が表示されない場合

登録した内容が表示されない場合は、index_sample.html 内にある <iframe> の src 属性と、管理画面一覧の「チェック」→「内容だけ(短い一覧)」で表示されるページの URL が一致しているかを確認し、異なっていたら修正して再度アップロードして下さい(下記青字部分)。

<iframe
    id="notice"
    src="webdir/index_short.html"
    class="pure-u pure-u-1"
    style="height: 0px; border: none; padding: 0; margin: 0;"
    scrolling="no" frameborder="0">
</iframe>

Webサイトへの設定

表示がうまくいったら、今度はこれをご自身のサイトに組み込んでいきます。デザインの変更も可能です。順にご説明します。

トップページへの表示の仕組み

iframe での1行掲示板の組み込み
ホームページへの表示は、管理画面から書き出されたHTMLファイルを <iframe> で組み込み表示する事で行います。登録があれば組込んだ場所に内容が表示され、登録が無い場合は表示が消えるという仕組みです。既存のホームページの任意の位置に組み込む事が可能です。

1行掲示板の組み込み手順

1行掲示板の表示を組み込むページとその位置を決めたら、下記の通り設定して下さい。

なお、以下の説明ではすべて、ファイルを編集したら編集後のファイルをサーバにアップロードの上、ブラウザのキャッシュをクリアしてから再読み込みして表示を確認して下さい。

  1. <iframe> と CSS、JavaScript のコピー
  2. フレームの位置とサイズの変更
  3. 色やデザインの変更

<iframe> と CSS、JavaScript のコピー

製品に同梱されている index_sample.html が組み込み用のサンプルコードです。この中から、以下の3か所をコピーして使って下さい。コードサンプルの後に詳細の説明をします。

  1. CSS読み込みタグ(緑字部分、アップロードした画像を lightbox で拡大表示する場合)
  2. <iframe> (赤字部分)
  3. JavaScript(青字部分)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>管理者専用 1行掲示板 ホームページ掲載サンプル</title>
 :(省略)
<!-- ライトボックスによる画像拡大をする場合、以下の1行を追加 -->
<link rel="stylesheet" type="text/css" href="./webdir/parts/css/jquery-lightbox.css">
</head>
<body>
<div class="pure-g sugu-window">
<div class="pure-u-1 sugu-container">

<h2>管理者専用 1行掲示板 ホームページ掲載サンプル</h2>

 :(省略)

			<!-- 追加する iframe の設定 ここから -->
			<iframe
			    id="notice"
			    src="webdir/index_short.html"
			    class="pure-u pure-u-1"
			    style="height: 0px; border: none; padding: 0; margin: 0;"
			    scrolling="no" frameborder="0">
			</iframe>
			<!-- 追加する iframe の設定 ここまで -->

 :(省略)

<!-- 追加する JavaScript ここから -->
<script src="//lcns2.sugutsukaeru.jp/c803d429b782f84/4.9/a4b94adbcbff24406a11ec647abba536/js/jquery-1_11_3-min.js" type="text/javascript"></script>
<script src="//lcns2.sugutsukaeru.jp/c803d429b782f84/4.9/a4b94adbcbff24406a11ec647abba536/js/jquery-lightbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
var NoticeCtl = {};
NoticeCtl.NoticeID = "notice";
NoticeCtl.LBset = 0;
function set_frame_lightbox(F){
	if (NoticeCtl.LBset == 1) {return;}
	var frameSrcDir = $('#'+F).attr("src").replace(/[^\/]*$/, "");
	$('#'+F).contents().find('.image-link').each(function(){
		var myHref = $(this).attr("href");
		if (!myHref.match(/^https?:/i) && !myHref.match(/^\//)){
			$(this).attr("href", frameSrcDir+myHref);
		}
    	$(this).lightbox();
    });
	NoticeCtl.LBset = 1;
}
function adjust_frame_css(F){
  if(document.getElementById(F)) {
	var myF = document.getElementById(F);
	var myC = myF.contentWindow.document.documentElement;
	var myH = 30;
    if(document.all) {
      myH  = myC.scrollHeight;
    } else {
      myH = myC.offsetHeight;
    }
    myF.style.height = myH+"px";
  }
}
$('#'+NoticeCtl.NoticeID).bind("load resize", function(){
	adjust_frame_css(NoticeCtl.NoticeID);
	set_frame_lightbox(NoticeCtl.NoticeID); //ライトボックスが不要ならこの行を削除
});
$(window).bind("load resize", function(){
	adjust_frame_css(NoticeCtl.NoticeID);
});
$(document).ready(function(){
	adjust_frame_css(NoticeCtl.NoticeID);
	set_frame_lightbox(NoticeCtl.NoticeID); //ライトボックスが不要ならこの行を削除
});
</script>
<!-- 追加する JavaScript ここまで -->
</body>
</html>

CSS読み込みタグ(緑字部分)

1行掲示板画像の lightbox 拡大表示

上記コード内の緑色の <link> タグは、1行掲示板にアップロードした画像を lightbox で拡大する時に必要です。</head> の直前に追加して下さい。追加の際、緑字内の黒字部分はサーバ内で webdir/parts/css/jquery-lightbox.css をアップロードした場所のパスに変更して下さい。

lightbox を使わない場合は追加不要です。

<iframe>(赤字部分)

<iframe> タグ(赤字部分)は組み込みたいページの中の1行掲示板の内容を表示したい位置にコピーして下さい。src 属性(赤字中の黒字部分)は書き出されたファイル(※1)のURLに変更して下さい。

※1 管理画面一覧の「チェック」→「内容だけ(短い一覧)」で表示できるページ。初期設定では webdir/index_short.html です。

JavaScript(青字部分)

JavaScript(青字部分)を組み込みたいページの </body>の直前にコピーして下さい。その際、以下の2点は必要があれば変更して下さい。

  • <iframe> の id属性を変えていたら、JavaScript(青字部分)の冒頭付近にある「NoticeCtl.NoticeID = "notice";」の「notice」の部分(青字内の赤字部分)をそれに合わせて変更して下さい。
  • アップロードした画像の lightbox 拡大が不要な場合は「//ライトボックスが不要ならこの行を削除」と書いてある行を行ごとまとめて削除して下さい(青字内のグレー字部分2か所)。

フレームの位置とサイズの変更

表示する <iframe> のサイズや位置は自由に変更できます。コピーした <iframe> タグの中の style 属性を追加したり class 属性(下記青字部分)を変更して、導入先の Webサイトに合わせて変更して下さい。

なお、高さ(height)の指定が「0px」になっていますが、これは、先ほどペーストした JavaScript が内容の高さに応じて調整して表示しますのでこのままにして下さい。

<iframe
    id="notice"
    src="webdir/index_short.html"
    class="pure-u pure-u-1"
    style="height: 0px; border: none; padding: 0; margin: 0;"
    scrolling="no" frameborder="0">
</iframe>

色やデザインの変更

表示する色のやそのほかのデザインの設定は、webdir/parts/css/sugu-172-admin-bulletin-board.css にCSSでスタイルが指定してありますので自由に変更して下さい。例えば、青字部分は枠の太さ、赤字部分は枠の色を指定しています。緑字のクラス名は、管理画面から「フォーマット」欄の選択肢をクリックして入力される内容と一致しています。

@charset "utf-8";
/* 「すぐ使えるCGI」記事ページテンプレート CSS */
/* No. 172 管理者専用 1行掲示板 用 */

.frame-content { /* ページ全体から余計な空白をリセット */
	background-color: white;
	padding: 0;
	margin: 0;
}
.notice { /* 囲み枠の指定 */
	border: 3px gray solid;
	padding: 0.9em;
	margin-bottom: 10px;
}
.notice h2
,.notice h3
,.notice h4
{
	margin: 0;
}
.notice p
{
	margin: 0.5em 0 0 0;
}
.notice .date
{
	color: #898989;
}
.notice-image { /* 画像を右寄せ */
	max-width: 200px;
	display: inine-block;
	box-sizing: border-box;
	margin: 0.5em;
	float: right;
}
.notice .notice-file { /* 添付ファイル領域のマージン */
	margin: 8px auto;
}

.red { /* 赤枠 */
	border-color: red;
}
.blue { /* 青枠 */
	border-color: #6969df;
}
.gray { /* グレー */
	border-color: gray;
	background-color: #efefef;
}
.no-color { /* 枠無し */
	border-color: transparent;
	background-color: transparent;
}
.notice.no-color .date { /* タグ用を想定しているので、日付は非表示 */
	display: none;
}
.notice.none { /* 表示なし */
	display: none;
	margin: 0 !important;
	padding: 0;
}

関連リンク

さらに詳しく