投稿コンテンツの上です。
重要なお知らせ等はここに追加しておくと良いですね。
広告も載せられますよ。
ヘッダー下にコンテンツ追加
ヘッダーのすぐ下です。
とても目立つ位置なので、
重要なお知らせ
おすすめ広告
などを配置するとかなり効果的に見てもらえると思います。
ウィジェット
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 == "index"'>
<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;
です。
ウィジェットや投稿の背景色と合わせる事がおすすめ。
馴染みます。
当ブログ内の情報は、
全ての方に応用できるとは限りません。
必ずテンプレートはバックアップを取っておいて下さいね。
また、ご利用は自己責任でお願い致します。
ラビットしま子は美容ライターであり、
サイト制作のプロではありません。
個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）
スポンサードリンク