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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

バズ部のテーマ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;
}

もしお役に立てたり、クスッとして頂いたりご共感頂けた際にはポチっとして頂けますと記事への情熱になったりしなかったり。。。

  • にほんブログ村 子育てブログへ
  • にほんブログ村 IT技術ブログ WordPressへ
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*

CAPTCHA