ブログを書くように更新できるWebサイトをQHMで簡単に作れます。

HTML埋込機能を使ったページ例

Add to Google
a:48422 t:2 y:1

HTML埋込機能を使ったページ例

★このページでは, QHM編集モードの下方ツールバーにあるHTMLボタンを利用してHTMLのタグを挿入する方法を紹介しています。

HTMLを覚えるのがイヤで、QHMにしたという方、無理にHTMLを覚えなくても大丈夫です。
ただ、’HTMLを使ってこんなこともできますよ’という紹介です。

HTMLタグ一覧



■下方ツールバーのHTMLボタンをクリックして、指定の場所にHTMLタグを記述することができます。


枠内のおまじないをコピー&ペーストする場合の注意
コピー＆ペーストしてご利用いただく場合は、#htmlの前や最後の}}の前などに半角スペースが入ると、おまじないが表示されるだけで、機能しませんのでご注意ください。

Googleカレンダーの表示（埋め込み）

◆Googleカレンダーや、Yahooカレンダーを自分のサイトに表示させる方法

Googleカレンダーは、#formzプラグインでは、表示できないので、HTMLボタンをクリックして、<iframe>タグを利用した埋め込みの方法で表示させてみました。

★Googleカレンダーは、下記のURLで、サイトのサイズ変更が、簡単にできます。
★QHMでは、サイドメニューがあるので、コンテンツ部分の幅は、550pxの指定にすると、ほぼ横幅いっぱいで表示されます。
　↓　↓　↓　
http://www.google.com/calendar/embedhelper?src=a8pecnn6qafc21kfighpa6a1io%40group.calendar.google.com&ctz=Asia/Tokyo


記述したおまじないは、こちら　↓　↓

#html{{
<iframe src="http://www.google.com/calendar/embed?height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=a8pecnn6qafc21kfighpa6a1io%40group.calendar.google.com&amp;color=%230D7813&amp;ctz=Asia%2FTokyo" style=" border-width:0 " width="550" height="400" frameborder="0" scrolling="no"></iframe>
}}


コピー＆ペーストの際は、#html や{{ }} の前後に、
半角スペースを入れないようご注意ください。

テキストを点滅させる方法

①ＣＳＳを使う方法

【サンプル】

このテキストは、ブラウザfirefoxでは点滅しますが、ＩＥは非対応です。


◆記述したおまじないはこちら　↓

#html{{
<p style="background-color:#99cc00;text-decoration:blink;">
このテキストは、ブラウザfirefoxでは点滅します。</p>
}}

※この方法は、firefoxでは機能しますが、IEやsafariでは、非対応のようです。
その他のブラウザでは、確認できていません。

②JavaScriptを使う方法

※この方法も、firefoxでは機能しますが、IEやsafariでは、非対応のようです。
その他のブラウザでは、確認できていません。


◆記述したおまじないはこちら↓

#html{{
<p style="background-color:#99cc00;">
<script type="text/javascript">
<!--
document.write("ここの文字を点滅させます。" .blink());
-->    
</script></p>
}}



③HTMLで点滅させる方法

※この方法も、firefoxでは機能しますが、IEやsafariでは、非対応のようです。
その他のブラウザでは、確認できていません。

ここの文字が点滅します。

◆記述したおまじないはこちら↓

#html{{
<p style="background-color:#99cc00;">
<blink>ここの文字が点滅します。</blink></p>
}}


上記①～③までの記述方法は、blink を利用しているため、
Windowsの標準ブラウザ　インターネットエクスプローラ（IE）では、機能しませんのでご注意ください。


IEで点滅させるには。。。

W3Cでは非推奨ですが、<marquee>タグの応用で点滅しているように見せる方法を見つけました。
ソースの紹介サイトはこちら　↓
URL：http://happytown.orahoo.com/phphope/tags/marquee.html

IEでテキストが点滅

背景を設定しない場合。

IEでテキストが点滅



◆記述したおまじないはこちら↓

#html{{
<p style="background-color:#99cc00;">
<MARQUEE SCROLLDELAY="300" SCROLLAMOUNT="250"  WIDTH="300">IEでテキストが点滅</MARQUEE></p>
}}
※ <p style="background-color:#99cc00;">の記述は、背景の指定です。#99cc00を変更することで、背景色を変更できます。
※ 300、250、300の数字を変更することで、動き方を変更できますので、色々と試してみてください。


最新更新情報をテキストＢｏｘ内に表示させる方法

【サンプル】



記述したおまじないはこちら　↓
　

#html2(<div style="margin:0px;padding:0px;"  align="center"><div style="margin:0px;padding:0px;line-height:1.3;background-color:#FFFFFF;"><div style="margin:0px;padding:5px;line-height:1.3;overflow:auto;border: 3px ridge #000000;color:#000000;text-align:left;height:8em;">)

