質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

2回答

2300閲覧

wordpress テーマstinger5のナビゲーションをカスタマイズしたい。

harukiadachi

総合スコア11

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2015/06/24 02:48

wordpressテーマstinger5を使ってサイト構築中です。

ヘッダーのナビゲーションをカスタマイズしたいのですが、うまくいきません。

(やりたい事) ↓

![イメージ説明]WIDTH:600

このようにメニュー項目一つ一つに画像を設定してリンクにした
、wordpressはPHPだらけで、よくわかりません。

(ナビゲーションのcss)

lang

1/*------------------- 2メニュー 3---------------------------------*/ 4nav li { 5 position: relative; 6 float: left; 7 font-size: 13px; 8 padding-left: 10px; 9 display: inline; 10 padding-right: 10px; 11 border-left-width: 1px; 12 border-left-style: dotted; 13 border-left-color: #CCC; 14 padding-top: 5px; 15 padding-bottom: 5px; 16} 17 18 19nav li li { 20 float: left; 21 font-size: 13px; 22 padding-left: 10px; 23 display: inline; 24 padding-right: 10px; 25 padding-top: 5px; 26 padding-bottom: 5px; 27 border: none; 28} 29 30nav li a { 31 float: left; 32 33 text-decoration: none; 34} 35 36 37.menu-navigation-container { 38 overflow: hidden; 39} 40nav li a:hover { 41 text-decoration: underline; 42 43} 44 45コード

(ヘッダーPHP)

lang

1<!--[if lt IE 7]> <html class="ie6" <?php language_attributes(); ?>> <![endif]--> 2<!--[if IE 7]> <html class="i7" <?php language_attributes(); ?>> <![endif]--> 3<!--[if IE 8]> <html class="ie" <?php language_attributes(); ?>> <![endif]--> 4<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> 5<head> 6<meta charset="<?php bloginfo('charset'); ?>" /> 7<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 8<meta name="format-detection" content="telephone=no" /> 9<?php if(is_category()): ?> 10<?php elseif(is_archive()): ?> 11<meta name="robots" content="noindex,follow"> 12<?php elseif(is_search()): ?> 13<meta name="robots" content="noindex,follow"> 14<?php elseif(is_tag()): ?> 15<meta name="robots" content="noindex,follow"> 16<?php elseif(is_paged()): ?> 17<meta name="robots" content="noindex,follow"> 18<?php endif; ?> 19<title> 20<?php 21global $page, $paged; 22if(is_front_page()): 23elseif(is_single()): 24wp_title('|',true,'right'); 25elseif(is_page()): 26wp_title('|',true,'right'); 27elseif(is_archive()): 28wp_title('|',true,'right'); 29elseif(is_search()): 30wp_title('|',true,'right'); 31elseif(is_404()): 32echo'404 |'; 33endif; 34bloginfo('name'); 35if($paged >= 2 || $page >= 2): 36echo'-'.sprintf('%sページ', 37max($paged,$page)); 38endif; 39?> 40</title> 41<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/normalize.css"> 42<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" /> 43<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> 44<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> 45<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" /> 46<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 47<!--[if lt IE 9]> 48<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 49<script src="<?php bloginfo('template_directory'); ?>/js/html5shiv.js"></script> 50<![endif]--> 51<?php wp_head(); ?> 52<?php if(is_mobile()) { ?> 53<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" /> 54<?php } else { ?> 55<?php } ?> 56</head> 57<body <?php body_class(); ?>> 58<!-- アコーディオン --> 59<nav id="s-navi" class="pcnone"> 60 <dl class="acordion"> 61 <dt class="trigger"> 62 <p><span class="op"><i class="fa fa-bars"></i>&nbsp; MENU</span></p> 63 </dt> 64 <dd class="acordion_tree"> 65 <ul> 66 <?php wp_nav_menu(array('theme_location' => 'navbar'));?> 67 </ul> 68 <div class="clear"></div> 69 </dd> 70 </dl> 71</nav> 72<!-- /アコーディオン --> 73<div id="wrapper"> 74<header> 75 <!-- ロゴ又はブログ名 --> 76 <p class="sitename"><a href="<?php echo home_url(); ?>/"> 77 <?php if (get_option('stinger_logo_image')): //ロゴ画像がある時 ?> 78 <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url(get_option('stinger_logo_image')); ?>" /> 79 <?php else: //ロゴ画像が無い時 ?> 80 <?php bloginfo( 'name' ); ?> 81 <?php endif; ?> 82 </a></p> 83 <!-- キャプション --> 84 <?php if (is_home()) { ?> 85 <h1 class="descr"> 86 <?php bloginfo('description'); ?> 87 </h1> 88 <?php } else { ?> 89 <p class="descr"> 90 <?php bloginfo('description'); ?> 91 </p> 92 <?php } ?> 93 94 <!-- 95カスタムヘッダー画像 96--> 97 <div id="gazou"> 98 <?php if(get_header_image()): ?> 99 <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p> 100 <?php endif; ?> 101 </div> 102 <!-- /gazou --> 103 <!-- 104メニュー 105--> 106 <nav class="smanone clearfix"> 107 <?php 108$defaults = array( 109 'theme_location' => 'navbar', 110); 111wp_nav_menu( $defaults ); 112?> 113 </nav> 114</header> 115 116

どうかよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takutok

2015/06/25 02:09

ちょっと丸投げしすぎじゃないでしょうか。 どこをどのように修正したらうまくいかなかったのか教えていただけますか?
harukiadachi

2015/06/25 02:17

すいません。確かにそうかもしれません。。。 もう少し色々試してみて、改めて質問さしていただきます。
guest

回答2

0

//wp_nav_menu( $defaults );
?>

<style type="text/css"> .nav_box{float:left;width:32%;border-width:0px;margin:0px;padding:0px;} </style> <div> <div class="nav_box" style="margin-right:2%;"><a href=""><img src="" alt="gazou" width=100% height="auto" ></a></div><div class="nav_box"><a href=""><img src="" width=100% height="auto" ></a></div><div class="nav_box" style="float:right"><a href=""><img src="" alt="gazou" width=100% height="auto" ></a></div><div style="clear:both"></div> </div> <div style="margin-top:10px;"> <div class="nav_box" style="margin-right:2%;"><a href=""><img src="" alt="gazou" width=100% height="auto" ></a></div><div class="nav_box"><a href=""><img src="" alt="gazou" width=100% height="auto" ></a></div><div class="nav_box" style="float:right"><a href=""><img src="" alt="gazou" width=100% height="auto" ></a></div><div style="clear:both"></div> </div> </nav> </header>

header.phpのwp_nav_menu( $defaults );(から下全部)を上記のように変えたら、いけると思います。
但し、確認は余りしてませんので、ミスっているかもしれません。
imgのsrcには、一番上の階層からのパスをいれる必要があるようです。
なぜかはわかりません。ややこしかったら、絶対パスを入れたらいいと思います。
画像幅は、調整され、元の画像の比率を保って、高さも調整されるようです。
nav_boxのwidthと、一番左端のdivのmargin-rightをいじれば、微調整できます。
本当は、wp_nav_menuをいじりたいところですが、
かなりややこしそうだったので、

投稿2015/06/25 04:12

編集2015/06/25 14:18
phpbenkyo

総合スコア99

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

harukiadachi

2015/06/27 06:53

す、すごいです。 できました。 ありがとうございました! やはりPHPも勉強しないといけなそうですね。
phpbenkyo

2015/06/28 10:33

報告有難うございます。 余談ですが、 wp_nav_menu( $defaults );ですが、 $defaults['menu']='menuの名前'; wp_nav_menu( $defaults ); とすると、adminページで設定されたメニューではない、他のメニューを表示できます。 なので、2段以上のメニューを表示させたい場合は、 $defaults['menu']='menuの名前'; wp_nav_menu( $defaults ); を2つ以上かけば、2段以上メニューを表示させれます。 ただし、imgタグは、adminページで、カスタムリンクにそのままimgタグを 書けば登録されるようですが、width=100%と書いても、表示は、 元の画像の幅でしか表示されません。 恐らく、liの下にあるからだと思うのですが、 その場合は、javascriptで、調整すればいいとおもいます。 一応、ちょっとだけ、確認しましたが、下を貼り付けてもらえたら、 多分いけると思います。 設定するところはstyleタグ内の、nav ul liのところと、function fu_me2のなかの var wariai=32;//設定したいパーセントを指定(サイト全体の幅に対し) var kurasumei="m1";//設定したいクラス名を指定 のところです。 adminページのメニュー編集画面で、imgをクラス名を指定して登録してください。 多分、ページの幅に対して、指定したパーセントの横幅で表示されると思います。 その際は、親要素のliの幅以内にしかなりませんので、styleタグ内で、親要素のwidthも 同じ割合で設定してください。 バグってたら申し訳ないなかったです。 <style type="text/css"> /*nav ul liのwidthも調整、必要に応じmargin-right等も調整してください*/ nav ul{display:block;} nav ul li{width:32%;border-width:0px;margin:0px;padding:0px;display:block;} </style> <script type="text/javascript"> $( window ).resize(function(){ fu_me2(); }); $(document).ready(function(){ fu_me2(); }); function fu_me2(){ var wariai=32;//設定したいパーセントを指定(サイト全体の幅に対し) var kurasumei="m1";//設定したいクラス名を指定 var r=$("body").css("width"); var r_n=parseInt(r); r_n=r_n/wariai*100; r_n=Math.floor(r_n);//少数以下繰り下げ $("."+kurasumei).css("width",r_n); } </script>
guest

0

自己解決

もう少し勉強してから出直します。。

投稿2015/06/25 02:25

harukiadachi

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問