ページ切り替え時に点線を表示させたまにしたい。

前へ 次へ
このQ&Aのポイント
  • WordPressを使っています。現在、TOPページにインラインフレームを使い、新着情報を表示させています。タイトル下には点線をCSSで表示させていましたが、ページ切り替え時に一瞬消えてしまいます。新着情報の件数に合わせて表示させ、ページ切り替えの影響を受けずに表示させる方法はありますか？
  • TOPページにインラインフレームを使用して新着情報を表示していますが、ページ切り替え時に点線が一瞬消えてしまいます。点線を表示させたままにする方法はありますか？また、新着情報の件数に合わせて点線を表示させる方法はありますか？
  • WordPressのTOPページにインラインフレームを使用して新着情報を表示させていますが、ページ切り替え時にタイトル下の点線が一瞬消えてしまいます。新着情報の件数に合わせて点線を表示させ、ページ切り替えの影響を受けずに表示させる方法はありますか？
回答を見る
  • ベストアンサー

ページ切り替え時に点線を表示させたまにしたい。

タイトルが分かりにくく申し訳ございません。 （WordPressを使っています） 現在、TOPページにインラインフレームを使い、新着情報を表示させています。（ページナビ付き） タイトル下には点線をCSSで表示させていました。 ページナビでページを送ると画面が切り替わるので、そのタイミングでタイトル下の点線が一瞬消えてしまいます。（ページ切り替えなので当たり前の動作ですが） 一瞬でも消さない方法はないかと思い、TOPページに画像として位置を合わせて表示させておきました。 インラインフレーム内の新着情報はページナビで切り替わり、点線はTOPページの画像なので表示されたままには出来たのですが、何も考えずにTOPページに貼りつけただけなので、新着情報の件数に関係なく表示されたままになってしまっています。 新着情報の件数に合わせて表示させ、尚且つページ切り替えの影響を受けづに表示させる方法はないでしょうか。 下記にコードを記述しました。 （HP作成は全くのど素人で記述がなっていない点が山ほどあると思います。ご了承ください） ご享受よろしくおねがいします。 <?php if($_SERVER['REQUEST_URI']=="/top/"): ?> // TOPページにインラインフレーム <iframe frameborder="0" src="http://・・・・/category/news" scrolling="no"></iframe> <div id="dot1"> <img src="<?php bloginfo('template_url'); ?>/images/dot.png" ></div>//点線１ <div id="dot2"> <img src="<?php bloginfo('template_url'); ?>/images/dot.png" ></div>//点線２ //…８件分点線の画像を表示 <div id="dot8"> <img src="<?php bloginfo('template_url'); ?>/images/dot.png" ></div>//点線８ <?php endif; ?> //インラインフレーム内（新着情報） <?php query_posts($query_string . '&' .'showposts=10&category_name=news'); if (have_posts()) : while (have_posts()) : the_post(); ?> <h2><?php the_time('Y.m.d') ?> <a> <?php the_title(); ?></a></h2> <?php endwhile; $pt = $wp_query->max_num_pages; endif; ?> //ページナビ用の$pt <?php wp_reset_query(); ?>

  • tsyok
  • お礼率90% (29/32)
  • PHP
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
回答No.1

結論から言ってしまうと難しいです ページナビゲーションの作り方にもよるのですが wordpressの大半のナビゲーションは同一ページにリクエストを変えて再アクセスしています その際に点線を読み込み直すので一度ブランクな画面が表示されてしまうのかと思います。 なので望んでいる事を行いたいのならばページを読み込み直さない作り方を行わなければいけません １．ページでフィルタをかけずデータベースからデータを全て取得する ２．取得した配列をphpからJavaScriptへと渡す ３．ページ切り替えはJavaScriptで制御して指定したエレメント(div等)の中を書き換える こんな感じですね こだわった作り方をするのであればJqueryも視野に入れたほうがいいです

tsyok
質問者

お礼

