前回の「タイトルの直下にカテゴリー表示」で、アイコンを表示させる部分も確保して、やった~!!成功!と思ったのもつかのま・・・
よくよく見てみると、タイトルと文章の間にスキマが大きく出来てしまっていた。(ノ_・、)
なんでやろう・・・。ちょうどclass="head-img"で記述した高さ分、 65px分だけスキマがあいている感じなのだ。
色々試行錯誤して悩んだあげく、方法を変更することに。
現在は、class="entry-header"が上段、 class="head-Categories"が中段、 class="head-img"が下段で、この下段を-65pxずらしているんやけど、視覚的にはずれているが、物理的にはその高さ分の下段が存在してることになってるみたい。
なので、「回りこみ」ゆうのをすることにしたのだ。(ただの勉強不足。)
いっちゃん左に、class="head-img"を。回りこみさせて、右上段に新たに設定したclass="head-title"を。右下段にclass="head-Categories"を、それぞれ配置させてみた。
1)まず、前回いじった箇所を元に戻す。
2)テンプレートから、メインページを開きentryとentry-contentのタグの間に付け足し。(青字を追加)
<a id="a<$MTEntryID pad="1"$>"></a>
<div class="entry" id="entry-<$MTEntryID$>">
<div class="head-img"></div><div class="head-title">
<h3 class="entry-header"><$MTEntryTitle$></h3></div>
<div class="head-Categories">[ <MTEntryCategories glue=", ">
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$>
</a></MTEntryCategories> ]</div>
<div class="entry-content">
<div class="entry-body">
entry-headerの部分は、CSSでいじりやすいように、新たにclass="head-title"とした。
3)次に、mt-static/themes/original/フォルダのoriginal.cssを開き、変更と付けたし。(赤字から青字へ,青字追加)
/* page layout */
.entry-header {
margin: 0px ;
padding: 10px 0px 5px 25px ; → 15px 0px 0px 5px ;
color: #990000 ;
background: #ffcc99 ;
font-size: 18px ;
font-weight: bold ;
}
.head-img {
margin: 0 ;
padding: 0 ;
width : 65px ;
height : 65px ;
background-color : #ffcc99 ;
float:left;
}
.head-title {
margin: 0 ;
width : 473px ;
height: 44px ;
background-color: #ffcc99 ;
float: left ;
}
.head-Categories {
margin:0;
padding : 3px 15px 3px 0px ;
width : 458px;
text-align: right ;
background-color : #ffe3c8 ;
font-weight: bold ;
float:left;
}
再構築かけたら、こんな感じで成功!!
例によって、エントリー・アーカイブ,カテゴリー・ アーカイブ,日付アーカイブにも変更を加えて完了。