IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / cms-style / はてなブログの記事タイトルの配置を考える cms-style(5)

はてなブログの記事タイトルの配置を考える cms-style(5)

2017/05/10 cms-style, CSS, はてなブログ

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

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

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

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

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

下がひとつ前の記事、cms-style(4)の <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(4)</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 を使って、表示したくないカテゴリーを非表示にしています。

Joomla! 3.7 新機能 記事登録に Captcha 機能でエラー
はてなブログ/検索モジュールをどこに配置しよう? cms-style(6)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/08/13

はてなブログProを解約したらエェ〜?!

2022/08/10

WordPress にプラグインなしで fancybox4 導入

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript96
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress38
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com