2015年6月15日

タイトル下にコンテンツを入れる方法。ヘッダー下、投稿の上です。CSSを指定して、お知らせ等を記入。

スポンサードリンク

 タイトル直下というより、ヘッダー、タブの下です。
投稿コンテンツの上です。

重要なお知らせ等はここに追加しておくと良いですね。
広告も載せられますよ。


ヘッダー下にコンテンツ追加


 ヘッダーのすぐ下です。
とても目立つ位置なので、

重要なお知らせ
おすすめ広告

などを配置するとかなり効果的に見てもらえると思います。


ウィジェット


 2つやり方があって、
1つはウィジェットを追加する事です。

単純に、

レイアウト→

ウィジェットの追加→

投稿の上にウィジェットを移動させる


だけでOKです。


 ただ、ヘッダー下、投稿上に何もコンテンツが無ければ
上手く表示されますが、
そうでない場合は注意が必要です。


 実際私はウィジェット追加では対応できませんでした。
なので、もう1つのやり方です。

テンプレートに直接HTMLを記入します。


 日付と重なってしまうのですね。
私が使っているテンプレートでは、日付が吹き出しのようになっています。

この吹き出しとウィジェットが重なってしまいました。


 日付のCSSを指定して、位置をずらす事は出来るのですが、
ウィジェットを削除した時に
日付の上に変な空間が出来てしまう為、
今後のメンテナンスを考えると却下しました。


HTMLを記入


 という事で、HTMLに
ヘッダー下、投稿上にコンテンツを追加する方法です。


 早速、テンプレート編集へいきましょう。
テンプレート内から

<div class='blog-posts hfeed'>

を探します。


 2つあります。

ひとつはモバイル表示用です。
もうひとつがPC用です。

それぞれ、好きな方に追加して下さい。
私は今回PC用のみに追加しました。



 PC用とモバイル用の見分け方はちょっとややこしいです。

前後のコードを見て、
どちらに該当するかをご確認くださいね。



    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='posts' name='breadcrumb'/>→パンくずリストのコード

      <b:include data='top' name='status-message'/>→ラベル ○○ の投稿を表示しています。 すべての投稿を表示。等のステータスメッセージを表示させるコード(大事なコード)

<br/>→改行


<div class='information-1'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div align='center'>お知らせ</div>
<br/>
ただ今メンテナンス中です。<br/><br/>
<div align='center'>名前</div>
<b:else/>
</b:if>
</div>

      <data:defaultAdStart/>


このように追加しました。

前後のコードはテンプレートによって違います。


 インデックスページ(トップとラベル一覧)
でメンテナンス中のアナウンスを表示させ、
それ以外のページでは表示させないようにしています。

全てのページで表示させたい時は


<br/>
<div class='information-1'>
<div align='center'>お知らせ</div>
<br/>
ただ今メンテナンス中です。<br/><br/>
<div align='center'>名前</div>
</div>

でOKですね。
分岐したい方はご自由に設定できます。


 さらにCSSも作っています。


.information-1{
  background:#cfe2f3;
  border:1px solid #664400;
  width:586px;
  padding:10px 15px;
}


  width:586px;は、
ご自身のページの投稿の幅と合わせます。

見やすく、キレイに調整して下さい。


 余白は
  padding:10px 15px;

です。

広くしたら、
  width:586px;
の幅を調整して下さい。


 背景の色は
  background:#cfe2f3;

です。
ウィジェットや投稿の背景色と合わせる事がおすすめ。
馴染みます。




 当ブログ内の情報は、
全ての方に応用できるとは限りません。

必ずテンプレートはバックアップを取っておいて下さいね。


また、ご利用は自己責任でお願い致します。

ラビットしま子は美容ライターであり、
サイト制作のプロではありません。

個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。(わからんから)


スポンサードリンク