- ベストアンサー
XOOPSカスタムブロックにHTMLを配列する方法
- XOOPSのカスタムブロックにHTMLを表示する方法についての質問です。左側にアイコンとテキストを配置し、右側にイメージ画像のアフィリエイトを配置したいとのことですが、表示がうまくいかないようです。
- 現在のソースコードを添付されており、左側にアイコンとテキスト、右側にAdSenseの広告を表示する方法を探しています。
- 質問者はHTMLの知識がなく、どうすれば実現できるか教えてほしいとお願いしています。ご指導をお願いします。
- eng_bonbon
- お礼率100% (7/7)
- その他([技術者向] コンピューター)
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
これってHTMLのファイルからコピペしたものですか？ そうだとしたらこれでCSSがきくわけ無いです まずCSSの指定は<head></head>内または別ファイルに入れて読み込む か、<p style=○>というような感じで直接入れる3パターンがあります が、あなたの書き方はどれにもはまらない、ルール違反です 次に指定の仕方自体も間違いっていうか何がしたいのかわからない。 こちらもルールとはかけ離れたことをしているので、仮に↑に 述べたことを遵守しても反映しません （ブラウザがこの命令では何を表現していいのか判断出来ない） 本当に申し訳ないのですが、一からお勉強して下さい 今回のソースを例えば私やほかの人がキレイに書いたところで 次の壁に当たったときに自分で対応出来ないなら作る意味ないです 掲示板自体の禁止事項に丸投げ禁止、という言葉があるように ある程度勉強はして、それでもわからない時にこういうケースは どうしたらいい？っていう質問を行う場であって、努力もせずに これ作って、なら業者に依頼しろよってコトになるんです なので、もう少しHTMLやCSSの基礎を学んでみて、それでもどうしても 出来ない、アドバイスがほしいってなった時に質問した方がいいですよ 最後にエスパー回答で、CSSの指定とHTMLの書き方のまとめ 上左にスペースをあけるなら marginかpaddingを使います 以下参照↓（簡略化しますので非推奨の書き方があるかもです） <style> div.rist{ /* ココにCSSの指定（ルールに沿った書き方で） */ } div.googl{ /* ココにCSSの指定（ルールに沿った書き方で） */ } </style> <body> <div class="rist"> <div> <ul type="square"> <li>test01</li> <li>test02</li> <li>test03</li> <li>test04</li> <li>test05</li> <li>test06</li> </ul> </div> <div class="googl"> <script type="text/javascript"><!-- google_ad_client = "pub-ｘｘｘｘｘｘｘｘｘ"; /* 200x200, 作成済み 09/06/15 */ google_ad_slot = "ｘｘｘｘｘｘ"; google_ad_width = 200; google_ad_height = 200; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> </div> </body> あとはCSSの勉強だけやればとりあえずそれなりにはなるはず。 頑張って下さい。（回答はラストにしますね）
その他の回答 (2)
- koke29
- ベストアンサー率58% (114/196)
前回で最後と書きましたが、随分進歩されたようで感心したので再レスです グーグルの部分、div使わないならgooglクラスはいらないので削除してもOK 参考画像のように、枠で囲みたいなら最初のアドバイス通り大きい箱を 用意して、そこにメニューとスクリプトを入れる方法か、メニューの右以外 とスクリプトの左以外にボーダーを入れて、中身はくっつきすぎないように paddingやmarginで調整ってことでもいいかと思います 私が参考に書いたコード、ulをdivに入れてますが、ulもブロック要素 なのでul自体にristクラスを指定してもレイアウトは崩れないと思います むしろulの利用がここだけってことなら、ul自体のスタイルとして 適用させるでも構わないかも HTMLもCSSも色んな書き方が出来るのでこれが正解！っていうのは あまり無いと思います 主要ブラウザでの描画チェックで問題なければおおむねOKかなと ↑はIE Firefox Opera googleクロム サファリ 辺りでしょうか スレイプニール、ルナスコープも最近多いみたいです HTML構文については構文チェックのサイトもありますので、参考URL のサイトあたりでチェックしてみて減点があったら直すといいですよ CSSの構文チェックも確かあるはずなので、探すといいかもですね 後はもう、好みの見た目になるように試行錯誤をするだけですね 思い通りのデザインになるように頑張ってみて下さいね！
お礼
koke29さん こんばんわ！ 再レスありがとうございます。 落とされた崖からはい上がって来た感じです。（笑） おかげ様で、CSS,HTMLの勉強も出来たおかげで、達成感が有ります。 最後までお付き合いして頂きありがとうございました。 残りのチェック等は地道にデザインの微調を繰り返しながらやって行こうと思います。 改めて今回のご指導ありがとうございました。 本当に助かりました。 また御縁がありましたら宜しくお願い致します。 ＞グーグルの部分、div使わないならgooglクラスはいらないので削除してもOK コピペする時に欠落してました。 ＞参考画像のように、枠で囲みたいなら・・・ XOOPSのテンプレートで自動でブロック枠が出来るので、ほぼイメージ通りの仕上がりになってます。 ＞私が参考に書いたコード、ulをdivに入れてますが・・・ 参考にさせて頂きます。
- koke29
- ベストアンサー率58% (114/196)
うーん… とりあえずHTML勉強しましょーよって感じのコードですねぇ せっかく参考にしたいサイトがあるんだから、そのサイト（YAHOO?)の この部分のソースを「とりあえず」パクって作ってみたらいいですよ ○考え方 まず、大きい箱を用意します この中に小さい箱を2つ用意します 左の箱にはテキストを入れます（listタグ使うといいです） 右の箱にはgoogleのスクリプトを入れます これをうまいこと配置出来れば完成 ↓ <div> <div> <ul><li></li></ul> </div> <div> <script></script> </div> </div> 骨組みはこんな感じ。で、これらが思い通りの場所におけるように CSSで配置や装飾をしていければいいと思います あと、タグは小文字で書きましょー
お礼
koke29さん、こんばんわ ご指導ありがとうございます。 ＞とりあえずHTML勉強しましょーよって感じのコードですねぇ 恥ずかしいかぎりです。 コードを考える時の考え方は、なるほど理解できました。 日々努力していきます。 以下本題 参考にさせて頂き、した記載のコードを作成してみましたが、動いていないみたいです。・・・（悲） まずは僕なりに複雑になるのをさけて、イメージアイコンを無くしました。 まっこの辺までは出来たのですが、どうもcssが動いて無いようです。 googlの広告は左側のtxtの下に張り付いている状態で広告イメージ上に div.googl{ top:5px; right:330px; } がtxtとして表示されます。 下記載コードの不具合等ご指導願えませんでしょうか。 宜しくお願い致します。 <style type="text/css"> div.rist{ top:3px; left:5px; } </style> <body> <div class="rist"> <div> <ul type="square"> <li>test01</li> <li>test02</li> <li>test03</li> <li>test04</li> <li>test05</li> <li>test06</li> </ul> </div> div.googl{ top:5px; right:330px; } <div class="googl"> <script type="text/javascript"><!-- google_ad_client = "pub-ｘｘｘｘｘｘｘｘｘ"; /* 200x200, 作成済み 09/06/15 */ google_ad_slot = "ｘｘｘｘｘｘ"; google_ad_width = 200; google_ad_height = 200; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> </div> </body>
お礼
koke29さん おはようございます。 ご指導ありがとうございます。 どうにかイメージ通りの配置が出来ました。 取りあえず下記載のコードで行こうかと思います。 プロさん達から見たら・・・へんてこコードかもしれないけど！ しかし難しいもんですね。 ここまで徹夜してwebで勉強しましたが、まだまだ至らぬ点が有るかと思います。 改善したほうが良いと思われる点がありましたら、ご指導願います。 ------------------------------------------------------------- <head> <style> .rist{ float:left; margin:0; margin-bottom:10px; font-size: 100%; } .googl{ width:auto; margin:0; margin-left:320px; margin-bottom:10px; } </style> </head><body> <div class="rist"> <ul type="square"> <li>test01</li> <li>test02</li> <li>test03</li> <li>test04</li> <li>test05</li> </ul> </div> <script type="text/javascript"><!-- google_ad_client = "pub-ｘｘｘｘｘｘｘｘｘ"; /* 200x200, 作成済み 09/06/15 */ google_ad_slot = "ｘｘｘｘｘｘ"; google_ad_width = 200; google_ad_height = 200; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">&a... </script> </div> </body>