#recent(10)

#html2(</div></div></div>)



① #html2( )の( )内に記述するＨＴＭＬタグは、改行・スペースなしで記述してください。

②#html2()と#html()の間に、表示させたい内容を記述します。⇒おまじないを使えます。
今回は、更新情報を表示させる#recent( )というおまじないを記述しました。

③最後の#html2()の()内には、最初のＨＴＭＬタグの終了タグを、一行で、記述しています。

※注意１※　#recent()の()内には、表示させたい件数を半角数字で記述してください。

※注意２※　スクロールＢＯＸの高さの指定は、最初のＨＴＭＬタグ内のheight:[]em;　の[]の数字部分で記述しています。

※注意３※　スクロールはAUTOの設定ですので、デフォルトで指定したBOXの高さよりも、情報が少ない場合は、スクロールバーは表示されません。


プルダウン機能を利用する



こちら＞＞http://homepage2.nifty.com/yoshi-m/makehp/javascript/source/form/4.htm
のサイトに紹介されている内容を試してみました。

サンプルは、メニューバーに設置しましたので、動きの確認は、メニューバー最上部にあるプルダウンBoｘで確認できます。

ビジュアルサンプルはこちら↓

使用しているスクリプト　⇒　Javascript



◆head内に記述したJavascriptは下記です◆
※設定画面で、その他のタグのところに記述してください。

<SCRIPT TYPE ="text/javascript">
<!--
//リンク先へ
function go(){
 　if(document.myform.myselect.options[document.myform.myselect.selectedIndex].value){
       location = document.myform.myselect.options[document.myform.myselect.selectedIndex].value;
   }
}
//-->
</SCRIPT>


◆プルダウンメニューを配置したいページに記述するスクリプト◆

#html{{
<FORM name="myform">
   <SELECT name="myselect">
       <OPTION style={background-color:#ccffcc;} selected>  タイトル
       <OPTION value="URL1">リンク表示名１
       <OPTION value="URL2">リンク表示名２
       <OPTION value="URL3">リンク表示名３
       <OPTION value="URL4">リンク表示名４
    </SELECT>
<P>
<INPUT type="button" value="GO!" onClick="go()">
</FORM>
}}

※"URL" 部分には、リンクさせたいURLを記述してください。
※リンク表示名１～４には、表示させたいテキストを記述してください。
※同じサイト内のURL指定は、別ウィンドウにはなりません。


スクロールバー付BOXをつくる



テキストや画像をスクロールさせる


テキストをスクロールできます。

記述方法

①HTML埋め込みボタンをクリック。

②記述したコードはこちら　↓

#html{{ <marquee>ここに、スクロールさせたいテキストを記述してください"</marquee>
}}


テキストをスクロールできます。背景色も同時に指定すると、こうなります。

記述方法

①HTML埋め込みボタンをクリック。

②記述したコードはこちら　↓

#html{{ <marquee bgcolor="#00ff00">ここに、スクロールさせたいテキストを記述してください"</marquee>
}}

※背景色の#00ff00は、RGBの16進数での表記方法です。

※テキストの大きさを変更するには？？？

ここに記述したテキストはおまじないでフォントサイズを変更できます。

◆記述したおまじないはこちら↓

#html2(<marquee bgcolor="#00ff00">)
&size(21){ここに記述したテキストはおまじないでフォントサイズを変更できます。};
#html2(</marquee>)

■テキストの替りに画像をスクロールすることもできます。

画像

記述方法

①簡単画像アップローダーでスクロールさせたい画像をアップロードする。

②HTML埋め込みボタンをクリック。

③記述したコードはこちら　↓

#html{{ <marquee><img src="ここに、スクロールさせたい画像のパスを記述してください"/>)</marquee>
}}


※HTMLのリファレンス本を見ながら書いていたら成功しましたので紹介します。

※リファレンス本によると、ブラウザNetscape6.2には対応していないようです。


JavaScriptを使った方法



記述したコードはこちら
　　　↓　↓　↓

#html{{
<SCRIPT LANGUAGE="JavaScript">
<!--
msg = "　　　こんにちは。ここに好きな文字を表\示できます。 表\示の間に'\バックスラッシュ'を、文字化けを防ぐために記述しています。　" 
time = 300
function scroll(){
      msg = msg.substring(1,msg.length) +   msg.substring(0,1)
      document.indicator.box.value = msg
      tid = setTimeout("scroll()",time)
}
       document.write('<FORM name="indicator"><INPUT TYPE="text" SIZE="85" NAME="box"></FORM>')
       scroll()
</SCRIPT>
}}

※　<marquee>タグは、W3C非推奨タグであるとの指摘をいただきましたので、調べてみました。

