バズ部　baseカスタマイズ　番外編　固定ページのタイトルをかっちょよく

バズ部のテーマbaseはとってもシンプルなのでカスタマイズしがいがありますね。
今回たまたま各固定ページのタイトルをちょっと画像の上に上手くのった感じにしたいというデザインが来ました。
全部画像で作れば簡単だけど、それじゃSEO的によろしくないですよね。

そこでh1のタイトル部分post-headerをmain-innerに中で自由に配置するおまじないをしようと思います。

HTMLの大きな画像はただの背景として考えて大丈夫です。
その下のsub_ttlはh1のページタイトルのサブで作りました。
構造的にはもうちょっと大きい見出しにしても良かったのですが、他の見出しとの兼ね合いで適当にしました。
.sub_ttlも好きな場所に動かせるようにposition: absolute;を書いてあります。

まだ完成してないのですが、このタイトルにするとアーカイブ一覧ページ記事タイトルに影響があるようで、そのあたりは調整が必要ですね。

<div class="main_imgbox"><img src="xxx.png" alt="f_main_img01" /></div>
<div class="sub_ttl">コースと料金</div>

.main-inner {
    position: relative;
}
.post-header {
    position: absolute;/*自由な動き*/
    top: 100px;
}
.sub_ttl {
    width: 350px;
    text-align: right;
    position: absolute;
    top: 155px;
    left: -6px;
}