ブログのヘッダ。「ブログの説明文」の位置の移動。

ヘッダ画像とタイトル文字の位置が決まって一安心ですが、どうせならということで、タイトル横の「ブログの説明 (日々の活動記録)」の位置も変更してみます。

現状は、このとおり。ブログタイトルの横に、「ブログの説明文」が配置されています。これをブログタイトルの下に移動させたいと思います。

ブログタイトルとブログの説明を記載したHTMLコードを確認すると

<div id="blog-title-content">
      <h1 id="title"><a href="https://www.~~~">自分方位研究所</a></h1>
      <h2 id="blog-description">日々の活動記録</h2>
</div>

<h1>タグと<h2>タグが連続して記述されているので、CSSでの修飾がなければ、文字の大きさは別として、

自分方位研究所

日々の活動記録

のように改行されて表示されますが、

id="title"  と  id= "blog-description" に、以下のCSSが設定されているので

タイトルとブログの説明が横並びに表示されています。

#title { display: inline-block; }   /* ブログタイトル */
#blog-description { display: inline-block; }   /* ブログの説明 */

 「ブログの説明」を、現状表示されている位置から相対的に移動させるには

 positionプロパティで値を relative に指定して 左方向と下方向への移動距離を指定することにしました。移動には関係ありませんが、フォントサイズも12pxから14pxへと少し大きくしました。

h2#blog-description{ position: relative; 
    left: -184px;  /* 左方向へ移動 */
    top : 20px;   /* 下方向へ移動 */
    font-size: 14px;
}

 CSSに上記のコードを追加すると、以下のように移動してくれました。

 これで完成。

ヘッダ部分、タイトルの右側が大きく空白となっていますが、これをどうするかは、今後考えるとして、とりあえずヘッダへの画像表示については、これにて完了とします。