※　JavaScriptについては、通常は、外部ファイルを参照させて利用することの方が多いとおもうので、上記のような記述は、別の意味で、あまり汎用性がないとは思いますが、参考までに。。。

※　来月から、Ajaxのクラスを受講することにしたので、少しずつですが、またご紹介できる内容をふやしていきたいと思います。


YouTubeの動画を埋め込む



YouTubeのお気に入りの動画を埋め込んでみました。
（この動画は、私が撮影したものではありません。）

このサイトは、ロリポップのレンタルサーバーを利用していますので、動画のアップロードはできません。
でも、YouTubeにアップしてHTMLタグを埋め込むことで、自分のサイトに動画を表示させることができます。

記述方法

①下方ツールバーのHTMLボタンをクリック

#html{{
(ここにHTMLタグを貼り付ける)
}}

　　　
②ページの更新ボタンをクリック

たったこれだけの作業です。

簡単ですよね！

インラインフレーム内に別のサイトを表示する


例1


記述方法

①下方ツールバーのHTMLボタンをクリック
②記述した内容はこちら　↓

#html{{
<IFRAME src="http://から始まる表示したいURLを記述"
name="表示中のサイト名など_iframe" width="550" height="400"  frameborder="0" scrolling="AUTO">
</IFRAME>
}}


カーソルの動きに合わせて動く猫



参考ページはこちらをご覧ください。

これは、Javascriptを利用して動かしているのですが、
このサイトから>>　Auto LOGO >> オートロゴへ 素材と設置コードをいただきました。

設置方法

●まず、JavascriptをHeadタグ内に記述する必要があります。

注意

QHM本体への設置は、ブラウザIE8ではきちんと表示されましたが、FireFox3.5（最新版）では、表示されませんのでご注意ください。

記述したスクリプトはこちら。

※かなり長いスクリプトなので、こちらからコピー＆ペーストしづらいようでしたら、元サイトからどうぞ　＞＞　http://www18.big.or.jp/~neon2/JV_SCRIPT/jv_sozai.html#Anchor339985

●それから、使用する画像のアップロードをします。

３、画像をフォルダごとFTPでQHMがインストールされている同じ階層にアップロードする。

４、設置したいページに下記を記述する

#html{{
<script language="javascript">
window.onload=nekostart();
</script>
}}

４を記述する場所は、一番上でも一番最後でも、どこでも大丈夫なようです。

※ただし、４のコードは設置したいすべてのページに記述しないと
’猫はいるのに動かない。。。’という状態になってしまうようです。

このサイトはロリポップサーバーを利用しています。
サーバーによる違いがあるかどうかは不明です。

QHM本体への設置は、Head内にスクリプトの記述が必要です。
現在、確認をしたところ、下記のような結果になりました。

ブラウザバージョン動作状況
IE8.0問題なく表示
FireFox3.5動作しない
safari3.2動作しない

（管理人より）

このサイトでは、FireFoxで見ていただいているユーザー様が、
約4/1もいるので、上記の方法は、使用していません。

HOMEと更新履歴ページで表示させていますが、
これは、HTMLファイルを別で作成して、FTPで、でアップロードしてから、インラインフレームで表示させていますので、QHMの良さが半減してしまうので、あまりおすすめではありません。

Javascriptの内容を書き換えれば、実現可能かもしれません。

何かアドバイスのある方は、ご遠慮なく掲示板・下記のコメント・お問い合わせよりご連絡ください。よろしくお願いします。

選択肢 投票
役に立った 39  
まあまあかな？ 0  
問題外 1  



このページに関するコメントはこちらへ
　↓　↓　↓


認証コード(3804)
  • <marquee>はW3C非推奨なので、オススメしないほうが良いと思います。同じ動作はjavascriptで実現できるのでそちらを公開してみてはいかがでしょう？ -- 通りすがり 2009-07-10 (金) 12:31:59
  • コメントありがとうございます。Javascript勉強します。　 -- 管理人 2009-07-11 (土) 00:01:49
  • maruちゃんカワユス！　javascriptのカーソル追いかけ猫は、リンク先の説明読んだのですが、設置するページも同じディレクトリ内に入れるようにとありますね。そこら辺のパスが違うのではないでしょうか。フォルダ内に設置したhtmlページだとFirefoxでも動くわけですし。実際に試してみたわけではありませんが、javascriptは動くのとダメなのありますね。またユーザーフォーラムでお会いしましょう！ -- jun 2009-08-27 (木) 21:27:38
  • Jun様　コメント　大変ありがとうございます。　まだまだ勉強不足を実感している今日この頃。こちらこそQHMフォーラムでお世話になると思いますので、よろしくお願いします。 -- 管理人 &new

powered by Quick Homepage Maker 4.25
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional