Q&A
発行されているhtmlを記載することは可能でしょうか？
ご覧いただきありがとうございます。
現在wordpressでブログの記事の一覧画面を作成していますが
図のようにブログ記事のタイトル、記事の内容を表示する部分とサイドバーが同じ高さに
表示されなくなっています。
<試したこと>
一つ目
echo $p->post_title;
echo wp_strip_all_tags( $content, false );
の二行をコメントアウトするとサイドバーがメインのコンテンツの下に表示されないことを確認しました。
二つ目
article-title、article-bodyをcssでwidth:100pxにしましたがサイドバーの高さは変わりませんでした。
三つ目
<ul class="sidebar">の部分を<div class="blog-corner">内に入れてみましたが状況は変わりませんでした。メインのコンテンツが表示された後にサイドバーが表示される現象を解消する方法があればご教示いただきたいです。
PHP
1<!DOCTYPE html> 2 3<?php 4/** 5 * Template Name: 一覧＆ページネーション用 6 * Template Post Type: page, post 7 */ 8 ?> 9 10<!DOCTYPE html> 11<html> 12 <head> 13 <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> 14 <?php wp_head(); ?> 15 </head> 16 <body> 17 18<!-- content-menu開始 --> 19 <!-- メニュー --> 20 <header class="site-width"> 21 <h1><a href="<?php echo home_url(); ?>"><img src="<?php header_image(); ?>"class="img-responsive" alt="<?php bloginfo('name'); ?>"></a></h1> 22 <nav id="top-nav"> 23 <?php wp_nav_menu( array( 24 'theme_location' => 'mainmenu' , 25 'container' =>'', 26 'menu_class' => '', 27 'items_wrap' => '<ul>%3$s</ul>')); 28 ?> 29 </nav> 30 </header> 31 32 <!-- blog_list --> 33 <main id="main"> 34 <div class="blog-corner"> 35 <h1 class="title">ブログページ</h1> 36 37 <?php 38 39 $my_posts = get_posts(); ?> 40 <?php foreach ( $my_posts as $p ) { 41 42 $link = get_permalink($p->ID); 43 44 ?> 45 <article class="article-item"> 46 <h1 class="article-title"><a href="<?php echo get_permalink($p->ID); ?>" class="article-link"><?php echo $p->post_title; 47 ?></a></h1> 48 49 <p class="article-body"> 50 <?php 51 52 $content = $p->post_content; 53 echo wp_strip_all_tags( $content, false ); 54 ?> 55 </p> 56 </article> 57 58 59 <?php } 60 // loop.php終了 61 ?> 62 63 </div> 64 65 <ul class="sidebar"> 66 <?php dynamic_sidebar(); ?> 67 </ul> 68 </main> 69 70 71 72 <footer> 73 <?php echo "©️a-z since 2001"; ?> 74 </footer> 75 <?php wp_footer(); ?> 76 </body> 77</html>
css
1/* 2Theme Name: ShopGuide 3Theme URI: http://shopGuide.com 4Author: y.KOYANAGI 5Author URI: http://shopGuide.com 6*/ 7 8#main{ 9 margin-left: 220px; 10} 11 12 13li{ 14 list-style: none; 15 padding-bottom: 5px; 16} 17 18li a{ 19 text-decoration: none; 20 color: #5D99FF; 21} 22 23.site-width{ 24 float:left; 25 height: 100vh; 26 width: 220px; 27 position: fixed; 28} 29 30header h1 a{ 31 text-decoration: none; 32 color: #136FFF; 33} 34 35#concept{ 36 width: 800px; 37 padding: 20px; 38 margin-left: 200px; 39 font-size: 36px; 40 font-family: 'Montserrat', sans-serif; 41 background-color: #C2EEFF; 42} 43 44.title{ 45 padding-top: 120px; 46 text-align: center; 47 color: #136FFF; 48 font-family: 'Montserrat', sans-serif; 49 -webkit-appearance: none; 50 -moz-appearance: none; 51 appearance: none; 52} 53 54.description{ 55 text-align: center; 56 color: #5D99FF; 57} 58 59.menu-title{ 60 color: #5D99FF; 61 font-size: 24px; 62 padding-left: 20px; 63} 64 65.menu-name{ 66 color: #5D99FF; 67 padding-left: 400px; 68 padding-bottom: 20px; 69} 70 71.menu-photo{ 72 width: 400px; 73 height: auto; 74 padding-left: 400px; 75} 76 77.menu-comment{ 78 padding-left: 400px; 79 padding-bottom: 20px; 80 color: #5D99FF; 81} 82 83#map{ 84 margin-left: 500px; 85} 86 87 88.article-body{ 89 padding-top: 10px; 90 color: #5D99FF; 91 92} 93 94.article-link{ 95 text-decoration: none; 96 color: #5D99FF; 97} 98 99.article-content{ 100 color: #5D99FF; 101} 102 103.blog-corner{ 104 width: 400px; 105} 106 107.blog-category{ 108 font-size: 12px; 109 color: #5D99FF; 110 position: absolute; 111 padding-top: 20px; 112} 113 114.sidebar{ 115 float: right; 116} 117 118footer{ 119 width: 100%; 120 height: 40px; 121 text-align: center; 122 color: #5D99FF; 123 background-color: aliceblue; 124 position: fixed; 125 bottom: 0; 126}
html
1<!-- content-menu開始 --> 2 <!-- メニュー --> 3 <header class="site-width"> 4 <h1><a href="http://localhost:8888/wordpress2"><img src=""class="img-responsive" alt="shopGuide"></a></h1> 5 <nav id="top-nav"> 6 <ul><li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://localhost:8888/wordpress2/%e5%ba%97%e8%88%97%e4%b8%80%e8%a6%a7/">店舗一覧</a></li> 7<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="http://localhost:8888/wordpress2/%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc/">メニュー</a></li> 8<li id="menu-item-122" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-122"><a href="http://localhost:8888/wordpress2/category/%e6%9c%aa%e5%88%86%e9%a1%9e/" aria-current="page">ブログページ</a></li> 9</ul> </nav> 10 </header> 11 12 <!-- blog_list --> 13 <main id="main"> 14 <div class="blog-corner"> 15 <h1 class="title">ブログページ</h1> 16 17 <article class="article-item"> 18 <h1 class="article-title"><a href="http://localhost:8888/wordpress2/2021/05/26/%e5%a4%8f%e3%81%ae%e6%96%b0%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc/" class="article-link">夏の新メニュー</a></h1> 19 20 <p class="article-body"> 21 冷やし中華始めました </p> 22 </article> 23 24 25 <article class="article-item"> 26 <h1 class="article-title"><a href="http://localhost:8888/wordpress2/2021/04/22/%e6%98%a5%e3%81%ae%e6%96%b0%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc/" class="article-link">春の新メニュー</a></h1> 27 28 <p class="article-body"> 29 筍ご飯が4月14日から登場です！ </p> 30 </article> 31 32 33 <article class="article-item"> 34 <h1 class="article-title"><a href="http://localhost:8888/wordpress2/2021/04/18/%e8%94%93%e5%bb%b6%e9%98%b2%e6%ad%a2%e7%ad%96%e5%ae%9f%e6%96%bd%e4%b8%ad%e3%81%ae%e5%96%b6%e6%a5%ad%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/" class="article-link">蔓延防止策実施中の営業について</a></h1> 35 36 <p class="article-body"> 37 蔓延防止策実施中は20時までの営業とさせていただきます。（ラストオーダー19時半） </p> 38 </article> 39 40 41 <article class="article-item"> 42 <h1 class="article-title"><a href="http://localhost:8888/wordpress2/2021/04/18/%e7%b7%8a%e6%80%a5%e4%ba%8b%e6%85%8b%e5%ae%a3%e8%a8%80%e4%b8%ad%e3%81%ae%e5%96%b6%e6%a5%ad%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/" class="article-link">緊急事態宣言中の営業について</a></h1> 43 44 <p class="article-body"> 45 緊急事態宣言中は全店休業とさせていただきます </p> 46 </article> 47 48 49 50 <ul class="sidebar"> 51 <div class="sidebar-wrapper"><form role="search" method="get" id="searchform" class="searchform" action="http://localhost:8888/wordpress2/"> 52 <div> 53 <label class="screen-reader-text" for="s">検索:</label> 54 <input type="text" value="" name="s" id="s" /> 55 <input type="submit" id="searchsubmit" value="検索" /> 56 </div> 57 </form></div> 58 <div class="sidebar-wrapper"> 59 <h4 class="sidebar-title">最近の投稿</h4> 60 <ul> 61 <li> 62 <a href="http://localhost:8888/wordpress2/2021/05/26/%e5%a4%8f%e3%81%ae%e6%96%b0%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc/">夏の新メニュー</a> 63 </li> 64 <li> 65 <a href="http://localhost:8888/wordpress2/2021/04/22/%e6%98%a5%e3%81%ae%e6%96%b0%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc/">春の新メニュー</a> 66 </li> 67 <li> 68 <a href="http://localhost:8888/wordpress2/2021/04/18/%e8%94%93%e5%bb%b6%e9%98%b2%e6%ad%a2%e7%ad%96%e5%ae%9f%e6%96%bd%e4%b8%ad%e3%81%ae%e5%96%b6%e6%a5%ad%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/">蔓延防止策実施中の営業について</a> 69 </li> 70 <li> 71 <a href="http://localhost:8888/wordpress2/2021/04/18/%e7%b7%8a%e6%80%a5%e4%ba%8b%e6%85%8b%e5%ae%a3%e8%a8%80%e4%b8%ad%e3%81%ae%e5%96%b6%e6%a5%ad%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/">緊急事態宣言中の営業について</a> 72 </li> 73 </ul> 74 75 </div><div class="sidebar-wrapper"><h4 class="sidebar-title">最近のコメント</h4><ul id="recentcomments"></ul></div><div class="sidebar-wrapper"><h4 class="sidebar-title">アーカイブ</h4> 76 <ul> 77 <li><a href='http://localhost:8888/wordpress2/2021/05/'>2021年5月</a></li> 78 <li><a href='http://localhost:8888/wordpress2/2021/04/'>2021年4月</a></li> 79 </ul> 80 81 </div><div class="sidebar-wrapper"><h4 class="sidebar-title">カテゴリー</h4> 82 <ul> 83 <li class="cat-item cat-item-4"><a href="http://localhost:8888/wordpress2/category/%e5%96%b6%e6%a5%ad%e6%97%a5%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/">営業日のお知らせ</a> 84</li> 85 <li class="cat-item cat-item-5"><a href="http://localhost:8888/wordpress2/category/%e6%96%b0%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc/">新メニュー</a> 86</li> 87 </ul> 88 89 </div> </ul> 90 91 </div> 92 93 94 </main> 95 96 97 98 <footer> 99 ©️a-z since 2001 </footer>
wordpressのバージョンは5.7.2になります。
回答2件
0
自己解決
style.cssの
.blog-cornerに
float: left;
を追加したところメインのコンテンツとサイドバーが互い違いに出力される現象が解消されました。
アドバイスをくださった皆さんありがとうございました。
投稿2021/06/05 11:00
総合スコア338
あなたの回答
tips
プレビュー
