CSSを学び始めると、最初にやることの一つに、テキストの色や、背景色の設定があると思います。
指定の仕方は、意外とたくさんあります。このページでは、WordPress を使って色の指定をしていく作業を中心に、さまざまな方法を私見を交えてみていきたいと思います。
-
-
WordPress wp_nav_menu()の、タブナビゲーションをCSSだけで実装
ワードプレスにテーマをホストしてもらおうとすると、現在タブキーによるナビゲーション機能が必須になっています。
デフォルトテーマ等では、jsを使用した実装になっていますが、CSSだけでも実装できそうです。
プライマリーメニューは、サブメニューが親メニューの右側に表示されるものも多く、深い階層を作ると、ブラウザからはみ出したり、
アクセシビリティに関心の高い人は、js 停止したら、ナビゲーションが表示できなくなるなんて？？？という人もいると思います。そんな人向けの、プライマリー ...
-
block-editor-block-mover , block-editor-block-toolbarは、gutenberg7.2で、data-blockと分離されたよ
gutenberg7.2からdeta-blocckの子要素から、.components-popoverの子要素として分離されました。
だから、これまでテーマ等で、ツールバーやムーバーの位置調整を行っているテーマ製作者の方 スタイルが適用されなくなりそうです。
チェックしてみるといいかも、、、
-
ボックスの輪郭を、CSSで変更
WEBページで、ボックスを作ると、四角形になりますが、ちょっと変化をつけて強調したいようなことがあると思います。
ボックスにCSSを追加して、変化をつけてみたいと思います。
-
WordPress 5.3 ブロックエディタ gutenberg CSSの変更の準備できてますか？
WordPress 5.3のリリースが、来月に予定されています。（リリーススケジュール）
ブロックエディタは、5.0でコアに実装され、機能の改善やバグの修正は gutenberg プラグインで行われてきました。
-
CSSだけで、背景色の変更
暗い場所で、ページを開くと、白いブログの背景色が目に刺さるなんてことがあります。グーグルマップなんかは、トンネルに入ると黒背景で表示されますね。背景色の切り替えは、javascriptでやるケースが多いのかもしれませんが、ちょっと工夫するとCSSでも簡単にできます。
-
border image
CSS
123456#boo {height: 280px;border: solid 1em goldenrod;border-image: conic-gradient(#f90, #95a) 1;border-radius: 50%;}
-
悩み多き エディターの斜体ボタンとCSS
エディタには、大抵 Iというボタンがあります。でも、例えば、メイリオというよく使われるフォントがありますが、このフォントは、日本語の斜体がありません。
-
gutenberg レイアウトの崩れた時に
新しく記事を書きました。
まじかに迫りつつある Gutenberg ですが、アップデートすると、以前のバージョンで作成した記事に、適切にスタイルが適用されず、レイアウト崩れを起こすことがあります。
スタイルシートのスタイルの調整に入る前に、試しておいたほうがいいこともありますのでそのあたりをメモに残します。
レイアウトが崩れたら、とりあえず再保存してみよう
建前として、gutenber ...
-
Gutenberg のためのテーマ対応
グーテンベルグの開発者たちは、どんなテーマを使って「新しい編集体験の先にある、将来的に基本になるサイトのゴールを示すのでしょうか？
Gutenberg editor loaded with the Twenty Seventeen theme
現在のところ、グーテンベルグのためのテーマが公式に発表されていないので、デフォルトテーマで試されているようです。
グーテンベルグのコア実装が近づくにつれ、グーテンベルグブロックの作成等、技術的な関心が深まってい ...
-
TwentySeventeen の SVG iconの仕組みと、チャイルドテーマでのカスタマイズ。
TwentySeventeenテーマでは、SVGアイコンが使われています。それ以前は、Iconfontが使われていました。fontawesome等でも、SVGアイコンが使われだしています。
世の中のどれぐらいのWEBサイトが、SVGでアイコンを実装しているのかは判りませんが、気にはなります。
TwentySeventeenでは、SVGアイコンを、スティッキー投稿のタイトル前に表示したり、カテゴリリンクの先頭にアイコンを表示するなどしていますが、それは主に装飾的なものとして存 ...
-
svgスプライトの作成と表示
SVGスプライトは、一つのSVGファイル内に、色などの設定を複数記述して必要なものを呼び出すテクニックですが、
具体的な使い方については、あまり紹介されていません。一例をメモに残します。