大至急！HPビルダー16の専門家に質問

前へ 次へ
このQ&Aのポイント
  • HPビルダー16の専門家に教えてほしいことがあります。自分でやっていてわからない部分があるため、教えていただけると助かります。
  • フルCSSで作成したHPの左のサイドメニューのリストの画像と位置を変更しましたが、リストメニューのテキストがリンク先に飛ばせなくなりました。どうすればよいでしょうか？
  • 変更前のページのタグと変更後のタグを添付しました。どちらから言えば良いのかわからないので、もし必要があれば追加のタグを教えてください。
回答を見る
  • ベストアンサー

大至急！！ＨＰビルダー16の専門家の方教えて下さい

自分でやっていてどうしてもわからなくて そこさえわかればＵＰできるのですが 大至急で教えてほしいのです。 フルＣＳＳで作成しました。 左のサイドメニューのリストの画像を変更、位置も変えました。 そうしたら 元々、リストメニューのテキストがリンク先に飛ばせるようになっていたのですが それができなくなりました。 テキストの一行下の行でないと リンク先ページにいけないのです。 そこにはweb上にはなんの文字もないので そこにリンクが張ってあることが全くわからないのです。 何の変更もしていないページのタグをコピーして 貼り付けてもだめです。 どうすればよいのでしょう？ ちなみに ●変更前のページのタグ <div id="hpb-nav"> <h3 class="hpb-c-index">ナビゲーション</h3> <ul> <li id="nav-toppage"><a href="#"><span class="en">top&nbsp;page</span><span class="ja">トップページ</span></a> <li id="nav-item"><a href="#"><span class="en">item&nbsp;list</span><span class="ja">商品一覧</span></a> <li id="nav-order"><a href="#"><span class="en">order</span><span class="ja">ご注文方法</span></a> <li id="nav-shop"><a href="#"><span class="en">shop&nbsp;info</span><span class="ja">ショップ案内</span></a> <li id="nav-campaign"><a href="#"><span class="en">campaign</span><span class="ja">キャンペーン</span></a> </ul> </div> <!-- navi end --><!-- aside --> <div id="hpb-aside"> <div id="ranking"> <h3>メニュー</h3> <ol> <li class="r01"><a href="#">商品名商品名商品名</a> <li class="r02"><a href="#">商品名商品名商品名</a> <li class="r03"><a href="kounenki/html">商品名</a> <li class="r04"><a href="kounenki/html">商品名</a> <li class="r05"><a href="hiesyou.html">商品名</a> </ol> </div> <div id="banner"> <h3 class="hpb-c-index">バナースペース</h3> <ul> <li><a href="#" id="banner-sale">SALE</a> <li><a href="#" id="banner-present">プレゼント</a> <li><a href="#" class="banner-magazine">メルマガ登録</a> <li><a href="#" id="banner-rss">RSS</a> </ul> </div> ちなみに(li class)は最初は(li id])でしたが変更しました。 ●変更後(鍼灸院のＨＰ) <div id="ranking"> <h3>施術科目</h3> <ol> <li >肩こり腰痛<a href="file:///F:/builder/katakoriyoutuu.html">駅前で人気　オススメ　頭痛　肩こり　腰痛　</a> <li >頭痛<a>商品名商品名商品名</a> <li >アトピー<a href="file:///F:/builder/atopi-.html">　駅前で人気　オススメ　</a> <li>不妊症<a href="#">商品名商品名商品名</a> <li >自律神経失調症<a href="#">商品名商品名商品名</a> <li >不眠症<a href="#">商品名商品名商品名</a> <li >美顔はり<a href="#">商品名商品名商品名</a> <li >女性の気になる症状<a href="#">女性の気になる症状</a> <li >耳つぼダイエット<a href="#">商品名商品名商品名</a><br> </ol> </div> どうしても知りたいので もっとタグが必要ならおっしゃってください。 こちらもどこからいえばいいのかまったくわからないので。 よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • einn
  • ベストアンサー率37% (671/1802)
回答No.2

