HTMLページ内のリンクURLに特定の文字を足す

2023/10/21 00:19

このQ&Aのポイント

HTMLページ内のリンクURLに特定の文字を足す方法が分からない。
現在の設定では、リンクをクリックすると自分のサイトドメイン＋/news/6548s.htmlとなってしまう。
ジャバスクリプトで指定の箇所にデータ抜き出し元サイトのドメインを入れたいがうまくできない。

ベストアンサー

HTML　ページ内のリンクURLに特定の文字を足す

2011/03/22 18:43

現状として<div id="kitou">～</div>をPHPで別サイトからニュース欄抜き出して表示しています。ニュース欄のデータ抜き出し元が相対参照でURLが記述されている為、リンクをクリックすると　自分のサイトドメイン＋/news/6548s.html となってしまいます。ジャバスクリプトで○○○に当たる箇所にデータ抜き出し元サイトのドメインを入れたいのですが上手に出来ません。例：<a href="○○○/news/6548s.html"> 現在HPに書いてる内容は下記の通りです。 <div id="kitou"> 　　　<ul id="news"> <li> <a href="/news/6548s.html">ニュースを見るにはクリック</a> </li> </ul> </div> 何方かお力添えをお願いいたします。

naofumikitou
お礼率33% (1/3)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

reggaepunc
ベストアンサー率59% (64/108)

2011/03/22 22:39 回答No.1

これでどうでしょう？あまりテストしてないですが。 firefoxではうごいているっぽいです。 ------------------------------------------------------------- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> </head> <body> <div id="kitou"> <ul id="news"> <li><a href="/news/6548s.html">ニュースを見るにはクリック</a></li> </ul> </div> <script type="text/javascript"> replaceHrefFunc(); function replaceHrefFunc() { var a = document.getElementById('news').getElementsByTagName('a'); var i = 0; var output; for( i = 0; i < a.length; i++ ) { a[i].href = a[i].href.replace( document.domain, 'www.example.jp' ); } } </script> </body> </html> -------------------------------------------------------------

質問者

お礼 2011/03/23 00:22

有難うございます　出来ました！ほんとう助かりました！

関連するQ&A

