CSS | Hazu Labo - パート 3

2019年5月11日2020年3月8日

【WordPress】CSS のキャッシュを自動リロードさせる方法

はっと気が付いたのですが、CSS って更新しても、キャッシュに残っている場合、スーパーリロードさせないと新しいのが反映されないんですよね。ここもちょこちょこと CSS 書き足しているのですけれどね・・・。自分だけで見ているのなら、その都度スーパーリロードをかければいいのですが、公開していることを考えるとどうすればいいのか？「皆様、何月何日何時、CSS 更新しましたので、キャッシュのリロードお願いします」なんてわけにもいきませんしね。

CSS のキャッシュを自動リロードさせるには、どうすればいいのか？
CSS ファイルの更新日時を取得し、それに合わせてリロードするよう、htmlのheadに指示を書き込むことで解決できるみたいです。

やりたいこと

CSS 更新時、クライアント側のキャッシュを自動的にリロードさせる

利用する関数

[ PHP関数 ]
filemtime() → ファイルの更新時刻
date() → 日時の取得

[ WordPress関数 ]
bloginfo() → サイト情報を表示
get_stylesheet_directory()　→ 現在のテーマ、子テーマのスタイルシートのディレクトリパスを取得

手順

1. WordPressの利用中のテーマ、もしくは子テーマ（すでにheader.phpが子テーマの中にあるのなら）から、FTP で header.php をダウンロード
2. header.php に自動リロードの指示を追加
3. 子テーマに header.php をアップロード（子テーマについては後日書きます）

head.php

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<!--?php wp_head(); ?-->

/* ここに↓を追加 */
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>
?ver=<?php echo date('YmdHis', filemtime(get_stylesheet_directory() . '/style.css')); ?>" />

</head>

↑の head.php は、テーマ twenty seventeen のものですが、wp_head() の読み込まれたあとに追加すれば問題ありません。
やっていることは、要するに、更新日をそのまま style.css のバージョン名として、新たな style.css として認識させるということです。キャッシュに残っているのと別のバージョンなら、改めて読み込まれます。

2019年5月11日2020年3月8日

【CSS/HTML】サイトにソースコードを記述する

このサイトのページに、CSS や PHP などのソースコードを載せたいのですが、そのための記述の仕方をまとめます。

やりたいこと

左に行数を表示し、右にソースコードを記述

HTML タグ

<pre>タグ: 整形済みテキストを表示する（ブロックレベル要素）
<code>タグ: プログラムコードやHTMLやCSSなどのコードを示す（インライン要素）

CSS カウンター

counter-reset プロパティ: カウンターに名前を設定し、値を初期化
counter-increment プロパティ: counter-resetで設定したカウンターの値に1を加算
content プロパティ: 要素を生成された値で置き換え
counter() 関数: 値を生成
::before 疑似要素: 選択した要素の最初の子要素として擬似要素を作成

ソースコード記述の為のCSS例

/* 全体を収めるブロック */
div.code-toolbar {
    position: relative;
}

/* 整数済み部分 */
pre {
    position: relative;
    padding: 1em 1em 1em 3.8em;
    overflow: auto;
    counter-reset: linenumber;
    border-left: 1px solid hsla(256, 97%, 27%, 0.71);
    font-size: 14px;
    box-shadow: 0 0.5px 0.5px rgba(0,0,0,0.1), 0 0.5px 0.5px rgba(0,0,0,0.1);
    border-top: .1px solid hsla(0, 0%, 84%, 0.1);
    border-right: .1px solid hsla(0, 0%, 84%, 0.1);
    background: #f5f2f0;
    display: block;
}

/* ソースコード記入部分 */
code {
    color: black;
    background: none;
    text-shadow: 0 1px white;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    position: relative;
}

/* 行数表示部分全体 */
.line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid #999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 各行数表示 */
.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

/* カウンター */
.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
}

ソースコード記述の為のHTML例

<div class="code-toolbar">
<pre><code>/* シュークリームが大好きです */
<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

ブラウザでの表示

/* シュークリームが大好きです */

2019年5月7日2020年3月14日

ボタンジェネレイター

CSSってスタイルの指定以外にも、結構色々な事ができるんですよね。jQuery や Flash の代わりとか、絵がかけるとか。

こんなドラえもんとか！→ CSS だけで描いたドラえもん

すごいですねー。

ウェブサイトに使われるボタンは、画像を利用するより、CSS のみで実装する方が軽量化を図れるし、SEO の観点からも優れていると言われています。CSS3 の「border-radius (角丸)」や「linear-gradient (グラデーション)」を組み合わせると、画像と間違えるような美しいボタンが出来るのですが、少々面倒ですね。そんな時、CSS ボタンジェネレーターを使うと、簡単にボタンの CSS を生成してくれます。

「CSS ボタンジェネレーター」で検索すると、色々出てくると思いますが、私が利用しているのはこちらです。

www.bestcssbuttongenerator.com

左の部分から、基本のデザインを選び、右の部分で、細かな設定を調整します。
Text: ボタンの文字列、任意のクラス名、フォントスタイル、サイズ
Size: ボタンの高さ、幅
Border: ボタンの角丸、輪郭線幅
Box Shadow: 影の種類

スタイルが決まったら、出来上がったボタンをクリック。そうすると、右の部分に、HTML と CSS が表示されます。あとはそれをコピペするだけ。
1行目はHTMLに、それ以外は CSS に。HTML にリンク先を入れれば、それで完了です。

About Me

↑　出来上がったボタン

便利ですね！