IMUZA.com

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

ホーム / CSS / CSS3 の display: flex がスゴイ! はてなブログのカスタマイズに活用!

CSS3 の display: flex がスゴイ! はてなブログのカスタマイズに活用!

2016/11/12 CSS, WebTips, はてなブログ

CSS3 の Flex レイアウトをご存じですか?

当サイトでも、過去記事、

www.imuza.com

で紹介しているのですが、Flex レイアウトとは、これまでレイアウトに floatを使っていた場面で使用できるプロパティです。今回、はてなブログのこんなところにも使えるということに気づきましたのでご紹介します。

画像です↓

この画像は、当サイトの記事タイトルですが、はてなブログでは、ヘッダーの配置が、日付、タイトル、カテゴリーの順に配置されています。それを、タイトル、日付、カテゴリーの順にして、タイトルの下に、Published on 日付, in カテゴリーのように配置しようとしますと、日付にdisplay:absoluteを指定するなどして位置を変更し、さらにカテゴリーにマージンを取る必要があります。

この方法で、運用している下記のサイトもあるのですが、文字数によって位置が決まらず、難しい問題があります。

ausnichts.hatenablog.jp

それが、display:flexを使いますと実に簡単に解決がつきます。

まず、親要素、はてなブログでは<header class="entry-header">ですが、これにdisplay:flexを指定しますとこうなります。

画像です↓

順番に横並びで1行になっています。この状態で、子要素にorder:順番を指定し、タイトル、日付、カテゴリーの順に 1,2,3 と番号をつけます。そうすると次のようになります。

画像です↓

この状態では1行に並んでいますので、親要素にflex-wrap:wrapを指定し、複数行に配置するようにします。こうなります。

画像です↓

ただ、この場合はたまたまタイトルが長いために2行になっているだけでけですので、1行表示にしたい要素にwidth:100%をしておきます。

後は、日付要素に::beforeを追加し、content:"Published on "などと指定すれば、次のように完成します。

画像です↓

display:flex 最強ですね。ただ、文字の回り込みだけはできないようですので、まだまだfloatの活躍場面はありそうです。

developer.mozilla.org

Sass/css ファイル作成自動化とクリック一発でコンパイル自動監視
はてなブログ/トップページの記事をタブ式表示にしてみた
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/09/26

IntersectionObserverで要素の位置を知る

2023/09/14

GDPRを設定する

2023/08/30

scroll-behavior:smoothは履歴に残る

2023/08/22

要素がトップにきたことを感知する-IntersectionObserver

2023/08/8

ホームページとは別に投稿一覧ページをつくる方法-WordPress

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

  • はてなブログ215
  • WebTips110
  • javascript101
  • Joomla!88
  • Wordpress79
  • Windows68
  • CSS64
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google36
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com