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

ホームページ内にブログとして埋め込む方法

最終更新日: 2015-01-14
ホームページ内のブログ

「すぐ使えるCGI」を、ホームページ(Webサイト)内のブログとして埋め込んで使用するカスタマイズサンプルをご紹介します。lightBoxによる画像拡大表示、いいねボタン、ツイートボタンが組込み済です。

ホームページ内のブログとは?

このページでご紹介する「ホームページ内のブログ」とは、メインのWebサイトとは別にブログサイトを新設するのではなく、ホームページの中の1コーナーとしてブログを埋め込んで運営する方法です。

Ameba(アメーバ)ブログなどの外部サイトや、WordPress(ワードプレス)をそのまま使ったブログサイトの場合はデザインやメニュー構成がメインのWebサイトとは別建てになってしまいますが、「すぐ使えるCGI」を使う方法では、既存のホームページのデザインを変えることなく、ホームページの中にブログを埋め込んで運用できます。

「ブログ」という名称でなくても、「お知らせ」「ニュース」「運営者だより」など、定期的に記事を更新していく形式のコーナーであればこのツールが使えます。

ブログに表示できる内容

表示(書込み)できる内容は以下の通りです。

  • 日付
  • タイトル
  • 本文
  • 画像(3個までアップロード可能)
  • Facebook用サムネイル画像

登録した内容を表示する他、以下の自動表示機能があります。もちろんデザインはホームページ(Webサイト)に合わせて変更可能です。

  • 画像はクリックするときれいに拡大表示(lightBox)
  • ツイートボタン自動表示
  • Facebookいいね!ボタン自動表示

ブログツール管理機能

簡単入力

ブログ管理画面

内容を登録していくだけで、どなたでもブログが更新できます。本文にはHTMLタグも入力できるので、凝った内容の登録もOKです。

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

「いいね!」ボタンとTwitterツイートボタン

Facebook の「いいね!」ボタンとTwitterツイートボタンが自動で付きます

Facebook の「いいね!」ボタンとTwitterツイートボタンが付いています。ページの宣伝に有効です。

「いいね!」された時に指定の画像が Facebook に表示されます。

画像の lightBox 拡大表示

画像をクリックするときれいに拡大表示(lightBox)

画像をクリックすると、ページ内できれいに拡大して表示します。これは「lightBox(ライトボックス)」と呼ばれる動きですが、画像のキャプション(タイトル)も表示可能です。

また、キャプションに別のページへのリンクも含める事ができます。

デモから変更できる点

ご覧いただけるデモから、以下の点は変更できます。

  • メインページのデザイン(表示幅、画像サイズ、色、フォントなどの変更)
  • 目次ページのデザイン
  • 新着記事ページのデザイン
  • 拡大画像のサイズ指定
  • 入力項目を追加する
  • サマリー(<meta>タグの description)を手動で編集する
  • WYSIWYG HTMLエディタ(リッチテキストエディタ)を付ける

[このツールの使い方]

ご希望のデザインではありませんでしたか?

下記の他のデザインのツールもご覧下さい。

ホームページのブログに使えるこの他のツール

画像が左寄せのデザイン

画像が左寄せのデザインのブログ

サムネイル一覧から詳細ページにリンクし、詳細ページは画像が左寄せ、文章が右寄せのパターンです。

表示オンラインデモ 詳細・ダウンロード

画像を多数表示する(サムネイルを並べる)

ブログページに4つ以上の画像を表示する

画像が3つだけでなく、たくさんのサムネイル画像を並べて表示したい場合のパターンです。ツイートボタンやいいね!ボタンも追加できます。

表示オンラインデモ 詳細・ダウンロード

画像を多数表示する(メイン画像を大きく)

ブログページにメイン画像とサムネイルを掲載

たくさんのサムネイル画像をに加えて、メイン画像を大きく表示したい場合のパターンです。ツイートボタンやいいね!ボタンも追加できます。

サムネイルをメイン画像の下に並べるパターンと、右に並べるパターンに対応できます。

表示オンラインデモ 詳細・ダウンロード

レスポンシブWebデザイン(PC・スマホ対応)

レスポンシブWebデザインブログCMS

一つのHTMLページでPC、スマホ、タブレット全てに対応できる「レスポンシブWebデザイン」のブログです。

表示オンラインデモ 詳細・ダウンロード

PDFなどのファイルを表示したい

ブログにファイルをアップロードする

画像ではなく、PDFなどのファイルを掲載するパターンも可能です。「ブログ」というよりは、「IR情報」や「季節報」などを公開するイメージです。

表示オンラインデモ 詳細・ダウンロード

このツールの使い方

ダウンロードと設置

このブログ更新ツールを使うには、下記のボタンからダウンロードして設置して下さい。「すぐ使えるCGI」の「添付ファイル付 ウェブページ更新ツール 大容量版」をベースに使っています。

ダウンロードした後の設置方法は「添付ファイル付 ウェブページ更新ツール 大容量版」の「ステップ by ステップガイド」と同じです(この説明書はダウンロードしたページからリンクでアクセスできます)。

