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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

4838閲覧

CSS テキストの余白を埋めることができない。

Susanoo2442

総合スコア153

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2016/10/19 09:49

質問です。

現在WordPressでブログを立ち上げているのですが

トップページの記事一覧の部分で
タイトルと投稿日時の隙間を埋めたいのですが
ネガティブマージンやらpaddingやら試しましたが
全く動きません。

イメージ説明

写真を見てもらったらわかると思いますが
ブログ開設!と書かれているその下の

2016年10月19日と書かれているこの
二つの文字の隙間を埋めたいです。

しかし、何をしてもこの
2016年10月19日が上にいかないので
両者の隙間を埋めることができません。

###該当のコード

index.phpです。

PHP

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.9.1/build/cssreset/cssreset-min.css"> 7 <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>"> 8 <link rel="stylesheet" type="text/css" href="style.css"> 9 10 </head> 11 <body> 12 <!-- ヘッダー --> 13 <header> 14 <h1 id="Main"><a href="">IT MASTER</a></h1> 15 <div id="Block"></div> 16 <ui> 17 <li><a href="" class="Menu">全カテゴリ</a></li> 18 <li><a href="" class="Menu2">HOME</a></li> 19 <li><a href="" class="Menu2">プロフィール</a></li> 20 </ui> 21 <div id="Block2"></div> 22 </header> 23 <!-- ここまで --> 24 <!-- サイドバー --> 25 <Section> 26 <div id="Categori"> 27 <ui> 28 <div class="CategoriMenu"><li><a href=""><span style="color:lightgray;">Swift</span></a></li></div> 29 <div class="CategoriMenu"><li><a href=""><span style="color:lightgray;">C</span></a></li></div> 30 <div class="CategoriMenu"><li><a href=""><span style="color:lightgray;">Java</span></a></li></div> 31 <div class="CategoriMenu"><li><a href=""><span style="color:lightgray;">HTML/CSS</span></a></li></div> 32 <div class="CategoriMenu"><li><a href=""><span style="color:lightgray;">ReveseEngineering</span></a></li></div> 33 <div class="CategoriMenu"><li><a href=""><span style="color:lightgray;">PenetrationTest</span></a></li></div> 34 </ui> 35 </div> 36 </section> 37 <!-- ここまで --> 38<!-- メインコンテンツ --> 39 <section> 40 <div id="Block3"></div> 41 <div id="MainContent"> 42 43 44 <?php if (have_posts()) : ?> 45 <?php while (have_posts()) : the_post(); ?> 46 47 48 <div class="PictureContent"> 49 <?php if (has_post_thumbnail()) : ?> 50 <?php the_post_thumbnail(array(100, 100)); ?> 51 <?php else: ?> 52 <img src="<?php echo get_template_directory_uri(); ?>/img/noimage.png" width="150" height="150"> 53 <?php endif; ?> 54 </div> 55 56 57 58 <a class="TitleContent" href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 59 60 61 62 <p class="DataContent"> 63 <?php echo get_the_date(); ?> 64 </p> 65 66 67 68 69 <div class="PostContent"><?php the_content('続きを読む...'); ?></div> 70 71 72 73 <?php 74 endwhile; 75 else: 76 ?> 77 78 79 <p>Not Found Pages...</p> 80 81 <?php 82 endif; 83 ?> 84 85 86 87 88 89 </div> 90 </section> 91 <!-- ここまで --> 92 93 94 <section> 95 </section> 96 97 </body> 98 </html>

style.cssです。

CSS