No1の回答者です。補足有難うございます。 ただ、検証した限り特にクリック範囲が狂うような事はないですね。 IE、グーグルクローム共にクリック範囲は正常です。 これ以外に、同一ページ内でタグそのものにCSSを反映させてませんか？ p全部とか、a全部とか、body全体とか。 あと多分、頂いたHTMLソースとCSSソースは、一部ですよね？ 表示がおかしい、という所だけのソースを抜粋したものだと思います。 何カラムのデザインか判りませんが、他にもヘッダメニュー部分や、 メインコンテンツや下部メニューなんかも同一ページにあると推測します。 じゃないと、このリストメニューで使われていないCSSが 含まれていることの説明がつきませんし。 このリストメニューを単体で動作させる限りは、別に異常がないようです。 ということは、それ以外のソースが干渉しているという事でしょう。 残念ながら、部分的にソースを頂いても判らない問題のようです。 1ページ丸ごとのHTMLとCSSが必要な様ですね。 そうはいってもまるまるここにUPするのは気が引けるでしょうから、 可能性としていくつか提示しますから確認してみて下さい。 考えられることは、他の要素との横幅縦幅が干渉している可能性と、 閉じタグを忘れたaやdivやspanが周囲に潜んでいる可能性ですね。 displayやfloatやclearがどこかのCSSで不適切、という可能性も十分にあります。 この二つの要素は隣り合っている要素と干渉しまくりますから。

maki9091
質問者

補足

指導くださるなら全く気が引けるところではありません。 CSSのタグは必要ならまた数時間後にお伝えできます。 サイトのタグです。 多いので2つに分けます <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="Keywords" content="　更年期　冷え症　生理不順　生理痛　自律神経失調症　美容はり　"> <meta name="Description" content="　女性が安心できる評判の鍼灸院　女性の健康管理お任せください"> <title>　女性に評判　【トップページ】</title> <link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts"> <link rel="stylesheet" href="container_8Eb_2c_top.css" type="text/css" id="hpbcontainer"> <link rel="stylesheet" href="main_8Eb_2c.css" type="text/css" id="hpbmain"> <link rel="stylesheet" href="user.css" type="text/css" id="hpbuser"> <meta name="google-site-verification" content="TWFIfp4YxHrxZRTgEZx1JnuhfT4tMNThbCl8DG_4mDI" /> </head> <body id="hpb-template-08-05b-01" class="hpb-layoutset-02"> <div id="hpb-skip"><a href="#hpb-title">本文へスキップ</a></div> <!-- container --> <div id="hpb-container"> <!-- header --> <div id="hpb-header"> <div id="hpb-headerMain"> <h1>　摂津　高槻　等北摂全域から多数来院されています。</h1> </div> <div id="hpb-headerLogo"><a href="#" style="background-image : url(logo_8Eb1.png);"></a></div> <div id="hpb-headerExtra1"> <p class="tel"><span>電話でのお問い合わせは</span>072-629-1665</p> <p class="mail"><a href="http://form.os7.biz/f/4349fac5/">メールでのお問い合わせはこちら</a></p> </div> <div id="hpb-headerExtra2"><img src="image6.jpg" width="221" height="45" border="0" alt="受付時間　"></div> </div> <!-- header end --><!-- inner --> <div id="hpb-inner"> <!-- wrapper --> <div id="hpb-wrapper"> <!-- page title --> <div id="hpb-title"> <h2><span class="ja">30～50代の頑張る女性を応援します！！</span><span class="en"></span></h2> </div> <!-- page title end --><!-- main --> <div id="hpb-main"> <div class="hpb-parts-cnt-01 hpb-parts-cnt-style clearfix"> <h3>自分のこと後回しの、頑張り屋のお母さん その症状、ほっといて大丈夫ですか？</h3> <br> <br> <br> <img src="images/sympton_img11.gif" width="163" height="124" border="0"><img src="images/sympton_img15.gif" width="113" height="169" border="0"><img src="images/sympton_img14.gif" width="140" height="189" border="0"><img src="images/sympton_img09.gif" width="132" height="138" border="0"><br> <div class="hpb-parts-cbox-01 hpb-parts-cbox-style clearfix"><br> <br> <br> <br> <img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt="女性安心　更年期　冷え症　生理不順　自律神経失調症　美容はり">よくイライラするようになってきた<br> <br> <img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt="女性安心　更年期　冷え症　生理不順　自律神経失調症　美容はり">お買い物が面倒で、食事も作りたくない<br> <br> <img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt="　女性安心　更年期　冷え症　生理不順　自律神経失調症　美容はり">無理がきかなくなってきた<br> <br> <img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt="　女性安心　更年期　冷え症　生理不順　自律神経失調症　美容はり">朝起きて疲れが取れていない<br> <br> <img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt="　女性安心　更年期　冷え症　生理不順　自律神経失調症　美容はり　">物忘れが出てきた　　　　　　　　　　　　　<br> <br> <br> <img src="images/image10.jpg" width="250" height="250" border="0"><br> <br>

その他の回答 (1)

  • einn
  • ベストアンサー率37% (671/1802)
回答No.1

ん…？ようは、リスト本文にはリンクのクリック判定が無く、 リストの下の空白スペースに謎のクリック判定がある、ということですか？ 今、変更後のHTMLをこちらのIEとグーグルクロームで検証しましたが、 リンクの範囲は普通に反映されておりますよ？ 変なところにリンクのクリック判定があるとか、そんなことも無いです。 なぜ私と貴方の結果が違うかおわかりでしょうか。 それは、貼られたソースだけではCSSの【内容】が書かれていない為、 本当の意味での動作検証が出来ないからです。 CSSの内容が書かれていないので、 私のブラウザではHTMLのみで検証することになります。 class名やid名だけでCSSが出来ていると思われているなら大間違いです。 HTMLだけで動かした場合にリンク範囲に異常が無いということは、 貼られたHTMLソースには問題が無いという事になります。 いや細かいことを言えば<li>タグにちゃんと終了タグ書こうよとか、 何でFドライブ内を指定した内部アドレス書いてあるんだろとか色々あるんですが、 現状問題があるのはCSSで間違いないでしょう。 <a>で囲んである範囲がリンク範囲になる、というのは鉄則です。 これはソースで守られていますし、普通に表示が出来るはずなんです。 それを邪魔しているのは、CSSの内容でしょうね。 あなたは質問に当たってミスをおかしました。 それはここに載せたソースがHTMLだけなので、これ以上回答ができない、という事です。 CSSのソースを貼って頂ければアドバイスのしようもあるんですが。

maki9091
質問者

補足

