CSS note

ボックスの輪郭を、CSSで変更

WEBページで、ボックスを作ると、四角形になりますが、ちょっと変化をつけて強調したいようなことがあると思います。
ボックスにCSSを追加して、変化をつけてみたいと思います。

続きを読む→ 投稿 ID 9671

WordPress 5.3 ブロックエディタ gutenberg CSSの変更の準備できてますか？

WordPress 5.3のリリースが、来月に予定されています。（リリーススケジュール）

ブロックエディタは、5.0でコアに実装され、機能の改善やバグの修正は gutenberg プラグインで行われてきました。

残念ながら、有効インストール数は20万と低調で、クラッシックエディタの500万と比較すると微々たるもので、このことは、5.0以降の多くのWEBサイトでは、gutenbergプラグインは、利用されていないことをうかがわせる結果です。

gutenbergプラグインが有効 ...

CSSだけで、背景色の変更

暗い場所で、ページを開くと、白いブログの背景色が目に刺さるなんてことがあります。グーグルマップなんかは、トンネルに入ると黒背景で表示されますね。

背景色の切り替えは、javascriptでやるケースが多いのかもしれませんが、ちょっと工夫するとCSSでも簡単にできます。

input#dark:checked~.switch-presentation{
     --bg:#333;
     --fg:#fff;
}

input#dark:checked~.switch-presentation{

--bg:#333;

--fg:#fff;

}

この部分で色を変更していますが、

もう一つのポイントは、label要素の位置は、for="id"を使っているので、チェックボックスと同じ場所に ...

border image

CSS

#boo {
     height: 280px;
     border: solid 1em goldenrod;
     border-image: conic-gradient(#f90, #95a) 1;
     border-radius: 50%;
}

#boo {

height: 280px;

border: solid 1em goldenrod;

border-image: conic-gradient(#f90, #95a) 1;

border-radius: 50%;

}

悩み多き　エディターの斜体ボタンとCSS

エディタには、大抵 Iというボタンがあります。でも、例えば、メイリオというよく使われるフォントがありますが、このフォントは、日本語の斜体がありません。

gutenberg レイアウトの崩れた時に

新しく記事を書きました。

WordPress ブロックエディタ gutenberg の使い方　コピーと貼り付け

まじかに迫りつつある Gutenberg ですが、アップデートすると、以前のバージョンで作成した記事に、適切にスタイルが適用されず、レイアウト崩れを起こすことがあります。

スタイルシートのスタイルの調整に入る前に、試しておいたほうがいいこともありますのでそのあたりをメモに残します。

レイアウトが崩れたら、とりあえず再保存してみよう

建前として、gutenber ...

Gutenberg のためのテーマ対応

Gutenberg

グーテンベルグの開発者たちは、どんなテーマを使って「新しい編集体験の先にある、将来的に基本になるサイトのゴールを示すのでしょうか？

Gutenberg editor loaded with the Twenty Seventeen theme

現在のところ、グーテンベルグのためのテーマが公式に発表されていないので、デフォルトテーマで試されているようです。

グーテンベルグのコア実装が近づくにつれ、グーテンベルグブロックの作成等、技術的な関心が深まってい ...

TwentySeventeen の SVG iconの仕組みと、チャイルドテーマでのカスタマイズ。

TwentySeventeenテーマでは、SVGアイコンが使われています。それ以前は、Iconfontが使われていました。fontawesome等でも、SVGアイコンが使われだしています。

世の中のどれぐらいのWEBサイトが、SVGでアイコンを実装しているのかは判りませんが、気にはなります。

TwentySeventeenでは、SVGアイコンを、スティッキー投稿のタイトル前に表示したり、カテゴリリンクの先頭にアイコンを表示するなどしていますが、それは主に装飾的なものとして存 ...

svgスプライトの作成と表示

SVGスプライトは、一つのSVGファイル内に、色などの設定を複数記述して必要なものを呼び出すテクニックですが、
具体的な使い方については、あまり紹介されていません。

一例をメモに残します。