現在、3つのサイトを運用しているのですが、やっと最後のサイトを完全オリジナルテーマに変更しました。 サイト「＠半径とことこ60分」公開FLOCSSとは…WordPress と FLOCSS サイト「＠半径とことこ60分」公開 はてなブログから WordPress に移行したのがちょうど2年前です。実は WordPress は Ver.1.5 時代にしばらく使っていたことがあるのですが、さすがに20年近く前の話ですので、いきなりオリジナルテーマというのも無謀と思い、当初は、ちょうど Genesis Framework がオープンソース化したときでしたので、その子テーマで3つのサイトを移行しました。 で、1年ほどあれこれやっているうち WordPress の基本構造もおおよそわかってきましたので、そろそろオリジナルテーマにかかるとかいうことで昨年の6月頃にひとつ目のサイトをオリジナルテーマに変

前記事「GIMP 初期状態に戻す、パスツールを使う」では、GIMP で葉っぱの SVG ファイルをつくり画像を切り抜く過程を記事にしましたが、その際、CSS のプロパティ clip-path がなかなか思うような結果を出してくれず苦労しましたので整理してみました。 clip-pathclipPath 要素の clipPathUnits 属性mask 01clip-path clip-path（mdn） 画像を円で切り抜くのは簡単で、 <img class="c-mask__circle" src="/wp-content/themes/leaf/images/flower.jpg"> img タグに class を指定して、 .c-mask__circle { clip-path: circle(50%); } とすれば簡単に円で切り抜くことができます。 で、これを作成した葉っぱの SVG

WordPress のテーマ開発をプラグインの wp-scss から node.js 上で gulp を走らせる方法に変えましたので、この際、CSS の設計思想に FLOCSS というものを取り入れてみようと思います。 FLOCSS とはFLOCSS のディレクトリ構成クラスの命名規則Sass @use と @forward で効率化省略のルール_index.scss@use@forward 01FLOCSS とは FLOCSS とは、CSS の保守性を高めて再利用を可能にするための設計思想です。詳細は私が説明しなくても公式サイトや解説サイトがたくさんあります。 FLOCSS（フロックス） 基本は、パーシャルファイルを次の3つのレイヤーと Objectレイヤーの子レイヤーに構成して管理することです。ですのでディレクトリもこのレイヤー通りにつくります（次項以降参照）。 Foundation

前記事では WordPress のテーマ開発をプラグインの wp-sass から gulp を使う方法に変更しました。その際のコード const sass = require('gulp-sass')(require('sass')); が気になりましたので Sass の公式サイトを読んでみました。 LibSass を使った node-sass は非推奨gulp-sass で Dart Sass を使う方法gulp-dart-sass を読み込めばいいのではないか 01LibSass を使った node-sass は非推奨 Sass はそれなりに長く使っているのですが、CSS を書くための便利なもの程度にしか理解していませんでしたので、今回あらためて公式サイトなどを読み理解を深めようと思います。 Sass 公式サイト 私は gulp を使っていますので、gulp-sass をインストールし

04Javascript の scrollIntoView() CSS の scroll-behavior を試そうと思ったわけはもう一つあり、それは Google AdSense を入れていますので、ページを開いてすぐにページ内リンクをクリックしますと、正しい目的位置にいかなかったりします。これを解消する方法はないものかと scroll-behavior: smooth を試してみたということです。 でも、だめでした。どの方法をとっても同じですね。結局、CSS でもブラウザが目的位置の Y軸の位置を計算しているということでしょう（調べてはいません…）。 で、結局、まだいろいろ考え中ではあるのですが、履歴を残さず軽量にということで Javascript の scrollIntoView() を使っています。下記サイトの話です。 そんなには褒めないよ。映画評 この場合は、 window.ad

WordPress：コンテンツ幅で決めるメディアクエリのブレイクポイント テーマをゼロから作ってみる（7）です。忙しくてなかなか進みません（笑）。 現在運用しているサイト、このサイトもそうなんですが、Genesis Framework を使っています。それをゼロから自作してみようということです。最初に手をつけているのは次のサイトです。 そんなには褒めないよ。映画評 レスポンシブデザインブレイクポイントをコンテンツ幅で決める個別記事ページフロントページ、カテゴリーページhtml, CSS の基本構造個別記事ページフロントページアーカイブページページにより読み込む CSS を変える 01レスポンシブデザイン 今回、7回目の記事になるのですが、これまでの経緯の一覧は次のリンクで見られます。 テーマをゼロから作ってみる また、作成中のテーマを適用させたサイトを次のサブドメインで立ち上げました。no