HTMLのアンカーリンクについて。
HTMLのアンカーリンクについて。アンカーリンクですが、通常どおりリンクをはると、ブラウザ画面の一番上にぴったりくっついたかたちでリンクしてしまします。たしか、リンク先の上の幅を指定できたと思うのですが、やり方を忘れてしました(^^;ゞちなみにHTMLはこんな感じです。 <div id="content"> 　<div id="anchor"> 　　<ul> 　　　<li><a href="post-1">投稿１</a></li> 　　　<li><a href="post-2">投稿２</a></li> 　　　<li><a href="post-3">投稿３</a></li> 　　</ul> 　</div> 　<div id="entry"> 　　<h2 id="post-1">投稿１</h2> 　　<h2 id="post-2">投稿２</h2> 　　<h2 id="post-3">投稿３</h2> 　</div> </div> すこし検索してみましたが見当たらなくて、質問させていただきました。どなたか、おわかりの方ご教授いただけると助かります。よろしくお願いします。
- ベストアンサー
- HTML
ＨＴＭＬ、ＣＳＳ
ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ　ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!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
自社Webページ内の階層リンクへ飛ばない
自社Webページ内の階層リンクへ飛ばなくなり困っています。ドリームウィーバーでページを構築していますが、気づいたら同サイト内のリンクに飛ばなくなっていました。 <div id="menu"> <ul> <li><a href="#">トップページ</a></li> <li><a href="houjin.html">●●</a></li> <li><a href="tenpo.html">●●</a></li> 　　　　</ul> </div> div#menu ul { margin:0 auto; padding:10px 0; } div#menu li { font-size:85%;/* 12px相当 */ color:#2e2930; text-align:center; list-style-type:none; } div#menu li a { display:block; width:200px; color:#2e2930; line-height:60px; } /* マウスオーバー時 */ div#menu li a:hover { color:#f1f1f1; background:#2D2D2D url("img/bg_menu.gif") 0 0 repeat; } </li>が抜けていたので付け足しても変わりません。他のページへのリンク（別窓で開く）は有効です。考えられる原因を教えていただけると幸いです。どうぞよろしくお願い致します。
- ベストアンサー
- 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">  <title>たいとる</title> <nav class="navbar navbar-inverse navbar-default"> <div class="container-fluid">  <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>  <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> </div> </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
リンクページがちゃんと画像表示されない
PHP5.0、Smartyで開発しています（個人サイト）リンクを押すと、リンクページ（自サイト）は表示されるのですが、画像などが表示されないことがあります。 .tplファイルなので、↓の同じリンクをいくつものファイルに書きましたが、ふつうにちゃんと表示されるページもあれば、リンクページの画像落ちといったページにもなります。これはどうしてでしょうか？ </div> <ul id="menu"> <li><a href="{$info.back_url}">TOP</a></li> <li><a href="{$info.http_url}">記事一覧</a></li> <li><a href="{$info.http_url}/archive">過去ログ</a></li> <li><a href="{$info.http_url}/search">記事検索</a></li> <li><a href="{$info.http_url}/rss">RSS</a></li> <li><a href="{$info.https_url}/admin">管理者用</a></li> </ul> <img src="./image/main_img.jpg" alt="" width="760" height="340" id="main-img" />
- ベストアンサー
- PHP
javascriptでCSVを読み込み表示する方法を探しています。
javascriptでCSVを読み込み表示する方法を探しています。 <div id="hoge"> <ul class="hogehoge"> <li><a href="1行目の1つ目のデータ">1行目の2つ目のデータ</a></li> <li><a href="2行目の1つ目のデータ">2行目の2つ目のデータ</a></li> ・・・ </ul> </div> で、ulに囲まれた部分をjavascriptで生成させたいのですが・・・（ulのところのCSS指定は、idではなく、classにしたいです）よろしくお願いいたします。
- 締切済み
- JavaScript
アコーディンパネルの別ページからのリンクについて
こんばんは。 jqueryを使ってアコーディオンパネルを実装したページを作成しました。通常は全て閉じた状態ですが、全てのページにパネル１～5へのリンクがあり、それをクリックすると該当のパネルが開いた状態で表示させるには、どんなスクリプトを追加するとよろしいのでしょうか？以下コードです。 --html（各ページのリンクの部分） <ul> <li><a href="/service/#panel01">パネル１へ</a></li> <li><a href="/service/#panel02">パネル２へ</a></li> ・・・ </ul> --html（アコーディオンパネルの部分 /service/index.html ） <h5 class="trigger" id="panel01"><a href="#">パネル1のタイトル</a></h5> <div class="accblock"> <p>パネル１のコンテンツ</p> </div> <h5 class="trigger"　id="panel02"><a href="#">パネル2のタイトル</a></h5> <div class="accblock"> <p>パネル2のコンテンツ</p> </div> （省略） ---js $(document).ready(function(){ $(".accblock").hide(); $("h5.trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); }); }); location　href　か hash　を使うのかなと思っているのですがうまく使いこなすことができませんでした。アドバイスをいただけたら助かります。どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
Javascriptでプルダウンメニューを作りましたが関数化できません
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> function foldmenu(i){ var i; for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } $(function(i){ $('#c'+i).click(function(){ for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } }); }); } </script> <div id="c1" onClick="foldmenu('1')">1</div> <ul id="sc1"> <li><a href="#">入力画面1-1</a></li> <li><a href="#">入力画面1-1</a></li> </ul> <div id="c2" onClick="foldmenu('2')">2</div> <ul id="sc2"> <li><a href="#">入力画面2-1</a></li> <li><a href="#">入力画面2-2</a></li> </ul> <div id="c3" onClick="foldmenu('3')">3</div> <ul id="sc3"> <li><a href="#">入力画面3-1</a></li> <li><a href="#">入力画面3-2</a></li> </ul> <div id="c4" onClick="foldmenu('4')">4</div> <ul id="sc4"> <li><a href="#">入力画面4-1</a></li> <li><a href="#">入力画面4-2</a></li> </ul> <div id="c5" onClick="foldmenu('5')">5</div> <ul id="sc5"> <li><a href="#">入力画面5-1</a></li> <li><a href="#">入力画面5-2</a></li> </ul> と関数化しましたがうまく動きません。初期状態では1の部分が開く。それ以降はクリックした部分が開き開いていた部分は閉じるという感じにしたいです。縦長のプルダウンメニューです。たてに1から5が並んでいて、1をクリックすると１と2の間に1の子カテゴリーが表示されます。困っています。教えてください。
- ベストアンサー
- JavaScript
iframeのurlをクリックで書き換えたい。
<iframe id="map" src="https://A.co.jp" width="800" height="450"></iframe> <ul> <li><a href="https://B.co.jp">Bサイト</a></li> <li><a href="https://C.co.jp">Cサイト</a></li> </ul> iframeのURL「https://A.co.jp」を下のリンクをクリックすることで「https://B.co.jp」などに書き換えて表示を変更したいと考えています。 JavaScriptで可能と思うのですが、どのようにしたらいいのかわかりません。よろしくお願いいたします。
- ベストアンサー
- JavaScript
練習でHTMLを作っています
HPを作っているのですがメニューコンテンツの画像が表示されませんでした。どうしたら表示されるようになるのか教えていただけないでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content=text/html; charset=Shift_JIS> <title>猫の飼い方・育て方</title> <link rel="stylesheet" type="text/css" href="neko_index.css" </head> <body> <div id="container"> <div id="header"> <h1>猫を飼うためには</h1> </div><br> <div class="PR1"> <img src="image/PR.gif"alt="PR"> <a href=""> </a></div>  </div> <div id="contents"> <h4>このサイトの主旨</h4> 職業訓練の一環として練習のためにweb製作をしている。参考として色々な猫に関するサイトのいいところを参照させていただいている。多々文章が類似している箇所があると思いますがご容赦ください。今のところあくまでも練習のためのサイトです。</p> <h4>飼い主と我が家の猫紹介</h4> <ul> <li>まめたろう・・・山形県在住　30才・男　アトピー・花粉症・鼻炎持ち元小児喘息患者。病弱だった為に動物を飼うことが間々らなかったが大人になったため自己責任の名のもとに猫を飼い始めて猫主夫になる。</li><br> <li>ノアくん・・・美形・性格おとなしくてやさしいおにーちゃん。里親サイトで譲っていただいた雑種猫♂</li><br> <img src="image/top_noha.jpg"alt="ノアくん写真"width="600" height="350"vspace="10"> <a href=""></a> <br> <li>春ちゃん・・・美醜猫系・足長・耳たれのアメショ＆マンチカンMIX♀のマンチカン。里親サイトで譲っていただいた。耳たれ具合からして大本の血筋はスコテッシュ不フィールドだと思う。</li> <img src="image/top_haru.jpg"alt="春ちゃん写真"width="600" height="350"vspace="10"> <a href=""></a> </ul> <br></div> <div id="menu"> <div id="image"> <ul> <li>メニュー</li> <li><a href="contents/neko_wo_kauhouhou.html"><img src"image/menu_nav1.gif"alt="猫の里親になろう"width="100"height="50">猫を飼う方法</a></li> <li><a href="contents/.html"> 猫の里親になろう！</a></li> <li><a href="contents/.html">子猫の飼い方</a></li> <li><a href="contents/.html">猫のお手入れ</a></li> <li><a href="contents/.html">猫の体のしくみ</a></li> <li><a href="contents/.html">猫の病気</a></li> <li><a href="contents/.html">猫の習性</a></li> <li><a href="contents/.html">猫の気持ち</a></li> <li><a href="contents/.html">去勢と避妊</a></li> <li><a href="contents/.html">猫の種類</a></li> <li><a href="contents/.html">猫に芸を覚えさせよう</a></li> </ul> </div> </div>  <div id="menu under PR"> <img src="image/PR.gif"alt="PR"> <a href=""> </a></div>  <div id="footer"> <ul> <li><a href="contents/.html">home <li><a href="contents/.html">猫を飼う方法</li></a> <li><a href="contents/.html">猫の里親になろう！</li></a> <li><a href="contents/.html">子猫の飼い方</li></a> <li><a href="contents/.html">猫のお手入れ</li></a> <li><a href="contents/.html">猫の体のしくみ</li></a> <li><a href="contents/.html">猫の病気</li></a> <li><a href="contents/.html">猫の習性</li></a> <li><a href="contents/.html">猫の気持ち</li></a> <li><a href="contents/.html">去勢と避妊</li></a> <li><a href="contents/.html">猫が妊娠したら</li></a> <li><a href="contents/.html">猫の種類</li></a> <li><a href="contents/.html">猫に芸を覚えさせよう</li></a></li> <div align="center"> <br>Copyright(C) 猫の飼い方・育て方.All right Reserved. </div> </div> </div> </body> </html> ｃｓｓ #menu { background-color:#191970; line-height:1.5; width:200px; padding:10px 0; } #menu ul{ background-color:#191970; margin:0; padding:0 10px; width:180px; line-height:1.5; } #menu li{ background-image:url(image/menu_background.gif); margin:0; padding:0; margin-left:0px; list-style: none; } a:link { color:#0000cc; text-decoration: none; } #contents{ background-image:url(image/contents_background-img.jpg); line-height: 1.5; width:650px; float:right; margin-left:20px; margin-bottom:20px; padding-top:30px; padding-bottom:30px; padding-left:20px; padding-right:20px; } #footer{ width:900px; font-size:10px; float:right; } #footer ul{ width:900px; margin:0; padding:0; text-align:center; } #footer li{ list-style:none; display:inline; }
- ベストアンサー
- ホームページ作成ソフト