テスト登録

「ステップ by ステップガイド」の「8. 設置完了」まで進んだら、記事を2-3件登録して、デモと同じような表示になるかを確認して下さい。

ページのデザインの変更方法

基本的なデザイン変更方法

「すぐ使えるCGI」のデザイン変更は全て「テンプレート」と呼んでいるHTMLファイルの編集で行えます。1のページデザインの基本的な設定方法は「デザイン変更チュートリアル」をご覧下さい。

ただし、このページからダウンロードできるサンプルには製品の初期設定に加えていくつか追加の変更がされています。例えば管理画面はスマホ対応のレスポンシブWebデザインに変更してあり、また、lightbox(画像拡大ツール)の組み込みなどもされています。

このページでは、このツールに特有の以下の変更方法についてご説明します。

  1. 記事ページのデザイン変更
  2. 目次ページのデザイン変更
  3. ツイートボタンの設定(必ず設定して下さい)
  4. いいね!ボタンの設定(必ず設定して下さい)
  5. サムネイル画像の表示サイズを変更する
  6. 画像の拡大表示サイズを変更する
  7. 画像を掲載しない
  8. ファイルアップロード機能を使う
  9. 新着情報の組み込みとデザイン変更
  10. サマリー(<meta>タグの description)を手動で編集する
  11. 入力項目を増やす
  12. WYSIWYG HTMLエディタ(リッチテキストエディタ)を付ける

記事ページのデザイン変更

記事ページのデザインテンプレートは templates/article/article.html です。自由に変更して下さい。

このファイル内の <head>-</head>内に以下のようにCSSを使った設定がありますので、ここを書き換えていただくと幅の調整などは簡単に行えます。HTMLタグを書き換えても構いません。また、CSS 部分を別ファイルにまとめて <link> タグで指定しても問題ありません。

例えば青字部分はページの表示幅を指定しています。

<style type="text/css">
body {
	padding:  10px 30px 10px 25px;
}

/* ページのデザインに合わせて幅を決める */
.main {
	width: 800px;
	margin: 0 auto;
}

/* ソーシャルブックマークの左寄せの指定 */
.social div.widget{
	float: left;
}

/* 日付部分(右寄せ) */
.update {
	text-align: right;
	float: right;
	width: 15em;
	margin: 0;
}

:(以下省略)

変更の反映

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして表示を確認して下さい。

目次ページのデザイン変更

目次ページ(webdir/index.html)のデザインテンプレートは templates/article/article_list.html と templates/article/article_list.txt です。自由に変更して下さい。

このファイルでは、CSSを使ってマウスオーバーした時の色変更なども指定しています。詳しくはファイル内のコメントをご覧下さい。

表組にするなど他のデザインへの変更方法は下記ページをご覧下さい。

CSSで一覧に罫線やアイコンを表示する方法

変更の反映

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして表示を確認して下さい。

ツイートボタンの設定

ツイートボタンは、使う前に設置先のURLなどを指定する必要があります。 templates/article/article.html を編集して下さい。編集が必要な個所はファイル内にコメントで記載があります。

設定方法が分からない場合やボタンの大きさを変えるなどのカスタマイズ方法は、下記ページをご覧下さい。

Twitter のツイートボタンとカウント数を表示する方法

変更の反映

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして表示とボタンの機能を確認して下さい。

いいね!ボタンの設定

いいね!ボタンは、使う前に設置先のURLなどを指定する必要があります。設定は templates/article/article.html と templates/article/article_image_4.txt の2つのファイルを編集して下さい。

templates/article/article.html の編集箇所

templates/article/article.html で編集が必要な個所はファイル内にコメントで記載があります。

設定方法が分からない場合は下記ページをご覧下さい。同じ方法を使っています。

Facebook の「いいね!」ボタンと Open Graph tag を設定する方法

templates/article/article_image_4.txt の編集箇所

templates/article/article_image_4.txt にはURLが指定されている場所があります。初期設定では下記のようにダミーのURLになっていますので、青字部分を設置した書き出しディレクトリまでのURLに変更して下さい。

<meta property="og:image" content="http://www.example.com/sugu/webdir/%_d_%/%_filename_escaped_%">

変更の反映

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして表示とボタンの機能を確認して下さい。

サムネイル画像の表示サイズを変更する

記事ページ、と短い一覧(新着情報ページ)に表示されているサムネイル画像は、縦横比が異なっても指定サイズで表示されるように調整されています。このサイズを変更するには、それぞれ以下のファイル内の CSS と JavaScript 設定を変更して下さい。

変更対象ファイル

記事ページ templates/article/article.html
短い一覧(新着情報ページ) templates/article/short_list.html

変更内容

サイズ調整に使っている方法は、下記ページでご案内している方法と同じです。どこの設定を変更したらいいかは、下記ページをご覧下さい。テンプレート内にもコメントで注意書きがあります。

画像の表示サイズを揃える方法

サムネイル画像の実サイズ変更