CSS：scroll-behavior:smooth を使わないわけ ページ内のリンクをスムーズに移動するには、CSSのみ、jQuery、素の Javascript といろいろ方法があり、とにかく一番簡単なのは一行ですむ CSS による方法ですが、残念ながらイージングが指定できません。 CSS によるスムーススクロール問題点javascript scrollIntoView()による問題点オリジナル Javascript によるsmooth-scroll.jsによる汎用オリジナル smooth scrollライセンス等 スムーススクロールの動きを比較できるデモサイトをつくってみました。 CSSによるもの、javascript scrollIntoView()によるもの、オリジナル Javascript によるもの、smooth-scroll.jsによるものの4つが比較できます。4種類のナビ

01文字を一文字ずつ表示する CSSだけで文字を一文字ずつ表示するアニメーションです。 おお、やった！Javascript使わなくてもできるじゃんと思ったんですが、どうやらネット上にはゴロゴロしているようです（笑）。 右下の Rerun をクリックしてください。 See the Pen by ausnichts (@ausnichts) on CodePen. div要素は背景色をつけているだけです 要素pの横幅は（文字サイズ + 文字間）× 文字数です border-rightは文字カーソルです 要素pの横幅をanimationの stepsを使って変化させます stepsの回数は文字数です この例の場合は、10文字ですので10とし、100％まで0%から90%の10回停止します この例では要素pに最大横幅を指定していますが、keyframesの100%に指定しても同じです

CSS：fixedの要素をスクロールバーなしでスクロールさせる サイトのメニューをオーバーレイで出す場合には、その要素に position:fixed を指定する場合が多いと思いますが、要素の長さがデバイスの表示高よりも長い場合にスクロールさせ、かつ非タッチデバイスの場合にスクロールバーを非表示にし、背景を固定しスクロールバー非表示による要素のズレを解消する方法です。 メニューをオーバーレイでアニメーションアニメーションの発火メニューをドロップダウンさせるメニューのスクロールバーを非表示にする背景のスクロールを止めるスクロールバー非表示による要素のズレを解消するcodepen サンプル 01メニューをオーバーレイでアニメーション まず、メニューをオーバーレイで上部からアニメーションでスライドさせてメニューをスクロール可能にする方法です。 <div class="content"> <p>テ

やっとこのブログのテーマを変えることができました。 変えようと思い始めて数ヶ月、なのに印象はあまり変わらない結果となりました（笑）。白ベースを基本にしていますのでまあこんなもんでしょう。 変更のポイントをあげておきます。 ブレイクポイントボトムナビゲーションその他の特徴トップページの記事一覧に「前のページ」を実装フォントサイズを可変その他 CSSテクニックトップページに名言ランダム表示 01ブレイクポイント レスポンシブデザインですのでブレイクポイントを決める必要があります。たとえば Bootstrap5 では、 // X-Small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in Bootstrap // Small devices (la

03html カスタマイズ > フッタ に次の書式で htmlを書きます。 <!-- <div id="bottom-editarea-inner"> フッタに他の html を書いている場合はこの例のようなwrapperでくくる </div> --> <div class="bottom-navi"> <ul class="menu-navi"> <li id="category"><span class="blogicon-folder"></span></li> <li id="search-up"><i class="blogicon-search"></i></li> </ul> <ul class="jump-navi"> <li id="scroll-up"><i class="blogicon-chevron-up"></i></li> <li id="scroll-dow

そろそろこのサイトのデザインを変えようかと思い始めての tips チップス（4）。正月休み中にもほんとど触れずいっこうに進んでいません。 今回はサイドバーモジュールを本文下に横並びで並べた時に高さを揃えようと思います。 何をやろうとしているか画像で示すと6記事以降を非表示にする CSSボタンを挿入する Javascript6記事以降を伸縮させる CSS完成図 01何をやろうとしているか まず、基本的なこととして、トップページではサイドバーモジュールをメインコンテンツの下に表示、記事ページなどその他のページでは2カラムで表示する場合の話です。 また、サイドバーモジュールは最新記事と人気記事を表示させる場合、及びそれに類する場合の話です。 はてなブログをデフォルトの設定で使おうとしますと当然トップページは最新記事の一覧表示になります。それが全文形式であれ、一覧形式であれ、最新記事が何記事か並ぶ

