【無料配信♪】Renta !全タテコミ作品第1話

ホームページに「最新ニュース」の欄を設置したいのですが、
以下のような要件の場合、どのような仕組みを使うのがよいのでしょうか?

要件は、
・小さな店舗のサイトなので、記事を更新する頻度は月1回程度
・1記事は最大200文字程度で、できれば画像(1枚)も入れたい
・記事をアップする方法は極力簡単に(直接HTMLやファイルを書き換えず、
 メールや入力フォームで記事をアップする程度で)更新したい
・管理システムの導入も極力手間をかけたくない

私が思いつく方法としては、
・ブログを使って、表示はRSSで引用
・Twitter(文字数制限が140文字?)
・Facebook

SNSなど最近のことはとても疎いので、ご教示いただければと思います。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

更新する人が限られているのであれば、IEを意識することなく、HTML5/CSS3をふんだんに使えると思います。

更新者が普段IEを使っていても、ホームページ更新ソフトとしてChromeなどの先進ブラウザを使ってもらうだけですからね。

ということで、私ならPHP+HTML5+JavaScriptで実装しますね。

1.
サーバーサイドでは、あらかじめCSVを読み込んで「最新ニュース」を育成するようにしておく。
最新ニュースの量が多いようならば、DBに入れることも考える。

2.
CSV(DB)はHTMLフォームから書き換え可能にしておく。

3.
更新画面側では、HTML5のcontenteditableを使って、実際のホームページ画面上で直接編集してもらうようにする。



HTML5のcontenteditablewを使うことによって、煩わしいフォーム画面を使わずに済むので、更新者はかなり簡単に更新できると思いますよ。PHPとJavaScriptをある程度ご存知であれば、2時間もあれば実装できるもではないでしょうか。
    • good
    • 0
この回答へのお礼

大変丁寧なご回答、ありがとうございました。
HTML5にそんな便利な属性があるとは知りませんでした。
すごくシンプルで簡単そうですね。
とても勉強になりました。ありがとうございました。

お礼日時:2011/12/04 17:28

「ホームページに「最新ニュース」の欄を設置したいのですが、


以下のような要件の場合、どのような仕組みを使うのがよいのでしょうか?」

 cgiによる掲示板を設置して、そこにニュースを載せる。もしくは「PukiWiki」などで、自由に更新できる仕掛けにしておく。ただし、パスワードなどで、第3者による不正更新を防止する必要がありますが。
    • good
    • 0
この回答へのお礼

大変丁寧なご回答ありがとうございました。
PukiWikiを知りませんでした。勉強になります。
Pukiwikiについてまずは調べてみます。
ありがとうございました。

お礼日時:2011/12/04 17:31

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qホームページに「お知らせ欄」を追加したい

知人からホームページについて相談を受けました。
ホーページ作成について詳しくないので、どのような方法を使えばよいかのアドバイスをお願いします。
(このホームページは他の人に作ってもらったものですが、その人が居なくなったため相談されました。)

ホームページに下記のような機能を追加したい。

・トップページに「お知らせ欄」を設定し、閲覧者に対して連絡を行う。
 (「お知らせ欄」は数行(日付、お知らせ内容の概要)、以前のお知らせ何回分かは残しておく。)
・閲覧者はその内容を見て、詳細を知りたい場合、「詳細」等をクリックすることで「詳細内容」ページを開くことができる。
 (詳細内容ページはメモ帳の様な感じでよい。)
・管理者は何らかの方法でホームページにアクセスし、連絡内容を記述する。
・記述内容は、トップページの「お知らせ概要」と詳細内容ページの「お知らせ内容詳細」。
・内容の記述はパスワードを知っている管理者のみ実行可能。(閲覧者からの記述は無い)

・ここでの管理者は、パソコン初心者なのでなるべく簡単な方法でお知らせ内容の更新を行える様にしたい。

・現在のホームページはトップページと数枚のサブページがあり表示のみ。
・ホームページ作成のツールは「ホームページビルダー」を入手可能。
・なるべく簡単な方法で実現したい。

