WordPressのエディタ画面にCSSを読み込む方法あれこれ 2022年版 - Photosynthesic blog
こんにちは、mimiです。 この記事はSnow Monkey / unitone Advent Calendar 2022 – Adventar 22日目の記事です。 2022年はWordPressの新規案件を1本もやっていない私が何故今年ノコノコ手を挙げたかというと去年と違って枠が埋まらないというキタジマさんのツイートを拝見し、ただただ参加賞欲しさで手を挙げましたすみません。 マジで1年間ほとんどWordPressを触っていないので、前回のネタ(この時もピアス欲しさに書いているな)の続きで、Snow MonkeyのCSS変数調査2022年版をやってお茶を濁そうかと思ったのですが。 デモの魔物にネタを貰いました 今年の後半から縁あって、ウェブデザイナー志望の方にWordPressを専門学校で教える講師のお仕事をいただきまして。8月末からの短い間ですが、WordPressってなにそれおいしい
WordPressでCSSを編集する方法（編集、追加、サイト外観のカスタマイズ）
WordPressでCSSを編集する方法（編集、追加、サイト外観のカスタマイズ） WordPressのCSSを編集したいけれどどうやって始めればいいか分からないという方。CSSのスタイリングにより、サイト全体、もしくは特定のページの外観を調整することができます。色を追加したり、特定の要素を並べたり、レイアウトをデザインしたり、基本的にはWordPressテーマ内の要素の外観を全て変えることができます。 WordPressの開発環境にもっと馴れ親しみたいという方や、サイトの外観をより細かく調整したいという方はWordPressにCSSを追加する方法（もしくは既存のものを編集する方法）を理解する必要があります。 テーマを編集し、独自のCSSを追加することで、サイト上の全ての要素を最適化することができます。今日はその方法について詳しくご紹介します。 準備はいいですか？早速見ていきましょう。 CS
ページ内で使用したブロックのCSSのみを読み込む - WordPress 5.8 | エビスコム - EBISUCOM
これまで、WordPressでは Gutenberg が管理しているすべてのコアブロックのCSSをフロントに読み込んでいました。そのため、使っていないブロックのCSSもたくさん読み込まれているという状況でしたが、WordPress 5.8では、ページ内で使用したブロックのCSSのみをフロントに読み込めるようになっています。 標準では、ブロックのCSSは「WordPress 5.8 と theme.json と CSS」で取り上げた B の style.min.css に含まれており、まとめてフロントに読み込まれます。 これに対し、「should_load_separate_core_block_assets」フィルタを有効にすると、B は読み込まれず、色などの基本設定を含んだ common.min.css と、ページ内で使用した各ブロックのCSSが読み込まれるようになります。 // ページ
【WV.8】WordPressのJSおよびCSSを最適化する – Capital P – WordPressメディア
Core Web Vitalの連載第8回では、JSおよびCSSの最適化について説明しよう。配信の最適化（Gzip圧縮、CDN、ブラウザキャッシュ）についてはすでに第1回「リソース配信の最適化」で説明したのでそちらを参照して欲しい。今回最適化するのは次の項目である。 不要な読み込みをなくす（特にプラグイン）CSS・JS自体を分割し、必要な時だけ読み込む。 この作業はかなり面倒くさく、サイトごとにチューニングが必要になる作業なので、運用歴の長い既存サイトで導入するのはかなり骨が折れるだろう。だが、最終的にはこの作業をやらないと「使用していないCSS / JavaScriptの削減」という項目をなくすことができない。 なにより、ユーザーに余計なデータをダウンロードさせないことは、ユーザー体験の向上につながるだろう。 不要なJS/CSSの読み込みを停止 まずは不要なCSSとJSの読み込みを停止する
【実験中】外部CSSを全てminifyしてインライン(ヘッダ内)に出力する
WordPressで読み込んでるCSSはテーマだけではなくブロックエディタ用や使用しているプラグイン用のCSS等、何ファイルか外部CSSとして読み込んでいます。 プラグインが多くなった等 で読み込む外部CSSがあまり多くなると、それだけページの表示が遅れる場合があります。その場合は外部CSSをインライン(ヘッダ内)に出力すると改善する場合があります。 ※最近では 既にCSSをインライン(ヘッダ内)に出力するようにしているテーマもいくつか見うけられます。 ここでは外部CSSを全てminifyしてインライン(ヘッダ内)に出力するTipsを紹介します。 【公開ページ HTMLソース インラインTips利用前】 ※結構な数のCSSファイルを読んでます。 【公開ページ HTMLソース インラインTips利用後】 ※CSSファイルの読み込みタグが無くなり、CSSを直接インライン出力しています。 全ての
registerBlockStyleでブロックに独自のスタイルを追加する – Capital P – WordPressメディア
これまでブロックの作成方法などについて触れてきたが、Twenty Twentyなどに見られるように、WordPressコアやプラグインの提供するブロック機能に依存し、あくまでスタイルの拡張に徹底するというのも一つの戦略ではある。 カスタムブロックについて「自分はプログラマーではないのでちょっと……」などと思っている人でも手軽にできる、ブロックスタイルの追加方法を説明する。 スタイルの登録 Gutenbergのデフォルトブロックのうち、たとえば区切り線は「スタイル」という概念がある。 区切り線、要するに hr はスタイルを選ぶことができる。 この実装がどうなっているかというと、スタイルを選ぶごとにCSSのクラスが付与されるという形だ。hrを例にとると、デフォルトで以下の3種類。 上から順に、次の様なクラスが割り当てられている。 クラスなしあるいは is-style-defaultis-sty
Flexboxを使ってレスポンシブ対応の「前の記事」「次の記事」リンクを実装
2016年9月21日 CSS, Wordpress ブログ等の個別記事でよく見かける、「前の記事」「次の記事」へのリンク。これまでも実装方法やスタイリング方法は紹介されてきましたが、Flexboxを使ったらもっと楽に作れちゃうよ！ということで、その方法と、ついでにWordPressでの実装方法も紹介します。 ↑私が10年以上利用している会計ソフト！ 1. モバイル用リンクを作成 まずは小さい画面用のリンクを作成します。「モバイルファースト」と呼ばれる手法ですね。前の記事のリンクを上に、次の記事のリンクを下に並べて表示します。ここでは特に込み入った事はしないので、簡単に実装できるはずです。 HTML <div class="prev-next-link"> <a class="prev-link" href="#"> <p class="prev-next-label">前の記事</p> <
100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも簡単利用。
Hover.cssとは Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。 すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。 利用するときは、こんなタグで利用できます。 Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。 Hover.cssの主な利用手順 Hover.cssを利用するのに必要な主な手順は、以下の3手順です。 Hover.cssのダウンロード＆設置 Hover.cssを呼び出す Hover.css用のタグを記入する 利用するファイルも、hover.css（縮小版はhover-min.css）
公式SNSボタンは重い！コピペでできるCSSのSNSボタンで軽くする
ブロブ等のWebサイトにFacebookやtwitterなどのSNSボタンを設置していますでしょうか？記事に「いいね！」を押してもらったりシェアしてもらうのに大切なアイテムですね。各SNSの公式サイトにもボタンの設置方法等が紹介されていますし、多くの方が利用しているのではないかと思います。 WordPressをご利用の方であれば、『WP Social Bookmarking Light』等のプラグインを利用して簡単にSNSボタンを設置することが可能です。 しかし公式のSNSボタンを利用することによるデメリットも存在します。SNSボタンを設置してあるページを読み込む（表示させる）のに、とても時間がかかり重いのです。Facebookの「いいね！」ボタンは特に重いような・・・。ユーザビリティやSEOの面でもページ表示速度が重要視されるようになり、「0.1秒でも早くしたい！」という方にとって無視す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress 6.6 CSS Specificity
Minimum height dimensions block support
Custom CSS for global styles and per block
New API to access global settings & styles
商用利用無料、Bootstrap 4をそのまま簡単に使用できるWordPressのテーマファイル -UnderStrap
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog