スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーサイト/--/--/-- --:--/スポンサー広告/ トラックバック(-)/コメント(-)

phpで作る簡易掲示板

phpの使えるサーバーでは
簡易掲示板が各ページに設置できます。
ページの好きなところへ

<form method="POST" action="/pinkbaby/index.php">
お名前<input type="text" name="personal_name"><br>
コメント<textarea name="contents" rows="3" cols="30">
</textarea><br>
<input type="submit" name="btn1" value="投稿する">
</form>

と書きます。
ページの拡張子は 「.php」とします。

そしてフォルダの中に 「keijiban.txt」と名付けたメモ帳を入れておくとそこに書き込まれ
コメントは投稿フォームの下に出ます。

DEMO

お名前
コメント




きょうはここまで。
phpで作る簡易掲示板/2015/01/15 09:48/php/ トラックバック(-)/ comment(0)

ホームページ作成その1 初めてホームページを作るにはメモ帳から始めます

私の環境はInternet Explorer11 (インターネット エクスプローラー11)windows8.1です。
先ず、メニューからメモ帳を選びます。

<html>

</html>


と書きます。
htmlとは HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略語だそうです。
意味はウェブページ記述のためのマークアップ言語。とのこと。
ちょっとわからないけど、まぁ良いですよね。

<html>で始まり「/」を付けた</html>
で終わります。

この中にいろいろと入れ込んでいきます。
全体図は

<html>
<head></head>
<body>
</body>
</html>


それでは
<head></head>
この中に見た目には見えない設定を書き込んでいきます。
ホームページを見ていてお気に入りに追加しようすると「名前」というところに書かれている文字列は
<title></title>
この中に入れます。

<title>私のホームページ</title>
こんな感じです。これを<head></head>
の中に入れます。


<html>
<head><title>私のホームページ</title></head>
<body>
</body>
</html>

こうなりました。

次に
<body>
</body>
の部分には実際に私たちに見えているものを入れていきます。書いてみましょう。
<body>
今日のお天気は晴れです。<br>ちょっと寒くてウォーキングに行きたくないです。
</body>


これを入れ込んだ全体図

<html>
<head><title>私のホームページ</title></head>
<body>
今日のお天気は晴れです。<br>ちょっと寒くてウォーキングに行きたくないです
</body>
</html>


これで出来ました。
<br>というのは改行ということです。

それでは保存してみます。
メモ帳の上の方にある「ファイル」をクリックして「名前を付けて保存」をクリック
例として ファイル名 test.htmll
*.txtという文字は消してください。
これで保存されているところに出来ている test.html がホームページです。
まだほかのだれも見ていないパソコンの中だけのものです。


きょうはここまで。
ホームページ作成その1 初めてホームページを作るにはメモ帳から始めます/2015/01/14 10:30/HTML作成の基礎/ トラックバック(-)/ comment(1)

fc2Blog「新しく記事を書く」ページでオリジナルアイコンの入力「ブックマークレット」を実行し別小窓からタグをコピー

fc2Blogでコメント欄に絵文字入力はstrollblogさんに教えていただいて以前やったことがあり、たくさんの掲示板にも、他社のいくつものBlogにも設置できたことがあり現在も使わせていただいています。

その時記事欄にも絵文字入力支援というスクリプトがあるとは知っていましたが、その時はしないでいました。
今回友達から頼まれてお天気アニメを作りましたので、それをBlogの記事の初めに今日の天気として挿入したくなりました。
でもコメント欄と違ってテンプレートに書き足すのではないんですよね。
記事を書くところは操作できません。

それで再びstrollblogさんのところで教えていただこうとしたところ、

「ブックマークレットを実行後、絵文字設定のリンクをクリックし、サーバーにアップロードした画像定義ファイルのURLを登録してください。 」
と言う事が全く解りませんでした。質問者の中にはこの点を質問している人もいましたが、
本当に初歩的なことらしいのですね。
「ブックマークレット」と検索していろいろなサイトで勉強させていただきました。
出ているページを英語に翻訳するとか、そのページに書かれているリンクを書き出すとかtextareaを別ページで出すもの、またそのページ内の画像を消すとか、いろいろ教わって実行できました。

記事欄にも絵文字入力支援を実際に設置したことがある方の記事も読ませていただき、その通りにやってみましが、
どうしても「新しく記事を書く」ページでブックマークレットを実行してもうんともすんともいわないんです。

多分出てきて並んでいる画像をクリックすれば記事内にタグが挿入されるらしいのですが、どうしてもできないんです。

丸二日くらい考えに考え、、クリックすれば挿入されるのでなくても、せめてコピー&ペーストでと思ったのですが、どうも別ページにならなくて同じページの上に参照ページが出てきていてそこから記事を書くページに戻れないし、消すと記事を書くページも消えてしまいます。
ファイル挿入ボタンから入れればいいんですが、なんだか気持ちが収まりません。

