【CSS3】Bloggerの記事タイトルと日付ヘッダーをパステル調の立体的リボンでデザインする

概要

旧「date-header」

「日付ヘッダー」って…無頓着かデザイン重視かで…

こだわりが両極端ですよね… 当サイトでは…

画像を使ってはいますが無頓着寄りでした…

デザイン重視系の代表格といえば…

日付設定を「JavaScript」で弄って…

「calendar」「banner」「circular」などの画像上に表示させる手法ですね…

しかしながら…日付ヘッダーのためだけに…

「document.write」や「onload」イベントで…

「DOM」構築をその都度ストップするなど…

とてもじゃありませんが…ページ読み込み速度の観点からも容認出来ません…

チュートリアルを書いているサイトでも…

殆ど…実装されていないのが何よりの証左です…

なので…少しだけデザイン重視寄りにするために…過去記事の…

 CSSだけで作るパステル調の立体的リボン(CSS-3D-Ribbon)

 CSSだけで作るパステル調の立体的リボン(CSS-3D-Ribbon)…斜め掛け編


…で「banner」タイプ的な感じ…や…

「calendar」タイプ寄りに改変してみましょう…

大前提として…上記…過去記事をお読み下さい…

解説は…記事時点で実装しているものしかしない主義なのでご了承下さい…

投稿ページ以外用の「HTML」マークアップ

変更後「date-header」

投稿ページ以外用……と…小見出しに書きましたが…

こんな感じで…折り返し三角形を取り除いて…

実装していた時期もありましたので…

タイトル部分を含めたカスタマイズで進めて行きます…

タイトル部分の背景を土台として使用しているのでタイトル部分の「HTML」から…

デフォルトでは…テンプレートにより違いますが…

こんな感じになっていると思います…

デフォルトのタイトル部分の「HTML」

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
  <a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
  <b:if cond='data:post.url'>
    <b:if cond='data:blog.url != data:post.url'>
      <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
      <data:post.title/>
    </b:if>
  <b:else/>
    <data:post.title/>
  </b:if>
</b:if>
</h3>

これを…以下のように書き換えます…

書き換えるタイトル部分の「HTML」

<div id='ribbon-back' style='background:#15406a url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQMAAACTPww9AAAABlBMVEUAAACIiIhaeOqmAAAAAXRSTlMAQObYZgAAABBJREFUCNdjaGAQYFBgcAAABHgA8YDZ/B8AAAAASUVORK5CYII=);width:479px;margin:5px auto 15px; padding:2px 5px;'>
<h3 class='post-title entry-title' id='ribbon-title' style='font-size:13px;margin-left:-27px;width:510px;'>
<b:if cond='data:post.link'>
  <a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
  <b:if cond='data:post.url'>
    <b:if cond='data:blog.url != data:post.url'>
      <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
      <data:post.title/><span class='triangle2-l'/><span class='triangle2-r'/>
    </b:if>
  <b:else/>
      <data:post.title/>
  </b:if>
</b:if>
</h3>
</div>

背景のスラッシュ画像も「base64」変換して入れてあります…

続いて…日付ヘッダー部分です…こんな感じになっていると思います…

デフォルトの日付ヘッダー部分の「HTML」

<b:if cond='data:post.dateHeader'>
    <h2 class='date-header'>
        <data:post.dateHeader/>
    </h2>
</b:if>

これを…以下のように書き換えます…

書き換える日付ヘッダー部分の「HTML」

<b:if cond='data:post.dateHeader'>
    <h2 class='date-header'>
        <h4 class='ribbon01' style='margin-top:-15px;padding:0;font-size:10px;font-weight:900;position:relative;top:10px;left:450px;width:80px;text-align:center' title='Date'>
            <data:post.dateHeader/>
        </h4>
    </h2>
</b:if>

現在は…検索ページなどで実装しています…

これで良い場合は以下をお読みになる必要はありません…

投稿ページ用の「HTML」マークアップ

投稿ページでは「calendar」タイプを少し意識して

サイドバー上部に表示されている形状に改変して実装しています…

投稿ページ用の「HTML」です…