01まず本文の表示最大幅を決める 当たり前ですが、ブログは日々書いていく記事を読んでもらうものですので、記事本文を読みやすくしなくてはいけません。 記事の読みやすさを決める要素には文字サイズや行間等いろいろありますが、表示幅もかなり重要です。ですので今回は本文の表示幅を優先してブレイクポイントの数値を決めようと思います。 表示幅の最適値はどれくらいかは文字サイズも影響しますが、いろいろサイトを見てみますと 600px前後が多いようです。 はてなブログの html構成 はてなブログの htmlはこうなっています。 コンテンツ包括要素 #container > #container-inner の中に #blog-title, #top-editarea, #top-box, #content, #bottom-editarea が並んでおり、それぞれその中に #blog-title-inne

はてなブログ：フォントサイズを動的に変化させる min(), max(), clamp() 01表示幅によってフォントサイズを可変にする 例として下の画像のタイトルを表示幅に応じて拡大させます。 Chrome のデベロッパーツールを使っています。 表示幅 320px の場合のフォントサイズを 30px としてスタートし、最大フォントサイズを 50px にまで拡大します。CSS の単位 vw を使いますのでフォントを最大にする表示幅を決める必要があります。1920px としてみます。 #title{ font-size: calc(30px + ((1vw - 3.2px) * 1.25)); } 確かに表示幅を 1920px にしてみますとフォントサイズは 50px になっています。 計算式の書式は、 font-size: calc ( 最小フォントサイズ + ( ( 1vw – 最小表示

01パンくずリストのカスタマイズ こんなイメージです。 パンくずリストの最後の項目、つまり表示されているページのタイトルを他の言葉に、たとえば here（You are here）に変え、リストそのものを CSS でカスタマイズします。 02はてなブログパンくずリストHTML構造 <div id="top-box"> <div class="breadcrumb" data-test-id="breadcrumb"> <div class="breadcrumb-inner"> <a class="breadcrumb-link" href="https://test0.hateblo.jp/"> <span>トップ</span> </a> <span class="breadcrumb-gt">&gt;</span> <span class="breadcrumb-child"> <a

aタグやクリックイベントを持った要素の領域を保持したまま、css だけでフェードインしたりフェードアウトしたりする方法です。 必要なときはさほど多くないと思いますが、これが一番簡単かなという方法を思いつきましたのでメモ程度です。 要素を非表示にするプロパティopacity: 0; pointer-events: none; 01要素を非表示にするプロパティ display: none; visibility: hidden; opacity: 0; 要素を非表示する場合に使うプロパティはこの３つかと思います。 display …… 領域非保持、クリック不可、アニメーション不可 visivility …… 領域保持、クリック不可、アニメーションは animationプロパティで可 opacity …… 領域保持、クリック可、アニメーションは transitionプロパティで可 02opaci

実はもうすでにこのブログやテーマストアで公開しているテーマでも基本レイアウトには Grid Layout を使っているのですが、もっと活用できないかといろいろやってみましたら、はてなブログのコンテンツ内でもかなり便利に使えることに気づきました。 エントリーヘッダーの配置 CSS グリッドレイアウトとは？ エントリーヘッダーの配置 通常、各記事のエントリーヘッダーは下の画像のように 日付、記事タイトル、カテゴリーと並びます。 たとえばこれを下の画像のように日付とカテゴリーを横に並べる場合、これまでは display: flex を使っていたのですが、これも display: grid を使ったほうが簡単にできます。 この CSS で上の画像のようになります。 .entry-header { display: grid; grid-template-columns: auto 1fr; gri

はてなブログテーマ開発（7）フォントサイズを可変にする はてなブログテーマ開発（7）フォントサイズを可変にする フォントサイズの指定っていうのは結構悩ましいですね。絶対値指定の px 、相対値指定の %, em, rem 、最近では vw も使われます。はてなブログテーマ開発の7回目は、フォントサイズを可変に出来ないかです。 はてなブログテーマ開発（1） はてなブログテーマ開発（2） はてなブログテーマ開発（3） はてなブログテーマ開発（4） はてなブログテーマ開発（5） はてなブログテーマ開発（6）（Javascript 記載の漏れがありました） 本文のフォントサイズブログタイトルのフォントサイズvw を使って可変にしてみるCSSカスタムプロパティ（変数）を使って可変にしてみるブログタイトルのフォントサイズを可変にした画像 01本文のフォントサイズ このシリーズのベーステーマにしている

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

提示：该网站的域名（）已过期 查询whois信息 ，网站不能正常访问，域名续费后可恢复。 The domain has expired and cannot be accessed. It can be restored after renewal. 为避免域名被删除或被他人注册，请联系您的域名服务商尽快完成续费： 1. 若您是西部数码会员，请登西部数码官网，进入：管理中心->域名管理->已经到期，找到该域名，完成域名续费； 2. 若您的域名服务由西部数码代理商提供，请您联系您的代理商咨询续费事宜。