CyberCypherさん ご回答ありがとうございます。 返信遅くなり大変申し訳ございません。 出来ました。 教えていただいた方法ですと私の技術ではとても難しかったのですが、「３．ページ切り替えはJavaScriptで制御して指定したエレメント(div等)の中を書き換える」の「JavaScriptで制御して指定したエレメント(div等)の中を書き換える」と言うのにヒントをえまして、jQueryでiframe内のページから親ページの点線画像を消しました。（下記に参考URL） スマートではないですが、下記記述です。 <?php if($x == 1): ?>//表示件数が１件なら実行（hide1.jsは不必要な点線画像を消すスクリプトです） <script type="text/javascript" src="http://＊＊＊/js/hide1.js"></script> <?php endif; ?> みたいな形で消していきました。 参考URL（jQueryでiframe内のページから親ページを操作する方法） http://black-flag.net/jquery/20111129-3602.html CyberCypherさんのご回答をいただけなければ解決できなかったと思います。 大変感謝します。ありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. PHP

関連するQ&A

  • WordPressのTOPページを固定ページで

    WordPressのTOPページを固定ページで製作しています。 使っているのはWordPress 3.2.1です。 http://sygnas.jp/2010/10/19/frontfix/ こちらのサイトを参考にして 「front_fix.php」を作り <?php /* Template Name: FrontFix */ ?> <?php get_header(); ?> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <?php endwhile; ?> <?php endif; ?> <?php $my_query = new WP_Query('&cat=0'); ?> <?php if ($my_query->have_posts()) : ?> <?php while ($my_query->have_posts()) : $my_query->the_post(); ?> <?php endwhile; ?> <?php endif; ?> <?php get_footer(); ?> と書き込みました。 それから、TOPページ用の固定ページのテンプレートを変更して ［設定］＞［表示設定］＞［フロントページの表示］で「固定ページ」を選び、今回作ったページを選択して保存しました。 今回のサイトはTOPページのみサイドバーはいらないので <?php get_sidebar(); ?> は入れていません。 TOPページを表示させた時、ヘッダーとフッターは表示されるのですが 固定ページの中身も新着記事も表示されていない状態です。 やり方等間違っているのでしょうか？ また、その他に良いやり方がありましたら教えていただけませんでしょうか？ よろしくお願いします。

    • ベストアンサー
    • PHP
  • WordPressにおいて、サブカテゴリーに画像を表示させる。

    WordPressにおいて、サブカテゴリーに画像を表示させる。 WordPress,PHP初心者です。 現在 情報サイトを作っているのですが、 あるカテゴリーのループ中に、サブカテゴリーにも属していると、画像を表示させたいです。 ショッピングサイト等で例を言うと 「シャツ」という大カテゴリーをループを使って一覧で出力し、 その中で、サブカテゴリー「売り切れ」や「NEW」にチェックを入れていると（管理画面で） それに適した画像が表示されるようにしたいのです。 ”「売り切れ」と「NEW」にどちらも属している場合もあります” なおかつ、そのサブカテゴリーにチェックが入っていると 上位に表示されると一層良いのですが。 ループの中で、更にループ処理？という考えがあまり正しくないような気がするのですが、 試している所やはりうまくいきません。 ソースは下記の通りです。 <!--大カテゴリーのループ開始--> <?php query_posts("cat=3&showposts=10"); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="list-box"> <a href="<?php the_permalink() ?>"> <img src="<?php echo get_post_meta($post->ID,'faceimage',TRUE); ?>" alt="<?php the_title(); ?>" width="141" height="141" /> </a> <p class="name"><?php the_title(); ?></p> <p class="size"><?php echo get_post_meta($post->ID,'textfield',TRUE); ?></p> <!--売り切れの場合、画像表示--> <?php query_posts("cat=4"); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="ico-on"><img src="hogehoge" alt="売り切れ" /></div> <?php endwhile; ?> <?php endif; ?> <!--新着アイテムの場合、画像表示--> <?php query_posts("cat=6"); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="ico-new"><img src="hogehoge2" alt="新着アイテム" /></div> <?php endwhile; ?> <?php endif; ?> </div> <!--ループ完全に終了--> <?php endwhile; ?> <?php endif; ?> 調べてみたものの、行き詰まっています。 稚拙な質問ではございますが、 どうぞご教授お願い致します。

  • WordPressでトップページに最新記事5件

    トップページは固定ページを使用します。 トップページにアイキャッチ付き最新記事5件リストを表示したいのです。 検索しましたところ、似たようなものを見つけました。 この解説はアイキャッチがついていません。 アイキャッチがつくようにするにはどうすれば良いのでしょうか？ 宜しくお願いします。 http://39kn.com/2010/05/27/4121/ <ul> <?php query_posts('posts_per_page=5'); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <li> <span class="date"> <?php the_time('Y年n月j日'); ?> <?php $days=30; $today=date('U'); $entry=get_the_time('U'); $diff1=date('U',($today - $entry))/86400; if ($days > $diff1) { echo '<img src="images/new.gif" alt="New" />'; } ?> </span> <a href="<?php the_permalink(); ?>"><?php the_title();?></a> </li> <?php endwhile; endif; ?> <?php wp_reset_query(); ?> </ul>

    • ベストアンサー
    • PHP
  • headerをページによって表示、非表示にする

    トップページのみヘッダーのjavasprictを使い、他ページでは非表示にしたいのですが、header.phpをもう一つ作り（javaのタグが入ってないもの）別名で保存し、header.phpと同じデレクトリーに保存しページの<?php get_header(); ?>の部分を<?php get_header1(); ?>に変えたのですがエラーでした。 これはどうすれば別々に見る事ができるでしょうか？？ 今のページ設定は以下になってます。 <?php get_header(); ?> <div class="span-24" id="contentwrap"> <div class="span-14"> <img src="http://pimpkidz.com/wp/wp-content/uploads/2011/08/side.jpg" /> <div id="content"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <div id="indexthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'post_thumbnail' )); ?></a></div> <div id="indexcontent"> <h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <p class="postdate"><span><?php the_time('Y/n/j(D)') ?> </span></p> <div class="entry"> <?php echo excerpt(40); ?> <div class="readmorecontent"> <a class="readmore" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">Continue</a> </div> </div> </div> <div style="clear:both;"></div> </div><!--/post-<?php the_ID(); ?>--> <hr><?php endwhile; ?> <?php else : if ( is_category() ) { // If this is a category archive printf("<h2 class='pagetitle'>Sorry, but there aren't any posts in the %s category yet.</h2>", single_cat_title('',false)); } else if ( is_date() ) { // If this is a date archive echo("<h2 class='pagetitle'>Sorry, but there aren't any posts with this date.</h2>"); } else if ( is_author() ) { // If this is a category archive $userdata = get_userdatabylogin(get_query_var('author_name')); printf("<h2 class='pagetitle'>Sorry, but there aren't any posts by %s yet.</h2>", $userdata->display_name); } else { echo("<h2 class='pagetitle'>No posts found.</h2>"); } get_search_form(); endif; ?> </div> </div> <?php get_sidebars('right'); ?> </div> </div> <?php get_footer(); ?> もし他のソースが必要でしたら言ってください。宜しくお願い致します。

    • ベストアンサー
    • PHP
  • Firefoxで画像のリンクをクリックした際の点線表示

    こんにちは。 画像にリンクを張ると、画像をクリックしたときに点線が表示されるかと思うのですが、 <div id="main-sub"> <h2>案内</h2> <h3>相談</h3> <p>　　文章　　　　</p> <a href="../new/new.html"><img src="images/riyou_btn_○○.gif" alt="○○へ" border="0" /></a> </div> #main-sub img { float: right; margin-top: 70px; margin-right: 10px; } とすると、IEでは表示されるのですが、Firefoxでは表示されません。 float: right; を削除すると点線が現れたので、これが原因かと思ったのですが、画像の位置を指定するabsoluteで試しても表示されないので、 どうすればいいのか分からずに困っています。 Firefoxでも点線を表示させるにはどうすれば良いですか？ 色々試してみましたが分かりません。 教えて下さい。よろしくお願いします。

    • ベストアンサー
    • HTML
  • インラインフレーム内skitter画像ターゲット

    jQueryを使ったスライドショーでskitterを利用しています。 skitterで作ったページをインラインフレームでトップページに表示しているのですが、画像をクリックしてターゲットのページを開く際、時々インラインフレーム内にターゲットのページが開いてしまうことがあります。特に画像アニメーションが完了していない状態でクリックするとインラインフレームの中に開いてしまうように思えます。 以下のように画像のコード部分でリンクの前にtarget指定で_topは指定してあるのですが・・。 <div class="box_skitter box_skitter_large"> <ul> <li><a target="_top" href="リンク/newpage1.html" > 　　　<img src="images/img01.jpg" /></a> 　　　<div class="label_text"><p>画像１</p></div> 　　</li> <li><a target="_top" リンク/newpage2.html" > 　　　<img src="images/img02.jpg" /></a> 　　　<div class="label_text"><p>画像２</p></div> 　　</li> </ul> </div> jquery.skitter.jsのほうで何かコードを変えないといけないのでしょうか？ それともインラインフレーム内でskitterの表示はよくないのでしょうか？ targetで_topを指定してあればうまく開くように思うのですが・・。 jQueryは初心者です。 ご存知の方、ぜひ対処方法をご教授ください。 よろしくお願いいたします。

  • wordpressのjqueryが動かない

    wordpress3.8.1で作業しています。 会社のHPの作成用途でwordpressを使用しています。 何度か作成経験がありphpもなんとなく分かっているのですが、ここだけ解決せずです。 トップページにスライドショーのプラグインを入れたのですが動きません。 プラグインはWP-Cycleというプラグインです。 function.phpにはまだ何も記載していません。 header.phpはこんな感じの記載です。 ******************************************* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="description" content="<?php bloginfo( 'description' ); ?>"> <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title> <link rel="shortcut icon" href="<img src="<?php bloginfo('template_url'); ?>/images/favicon.ico" /> <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" /> <?php wp_head(); ?> </head> <body> <a name="pagetop_here"></a> <div class="wrap"> <div class="header"> <h1 class="h_logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_logo.png"/></a></h1> <ul class="h_nav"> <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_01.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/news' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_02.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/about' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_03.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/works' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_04.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/faq' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_05.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/company' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_06.png"/></a></li> <li><a href="http://ameblo.jp/ecoblue-smile/" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/h_07.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/contact' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_08.png"/></a></li> </ul><!--h_nav--> </div><!--header--> ******************************************* <?php wp_head(); ?>を無効にして外部の jqueryを読み込むにすると、スライドはおろか、縦に並んでしまいます。（cssが効いていないみたいです。） どこが原因なのかも分からないです。 ただ過去に同じheader.phpで同じプラグインが実装しています。 よろしくお願い致します。

    • ベストアンサー
    • PHP
  • インラインフレームで表示されるページのタイトルを取得したい。

    よろしくお願いします。 インラインフレームを利用したWebページを作成しています。 FLASHでボタンつくったボタンをクリックすると、 インラインフレームの中の表示が切り替わるようになっています。 そこで、どうしてもそのインラインフレームに表示される ページのタイトルとファイル名を取得したいのですが、 何かよい方法はないでしょうか？ <div id="contents"> <iframe src="sample.html" name="frame" width="800" height="600" frameborder="0"> インラインフレーム機能を使用しています。インラインフレーム対応のブラウザで試してください(*´∀｀) </iframe> </div> リンク先は、FLASHのボタンにつくっています。 インラインフレームの表示内容がが切り替わった時に、 sample.html　⇒　hoge.html hoge.htmlのタイトル名とファイル名を親フレームから 呼びだしたいと思っています。 よろしくお願いします。

  • Wordpressで特定カテゴリーの一覧ページ

    今特定のカテゴリーの一覧ページを作りたいのですがうまく作れません。 http://snapkidz.biz/wp/?cat=4（現状） 本当はhttp://blackartcard.com/?cat=4のような感じで作りたいんですがうまくいきません。 二つとも自分のサイトなのですが、http://blackartcard.com/?cat=4の方はテンプレートをいじって作ったので、うまくいっただけです。 アーカイブ.phpを同じ物をsnapkidz.bizにいれたのですがレイアウトがヘッダー部分に表示されるようになってしました。 アーカイブの中身は以下です。 <?php /** * @package WordPress * @subpackage Modularity */ ?> <?php get_header();?> <div> <?php query_posts($query_string.'&posts_per_page=2'); if (have_posts()) : ?> <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?> <div class="clear"></div> <div class="content"> <?php while (have_posts()) : the_post(); ?> <div class="archive-top"> <?php the_post_thumbnail('full'); ?> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf( esc_attr__( 'Permalink to %s', 'modularity' ), the_title_attribute( 'echo=0' ) ); ?>"><?php the_title() ?></a></h2> <div class="clear"></div> <p class="postmetadata alt quiet"> <?php $tag_list = get_the_tag_list( '| Tags: ', ', ' ); printf( __( '%1$s | Categories: %2$s %3$s | ', 'modularity' ), get_the_time( get_option( 'date_format' ) ), get_the_category_list( ', ' ), $tag_list ); ?> </p> <hr /> </div> <?php endwhile; ?> <div class="clear"></div> <div class="navigation"> <div class="alignleft"><?php next_posts_link( __( '&laquo; 前の記事', 'modularity' ) ); ?></div> <div class="alignright"><?php previous_posts_link( __( '次の記事 &raquo;', 'modularity' ) ) ?></div> </div> <div class="clear"></div> <?php else : ?> <h2 class="center"><?php _e( 'Not Found', 'modularity' ); ?></h2> <?php get_search_form(); ?> <?php endif; ?> </div> </div> </div> <!-- Begin Footer --> <?php get_footer(); ?> どうすればヘッダー下にうまく表示できるでしょうか？？ 宜しくお願い致します。

    • 締切済み
    • CSS
  • ランラム表示

    よろしくお願いシアンス＾＾ ランダム表示について 貼り付けのURLの変更が色々変えてみたんですがエラーが出ますよろしくお願いします。 WordPress のテーマに表示させたいんですが banner.phpの内容 <?php $bnSrc[0]='<a href="http://xxxxx.jp/home/" target="_blank"><img src="http://xxxxx.jp/home/wp-content/themes/kaeruba/images/top_img_l/1.jpg" alt="バナー1" border="0" /></a>'; $bnSrc[1]='<a href="http://xxxxx.jp/home/" target="_blank"><img src="http://xxxxx.jp/home/wp-content/themes/kaeruba/images/top_img_l/2.jpg" alt="バナー2" border="0" /></a>'; $bnSrc[2]='<a href="http://xxxxx.jp/home/" target="_blank"><img src="http://xxxxx.jp/home/wp-content/themes/kaeruba/images/top_img_l/3.jpg" alt="バナー2" border="0" /></a>'; $n = mt_rand(0,count($bnSrc)-1); $bn = $bnSrc[$n]; echo $bn; ?> 貼り付け <?php $openfile = file_get_contents('http://xxxxx.jp/home/wp-content/themes/kaeruba/images/top_img_l/banner.php');// echo $openfile;// ?> 上記のURLの部分を<?php bloginfo('template_url');?>を使うとエラーが出ます 根本的に<?php bloginfo('template_url');?>は使えないのでしょうか

    • 締切済み
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する