コンテンツへスキップ

CSS note

ワードプレステーマとCSS

Shrunk Expand

メインナビゲーション

  • CSS イベント
  • テキスト
    • 縦書き
  • WordPress
    • gutenberg PHP
    • gutenberg CSS
  • 投稿一覧
←過去の投稿
  • WordPressで color や background プロパティで色や背景色をデザインする

    CSSを学び始めると、最初にやることの一つに、テキストの色や、背景色の設定があると思います。
    指定の仕方は、意外とたくさんあります。このページでは、WordPress を使って色の指定をしていく作業を中心に、さまざまな方法を私見を交えてみていきたいと思います。

    続きを読む→ 投稿 ID 9765


    投稿日: 2020 年 3 月 tenman
    投稿グループ color WordPress
  • WordPress wp_nav_menu()の、タブナビゲーションをCSSだけで実装

    ワードプレスにテーマをホストしてもらおうとすると、現在タブキーによるナビゲーション機能が必須になっています。

    デフォルトテーマ等では、jsを使用した実装になっていますが、CSSだけでも実装できそうです。

    プライマリーメニューは、サブメニューが親メニューの右側に表示されるものも多く、深い階層を作ると、ブラウザからはみ出したり、
    アクセシビリティに関心の高い人は、js 停止したら、ナビゲーションが表示できなくなるなんて???という人もいると思います。

    そんな人向けの、プライマリー ...


    投稿日: 2020 年 3 月 tenman
    投稿グループ WordPress
  • block-editor-block-mover , block-editor-block-toolbarは、gutenberg7.2で、data-blockと分離されたよ

    gutenberg7.2からdeta-blocckの子要素から、.components-popoverの子要素として分離されました。

    だから、これまでテーマ等で、ツールバーやムーバーの位置調整を行っているテーマ製作者の方 スタイルが適用されなくなりそうです。

    チェックしてみるといいかも、、、


    投稿日: 2020 年 1 月 tenman
    投稿グループ WordPress
  • ボックスの輪郭を、CSSで変更

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

    続きを読む→ 投稿 ID 9765


    投稿日: 2019 年 12 月 tenman
    投稿グループ 未分類
  • WordPress 5.3 ブロックエディタ gutenberg CSSの変更の準備できてますか?

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

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

    続きを読む→ 投稿 ID 9765


    投稿日: 2019 年 10 月 tenman
    投稿グループ gutenberg WordPress
  • CSSだけで、背景色の変更

    暗い場所で、ページを開くと、白いブログの背景色が目に刺さるなんてことがあります。グーグルマップなんかは、トンネルに入ると黒背景で表示されますね。背景色の切り替えは、javascriptでやるケースが多いのかもしれませんが、ちょっと工夫するとCSSでも簡単にできます。

    続きを読む→ 投稿 ID 9765


    投稿日: 2019 年 4 月 tenman
    投稿グループ イベント
  • border image

    CSS

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


    投稿日: 2019 年 4 月 tenman
    投稿グループ 未分類
  • 悩み多き エディターの斜体ボタンとCSS

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


    投稿日: 2019 年 3 月 tenman
    投稿グループ 未分類
  • gutenberg レイアウトの崩れた時に

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

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

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

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

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

    建前として、gutenber ...


    投稿日: 2018 年 10 月 tenman
    投稿グループ gutenberg
  • Gutenberg のためのテーマ対応

    Gutenberg

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

    Gutenberg editor loaded with the Twenty Seventeen theme

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

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


    投稿日: 2018 年 9 月 tenman
    投稿グループ gutenberg
  • TwentySeventeen の SVG iconの仕組みと、チャイルドテーマでのカスタマイズ。

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

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

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


    投稿日: 2018 年 8 月 tenman
    投稿グループ svg WordPress
  • svgスプライトの作成と表示

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

    一例をメモに残します。

    続きを読む→ 投稿 ID 9765


    投稿日: 2018 年 7 月 tenman
    投稿グループ svg

投稿ナビゲーション

1 2 … 47 次へ


©2021 CSS 投稿フィード かつ コメントフィード Child theme CSS of レインドロップス テーマ
Lock Icon