1 2body{ 3text-align:center; 4height:100%; 5} 6html{ 7 height:100%; 8} 9a{ 10color:black; 11text-decoration:none; 12} 13li{ 14list-style:none; 15} 16p{ 17 text-align:center; 18 color:lightgray; 19 font-size:25px; 20} 21h2{ 22 color:lightgray; 23} 24#Block{ 25background-color:black; 26width:20%; 27height:80px; 28float:left; 29border-bottom-style:solid; 30border-bottom-color:tan; 31 32} 33#Main{ 34font-size:50px; 35border-bottom-style:solid; 36border-bottom-color:burlywood; 37} 38.Menu{ 39 background-color:black; 40 color:tan; 41 width:20%; 42 height:80px; 43 float:left; 44 display:flex; 45 align-items:center; 46 justify-content:center; 47 border-bottom-style:solid; 48 border-bottom-color:burlywood; 49 50} 51.Menu2{ 52color:tan; 53background-color:black; 54width:20%; 55height:80px; 56float:left; 57display:flex; 58align-items:center; 59justify-content:center; 60border-bottom-style:solid; 61border-bottom-color:burlywood; 62 63} 64#Block2{ 65background-color:black; 66width:20%; 67height:80px; 68border-bottom-style:solid; 69border-bottom-color:burlywood; 70float:left; 71} 72#Categori{ 73background-color:black; 74width:17%; 75height:1250px; 76padding-top:80px; 77clear:both; 78border-right-style:solid; 79border-right-color:burlywood; 80} 81.CategoriMenu{ 82 font-size:25px; 83 border-width:1px; 84 border-bottom-style:solid; 85 border-bottom-color:#DDDDDD; 86 color:lightgray; 87 padding-top:30px; 88} 89#Block3{ 90 background-color:black; 91 width:17%; 92 height:120.8px; 93 float:left; 94 border-right-style:solid; 95 border-right-color:burlywood; 96} 97#MainContent{ 98 background-color:black; 99 width:50%; 100 float:left; 101 /*height:1450px;*/ 102 min-height:1450px; 103 height:auto; 104 margin-left:8%; 105 margin-top:-1330px; 106 border-right-style:solid; 107 border-right-color:burlywood; 108 border-left-style:solid; 109 border-left-color:burlywood; 110} 111.PictureContent{ 112 float:left; 113 padding-left:26%; 114 padding-top:40px; 115} 116.TitleContent{ 117 color:burlywood; 118 font-size:30px; 119 padding-left:5%; 120 padding-top:90px; 121 margin-bottom:0px; 122 float:left; 123} 124.DataContent{ 125color:burlywood; 126font-size:20px; 127margin-top:-50px; 128clear:both; 129} 130.PostContent{ 131padding-top:0px; 132overflow:hidden; 133font-size:10px; 134} 135.more-link{ 136 color:burlywood; 137} 138

このブログ開設!と
2016年10月19日の二つのテキストの
隙間を埋めれれば問題ありません。

どなたか
問題を解決するべく
アドバイス頂けないでしょうか。

宜しくお願い致します。

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

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

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

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

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

guest

回答2

0

ベストアンサー

clear:both;している要素のmargin-topは実質的に無効状態になるので、
ネガティブマージンを与えても動きません。

今のHTML構造のままで、なんとかして日付を上にずらしたいのであれば、

CSS

1.DataContent{ 2color:burlywood; 3font-size:20px; 4/*margin-top:-50px;*/ 5clear:both; 6position: relative; /*追加*/ 7top: -50px; /*追加*/ 8}

このようにすれば今の位置から上にずらすことはできます。
ただ、このような対処療法はあまりおすすめはできませんね。

日付とタイトルの間の余白をツメたいとのことですが、最終的にどんなレイアウトにしたいのですか?
もし画像の横にタイトルと日付をまとめて並べたい、というのであれば、
HTMLの構造を変更した方がすんなり作れると思います。

例えばこんな感じに。(※class名とかは適当です)

HTML

1<div id="MainContent"> 2 3<div class="PageHeade"> <!-- 画像・タイトル・日付を包む枠を追加 --> 4 <div class="PictureContent"><img src="img/noimage.png" width="150" height="150"></div> 5 <div class="TitleArea"><!-- タイトル・日付を囲む枠を追加 --> 6 <h1 class="TitleContent"><a href="">タイトル</a></h1> 7 <p class="DataContent">2016年○月○日</p> 8 </div><!-- /.TitleArea --> 9</div><!-- /.PageHeader --> 10 11</div>

どういう状態を作りたいのかによっては、上記以外の構造のほうが良い場合もありますので
一概には言えませんが、現状のように画像・タイトル・日付の3つの要素が並列にただ並んでいるだけの状態では、
レイアウトを細かく制御するのは困難だと思いますので、必要に応じで枠を追加するなどして対処しましょう。

投稿2016/10/19 14:14

aKusano

総合スコア3763

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

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

Susanoo2442

2016/10/19 15:08

回答ありがとうございます。 position:relative: 便利ですね。 勉強になりました! htmlのレイアウトの方はのちに少しずつ 変えていく予定です! アドバイスありがとうございました。
guest

0

これでどうでしょう?

CSS

1.DataContent{ 2color:burlywood; 3font-size:20px; 4margin-top:-50px; 5/*clear:both;*//* DELETE */ 6}

投稿2016/10/19 09:53

kei344

総合スコア69364

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

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

Susanoo2442

2016/10/19 15:08

both:clearを消せばよかったんですね。 まだまだ、勉強不足を痛感しました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問