以上、よろしくお願いします。

知人からホームページについて相談を受けました。
ホーページ作成について詳しくないので、どのような方法を使えばよいかのアドバイスをお願いします。
(このホームページは他の人に作ってもらったものですが、その人が居なくなったため相談されました。)

ホームページに下記のような機能を追加したい。

・トップページに「お知らせ欄」を設定し、閲覧者に対して連絡を行う。
 (「お知らせ欄」は数行(日付、お知らせ内容の概要)、以前のお知らせ何回分かは残しておく。)
・閲覧者はその内容を見て、詳細...続きを読む

Aベストアンサー

サーバサイドでなんか組まないとだめだねぇ。

>・トップページに「お知らせ欄」を設定し、閲覧者に対して連絡を行う。
>・閲覧者はその内容を見て、詳細を知りたい場合、「詳細」等をクリックすることで「詳細内容」ページを開くことができる。
このあたりはデザインの問題なので、記載する時にリンクはるなりすればよいかな。
ただし・・・

>・管理者は何らかの方法でホームページにアクセスし、連絡内容を記述する。
>・記述内容は、トップページの「お知らせ概要」と詳細内容ページの「お知らせ内容詳細」。
サーバサイドスクリプトが必須。
記載内容を保存するためのシステムだね。
詳細内容へのリンクも動的に生成することになりますな。

>・内容の記述はパスワードを知っている管理者のみ実行可能。(閲覧者からの記述は無い)
認証を行って、編集するためのコントロールパネルがいるね。

少なくとも、ビルダーみたいなものじゃムリ。
(ビルダー自体がうんたらとかは触れないとして・・・)
ある程度スクリプト(プログラムみたいなもん)かけないと作れないから、初心者にはすぐには無理かなぁ。
スクリプトとしては簡単なので、PHPとかPerlとか、入門のために作るのなら向いてるとは、思う。

そんなのさっぱりわからないよ!
という感じだったら、悪いこと言わないから毎回HTML更新してアップロードしなおすほうがいいです。

サーバサイドでなんか組まないとだめだねぇ。

>・トップページに「お知らせ欄」を設定し、閲覧者に対して連絡を行う。
>・閲覧者はその内容を見て、詳細を知りたい場合、「詳細」等をクリックすることで「詳細内容」ページを開くことができる。
このあたりはデザインの問題なので、記載する時にリンクはるなりすればよいかな。
ただし・・・

>・管理者は何らかの方法でホームページにアクセスし、連絡内容を記述する。
>・記述内容は、トップページの「お知らせ概要」と詳細内容ページの「お知らせ内容詳細...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QHPのTOPページによくあるTOPIX欄を設置したいです。

お世話になっております。

今回、HPのTOPページによく設置され、社内の最新ニュースなどをご紹介するTOPIX欄を設置したいです。

TOPページにあるTOPIX欄では各TOPIXニュースの概要だけを端的にリスト掲載し、その概要文章自身をクリックすると、全文が閲覧できるページが開くといったものが作れればと思っています。

しかしながら、いろいろネットなどで調べてみたのですが、仕組みや作り方などの参考資料が発見できません…お手数おかけ致しますが、ご紹介頂けませんでしょうか。検索キーワードだけでもありがたいです。
なお、この設置をWEB制作会社様に委託すると凡そどのくらいの費用になりますでしょうか。。

何卒よろしくお願い申し上げます。

Aベストアンサー

NO.3です。

>以下のような手段なら..

更新関係は質問者さんが行っていて、それなりにHTMLの知識もあると言うことですね。
それなら、質問者さんのおっしゃるような内容でOKかと思います。

私も、おそらく他の回答者さんも、質問者さんがHTMLのことがよく分からず、しかしTOPICSのスペースを設けて更新したいと言うことだと思っていました。

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qテーブルの表示がずれます

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>

(2)行が2つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト2</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
<tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>
宜しくお願い致します。

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>...続きを読む

Aベストアンサー

