WordPress の theme.json での流体タイポグラフィ（Fluid typography）と 6.4 での 最大・最小 ViewportWidth 指定の覚書
HOMEStaff BlogWordPressWordPress の theme.json での流体タイポグラフィ（Fluid typography）と 6.4 での 最大・最小 ViewportWidth 指定の覚書 今回は theme.json で指定できる settings プロパティのタイポグラフィの fluid について、WordPress 6.4 で最大・最小 ViewportWidth 指定ができるようになるので、あらためておさらいしながら見ていきます。 流体タイポグラフィ（Fluid typography）とは？ 現在のウェブサイトはあらゆる画面幅で見られます。読みやすい文字サイズも画面サイズやレイアウトによって異なりますので、大きな画面では大きな文字サイズに、小さい画面では小さい文字サイズに流動的なフォントサイズにする事…という解釈で良いですよね？ 流動タイポグラフィを見
WordPressとGatsbyを連携して高速なサイトを作る - 環境構築から基本的なページ作成まで
今回はWordPressとGatsbyを連携して高速なサイトの作る手順について説明します。 説明する環境は以下です。 macOS Catalina v10.15.5Visual Studio Code v1.57.0node.js v16.13.1react v17.0.1gatsby v4.11.2 WordPressとGatsby用の環境を作る WordPressで記事の更新を行い、Gatsby側でそのデータを受け取って実際のサイトに表示させるようにします。それはWordPress用のドメインと、実際のサイトを表示させるためのドメインの２つが必要になるということを覚えておきましょう。 今回は本番環境でサイトを表示させる方法については説明していません。環境構築の手順とGatsbyを使ってWordPressからデータを取得して基本的なページを表示させる方法について説明しています。 まずは環
WordPressの管理画面を使いやすくする簡単カスタマイズ18選 | knowledge / baigie
WordPressは機能として実装できないものはないのではないか、と思えるくらい自由度が高く多機能なCMSです。一方で多機能であるが故に管理画面のメニューも多く、サイトによっては使っていない機能なのに導線が残っていたり、設定画面に到達するまで階層が深かったり、操作が複雑だとユーザーに使いにくい管理画面だと思われてしまいます。 この記事では私が普段の制作でよく行うWordPressの管理画面のカスタマイズ方法について、独自で実装するものとプラグインを導入して実現するものを合わせて18個、ソースコードと解説を交えながらご紹介します。エンジニアだけでなくデザイナーやディレクターの方も「こんなことができるんだ」と知っておくだけで、より使いやすい管理画面に仕上げていくことができると思うので、ぜひ参考にしてみてください。 その1. ログインページのロゴを変更する 以下のログインページのWordPres
Faust.js + Headless WordPress + Vercel での Jamstack アーキテクチャでプレビューを実現する手順(カスタムポスト作成あり) - necco note | necco inc.
Faust.js + Headless WordPress + Vercel での Jamstack アーキテクチャでプレビューを実現する手順(カスタムポスト作成あり) Faust.jsとは？ Faust.jsとはについては公式サイトのトップに書いてありましたので引用します。 Faust.js is the Headless WordPress Framework. Faust.js provides a set of tools to make building front-end applications with WordPress as the headless CMS a pleasant experience for both developers and publishers. This framework consists of a WordPress plugin, a
WordPressがお久しぶりな開発者さんにオススメ！がっつりカスタム前提でSnow Monkeyをお試しする方法 - Photosynthesic blog
WordPressがお久しぶりな開発者さんにオススメ！がっつりカスタム前提でSnow Monkeyをお試しする方法 こんにちは、みみです。 受託案件、さくっと受けてさくっと作ってさくっと手離れしたいと切に願っていながら実現した試しがないWordPress開発者の皆様、おげんきですか。確定申告終わりましたか。私はまだです。 最近、Nuxt.jsに慣れちゃったんだけど久々にWordPress指定が来ちゃったよ、またオレオレライブラリ発動すっか、という主にフロントエンド側な開発者の皆さん（居るんでしょうか？）、ようこそ。 それもう、Snow Monkeyに任せちゃいましょうよ。 Snow Monkeyのテーマとしての素晴らしさは多数のユーザーさんのオススメブログを見たら分かると思うのですが、ここでは普段オレオレライブラリでスクラッチテーマしか作ってない私が何故Snow Monkeyを選んだか、そ
WordPressのコアブロックのカスタマイズについて2021年のベスト・プラクティスを探ろう その1: ボタンブロック - Photosynthesic blog
こんにちは、みみです。 WordPressのデザインの話をそろそろガチでしたい WordPressのブロックエディタが実装されて早2年になります。カスタムブロックの作り方については良く話題になる気がしますが、ガラッと変わった設計に応じた新しいワークフローやデザイン手法などについてはそんなに話が上がらない気がします。 一通りのカスタムブロックプラグインが出揃った今だと尚更に、それよりもブロックエディタ時代のWordPressのデザイン手法についてみんな考えあぐねているのでは無いかと思うのです。 20日に出た5.8でのWordPressの進化を眺めていて、そろそろ誰かとそういう語りがしたくなってきたので、試しにひとつ書いてみようと思います。Webの4割を占めるWordPressのデザインの話、もっとあってもいいと思うんですよね。 ワークフローとしてウォーターフォール型では全く機能しなくなる、み
自分で作ったテーマをGutenbergへ対応させていこう その1 - Photosynthesic blog
こんにちは、みみです。 冬休みの独り言として、WordPress5で正式導入された新エディター（Gutenberg）へのテーマでの対応をどうするのか、という事を書いてみようと思います。 ・・・とはいえ、この半年ほどWordPressコミュニティに参加させて貰ってきて感じたのは、テーマをイチから作ってる人はあんまり居ないっぽいし、需要もそんなに無いっぽいので「独り言」としてみました。 何に対応すれば良いのか？ そもそも現時点で言うところのテーマでのGutenberg対応ってなんぞ？という話なのですが、兎にも角にも先ずは各種ブロックを使用した場合の表示に対応する、というのが基本中の基本な気がします。テーマに合わせたカスタムブロックを作るとかエディタ側の表示を揃えるのはその次のフェーズな気がするのだけども、もうこの時点でめっちゃ大変かなと。だって、ブロックの組み合わせを全チェックしていくのめんど
WordPress 5.8 をチェックしています
WordPress5.8 Beta が 公開されました。 WordPress5.8 は 2021年7月20日に リリースされる予定なので いろいろチェックをしています。 その中の WordPress5.8 で気がついたところを取り上げていきます。 これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。 リリースまでのスケジュールは WordPress 5.8 Development Cycle に載っています。 WordPress 5.8 Beta1 https://wordpress.org/news/2021/06/wordpress-5-8-beta-1/ WordPress 5.8 Beta2 https://wordpress.org/news/2021/06/wordpress-5-8-beta-2/ WordPres
WordPressを使うかどうかを見極めることが必要になってきていると感じています | バニデザノート
私自身まだなんとなくで、きちんと定義できないのですが、なんでもかんでもWordPressで組むのではなく、プロジェクトによってWordPressで組むのが本当に最良なのかを見極めることが必要な気がしてきています。 WordPressは便利です。私も、案件として数多くご依頼いただいていますし、慣れ親しんでいます。ネット上にもWordPressの改造方法やプラグインが多く掲載されており、納品後、自分で拡張できるかもしれない、と考えてくださっているお客様もいらっしゃいます。 しかし、時間と予算との制約のなかで細かな設定を行えば行うほど、プラグインとの親和性は低くなり、最悪、動かなくなってしまうプラグインもあります。 「このプラグイン（記事）でできているから、できるってことですよね？」と聞かれることもあります。そのプラグインどおりならできるけれど、プラグイン以上（要は２、３tipsを複合するような
WordPressのトップページを雑誌や新聞のような段組にする方法
WordPressのブログは一般的に記事タイトルと記事の概要が単純に縦に並ぶだけですが、jQuery Masonry という jQuery プラグインを使用すると、このブログのトップページのように雑誌や新聞のような段組で記事一覧を並べることができます。 jQuery Masonry は WordPress 用に作られたわけではありませんが、WordPress テーマに組み込んでトップページ等で使用することができます。 ただ、公式のドキュメント通りに JavaScript を書いただけでは WordPress テーマではうまく動かないので、やり方をここにまとめておきます。 ここでは、WordPress 3.3 のデフォルトテーマ「TwentyEleven」をベースに解説します。 準備 まず jQuery Masonry 公式サイト のページ中央にある「Download the script
WordPressを高速化するプラグインを作りました
今朝、WordPressのレスポンスを向上させるプラグイン “WP Hyper Response” を作りましたので早速公開します。 このプラグインを使用した場合と使用していない場合の比較動画を作りましたのでご覧ください。 右が使用した場合、左が使用していない場合です。 画面中央にキャプチャソフトのウォーターマークが出ていますがご容赦ください。 この動画は、私が運営している フリー写真素材 :: Free.Stocker のページ表示テストです。 ブラウザキャッシュを無効にするため、Google Chrome のシークレットウインドウを使用しています。 それほど大きな違いは出ていませんが、プラグインを使用したほうが記事ページ（single.php）の表示が速いことがお分かり頂けるかと思います。 後半は管理画面のテストです。 どう見てもプラグインを使用したほうが速くなっていることがお分かりい
WordPressをインストールしたら最初にやってることまとめ
仕事でも、プライベートでも本当にかかすことのできない存在になっているWordPress。 今回は、そんなWordPressを設置したとき毎回やっているカスタマイズに入る前の下準備についてまとめてみました。 毎回やっているのにうっかり忘れたりしてしまうので自分のメモもかねて…！ 初期設定 プラグインを入れる テーマを準備する functions.phpの設定をする 1.初期設定 1.1 パーマリンクの設定をする デフォルト設定のままだと http://blog.v-colors.com/?p=123 とかでちょっとかっこわるいので パーマリンクの設定を変更します。 管理画面メニュー 設定->パーマリンクの設定からお好みの設定に。 いろんな設定ができます。どんな設定ができるかは公式サイトのパーマリンク設定についてにまとめられています。 1.2 メディアの設定をする 管理画面メニューの 設定->
WordPressでWebサイトを構築するまでの手順リスト - かちびと.net
私的なメモです。WordPressで個人的にWebサイトを構築したり、受注した際の手順リストをメモ。自分用のチートシートです。いつも何かしら忘れている気がするのでいつもやる事をぱっと見で分かりようにリスト化しておきます。※個人的な主観が入っています。 Todoソフト等はあまり使わないので本当に私的なメモですが、これが誰かのお役に立てたら幸甚です。プラグインなども好みが有ると思いますのでご参考までに。。 [note]情報が古くなったので改正版としてアップデートしました。[/note] インストールDB作成WP最新版をダウンロードwp-config.phpをDBに合わせて変更接頭語も変える（wp_ → example_）FTPソフトでサーバーにインストールログインして管理者権限のユーザーを作成作成したユーザー名で再ログインadminユーザーを削除ダッシュボードの不要なコンテンツを非表示にパーマ
HTMLをWPテーマ化する時の手順リスト
WordPressWPテーマ化手順 一般的なHTMLファイルをWordPressの テーマにする時の手順と、使用するタグ をリスト化、というか自分用チートシート。 いつも子ページが時間掛かるので、単純 な構成のHTMLなら、テーマ化くらいは サクサク終わらせたいですね。 一般的なHTMLファイルをWordPressの テーマにする時の手順と、使用するタグ をリスト化、というか自分用チートシート。 いつも子ページが時間掛かるので、単純 な構成のHTMLなら、テーマ化くらいは サクサク終わらせたいですね。 唯一の方法では無く、ベーシックな方法です。僕も一度作成してから必要に応じて別のタグを使います。 WPテーマ化手順リストSTEP.1HTMLをindex.php、header.php、footer.php、sidebar.php等に分割。分割に関しては以前の記事をご参照下さい。 以下のインクル
（1）DreamweaverのWordPresssタグ専用extension
WordPress入門 （動画で解説！ワードプレス日本語版） WordPressは、サーバーにオリジナルブログが設置できるオープンソースのスクリプトです。インストール方法から、使い方、カスタマイズの仕方まで紹介します。 WordPress日本語サイト http://ja.wordpress.org/ 解説 WordPressのテーマ作成に入る前に便利なツールを紹介します。 Dreamweaverの便利な拡張機能を作ってくれた方がいるんですね～。 このサイトからダウンロードできます。 DW extension for wordpress template build 日本語で解説してあるサイトはこちら http://coliss.com/articles/blog/wordpress/358.html 拡張機能にインストールすると、挿入バーにWordPressとうタブが追加され そこからボタ
WebサイトをiPhoneで見やすくする5つの方法
2017年6月29日 Webサイト制作, Webデザイン, 便利ツール iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。 ↑私が10年以上利用している会計ソフト！ 1. CSSのみで切り替える iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。 <link rel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress特化型メディアサイト【WPWeb】
Main
Parkn’ Park
WPデザインギャラリー