そこで以前ホームページで使ったことがある
<a href="Javascript:w=window.open('URL','説明,'scrollbars=yes,Width=700,Height=450');w.focus();">LINK</a>
というものをやってみました。これをHTMLで保存してみるとリンク文字が出てきますよね。それっをクリックすると、小さいウィンドウが開くわけです。
このリンク文字を右クリックすると「お気に入りに追加」というものがあったのでクリック。
そのお気に入りに入ったものを右クリックして「プロパティ」を見ると
なんと今までたくさん練習で書き込んでいたJavascriptが
Javascript:w=window.open('URL','説明,'scrollbars=yes,Width=700,Height=450');w.focus();
ともう書き込まれていて、
そのお気に入りををクリックすると見事小さな別ウインドウが現れたんです。本当にうれしかったです。

これをやって初めてブックマークレットの作り方がわかりました。
概要はリンク文字を右クリックしてお気に入りに入れ、お気に入りに入ったものを右クリックしてプロパティのURL欄に半角スペースは%20に「"」は%22に書き換え一行にしたJavascriptを張り付けると言う事でした。


お気に入りに入れる前の例にとしてyahoo!です。
 yahoo!

↑この「yahoo!」でやってみるとしたら
お気に入りに入れたもののプロパティのURL欄
Javascript:w=window.open('http://www.yahoo.co.jp/','説明','scrollbars=yes,Width=700,Height=450');w.focus();
のhttp://www.yahoo.co.jpの部分を出したいアドレスに書き換えます。

出てくる小窓には見本の画像と共に<img src="画像のアドレス" width="50" alt="画像の説明">
のように張り付けタグを書いておきコピーして記事を書くところへ貼り付けます。
このブックマークレットはgoogle chrome、firefoxともできました。
たくさんのアイコンを貼っておいて画像のプロパティからアドレスを取得してもいいですね。(^^♪
今のところこんなところです。  

きょうはここまで。
fc2Blog「新しく記事を書く」ページでオリジナルアイコンの入力「ブックマークレット」を実行し別小窓からタグをコピー/2015/01/13 21:38/ブックマークレット/ トラックバック(-)/ comment(0)

TABLEを重ねてすっきりした掛け線風なTABLEを作る

TABLEを作る時
bordertable.pngTABLE border とすると左のようなTABLE
ができます。
なぜか線が二重になっています。




先日少しTABLEをいじっているとき、TABLEの中にまたTABLEと訳が分かりませんでしたが、その訳の一つがわかりました。
TABLEを重ねることによって最初のTABLEの背景が視覚的に見えることになるんだそうです。

二重のTABLE
My Blog いつつば
検索エンジン Yahoo!,Google


見える線の太さを調整するために中側のTABLEに 「cellpadding="10" cellspacing="1"」を指定します。cellpaddingとは
padding、つまり内側に増やすスペース??、そしてcellspacingの方は線の太さがかわります。

以下はHTML

<TABLE style="margin-left : auto;margin-right : auto" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<TR>
<TD>
<TABLE style="margin-left : auto;margin-right : auto" border="0" cellpadding="10" cellspacing="1">
<TR bgcolor="#ffffff">
<TR bgcolor="#ffffff">
<TD style="border:0px solid #ccc;" bgcolor="#DCF3F7" colspan="2">二重のTABLE</TD>
</TR>
<TR bgcolor="#ffffff">
<TD>My Blog</TD>
<TD>いつつば</TD>
</TR>
<TR bgcolor="#ffffff">
<TD>検索エンジン</TD>
<TD bgcolor="#ffffff">Yahoo!,Google </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
TABLEを重ねてすっきりした掛け線風なTABLEを作る/2015/01/12 14:01/table/ トラックバック(-)/ comment(0)

横並びのDIVはウインドウサイズで変化

tebleタグでは「width:100%;」など指定が必要ですが
DIVタグ では[float:left;]で横並びさせているのに、ウィンドウサイズが狭くなれば、ひとりでに縦並びになるようです。

DEMO

1
2
3
4
5




HTML

<div class="box">1</div>
<div class="box2">2</div>
<div class="box">3</div>
<div class="box2">4</div>
<div class="box">5</div>
<br clear=left>

CSS

div.box {
float: left;
width:100px;
height:100px;
border: 1px solid #ccc;
background: #ccc;
}
div.box2 {
float: left;
width:100px;
height:100px;
border: 1px solid #ccc;
background: #fff
横並びのDIVはウインドウサイズで変化/2015/01/09 10:22/css/ トラックバック(-)/ comment(0)
前ページ | ホーム | 次ページ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。