知識不足で不愉快な思いをさせて申し訳ございません。 それでも、きちんとご指導いただき ありがとうございます。 ＣＳＳのソースは以下です。 これで具体的なアドバイス頂けるでしょうか？ #ranking { background-color: #eaffc8; border: 1px solid #a5df45; } #ranking h3 { text-align: left; color: #ffffff; font-size: 1em; line-height: 26px; margin-top: 0; margin-bottom: 0; padding-left: 5px; height: 26px; background-image : url(rankingBg_8Eb.png); background-position: left top; background-repeat: repeat-x; } #ranking img.new { float: left; margin-top: -10px; margin-right: 0; } #ranking ol { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 10px; padding-right: 5px; padding-bottom: 0; padding-left: 5px; list-style-type: none; } #ranking li { display: block; border-top-width: 1px; border-top-style: solid; border-top-color: #b1dd6c; padding-top: 5px; padding-bottom: 4px; text-align: left; padding-right: 5px; padding-left: 35px; line-height: 2; } #ranking li:first-child { border: none; } #ranking li img { vertical-align: text-top; } #ranking li#r01 { background-image : url(rankingNum_8Eb_01.png); background-position: left top; background-repeat: no-repeat; padding-bottom: 20px; } #ranking li#r02 { background-image : url(rankingNum_8Eb_02.png); background-position: left top; background-repeat: no-repeat; padding-bottom: 20px; } .ranking li#r03 { background-image : url(rankingNum_8Eb_03.png); background-position: left top; background-repeat: no-repeat; padding-bottom: 20px; } .ranking li#r04 { background-image : url(rankingNum_8Eb_04.png); background-position: left top; background-repeat: no-repeat; } .ranking li#r05 { background-image : url(rankingNum_8Eb_05.png); background-position: left top; background-repeat: no-repeat; }

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • ホームページビルダー15 メニュー作成について

    いつもお世話になっております。 以下のような、どなたかのご回答をもとに、ホームページビルダー15で同じような折りたたみ式のメニューを作成したいと考えおります。 参考にしたいメニューはこちらです↓ http://okwave.xrea.jp/jquery/test6797636/e.html ですが、自分の作ろうとしているメニューはCSSプロフェッショナルテンプレートの「企業」から作ったものであり、なかなかうまくいきません。 以下、自分の記述を記載いたしますが、以下のようにしたいと思います。 通常は、 メニューA メニューB メニューC というように、なっており、メニューBをクリックしたときにだけ メニューA メニューB 　　B-1 　　B-2 　　B-3 メニューC と、サブメニューが表れ、メニューBをクリックするまでサブメニューも表示されたままにしておきたいと思います。（もちろん、メニューA～Cも、どのページでも表示されるようにする） どこに、どのように記述を入れれば、ボタンのデザインなども崩さず、思い通りのメニューになるのか、ご教示いただければと思います。 どうぞよろしくお願いいたします。 *********自分の記述（ヘッダー情報も含まれていますが無視してください）*********** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 15.0.8.0 for Windows"> <title>TOP</title> <link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts"> <link rel="stylesheet" href="container_1A_2c_left.css" type="text/css" id="hpbcontainer"> <link rel="stylesheet" href="main_1A_2c.css" type="text/css" id="hpbmain"> <link rel="stylesheet" href="user.css" type="text/css" id="hpbuser"> </head> <body id="hpb-template-01-01-02" class="hpb-layoutset-02" bgcolor="#ffffff" background="blue_p7b.gif"> <div style="top : 2px;left : 100px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"> <div id="hpb-container"> <!-- header --><br> <!-- header end --><!-- inner --> <div id="hpb-inner"> <!-- wrapper --> <div id="hpb-wrapper"><!-- main end --> </div> <!-- wrapper end --><!-- navi --> <div id="hpb-nav"> <h3 class="hpb-c-index"></h3> <ul> <li id="nav-toppage"><a href="a.html"><span class="ja">メニューA</span><span class="en">TOP&nbsp;PAGE</span></a> <li id="nav-concept"><a href="b.html"><span class="ja">メニューB</span><span class="en">CONCEPT</span></a> <li id="nav-service"><a href="c.html"><span class="ja">メニューC</span><span class="en">SERVICE&amp;PRODUCTS</span></a> </ul> </div> </div> </div> </div> </body> </html>

  • タグを切り替えるJavaScriptについて

    下記のurlを参考にして、タグを切り替えるJavaScriptを使いレイアウトをしています。 http://archiva.jp/web/javascript/tab-menu.html やりたいことは各内容をIDセレクタでくくりたいのです。 <div id="page1"> 　<h2>page1</h2> 　<p>パンクズ</p> 　<div class="nav"> 　　<ul id="tab"> 　　　<li><a href="#page1"><span>page1を選択中</span></a></li> 　　　<li><a href="#page2"><span>page2</span></a></li> 　　　<li><a href="#page3"><span>pave3</span></a></li> 　　</ul> 　</div> 　<p>段落１</p> </div> <div id="page2"> 　<h2>page2</h2> 　<p>パンクズ</p> 　<div class="nav"> 　　<ul id="tab2"> 　　　<li><a href="#page1"><span>page1</span></a></li> 　　　<li><a href="#page2"><span>page2を選択中</span></a></li> 　　　<li><a href="#page3"><span>pave3</span></a></li> 　　</ul> 　</div> 　<p>段落１</p> </div> ...page3 このようにやりたいのですが、JavaScriptがIDセレクタの"tab"にしか対応していないため、他のページにいくとクリックが効かなくなってしまいます。 idセレクタをclassセレクタに設定し直してもidセレクタにしか対応していないため効きません。 tag2とtab3に対応させるためにはどのようにすればいいでしょうか。 よろしくお願いします。

  • ＨＴＭＬ、ＣＳＳ

    ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ　ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP"> <!-- ページ全体　 --> <div id="page"> <!-- ヘッダー --> <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div> <!-- メニュー --> <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div> <!-- コンテンツ --> <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div> <!-- フッター --> <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • 複数トリガーで動作するアコーディオンメニュー

    お世話になります。 シングルページでページ内リンクでコンテンツ移動するタイプのページ作成を現在やっているのですが、急に標題の内容の要望が急ぎ対応として来まして、困っております。 具体的に言うと、 通常アコーディオンメニューは、 隠してある部分の見出しなんかをトリガーにして、開閉して内容を表示・非表示させると思いますが、今回要望としてあるのは、 グローバルナビもそのトリガーにしたいということです。 グローバルナビをクリックすると、該当箇所に移動しつつ、普段見出しだけで内容が隠してあるものも展開されるということができればと思っております。 参考までにコードを記載しておきます。 js部分 //accordion $('#sub01 h4').click(function() { $(this).toggleClass("open").next("div").slideToggle(); }).next().hide(); // drop down $("#nav li.drop").hover(function() { $(this).children('ul').show(); }, function() { $(this).children('ul').hide(); }); }); <div id="nav"> <ul class="clear"> <li><a href="#menu1">メニュー１</a></li> <li class="drop"><a href="#menu2">メニュー２<span>▼</span></a> <!-- InstanceBeginEditable name="planList" --> <ul> <li><a href="#sub01">サブ1</a></li> <li><a href="#sub02">サブ2</a></li> </ul> <!-- InstanceEndEditable --> </li> <li><a href="#menu3">メニュー3</a></li> <li><a href="#menu4">メニュー4</a></li> </ul> </div> ------省略-------------- <div id="sub01" class="subcontent"> <h4><span>項目名</small></span></h4> <div class="sub01Inner clear"> 内容内容内容</div><!-- /planInner --> </div><!-- /planBox -->

  • リストタグ以外でfloatしたものをセンター寄せに

    下記のようにHTMLを組みました。 「.footerNav」を「float:left」して横並びにした上でセンター寄せをしたいと思いました。 しかし何をどうやってもセンター寄せになってくれません。 ちなみに各「div class="footerInner"」の幅設定はしません。 <footer> <nav> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> </nav> </footer> 調べて見ると、<div class="footerInner">～</div>の単体であれば、 センター寄せができる手段はありました。 <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> しかし自分のはリストタグではなく、divタグをフロートしたもの。 リストタグではないものを「float:left」してセンタリングは可能なのでしょうか？ 何度かこの手のことにはまって、その度にいろいろな手段を試したり検索していたのですが、 検索しても見つからず、結局出来たためしがありません。 それで今回は投稿させていただきました。 ご存知の方いらっしゃいましたらご教授いただければ幸いです。

    • ベストアンサー
    • CSS
  • cssで背景を重ねることができるのでしょうか？

    CSSでナビゲーションバーを作っていますが、ナビゲーションバーのボタンの一つ一つを背景画像であらわしています。ナビゲーションバー全体の背景にまた違う画像を表示させたい（ボタンが途切れた後ろにも画像があるように）のですが、そういうことは可能なのでしょうか？ちなみにＨＴＭＬは <body> <div id="navigation"> <div> <ul> <li class="linkhome"><a href="/"><span>Home</span></a></li> <li class="linkkaisha"><a href="/"><span>kaisha</span></a></li> <li class="linkdoituriq"><a href="/"><span>doituriq</span></a></li> <li class="linkwine"><a href="/"><span>wine</span></a></li> <li class="linkchugoku"><a href="/"><span>chugoku</span></a></li> <li class="linkotoiawase"><a href="/"><span>otoiawase</span></a></li> </ul> </div> </div> </body> </html> という感じで、最初のdivにz-index2を次のdivにz-index1を指定したらできると思ったのですが、表示はナビゲーションバーの後ろに表示させたい画像がまず表示され、その下にナビゲーションバーが表示されます。 重ねて表示するのはどうすればいいのでしょうか？ 質問が分かりづらくて申し訳ございません。どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • トップページの横幅を画面いっぱいに表示させたい。

    トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/ｘｘｘ.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }

    • 締切済み
    • CSS
  • wordpressの個別投稿ページのリンク

    解説書を読みながらwordpressを使ってホームページの作成をしているのですが、 CSSフレームワークの種類などで躓いて、 ある部分は本のコード、ある部分は解説サイトのコードを貼り付けて進めていたのですが、 個別投稿ページの項でわからなくなってしまいました。 サイトのトップページから個別投稿ページにはどこをクリックすれば辿り着けるのでしょうか。 ↓header.phpの内容です <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; --> <title>たいとる</title> <nav class="navbar navbar-inverse navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><?php bloginfo('name'); ?></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="/news">お知らせ</a></li> <li><a href="#">記事一覧</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <?php wp_head(); ?> </head> ↓front-page.phpの一部です。 <header> <section id="news"> <?php $news = get_posts('posts_per_page=1'); ?> <?php foreach($news as $post): ?> <?php setup_postdata($post); ?> <a href="<?php the_permalink(); ?>"> <div class="alert_box"> <p><?php the_title(); ?> - <?php the_date(); ?></p> </div> </a> <?php endforeach; ?> <?php wp_reset_postdata(); ?> </section> </header> 直感的にはsingle.phpは「/var/www/html/wordpress/wp-content/themes/sample」内にあるので 「」内のリンクがコード内に有るような気がするのですが、どこにも見当たりません。 single.phpにアクセスするためにはトップページ内のまたはトップページコード内のどの記述からアクセスできるのでしょうか。 読みづらくてすみません。よろしくお願いします。

    • ベストアンサー
    • PHP
  • スマホサイトのメニューが開かないので困っています。

    メニューが開かないので困っています。 WEBでテンプレートを購入したのですが質問に回答してくれません。 Google ChromeのディベロッパーツールのConsoleで確認すると次のメッセージが出ます。 [エラーメッセージ] script.js:1　 Uncaught ReferenceError: $ is not defined [script.js] $(function(){$("div.panel").hide();$(".menu").click(function(){$(this).toggleClass("menuOpen").next().slideToggle();});}) [js] <script src="http://junkana.net/js/script.js"></script> [style]一部 nav div.panel{display:block !important;float:right;} nav#mainNav a.menu{width:100%;display:block;height:40px;line-height:40px;font-weight:bold;text-align:left;color:#fff;} nav#mainNav a#menu span{padding-left:10px;} nav#mainNav a.menu span:before{content:"→ ";} nav#mainNav a.menuOpen span:before{content:"↓ ";} nav#mainNav a#menu:hover{cursor:pointer;} nav .panel{display:none;width:100%;position:relative;right:0;top:0;z-index:1;} <!-- メインナビゲーション --> <nav id="mainNav"> <a class="menu" id="menu"><span>Menu</span></a> <div class="panel"> <ul> <li class="active"><a href="http://yoshio.net/">Homeページ</a></li> <li><a href="http://junkana.net/diet/">ダイエット</a></li> <li><a href="http://junkana.net/health/category/">各種サプリメント</a></li> </ul> </div> </nav> <!-- メインナビゲーション --> 以上、よろしくお願いいたします。

  • タブメニューを上下に設置

    下記サイトを参考にタブメニューを作成しました。 http://5am.jp/jquery/jquery_ui_tabs/ こちらのタブを上下に配置し、selectされた状態も連動させたいと思っています。 スクリプトをどのように すればいいかお分かりの方がおられましたら ご教授頂けませんでしょうか。 <script type="text/javascript"> $(function() { $('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } }); }); </script> <div id="tabs"> <ul> <li><a href="#tab1"><span>タブ1</span></a></li> <li><a href="#tab2"><span>タブ2</span></a></li> <li><a href="#tab3"><span>タブ3</span></a></li> </ul> <div id="tab1"> <p>タブ1の内容</p> </div> <div id="tab2"> <p>タブ2の内容</p> </div> <div id="tab3"> <p>タブ3の内容</p> </div> 　　　　　　<ul　class="bottom_tab"> <li><a href="#tab1"><span>タブ1</span></a></li> <li><a href="#tab2"><span>タブ2</span></a></li> <li><a href="#tab3"><span>タブ3</span></a></li> </ul> </div> どうぞ宜しくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する