はてなブログの記事タイトルの配置を考える cms-style（５）

はてなブログを WordPress 風に！ > cms-style 記事一覧

はてなブログをどうやって当サイトのデザインにしているかを書いています。

今回は記事タイトルブロックについてです。ご覧のように、大きく記事タイトル、そしてその下に日付とカテゴリーを配置していますが、もともとの HTML はそうなっていません。また、カテゴリーをタグとして使用するため複数当てていますが、タイトルブロックにはそのひとつしか表示していません。その方法です。

• 記事タイトル .entry-header の構造
• Flexbox
• Flexbox : order で順序を指定する
• カテゴリーの一部を表示する CSS

記事タイトル .entry-header の構造

下がひとつ前の記事、cms-style（４）の <header class="entry-header"></header> の HTML です。

<header class="entry-header">


  /* 日付 */
  <div class="entry-date date first">
    <a href="http://www.imuza.com/archive/2017/05/07" rel="nofollow">
      <time pubdate datetime="2017-05-07T06:35:50Z" title="2017-05-07T06:35:50Z">
        <span class="date-year">2017</span><span class="hyphen">-</span>
        <span class="date-month">05</span><span class="hyphen">-</span>
        <span class="date-day">07</span>
      </time>
    </a>
  </div>


  /* タイトル */
  <h1 class="entry-title">
    <a href="http://www.imuza.com/entry/2017/05/07/153550" class="entry-title-link bookmark">#top-editarea をページタイトルエリアとして利用する cms-style（４）</a>
  </h1>


  /* カテゴリー */
  <div class="entry-categories categories">
    <a href="http://www.imuza.com/archive/category/cms-style" class="entry-category-link category-cms-style">cms-style</a>
    <a href="http://www.imuza.com/archive/category/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0" class="entry-category-link category-はてなブログ">はてなブログ</a>
    <a href="http://www.imuza.com/archive/category/CSS" class="entry-category-link category-CSS">CSS</a>
    <a href="http://www.imuza.com/archive/category/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%86%E3%83%BC%E3%83%9E" class="entry-category-link category-はてなテーマ">はてなテーマ</a>
  </div>
</header>

「日付」「タイトル」「カテゴリー」の順序にならんでいます。以前は、これらの位置を変えるために日付やカテゴリーを絶対位置指定していたのですが、その場合、どうしてもそれ分のスペースを確保する必要があり、特にカテゴリーは文字数が変わりますのでかなり苦労しました。

それが、Flexbox display: flex; を使いますといとも簡単に表示順を変更できます。

ところで、今回の話題とは関係ありませんが、日付に指定してあるクラスの date first は何に使っているんでしょう？ Javascript で何かしているんでしょうか？

Flexbox

Flexbox の仕様は、CSS flexible box の利用 – CSS: カスケーディングスタイルシート | MDN など情報も豊富ですが、当サイトでも以前記事にしています。

www.imuza.com

Flexbox : order で順序を指定する

当サイトでは、Flexbox の子要素に order を指定して順序を変更しています。以下が、記事タイトルブロックに当てている CSS（Flexbox 関連分のみ）です。

.entry-header {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-content: center;
  align-content: center; }
  
  .entry-header .entry-title {
    order: 1;
    width: 100%; }
    
  .entry-header .entry-date {
    order: 2; }
    
  .entry-header .entry-categories {
    order: 3; }

• display: flex; を指定した要素の子要素に order: 順序 を指定すればその順序で子要素が並びます
• flex-wrap: wrap; は、複数行表示を指定しています
• justify-content: center; は、左右中央に配置します
• align-content: center; は、上下中央に配置します

これで記事タイトルブロック内を自由にレイアウトできます。

カテゴリーの一部を表示する CSS

はてなブログのカテゴリーは階層化できませんので（多分）、タグに使おうとしますと、どうしても数が多くなります。

それをそのままタイトル下に表示するには煩雑（個人の感覚）ですし、メニューに利用している場合には、その整合性のためにもメインカテゴリーともいうべき大きな括りだけ表示したいものです。

当サイトでも、トップページにタグクラウドを表示するために、たくさんカテゴリー分けをしており、また全てのページに大きな括りのカテゴリーをメニュー表示しています。その二つを両立する方法です。

.entry-header .entry-category-link
  :not(.category-はてなブログ)
  :not(.category-Joomla\!)
  :not(.category-WebTips)
  :not(.category-Windows)
  :not(.category-Linux) {
    display: none; }

単純な方法ですが、否定擬似クラス :not を使って、表示したくないカテゴリーを非表示にしています。