投稿ページ用の「HTML」

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='ribbon-back' style='width:65px;font-size:14px;position:absolute;top:185px;left:145px;text-align:center;background:#72aae2;background:-moz-linear-gradient(top,#72aae2,#111);background:-webkit-gradient(linear,left top,left bottom,from(#72aae2),to(#111))'>
    <h4 class='ribbon01 degrees-l' style='font:italic bold 14px Arial, Helvetica;position:absolute;top:5px;left:-8px;width:90px;line-height:14px;text-align:center' title='Date'>
    <data:post.dateHeader/><span class='degrees' style='width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #c9c9c9;bottom:-7px;left:1px;position:absolute'/><span class='degrees' style='width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #c9c9c9;bottom:-7px;right:1px;position:absolute'/>
    </h4>
    <br/><i>Posted</i>
    </div>
    </b:if>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <h4 class='ribbon01' style='margin-top:-15px;padding:0;font-size:10px;font-weight:900;position:relative;top:10px;left:450px;width:80px;text-align:center' title='Date'>
    <data:post.dateHeader/>
    </h4>
    </b:if>
  </h2>
</b:if>

「if」の条件式で投稿ページと…投稿ページ以外のスタイルを分岐しています…

サイズ感は…正直…迷いました…投稿ページ以外のサイズで…

斜め掛けにしたほうが…より…「calendar」タイプ寄りで好みなのですが…

通常と違う位置に表示させる場合は…

まぁ…見易い方が良いだろう…ってな感じですね…

リボン部分のフォントも…同様の理由で…リセットしています…

左 : 横幅サイズの場合
右 : 横幅より広い場合

「position:absolute」を使っていますので…

サイト横幅よりブラウザの横幅が広い場合…

その差だけ左にズレます…

これを回避して位置を固定するには「h2」部分の位置を固定して…

「div」部分の位置を変更してやる必要があります…

固定バージョンの「HTML」は末尾に置いておきます…

投稿ページ用は「position:absolute」の関係で…

サイドバーが通常の位置だと被りますから…これも…

「if」の条件式でサイドバーの位置を投稿ページの場合だけ…

下に「100px」ずらして表示させています…サーチガジェットに記述しています…

デフォルトのサーチガジェットの「HTML」

<b:widget id='HTML3' locked='false' title='Search : Dégustation?' type='HTML'>
  <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='side-l'>
        <span class='light light-g'>
          <a title='検索'>
            Search
          </a>
        </span>
      </h2>
      <br style='clear:both;'/>
    </b:if>
    <div class='widget-content ui-corner-bottom'>
      <data:content/>
    </div>
    
  </b:includable>
</b:widget>

「if」の条件式で分岐したサーチガジェットの「HTML」

<b:widget id='HTML3' locked='false' title='Search : Dégustation?' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='side-l' style='margin-top:100px'>
        <span class='light light-g'>
          <a title='検索'>
            Search
          </a>
        </span>
      </h2>
      <br style='clear:both;'/>
    </b:if>
    <div class='widget-content ui-corner-bottom'>
      <data:content/>
    </div>
    </b:if>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='side-l'>
        <span class='light light-g'>
          <a title='検索'>
            Search
          </a>
        </span>
      </h2>
      <br style='clear:both;'/>
    </b:if>
    <div class='widget-content ui-corner-bottom'>
      <data:content/>
    </div>
    </b:if>
    
  </b:includable>
</b:widget>

黃文字が該当部分です…「HTML」には…過去記事の…

 jQuery UI Extra-5 : HTML要素のマウスホバー時に光源がカーソルに追従するエフェクト


…の記述が含まれていますが…気にしない方向で…

表示位置を固定する場合の投稿ページ用の「HTML」

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header' style='margin:0 auto;position:absolute'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='ribbon-back' style='width:65px;font-size:14px;position:relative;top:-60px;left:-85px;text-align:center;background:#72aae2;background:-moz-linear-gradient(top,#72aae2,#111);background:-webkit-gradient(linear,left top,left bottom,from(#72aae2),to(#111))'>
    <h4 class='ribbon01 degrees-l' style='font:italic bold 14px Arial, Helvetica;position:absolute;top:5px;left:-8px;width:90px;line-height:14px;text-align:center' title='Date'>
    <data:post.dateHeader/><span class='degrees' style='width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #c9c9c9;bottom:-7px;left:1px;position:absolute'/><span class='degrees' style='width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #c9c9c9;bottom:-7px;right:1px;position:absolute'/>
    </h4>
    <br/><i>Posted</i>
    </div>
    </b:if>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <h4 class='ribbon01' style='margin-top:-15px;padding:0;font-size:10px;font-weight:900;position:relative;top:10px;left:450px;width:80px;text-align:center' title='Date'>
    <data:post.dateHeader/>
    </h4>
    </b:if>
  </h2>
</b:if>

以上です…最後までお読みいただきましてありがとうございます…

Tips Universal Header Sidebar Footer Current-Label : Main