前提・実現したいこと
度々質問失礼します。
wordpress歴1か月程度の初心者です。
現在ドットインストール様を参考に簡単なwordpressのブログサイトを作成しようとしています。
発生している問題・エラーメッセージ
色々問題が起こっているのですが…
とりあえずメニューの問題を質問させていただきます。
初歩的な質問でしたら申し訳ありません。
ダッシュボード > 外観 > メニューから3つのメニューを作成したのですが、縦並びになってしまいます。これを横並びにするにはどのようにすればいいでしょうか…?
↑状況のSSです、画像のうまい貼り方が分かりませんでした…ごめんなさい。
PHP
1<?php get_header(); ?> 2 3<body <?php body_class(); ?>> 4 <header> 5 <div class="container"> 6 <h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1> 7 <nav> 8 <?php wp_nav_menu(); ?> 9 </nav> 10 </div> 11 </header> 12 13 <main> 14 <div class="container flex"> 15 <div id="posts"> 16 17 <?php 18 if ( have_posts() ) : // もし投稿が1件以上あったら 19 while ( have_posts() ) : // 投稿の表示条件を満たす間は繰り返す 20 the_post(); // データ1件分を取り出して渡す 21 ?> 22 23 <div id="post"> 24 <div class="post-header"> 25 <h2> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h2> 26 <div class="post-meta"><?php echo get_the_date(); ?>【<?php the_category(', '); ?>】</div> 27 </div> 28 <div class="post-content"> 29 <div class="post-image"> 30 31 <?php if( has_post_thumbnail() ) : // サムネイル画像があったら 32 the_post_thumbnail( array(100,100) ); // 表示する 33 else : //サムネイル画像がなければ ?> 34 <img src="<?php echo esc_url( get_theme_file_uri ( 'img/noimage.png' ) ) ?>" width="100" height="100"> </div> 35 <?php endif; // 条件分岐終了 ?> 36 37 <div class="post-body"> 38 <?php the_excerpt(); ?> 39 </div> 40 </div> 41 </div> 42 </div><!-- /post --> 43 44 <?php 45 endwhile; // 投稿ループ終了 46 else : // もし表示すべき投稿がなかったら 47 ?> 48 49 <p>この記事は存在しません。</p> 50 51 <?php 52 endif; // 条件分岐終了 53 ?> 54 55 </div> 56 <div class="navigation"> 57 <div class="prev"><?php previous_posts_link(); ?></div> 58 <div class="next"><?php next_posts_link(); ?></div> 59 </div> 60 <?php dynamic_sidebar(); ?> 61 </div> 62 </main> 63 64<?php get_footer() ?>
CSS
1@charset "UTF-8"; 2/* 3Theme Name: MyTheme 4Template: twentyfifteen 5Author: Mouyan 6*/ 7body { 8 font-size: 16px; 9 color: #333; 10} 11a { 12 text-decoration: none; 13} 14p { 15 padding-bottom: 16px; 16 margin: 0; 17 line-height: 1.8; 18} 19.container { 20 width: 800px; 21 margin: 0 auto; 22 overflow: hidden; 23} 24.flex { 25 display: flex; 26 flex-wrap: wrap; 27} 28main .flex { 29 justify-content: space-between; 30} 31/* header */ 32h1 { 33 font-weight: bold; 34 font-size: 18px; 35 padding: 15px 0; 36} 37.menu { 38 background: #0198F1; 39 margin-bottom: 30px; 40 font-size: 12px; 41 text-align: center; 42} 43.menu a { 44 display: block; 45 padding: 10px 0; 46 color: #fff; 47 width: 150px; 48 transition: .3s all ease; 49} 50.menu a:hover { 51 background: #49c2ff; 52} 53/* post */ 54#posts { 55 width: 635px; 56} 57.post { 58 margin-bottom: 30px; 59} 60.post-header { 61 margin-bottom: 15px; 62} 63.post-header h2 { 64 font-weight: bold; 65} 66.post-meta { 67 font-size: 12px; 68 padding: 7px 0; 69 color: #555; 70} 71.post-content { 72 overflow: hidden; 73} 74.post-image { 75 float: left; 76 width: 115px; 77} 78.post-body { 79 margin-left: 115px; 80} 81/* navigation */ 82.navigation { 83 overflow: hidden; 84 padding: 10px 0; 85 font-size: 12px; 86 margin-bottom: 15px; 87} 88.prev { 89 float: left; 90 width: 300px; 91} 92.next { 93 float: right; 94 width: 300px; 95 text-align: right 96} 97/* sidebar */ 98#sidebar { 99 width: 150px; 100} 101.widget { 102 margin-bottom: 25px; 103} 104.widget h3 { 105 font-weight: bold; 106 padding-bottom: 7px; 107} 108.widget li { 109 line-height: 1.8; 110} 111/* footer */ 112footer { 113 padding: 15px 0; 114 font-size: 12px; 115 color: #aaa; 116 border-top: 1px solid #ccc; 117 text-align: center 118}
ご助力頂けると幸いです。
よろしくお願いいたします。
追記
html部分を確認したいという編集依頼があったので、追記させていただきます。
html
1<nav> 2 <div class="menu-mymenu-container"> 3 <ul id="menu-mymenu" class="menu"> 4 <li id="menu-item-102" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-102"><a href="/wordpress" aria-current="page">ホーム</a></li> 5 <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://localhost/wordpress/%e3%83%97%e3%83%ad%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab/">プロフィール</a></li> 6 <li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="http://localhost/wordpress/%e3%81%93%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/">このサイトについて</a></li> 7 </ul> 8 </div> 9</nav>
回答1件
あなたの回答
tips
プレビュー