前回の「タイトルの直下にカテゴリー表示」で、 アイコンを表示させる部分も確保して、やった～！！成功！と思ったのもつかのま・・・

よくよく見てみると、タイトルと文章の間にスキマが大きく出来てしまっていた。(ノ_・、)

なんでやろう・・・。ちょうどclass="head-img"で記述した高さ分、 65px分だけスキマがあいている感じなのだ。

色々試行錯誤して悩んだあげく、方法を変更することに。

現在は、class="entry-header"が上段、 class="head-Categories"が中段、 class="head-img"が下段で、 この下段を-65pxずらしているんやけど、視覚的にはずれているが、 物理的にはその高さ分の下段が存在してることになってるみたい。

なので、「回りこみ」ゆうのをすることにしたのだ。（ただの勉強不足。）

いっちゃん左に、class="head-img"を。回りこみさせて、 右上段に新たに設定したclass="head-title"を。 右下段にclass="head-Categories"を、それぞれ配置させてみた。

●まず、前回いじった箇所を元に戻す。

●テンプレートから、 メインページを開き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"とした。

●次に、mt-static/themes/original/フォルダのoriginal.cssを開き、変更と付けたし。（赤字から青字へ，青字追加）

/* page layout */

.entry-header {
 margin: 0px ;
 padding: 10px 0px 5px 25px ;　→　padding: 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;
}

再構築かけたら、こんな感じで成功！！

例によって、エントリー・アーカイブ，カテゴリー・ アーカイブ，日付アーカイブにも変更を加えて完了。