並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 58件

新着順 人気順

ブロックエディターの検索結果1 - 40 件 / 58件

タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。

ブロックエディターに関するエントリは58件あります。 WordPresswordpressGutenberg などが関連タグです。 人気エントリには 『ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23』などがあります。
  • ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23

    [【大阪】Kansai WordPress Meetup@大阪『ブロックエディターについてもっと知ろう!』](https://www.meetup.com/ja-JP/kansai-wordpress-meetup/events/295907589/) 登壇資料です。

      ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
    • 【超簡単】WPでブロックエディタを自作できる、ACFとは?手順も解説 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

      こんにちは!「御徒町」を「つれづれまち」と読んでいたバックエンドエンジニアのまうみです。 今回はみんな大好きなWordPressプラグイン「Advanced Custom Fields PRO」(以下、ACFと省略)を使った、自作ブロックエディタの設定方法を紹介したいと思います。 ブロックエディタを自作する方法はいくつかあります。しかし、Reactの知識やjsをbuildするための環境構築が必要ですし、WordPressの実装経験がある方でも、ハードルが高い印象を受けるかもしれません。 また、WordPress本体のアップデートに合わせてメンテナンスをしていく必要もあります。いくらブロックエディタ自体の利便性が良くても、制作やメンテナンスにコストがかかるのは極力避けたいですよね。 そういったハードルをACFを使用することで解決し、簡易的にブロックエディタを開発することが可能です。ゼロからブ

        【超簡単】WPでブロックエディタを自作できる、ACFとは?手順も解説 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
      • 【総まとめ版】WordPressブロックエディターの使い方

        PICK UP A8フェスティバルオンラインセミナーで「売れるサイトmakerに聞く!サイト作成スタートアップガイド」というテーマでセミナー講師としてお話しさせていただきました。 個別指導Webスクール 個人事業主様・経営者様・起業副業など自分のビジネスのためにホームページの作り方を習得するスクール

          【総まとめ版】WordPressブロックエディターの使い方
        • 『ブロックエディターを無料のWordPressで練習する』

          クラシックエディターのサポートが終了 いつまでも従来のクラシックエディターに頼って記事を作成しているとサポート終了で使えなくなった時にブロックエディタで作成することが困難になる可能性があります。 そうなったらどうしますか? そうならないための提案が次の項目にあります。 無料で練習サイトを・・・ いきなりサポート終了したからといって自社サイトでブロックエディタを使うのはちょっと・・・ そういう方もいると思います。 だったら練習できればよくないですかって話です。 幸い無料のWordPressというのもありますよねw 以前、はてなブログで記事を書きましたがようやく使い道を見つけたという感じがしましたね 無料のWordPressを使ってブロックエディタの練習をするというのはどうでしょう。 無料なので使うだけ使ったら後は放置してもOKという考え方でいいのでは? ということで実際に使ってみることにしま

            『ブロックエディターを無料のWordPressで練習する』
          • WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか?実装事例から見る現在のWordPressの設計と構築』

            WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか?実装事例から見る現在のWordPressの設計と構築』

              WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか?実装事例から見る現在のWordPressの設計と構築』
            • WordPressのブロックエディタを旧エディタに戻す方法 | ジェイコブ佐藤blog

              WordPress5.0以降にWordPressを始めた方は、何も設定しないと記事の編集画面はブロックエディタになっています。 ※追記2020年9月現在のバージョンがWordPress5.51ですが、やはり個人的にはブロックエディタより、クラッシックエディタ一択です。 しかし、これがものすごい使いづらいんです。これは私だけでなく多くの方が使いづらいと言っています。 そこで旧エディタに戻す方法を紹介致します。方法はプラグインClassic Editorを使うだけで簡単に戻せます。 それではやり方などを、WordPressをインスールしたばかりの人でもわかるように詳しく説明していきます。 まずはWordPressの記事画面を開いて下さい。 投稿➠新規追加click これがブロックエディタ記事編集画面 この画面初めて開いた方は記事少し書いてみて下さい。使いづらいと感じた方は私と同じです。多数派で

              • 『ブロックエディタ(Gutenberg)ってWordPressの主流になる?』

                WordPressのバージョンが5になって以降、正式なエディタがブロックエディタになりました。 バージョン4.9の時にプラグインとしてGutenbergが紹介されていたのですが、どうも今後このブロックエディタが主流になるような感じですね。 2021年末にClassic Editor(クラシックエディタ)のサポートが終了することが決まっておりそのまま使い続けることは困難かもしれません。 ブロックエディタとは? ブロックエディタとは、WordPress バージョン5.0 以降で標準搭載されているエディタ(記事を編集する画面)です。 「Gutenberg(グーテンベルク)」という名前は、活版印刷技術の発明者といわれるJohannes Gutenberg(ヨハネス・グーテンベルク)にあやかって付けられています。 WordPress エディターはブロックを使用してコンテンツの作成方法を変換します。

                  『ブロックエディタ(Gutenberg)ってWordPressの主流になる?』
                • ブロックエディター私的マニュアル - ブロックエディター私的マニュアル(α)

                  内部ブロック名:core/paragraph ブロックの選択方法 入力欄の横にある[+]マークをクリックして、「一般ブロック」から「段落」をクリックします。 なお、ブロックのデフォルトは段落になっているので、選択しなくて […]

                  • WordPressでクラシックエディターとブロックエディターの両方を使い分けする方法

                    WordPress5.0より導入されたブロックエディターですが、使い勝手にとまどうことも多くクラッシックエディターを使って4.9xの状態にされる方が多いのですが、両方を使い分けする方法があります。 これは、初心者の方でも簡単にできる方法なので1度使って見られるのもいいかもしれません。 両方使うことで見栄えするページ作成が可能になります。 要は、使い方に慣れるとブロックエディターの方が簡単に見栄えするページ作成が可能になりますね #クラシックエディター #ブロックエディター #WordPress 参考記事 https://wp908.com/2019/11/30/std-wp/#6 子テーマ作成プラグイン動画 https://youtu.be/pdRuJ4qwsu8 子テーマ作成プラグイン入手先 https://wp908.co

                      WordPressでクラシックエディターとブロックエディターの両方を使い分けする方法
                    • ポチップ | 商品のアフィリエイトリンクを手軽に管理!ブロックエディター対応の最新WordPressプラグイン

                      Rinkerではなくポチップを使ってます Rinkerが便利と聞いたのですが、Amazon検索するにはAmazonアソシエイトに合格するひつようがあります。ポチップはアソシエイトに合格してなくてもAmazonで検索できます。 どちらも「かんたんリンク」と連携できますが、僕はポチップを使ってます。 — たくぞー@副業Webライター (@Takuzo_jitian) November 3, 2021 ブログで商品アフィリエイトをしてる方 •WPアソシエイトポスト •Rinker •Pochipp(ポチップ) どれ使ってますか? 私は圧倒的にPochipp推し! アソシエイトポスト→Rinker→Pochippの順に使ってみてあまりの使いやすさに感動🥺 Pochippのリンク貼り直してたらこんな時間😂 おやすみなさい🌙💤 — うりぽん@発達凸凹児ママが隙間時間でらくぶろ挑戦 (@urip

                        ポチップ | 商品のアフィリエイトリンクを手軽に管理!ブロックエディター対応の最新WordPressプラグイン
                      • ブロックエディタが抜群に使いやすくなるプラグイン「Snow Monkey Editor」 | バシャログ。

                        こんにちは。koyaです。 先日今シーズン最後のスノーボードをするために越後湯沢まで行きましたが、ボードやシューズが泥まみれになってしまいました。 例年であれば4月末まで営業しているようなゲレンデも3月末には営業終了していそうです。ただでさえコロナで外出が億劫なのに暖冬も重なって今年は散々でした。 今回紹介する「Snow Monkey Editor」はブロックエディタで記事を書く際に欲しい機能が詰め込まれているプラグインです。 ダウンロードはこちらから出来ます→Snow Monkey Editor Snow Monkeyというとテーマの方をイメージしますが、こちらのプラグインはSnow Monkeyのテーマでなくても使用可能です。 Snow Monkey Editorはインストールをすると記事編集画面の右側に「スタイル」とスノーモンキーアイコンがついたブロック表示設定項目が追加されます。

                          ブロックエディタが抜群に使いやすくなるプラグイン「Snow Monkey Editor」 | バシャログ。
                        • ブロックエディターの使い方~操作の基本~

                          ブロックエディター・・・相変わらず苦戦しています。このページはいずれ書き直すのですが、僕が実践中に学んだことをメモとして残しておきます。初歩的なことからになるのですが、あなたの参考になると思います。気になった所から読んでくださいね。 改行スペース 「Shift」+「Enter」 改行する文章の最後尾で「Shift」+「Enter」で改行できます。スペースを空ける際には「Shift」+「Enter」を改行したい分だけクリックしてください。 見出し 1.記事作成画面を開きます。 2.画面左上の「+」のアイコンをクリックします。 3,ブロックn一覧が表示されるので「見出し」をクリックします。 画像挿入 記事作成画面左上の「+」アイコンをクリックします。 ボックス一覧から「画像」を選択します。 画像を選びます 公開前設定 書いた記事を公開する前の最終段階の設定です。ここで設定するのは次の3つです。

                            ブロックエディターの使い方~操作の基本~
                          • Gutenberg(ブロックエディター)の使い方の基本 - ブログ武器 Ver.2

                            我々が快適にブログ更新が出来るツールの中に「Classic Editor」があります。以前から、このプラグインは無くなるのでは?との声が聞えていましたが、いよいよサポート終了の予定が立ったみたいです。 サポート終了とのことなので、完全に使えなくなるわけではなさそうですが、WordPressが推奨している「Gutenberg」が主流になります。 そこで今回は、Classic EditorからGutenbergに切り替える方法を1つの記事にまとめてみます。あなたがこの記事を読むことで、迷わずGutenbergに切り替えることができます。是非、最後まで読んでくださいね。 Gutenbergとは これまで使っていたClassic Editor は、htmlやcssなどの専門知識が必要なEditorでした。このスタイルが長く安定して使えていたのですが、Editorの方式を「ブロック」にすることで、従

                              Gutenberg(ブロックエディター)の使い方の基本 - ブログ武器 Ver.2
                            • WordPress5.3でのブロックエディターの変更点まとめ【Gutenberg】 | WEMO

                              まだ「ブロックエディターが使いにくい」とか言ってる人は、まずは黙ってこの記事を読んでみてください。 「バージョンアップデートしたらバグった!」と言ってる人をちょくちょく見かけますが、それはテーマかプラグインが原因の可能性が大きいです。WordPressが悪いみたいな言い方はやめて、テーマ・プラグイン開発者にどうバグったのか報告してあげましょう。 デフォルトスタイルが選べるようになった 頻繁に使うブロックスタイルをあらかじめセットできるようになりました。 例えば、『SWELL』では画像ブロックに影をつけたり線をつけたりできるスタイルが選択できるのですが、「影あり」のスタイルをデフォルトスタイルに登録することで、次回以降、初めから影が付いた状態で画像ブロックが配置されるようになります。 デフォルトスタイルをセットしている様子 ブロックの移動にアニメーションがついた ブロックを移動させる時にアニ

                                WordPress5.3でのブロックエディターの変更点まとめ【Gutenberg】 | WEMO
                              • 【図解あり】WordPressブロックエディタ(Gutenberg)の使い方

                                こんにちは、T部長です! WordPress(ワードプレス)のエディタはバージョンが上がるたびに進化し続け、2018年にはブロックエディタ(Gutenberg)と呼ばれるエディタに生まれ変わりました。 今回の記事では、ブロックエディタを用いて記事を公開するまでの流れと、ブロックの基本操作について紹介します。

                                  【図解あり】WordPressブロックエディタ(Gutenberg)の使い方
                                • ブロックエディター開発入門

                                  WordPressのブロックエディター( Gutenberg )をカスタマイズするために抑えておきたいポイントをまとめた入門書です。 - ブロックエディター関連のテーマサポート機能紹介 - ブロックスタイルの作成方法 - ブロックバリエーションの作成方法 - ブロックパターンの作成方法 - カスタムブロックの作成方法 - ダイナミックブロックの作成方法 などについて解説しています。 ※ 初心者向けのため、ビルドが必要なコードは一切使用していません。 そろそろブロックエディター開発もできるようになりたい人 公式のチュートリアルの難易度が高くて一度挫折してしまった人 におすすめの一冊です。

                                    ブロックエディター開発入門
                                  • Gutenberg(ブロックエディタ)の編集画面に独自のスタイル(CSS)を適用する方法

                                    WordPress5.0から導入された新しいエディタ「Gutenberg(ブロックエディタ)」ですが、慣れると非常に便利で使い勝手が良いです。一度慣れてしまうと旧エディタには戻れないですね。 Gutenbergで記事を書く際、編集画面の見出しや本文にはGutenberg用のデフォルトスタイルが当たっています。すごく見にくいわけではないですが、なるべく実際にブログを表示した時に近い状態で編集したいと思う方は多いのではないでしょうか。 そんなわけで今回は、Gutenbergの編集画面に独自のスタイル(CSS)を適用する方法をご紹介したいと思います。この方法を使えば、実際の表示と同じような見た目で記事を編集することができるようになります。 Gutenbergの編集画面に独自のスタイルを適用する方法 Gutenbergの編集画面に独自のスタイルを適用する方法は、2通りの方法がありますので、それぞれ

                                      Gutenberg(ブロックエディタ)の編集画面に独自のスタイル(CSS)を適用する方法
                                    • 【Cocoon】ブロックエディタとクラシックエディタどっちがおすすめ?

                                      こんにちは、yuji(@yujiblog)です。 このブログでは、WordPressとアフィリエイトのノウハウを解説しています。 以上のような、Cocoonのエディタについての疑問にお答えします。 この記事の内容 ブロックエディタとは? クラシックエディタとは? Cocoonでクラシックエディタを使う方法 どちらを使うべき? 当ブログはコツコツ更新した結果、月間26万PVとなりました。 またアフィリエイト収入も増えており、現在は月20万ほどを稼いでいます。 本記事では、Cocoonのエディタについて詳しく解説しました。 「エディタ」とはWordPressの記事執筆画面のことで、文章の装飾など様々な機能がついています。 「ブロックエディタ(グーテンベルク)とクラシックエディタ、どちらを使えばいいの…?」という人向けに情報をまとめたので、参考にしていただければと思います。 ※3分で読めますので

                                        【Cocoon】ブロックエディタとクラシックエディタどっちがおすすめ?
                                      • Gutenberg(ブロックエディタ)で不要なブロックを隠す方法3選

                                        WordPress5.2以降は「ブロックマネージャー」から非表示にしたいブロックを設定可能でしたが、WordPress5.9より「設定」→ブロック→表示ブロックへ移動しました。 WordPress5.9以降であれば「設定」からブロックの非表示設定ができます。 投稿・固定ページ編集画面にて、右上の歯車アイコンの右の三点リーダをクリックすると、メニューが表示されるので「設定」をクリックしてください。 「ブロック」タブに切り替えて「表示ブロック」にて、非表示にしたいブロックのチェックを外してください。 ただ、この方法の場合、設定を知っている人なら誰でも変更できるので、使おうと思えば使えてしまいます・・・ プラグイン「 Disable Gutenberg Blocks – Block Manager 」を使う プラグイン「 Disable Gutenberg Blocks – Block Mana

                                          Gutenberg(ブロックエディタ)で不要なブロックを隠す方法3選
                                        • ヘッドレスCMSでも自由に記事を組みたい。 ContentfulのComposeでブロックエディター(ライク)に記事を書いてみる! | DevelopersIO

                                          ヘッドレスCMSでは、バックエンドのCMS(記事の管理)とフロント側が切り離されることで、アーキテクチャ全体としてセキュリティを向上させるなど多くのメリットがある一方、CMS側で動的にコンテンツを変化させる構造に弱かったりします。 例えばWordpressのGutenbergのようなブロックエディタでは、編集者に権限さえあれば、自由にテキストやブロックを追加して即座にフロント側にも公開できるのですが、ヘッドレスCMSの場合、フロント側で前もって新しいページの生成ロジックが必要です。 今回はContentfulに新しくリリースされたCompose機能を使い、Contentfulにはデフォルトで存在しない、ブロックエディタライクな記事入稿画面を作ってみます。 前提 この記事は、ContentfulやヘッドレスCMSをある程度使っている人向けです。若干ややこしい説明もでてきます。またフロント側の

                                            ヘッドレスCMSでも自由に記事を組みたい。 ContentfulのComposeでブロックエディター(ライク)に記事を書いてみる! | DevelopersIO
                                          • JavaScriptコードをインタラクティブに連結できるブロックエディタ「natto」を使ってみた! - paiza times

                                            どうも、まさとらん(@0310lan)です! 今回はJavaScriptを変わった方法で実行できる無料のオンラインエディタをご紹介します! nattoは、無限の広さのキャンバスを持ったエディタです。このキャンバス上には複数のブロックを作成できます。ブロックのひとつひとつはコードエディタの役割を持っていて、作成したブロック同士を相互に連結させながら、プログラムを組み立てることができます。 簡単なWebアプリなども開発できるので、JavaScriptの新しい体験をしてみたい人はぜひ参考にしてみてください! なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができます。 【 natto 】 ■「natto」の使い方 それでは、「natto」の基本的な使い方から詳しく見ていきましょう! ひとまず利用するだけならログインは不要です。サイトにアクセスすれば

                                              JavaScriptコードをインタラクティブに連結できるブロックエディタ「natto」を使ってみた! - paiza times
                                            • WordPress ブロックエディター Gutenberg に対応

                                              WordPress ブロックエディター Gutenberg に対応 WordPress 5.0 から導入されたブロックエディター(Gutenberg)を使った場合に、作成したテーマを対応させるための覚え書きです。 テーマにブロックエディターのスタイルを適用させたり、逆にブロックエディターにテーマのスタイルを適用させる方法などについての個人的なメモです。 テーマにブロックエディターのスタイルを適用 ブロックエディター(Gutenberg)を使ってコンテンツを作成すると、使用したブロックにより特定のクラス(wp-block-xxxx や has-text-color 等)やインラインのスタイルなどが追加されます。 また、add_theme_support() などを使用してオプションのスタイルや機能を有効にすると、それに伴い追加のスタイルが読み込まれたりもします。 デフォルト(初期状態)では、

                                              • WordPressを使ったサイト制作でブロックエディタは主流になるか|Showhey

                                                有名なブロックエディタ対応のWordPressテーマ「Snow Monkey」の開発者、キタジマさんのブログを読んで、ブロックエディタを使ったWordPressサイト制作の今後について、考えたことをざっくり書いていきます。 元ネタになったブログ記事もぜひ読んでみてください!Web制作を生業にする人にとっては重要な問題だと思います↓

                                                  WordPressを使ったサイト制作でブロックエディタは主流になるか|Showhey
                                                • Gutenbergでオリジナルのブロックパターン登録方法 - ブロックエディター私的マニュアル(α)

                                                  Gutenbergでオリジナルのブロックパターン登録方法 Posted: 2020/7/16 Updated: 2020/7/16 これはプラグイン版のGutenberg(ver 8.5.1)を有効化して確認しています。UI等は変更になる可能性が大いにあります!(現に、8.4からブロック選択のUIが変わっています) プラグインを入れれば同様の動作は確認できますが、開発版とも言えるものなので、本番環境へ導入するのは相当の理由がない限り控えましょう。 前回のブログで、WordPress 5.5 に新しく「ブロックパターン」が追加されることを紹介しました。 今回は、自分で新しいブロックパターンを登録する方法をご紹介します。 ブロックエディターハンドブックには、パターンの登録・削除・パターンのカテゴリー登録・パターンのカテゴリー削除の方法が載っています。 パターンを登録する register_bl

                                                    Gutenbergでオリジナルのブロックパターン登録方法 - ブロックエディター私的マニュアル(α)
                                                  • ブロックエディターではじめるアクセシビリティ

                                                    この記事は、2021年1月29日に開催された WordPress のオンライン勉強会 WP Zoom UP #57 新春LT大会2021! で発表した内容に、もう少しお話したかった補足︎を加えたものです。 使用したスライドはこちら(Speaker Deck)です。 自由と可能性 WordPress 5.0 からコンテンツのエディターが「ブロックエディター」へと刷新されました。 ブロックエディターの登場で、WordPress を使った発信はさらに自由にパワフルになりました。これまで HTML や CSS の知識がないとできなかったような表現が、ブロックを組み立てるように、誰でも簡単にできるようになりました。 この記事もブロックエディターを使って書いていますし、新規でサイトを制作する時はブロックエディターをデフォルトにしています。 そこでひとつ質問です。 サイトの目的はそれぞれだと思いますが、

                                                      ブロックエディターではじめるアクセシビリティ
                                                    • 【WordPress】クライアントワークにおけるブロックエディタ対応テーマ構築時の小ネタ集 - Qiita

                                                      はじめに WordPress5.0にブロックエディタが搭載されてから、一年半経ちました。 エンジニアやブロガーの間では「ブロックエディタすげえ!」「もうクラシックエディタには戻れない。。」といった声を良く聞きますが、実際のクライアントワークにおいては、まだまだ浸透していないように思います。 これまで多数のWordPressサイト構築案件を担当してきましたが、特にデザイン優先のサイトやコーポレートサイト構築ではブロックエディタの話が出る事も無く、「ブロックエディタ?何それ?」というクライアントさんや元請け会社さんばかりでした。 ですが先日、ブロックエディタで再現しやすいデザインであった事、かつクライアントさんがゴリゴリ記事を投入していきたいという熱量を感じられた案件があったため、「ブロックエディタにフル対応したコーポレートサイト構築」という方針を取りました。 その開発の中で、ブロックエディタ

                                                        【WordPress】クライアントワークにおけるブロックエディタ対応テーマ構築時の小ネタ集 - Qiita
                                                      • WordPress 6.3 で気になる新機能・ブロックエディタ周りのアレコレ

                                                        たくさんある新機能の追加、強化、修正などの中から気になる機能をピックアップしてご紹介します。また、この記事を読むことで、WordPress のリリースに関する基本的なことや、ここ最近のテーマに関する情報も知ることができます。 ※この記事は、WordPress 6.3 ベータ 3 を元に書いています。 WordPress のリリースについて 最初に、WordPress のリリースについて基本的なことをまとめてみました。すでに知っている方は読み飛ばしてください。 メジャーリリースとマイナーリリース WordPressには、メジャーリリースとマイナーリリースの2つあります。バージョン番号で区別できます。 メジャーリリース:6.0、5.9、5.8のように小数点がひとつ。新機能の追加や変更を含む大きなリリース。 マイナーリリース:6.0.3、6.0.2、6.0.1のように小数点が2つ。バグやセキュリ

                                                          WordPress 6.3 で気になる新機能・ブロックエディタ周りのアレコレ
                                                        • 【WordPress】ブロックエディター(Gutenberg)のボタンブロックに独自のスタイルを追加してみる

                                                          ちょっと難しそうなGutenbergのブロックカスタマイズ。 既存のブロックにちょこっとスタイルを追加するだけなら意外と簡単だということに気づきました。 そこで、練習も兼ねてボタンブロックに独自のスタイルを追加して、「アイコン付きのボタン」を追加してみます! WordPress標準のブロックをカスタマイズしてみる Gutenbergのブロック開発はこれまでのPHPカスタマイズと違い、JavaScriptを書くことになり、開発環境を整えるだけでも大変そうなイメージを持っていました… ですが、いざチュートリアルを見てみると、頑張って開発環境を用意しなくてもカスタマイズできそうなことがあったので紹介したいと思います。 ちなみにチュートリアルはこちら▼

                                                            【WordPress】ブロックエディター(Gutenberg)のボタンブロックに独自のスタイルを追加してみる
                                                          • WordPressのブロックエディタのチューニング - シナプス技術者ブログ

                                                            システム開発課の今門です。 前回はWordPressの新しいエディタ、ブロックエディタとはどんなものなのかを紹介しました。 今回はブロックエディタのチューニングについて話します。 現在、WordPressのコア開発の中心はブロックエディタになっています。アップデートがあるたびに、ブロックエディタの新しい機能が追加され、ブロックの数も増えています。 高機能・多機能になるのはもちろん喜ばしいことですが、管理画面のUIも複雑になり、一部の機能しか使わないような場合には、操作性はすこぶる悪くなってしまいます。必要なもののみを取り入れ、不必要なものを表示しないようにチューニングすることで、操作性は格段に向上します。 そのためのTipsをいくつかご紹介します。 [Tips 1] 特定の投稿タイプのみ、ブロックエディタを有効にする [Tips 2] 必要なブロックのみを表示する [Tips 3] ブロッ

                                                              WordPressのブロックエディタのチューニング - シナプス技術者ブログ
                                                            • ブロックエディタ(Gutenberg)を使って目次付きテンプレートを使ってみる

                                                              WordPressのバージョンが5になって以降、正式なエディタがブロックエディタになりました。 バージョン4.9の時にプラグインとしてGutenbergが紹介されていたのですが、どうも今後このブロックエディタが主流になるような感じですね。 2021年末にClassic Editor(クラシックエディタ)のサポートが終了することが決まっておりそのまま使い続けることは困難かもしれません。 今回は、ブロックエディタ(Gutenberg)を使って目次付きテンプレートと同じようにする使い方を解説します。 いきなりブロックエディタ(Gutenberg)で書いていくのはしんどいかもしれないのでClassic Editor(クラシックエディタ)との併用をおすすめします。 併用する方法は、下記の動画を参考にしてください。 https://www.youtube.com/watch?v=0hot1tqTDvw

                                                                ブロックエディタ(Gutenberg)を使って目次付きテンプレートを使ってみる
                                                              • WordPressのブロックエディタ・クラシックエディタの比較 | ホームページ制作大阪ドットコム

                                                                WordPressで新規投稿画面を開いたら、これまでとは違う編集画面に変わってしまい、作業がしづらくなった経験はありませんか? 従来のクラシックエディタの投稿画面から新たにブロックエディタに変わったことが原因で、WordPressに慣れている人でも「使いづらい」という意見も多数です。 そこで、従来のクラシックエディタと最新のブロックエディタの機能性を比較しながら、それぞれの長所・短所・両エディタの切り替え方法について、わかりやすく解説します。 WordPressで 困っていませんか? WordPressのあれこれならお任せください。 ファーストネットワードプレスサービスでは、 1998年の創業から培ってきた知見・経験を基に WordPressのお悩みを解決いたします。 WordPressのブロックエディタとは?特徴とメリット WordPressブロックエディタとは WordPressのブロ

                                                                  WordPressのブロックエディタ・クラシックエディタの比較 | ホームページ制作大阪ドットコム
                                                                • 【Gutenberg】ブロックエディタの編集画面と、実際の表示画面を同じ見た目にする設定方法

                                                                  今回はWordPressのGutenbergで編集画面と実際の表示画面を同じ見た目にする設定方法について説明します。 説明する環境は以下 macOS Catalina v10.15.5Visual Studio Code v1.46.1wordpress v5.8.0 Gutenbergの編集画面と表示画面を同じ見え方にする設定方法 WordPressのGutenbergではブロックエディタが使われており、独自のテーマを作った場合、編集画面と実際の表示画面は同じ見え方になっていません。 同じ見た目にするためには、編集画面用のstyleシートを作成して読み込ませる必要があります。 編集画面用のstyleシートを作成する まずはブロックエディタ編集画面用のstyleシートを作成します。home.phpやsingle.phpと同じ階層に【block-style】の名前でフォルダを作成して、その中

                                                                    【Gutenberg】ブロックエディタの編集画面と、実際の表示画面を同じ見た目にする設定方法
                                                                  • 日本語名の画像ファイルアップロード時、ファイル名を英数字に変更する(ブロックエディタ対応)

                                                                    WordPressで日本語名の画像ファイルをアップロードすると アップロードされたファイル名が えらい事になりますよね。 これでは後で見たとき 何の画像かわからなくなります。 もとのファイル名を英数字にすればいいのですが、パソコン上に置いておく元ファイル名は日本語の方が管理しやすいのでそうしてる方も多いと思います。 そこで、日本語名の画像ファイルをアップロードしても、投稿IDをベースに自動でファイル名を英数字に変更する方法を紹介します。 メディア一覧ではファイルのタイトルは日本語でファイル名は英数字になりますのでこちらも管理しやすくなるかと思います。 また、ブロックエディタのファイルアップロードにも対応しています。 サンプル 以下のコードを my-plugin.php に張り付けてみてください。 /* * 画像登録時、アップロードするファイル名を 変更する * post_parentより

                                                                      日本語名の画像ファイルアップロード時、ファイル名を英数字に変更する(ブロックエディタ対応)
                                                                    • ブロックエディタ(Gutenberg)の使い方 - WordPress超初心者講座

                                                                      ブロックエディタの使い方がよくわからない ブロックエディタの基本操作を知りたい ブロックエディタの「パターン」って何? こんなお悩みを解決できる記事を書きました。 ブロックエディタは、他のブログツールの編集機能と比べて特殊です。最初は取っつきにくいかもしれませんが、この記事を参考にしながら慣れていけば、スラスラ記事を書けるようになりますよ。 こんにちは。この記事を書いた、かずよしといいます。2010年からWordPressを使っています。

                                                                        ブロックエディタ(Gutenberg)の使い方 - WordPress超初心者講座
                                                                      • Flexible Table Blockの使い方:ブロックエディタでテーブルを自由にカスタマイズ

                                                                        WordPressのブロックエディタは、テーブル(表)の各セルを個別にカスタマイズできない問題があります。 直感的に操作できるブロックエディタにも関わらず、テーブルだけはクラシックエディタを使う必要がありました。この問題を解決してくれるのが、今回紹介するFlexible Table Blockです。 セルを個別に編集できるだけでなく、枠のデザインや画像の挿入など、自由度の高いカスタマイズが可能。テーブルを多様する人にとっては、大きなアドバンテージになるでしょう。 本記事では、Flexible Table Blockの使い方について解説します。 Flexible Table Blockでできること Flexible Table Blockは、日本人の「Aki Hamano」さんが作った無料で使えるWordPressのプラグインです。 ブロックエディタでのみ動作するプラグインで、日本語にも完全

                                                                          Flexible Table Blockの使い方:ブロックエディタでテーブルを自由にカスタマイズ
                                                                        • Obsidianは文章を書くブロック・エディタである - Jazzと読書の日々

                                                                          箇条書きになったリストを思い浮かべてください。 リストの項目を上下に移動できる。 段差に合わせて折り畳むことができる。 段差の部分だけ取り出して表示できる。 この三つが揃うと「アウトライナー」と呼ばれます。 アウトライナーとはそんな感じのツールのことです。 Obsidian Outliner Obsidianにもアウトライナーのプラグインがあります。 ただ個人的にはあまり使っていません。 Obsidianの目指す方向じゃないと思えてきたからです。 うまく説明できないのですが、このアプリは通常のテキストのままアウトライナーしようとしている。 そんな感じがしてきました。 Obsidianは行頭に「#」を付けると「見出し」になります。 Markdownを採用するエディタの特徴ですが、他のアプリだとそれだけです。 ところがObsidianは見出しをただの「飾り」にしていません。 ここを押さえると書

                                                                            Obsidianは文章を書くブロック・エディタである - Jazzと読書の日々
                                                                          • WordPress (Ver5.7)ブロックエディター記事更新マニュアル(PDFダウンロード) | 枚方の女性向け・中小企業・個人事業主ホームページ制作のR-web/ 枚方/寝屋川/交野 大阪・京都・神戸から全国対応

                                                                            2023年5月3日更新 【最新バージョン6.2】の記事はこちらから 2021年3月20日 バージョン5.7に内容を変更しました。 お客様へ渡すWordPressマニュアルがあったらいいなと思ったので作りました。 私のお客様は、パソコンが苦手という方が多く、「このブロックエディターは使いにくい!元に戻して!」とか、せっかくWordPressに移行したのに「アメブロに戻りたい!」という意見をたくさんいただきました。 そこで基本的なブログの投稿、「新規投稿」のよく使う点だけにフォーカスしてマニュアル化しました。PDFファイルとしてダウンロードできるようにしています。 自分でサイトを作成されている方はもちろん、制作会社様やWEB制作をされているフリーランスの方なども、宜しければお使い下さい。 ダウンロード用PDF(無料版)には当社のリンクが貼ってあります。 説明をとばして、マニュアルのダウンロード

                                                                              WordPress (Ver5.7)ブロックエディター記事更新マニュアル(PDFダウンロード) | 枚方の女性向け・中小企業・個人事業主ホームページ制作のR-web/ 枚方/寝屋川/交野 大阪・京都・神戸から全国対応
                                                                            • WordPressのブロックエディタでテーマを作るときの覚え書き - Qiita

                                                                              随時更新 基礎知識 【WordPress】ブロックエディタの基礎知識 - Qiita ブロック一覧 グーテンベルクのブロック一覧 - 「WordPressユーザーのためのPHP入門 はじめから、ていねいに。」サポートページ ブロックを初期配置する 新規投稿時にブロックを初期配置する (読了想定) - 「WordPressユーザーのためのPHP入門 はじめから、ていねいに。」サポートページ WordPress で、Snow Monkey Blocks のブロックを初期配置する - Qiita カラムブロックを初期配置する (読了想定) - 「WordPressユーザーのためのPHP入門 はじめから、ていねいに。」サポートページ クラシックブロックを初期配置する (読了想定) - 「WordPressユーザーのためのPHP入門 はじめから、ていねいに。」サポートページ ブロックの制限 ブロック

                                                                                WordPressのブロックエディタでテーマを作るときの覚え書き - Qiita
                                                                              • 【WordPress】自作のカスタムブロックをブロックエディタに追加する方法(サンプル配布)|takeo / グラフィックデザイナー

                                                                                2018年12月にリリースされたWordpress 5.0から、ブロックエディタ(Gutenberg)での記事編集がデフォルトとなりました。 直感的で使いやすく、最近はアップデートで種類も増えてきましたが、用意されているブロックだけでは物足りない…と感じる方は多いはず。 デフォルトの「カスタムHTML」ブロックや、「クラシック」ブロックなど方法はありますが、毎回それを書くのは手間ですし、一括でテンプレートをカスタマイズ・更新できないので不便ですよね。 一括で自由にカスタマイズできるブロックを使えるようにしたい…という方のために、自作したブロックをGutenbergエディタで呼び出せるようにする方法を解説します。 細かい部分まで説明すると長くなってしまうので、初回は簡単なブロックを1つ追加するまで解説します。 この記事で解説したサンプルを一式ダウンロードできるので、「読んでもよくわからない!

                                                                                  【WordPress】自作のカスタムブロックをブロックエディタに追加する方法(サンプル配布)|takeo / グラフィックデザイナー
                                                                                • 【WordPress】ブロックエディタで引用タグに画像を挿入する方法

                                                                                  WordPressのブロックエディターで他のサイトから引用したいけど、引用の方法がわからない。 わかりすく教えて欲しい。 この記事では、上記のような悩みを解決します。 本記事の内容 そもそも、引用タグを使う理由とは? WordPress記事作成の正しい引用タグの使い方 引用タグの中で画像を挿入する方法 この記事を書いた人 takablog 補足 この記事を書いてる僕は、社会人ブロガー。帰宅後ブログを書いているどこにでもいる平凡な人。普段はTwitterによくいます。 Twitter:(@takablog5867) そもそも、引用タグを使う理由とは? Googleは、役立つオリジナルのコンテンツを評価します。 しかし、オリジナル性の全くない転載された記事が多いとSEOでの評価も下がるだけでなく、コピペコンテンツともなれば下手をするとペナルティーを科す事もあります。 例えば、著作権者から突然連

                                                                                  新着記事