こんにちは。
イマイチどうしたいのかがよく判らないので、具体的な説明を補足してください。
ソース自体は間違いではないと思いますが…。
<tr>や<td>の前にある空白はもちろん半角空白ですよね?全角だと不具合がでます。

行が増えると下に表が大きくなるのは必然ですし。
行が1行のものと、2行のものとでは、ページが違うんですよね?
もし、同じページに表示するのであれば、1ページにつき、<html>タグは一組です。(あくまでも基本的に、ですが)
これが、直接行がずれるっていうことにはならないと思いますけど…。

QCopyright (c) 年号 会社名 Co.,Ltd. All Rights Reserved.って?

会社のホームページの各ページの最後に
Copyright (c) 年号 会社名 Co.,Ltd. All Rights Reserved.ってありますよね?
どういう意味なのでしょうか?
掲載情報の著作権関係のことであるというのはわかるのですが、年号の書き方が様々ですよね。

↓このページの一番下のNTT Resonantのように・・・
Copyright (c) 2005 会社名. All Rights Reserved.という年号がひとつだけの形と、

↓その上のOK Webのように・・・
Copyright (c) 1999-2005 会社名. All Rights Reserved.と年号のところがなっている場合とがありますよね?

あと初歩的な質問ですが、英語で会社名のあとにつく、Co.,Ltd.やInc.の使い分け等も教えてください。
どなたか詳しい方、どうかよろしくおねがいします!!

Aベストアンサー

「Copyright」は著作権「(C)」は Copyright の略記号(本当は丸の中にCを書きます)
「19xx-20xx」は最初に著作権が発生した年と最終更新の年、会社名は著作権を有する会社
個人が著作権をもっている場合は個人名になります。「All rights reserved.」は
「すべての権利は著作者が持っている」という意味を示します。

日本の法律では創作物を作成した時点で、自動的に著作権が発生しますので、特にこの
表記をしなくても守られます。しかし国によっては、公的機関などによる登録を経て初めて
著作権が認められるという制度をとっている国があります。
そういう国に持ち込まれても国際条約によって、このCopyrightの書式を守った表記を
していれば著作権が保護される事になっています。

Co.,Ltd.やInc.は著作権とは関係なくて、株式会社(有限会社)が自社の名前の英語表記を
どう決めているかによって変わってきます。つまり、Co.,Ltd.までが会社名です。

Co., Ltd は Company, Limited の略
Inc. は Incorporated の略
Corp. Corporation は Corporation の略
厳密に言うと意味が違うようですが、よくは知りません。

日本の商法では、正式な株式会社の名前には、「株式会社」という文字を入れる事と
定められていますが、英語表記をどうするかは、特に決められていませんので、各会社が
自由に決めています。
最近は、Corp.やInc.が多いようで、歴史が古い会社は Co., Ltd が多いようです。

「Copyright」は著作権「(C)」は Copyright の略記号(本当は丸の中にCを書きます)
「19xx-20xx」は最初に著作権が発生した年と最終更新の年、会社名は著作権を有する会社
個人が著作権をもっている場合は個人名になります。「All rights reserved.」は
「すべての権利は著作者が持っている」という意味を示します。

日本の法律では創作物を作成した時点で、自動的に著作権が発生しますので、特にこの
表記をしなくても守られます。しかし国によっては、公的機関などによる登録を経て初めて
著作権が認め...続きを読む

Qイラストレーターに取り込んだ画像の白い部分を透明にできますか?

例えば図面などのデータがあったとした場合、その線の部分、つまり黒い部分だけを残し、残りの白紙部分を全て透明にすることはできますか?
以前フォトショップで白紙部分をDeleteして透明にし、それをtifで保存すればイラストレーターに持ってきてもその部分は透明なまま作業ができると聞いたことがあったのですが、やってみてもできませんでした。
画像の白紙部分を簡単に透明にできる方法がありましたら教えていただければと思います。

Aベストアンサー

Illustrator 上に、すでに配置されている白黒画像であれば、画像を選択して、透明を「乗算」 に変更してみてください。
画像の下のパスが、透けて見えます。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;


人気Q&Aランキング