サムネイル画像の表示サイズを大きく変更した場合、admin/admin.cgi の設定を希望のサイズに変更して下さい。詳しくは下記のページをご覧下さい。

画像の縮小をする方法

変更の反映

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。

サムネイル画像の実サイズの設定を変更した場合は、画像も再度アップロードして下さい。再アップロードすると admin/admin.cgi に設定した変更が反映されます。

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして表示を確認して下さい。

画像の拡大表示サイズを変更する

記事ページでの画像の拡大は「jQuery lightBox」という方法を使っています。拡大表示される画像が大きすぎないように調整が可能です。templates/article/article.html の末尾に JavaScript の設定がありますのでこれを編集して下さい。

詳しい設定方法は下記のページをご覧ください。

jQuery lightBox の使い方

拡大画像の実サイズ変更

拡大画像の表示サイズを変更した場合、admin/admin.cgi の設定を希望のサイズに変更して下さい。詳しくは下記のページをご覧下さい。

画像の縮小をする方法

変更の反映

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。

拡大画像の実サイズの設定を変更した場合は、画像も再度アップロードして下さい。再アップロードすると admin/admin.cgi に設定した変更が反映されます。

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして表示を確認して下さい。

画像を掲載しない

画像を使わない場合は管理画面にも表示されないように削除可能です。詳しい方法は下記のページをご覧下さい。

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

ファイルアップロード機能を使う

ベースに使用している製品「添付ファイル付 ウェブページ更新ツール 大容量版」では、添付ファイルもアップロードする事ができます。初期設定ではスタイルシート(CSS)を使って表示を隠していますので、下記例のように3つのファイルを編集して表示されるようにして下さい。

変更対象ファイル

  • 入力画面: templates/admin/2.html
  • 確認画面: templates/admin/3.html
  • 記事ページ: templates/article/article.html

入力画面 templates/admin/2.html の編集内容

青字の取り消し線部分を削除して下さい。

<div class="control-group" style="display: none;">
<label class="control-label" for="filelist">ファイル</label>
	<div class="controls">

	<!-- file list table begin -->
	<table class="filetable table-hover" id="filelist">

	<!-- current file list : generate from 2_current_file_list.txt -->
	%_current_file_list_%

	<!-- new file list : generate from 2_new_file_list.txt -->
	%_new_file_list_%

	</table>
	<!-- file list table end -->

	<button type="submit" onclick="return prepare_order4upload();" class="btn" tabindex="-1">先にアップロード</button> 
	</div>
</div>

確認画面 templates/admin/3.html の編集内容

青字の取り消し線部分を削除して下さい。

<div class="control-group" style="display: none;">
<label class="control-label" for="filelist">ファイル</label>
	<div class="controls">
	<!-- new file list : generate from 3_new_file_list.txt -->
	%_new_file_list_%
	</div>
</div>

記事ページ templates/article/article.html の編集内容

青字の取り消し線部分を削除して下さい。

<!-- ファイルの表示 -->
<ul style="display: none;">
<!-- attached files : generate from article_file.txt -->
%_file_list_%
</ul>

変更の反映と確認

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から編集を行い、ファイルがアップロードできるようになったことを確認して下さい。

新着情報の組み込みとデザイン変更

新着情報のホームページへの組み込み

新着情報ページ(短い一覧)は、Webサイトの他のページ(トップページなど)に組込んで使っていただく想定です。他のページに <iframe> を使ってページを組み込んで下さい。

同梱の toppage_sample.html にはサンプルの <iframe> がしてあります。詳しくは下記ページをご覧下さい。

新着情報を IFRAME でホームページに表示する方法

新着情報のデザイン変更

新着情報のデザインも自由に変更できます。デザインテンプレートは templates/article/short_list.html と templates/article/short_list.txt です。

表組にするなど他のデザインへの変更方法は下記ページをご覧下さい。

CSSで一覧に罫線やアイコンを表示する方法

変更の反映

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして表示を確認して下さい。

サマリー(<meta> の description)を手動で編集する

記事ページの <meta> タグの description には、初期設定では「すぐ使えるCGI」の仕組み上「サマリー」と呼ばれる項目が設定されています。これは、「記事内容」の入力欄から指定文字数を自動的に抜粋したものです。この抜粋は「新着情報」のページにも表示されています。

この内容は手動編集する事も可能です。方法は下記ページをご覧下さい。

サマリー(記事の要約、抜粋)を手動編集する方法

入力項目を増やす

「記事内容」だけでは入力欄が足りない場合、10項目まで入力欄を増やすことができます。方法は下記ページをご覧下さい。

カスタム項目(自由項目)の追加方法

WYSIWYG HTMLエディタ(リッチテキストエディタ)を付ける

「記事内容」入力欄では、HTMLタグを使った書式設定などは右クリックから行うようになっています。これをワードのようなリッチテキストエディタ(WYSIWYG HTMLエディタ)に変更する事ができます。方法は下記ページをご覧下さい。

wysiwyg HTML エディタ CLEditor の使い方

さらに詳しく