概要
インラインフレーム「iframe」を使いますので…
2014年の「HTML5 正式勧告」と…
「XP のサポート終了」に伴う…
「古いブラウザの更新」や…
辺境サイト故に
「スパムコメント」も殆ど無くなった…
…などなども勘案して…
ブログ開設時から…
カテゴリーは準備していましたが…
もう良いだろう
…ってな感じで…
5年越しに記事にしてみました…
まぁ…コメントやリンクも…
殆どしてもらえない辺境サイトですから…
「CGI」などを使うとか…
非現実的
な事は考えずに…
レンタル掲示板を素直に使用します…
そもそも…「CGI」が…
Blogger で…
どうなのかも分かりませんしね…
レンタル掲示板を用意する
当初は「無料で広告無し」で構築していましたが…
5年という歳月には「サービス停止」などの紆余曲折がありまして…
結局のところ…安定した運営を優先して多少の広告には目を瞑り…
PV-board 無料レンタル掲示板
2016年
5月の時点で暗号化接続に未対応なのでリンクを削除
…にしました…
「画像」「フラッシュ」「YouTube動画」に対応していて…
「セキュリティ機能」は勿論ですが…「携帯掲示板は広告無し」ですし…
何より…「スタイルシート」を自由にカスタマイズ出来るのが…
カスタマイズ好きには有難いですね…
…フリーメールで登録出来ます…
まぁ…レンタル掲示板は…お好きな掲示板で問題ありません…
「PV-board」での設定
お薦めの…「PV-board」に関しては…少しだけ解説しておきます…
「CSS」用として…構築は…上記画像…「PV-board」の構造…を参照して下さい…
私の…「PV-board」での「CSS」を置いておきます…
「PV-board」での「CSS」 (クリックで CSS が開閉)
- a:link,a:visited,a:active{color:#ccc;text-decoration:none}
- a:hover{color:#fff;text-decoration:none}
- body{color:#ccc;background-color:#000;background-image:url();background-repeat:repeat;background-attachment:fixed;background-position:top left;font-size:9pt;font-family:メイリオ,Meiryo,HG丸ｺﾞｼｯｸM-PRO,'HG Maru Gothic M-PRO','MS Pゴシック',sans-serif;line-height:150%;
- scrollbar-track-color:#000;scrollbar-face-color:#000;scrollbar-shadow-color:#333;scrollbar-darkshadow-color:#000;scrollbar-highlight-color:#333;scrollbar-3dlight-color:#000;scrollbar-arrow-color:#fff}
- table,td{color:#ccc;font-size:9pt;width:480px;border:#4169e1 1px solid}
- .ftb{color:#ccc;font-size:9pt;width:430px;border:#333 0 solid}
- .tit{background-color:#333;filter:Alpha(opacity=70);opacity:.7;color:#8ac75a;font-size:10pt;font-style:italic}
- .inp{color:#ccc;background-color:#111;border:#1e90ff 1px solid}
- #it1,#it2,#it3,#it4{width:220px}
- #it5{width:430px;height:120px}
- #it6{width:270px}
- #it7{width:210px}
- #it8{width:100px}
- #it9{width:42px}
- .btn{color:#ccc;background-color:#000;border:#1e90ff 1px solid;font-size:10px;font-family:メイリオ,Meiryo,HG丸ｺﾞｼｯｸM-PRO,'HG Maru Gothic M-PRO','MS Pゴシック',sans-serif;padding:0 3px 0 3px}
- hr{color:#fff;border-width:3px 0 0 0;border-color:#4169e1;filter:Alpha(Opacity=100,FinishOpacity=0,style=2)}
- .hr{color:#fff;border-width:3px 0 0 0;border-color:#4169e1;width:480px;filter:Alpha(Opacity=100,FinishOpacity=0,style=2)}
- h1{font-size:14pt;font-style:italic;color:#f15b55}
- .img{width:160px;margin:0 5px 0 5px}
- .icn{width:45px}
- .cts{background-color:#000;filter:Alpha(opacity=70);opacity:.7;line-height:2em;padding:10px}
- .ft{font-style:italic}
ご自身の設置領域やテーマカラーにより…ご自由に弄って下さいな…
「CSS」を「プレビュー」で確認し構築してから背景画像を選択して「更新」します…
使用画像はこんな感じです…アイコンもデフォルトから変更していますが…
勿論…デフォルトのままでも問題ありません…
リピート「背景」画像「
」
アイコン「Home」画像「
」
アイコン「Mail」画像「
」
アイコン「Movie」画像「
」
アイコン「Flash」画像「
」
インラインフレーム「iframe」の設定
インラインフレーム「iframe」には…
「枠線」を記述し四隅を「角丸」にして「影」を付与しています…
インラインフレーム「iframe」の HTML (クリックで HTML が開閉)
- <iframe src="掲示板の「URL」" height="1200" width="99%" style="border:2px solid #c0c0c0;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-moz-box-shadow:0 0 15px #fff;-webkit-box-shadow:0 0 15px #fff;box-shadow:0 0 15px #fff;"></iframe>
ご自身の掲示板の「URL」と入れ替えて下さい…
領域のサイズ「height="1200"」「width="99%"」もお好みでどうぞ…
インラインフレーム「iframe」に未対応のブラウザ用の記述はしていません…
記述するには…こんな感じで…2行目を追加します…
- <iframe ( 省略 )>
- <a href="掲示板の「URL」">インラインフレーム「iframe」未対応ブラウザでの閲覧はこちらからどうぞ…</a>
- </iframe>
Blogger の表示したいページに…
インラインフレーム「iframe」を記述して完成です…
尚…
Blogger の「プレビュー」では影付きの枠線だけで…
中身は表示されませんので注意して下さい…
アレレ
…ってな事になりかねませんからね…(￣ー￣) 邪笑®
最後までお読みいただきましてありがとうございます…
掲示板は…ヘッダーのタブナビゲーションの「External」から確認出来ます…
書き込む場合は…「スレッド」は作成しないで「Res」でお願いします…
基本的に…閲覧者が作成した「スレッド」は削除します…
現在は… 暗号化接続に未対応なので「
jQuery」を読み込んでいます…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