Gutenberg使用時に不要項目を非表示にして、表示切り替えオプションからも削除する方法です。 同様のことをクラシックエディタで行う際はremove_meta_box()を用いていましたが、Gutenbergの場合はremove_post_type_support()やunregister_taxonomy_for_object_type()を用います。 デフォルトではイメージ右側のように様々な項目が用意されていますが、サイト構成的に不要なものがあって非表示（機能削除）にしたい場合は、functions.phpへ下記のように記述します。 add_action( 'init', 'remove_block_editor_options' ); function remove_block_editor_options() { remove_post_type_support( 'post',

Gutenbergの大きな特徴のひとつとして、コードがわからない人でも自由且つ簡単に好きな見栄え・レイアウトを実装できるというものがありますが、それを何らかの理由で制限したいときに使える方法です。 特に毎回決められた項目のみ入力するような作りの投稿タイプやページがある場合に便利だと思います。 ブロックの操作はtemplate_lockというプロパティで制限することができます。 template_lockを指定しないデフォルトの状態ではブロックの追加・削除・移動など自由に操作することができますが、allでそれらを完全に制限し、insertはブロックの追加・削除はできませんが移動はできるという制限をかけます。 具体的な使用例として、例えばとあるサイトで「イベント」という投稿タイプを作成し、そこでは基本的に下記内容の情報しか入力しないので他のブロックは必要ないという仕様だったとします。 キャッチ

Gutenbergを利用している投稿タイプでの新規追加時に予め任意のブロックを挿入しておく方法で、毎回決まった文章やレイアウトを使うときに便利です。 February 01, 2021 追記 'core/heading'の'level'指定の記述方法が誤っていたので修正しました。 みぞれ（@xxmiz0rexx）さん、ご指摘ありがとうございます。 特定の投稿タイプにブロック挿入する クラシックエディタで同じように予めコンテンツを挿入したい場合は「投稿エディタに予めテキストなどを挿入しておく」で紹介している方法などで可能ですが、Gutenbergではこの方法だとクラシックブロックを利用した形で挿入されます。 これをGutenbergらしくそれぞれブロックとして挿入したい場合は、functions.phpへ下記のように記述することで実装でき、下記サンプルコードの場合は「投稿」に見出しが2パター

本当に簡易的なものであれば、管理画面でいくつかの項目を選択・入力するだけで簡単にGutenbergブロックを作成できるプラグイン「Block Lab」を紹介します。 正直デフォルトのブロックで可能なことができなかったりと物足りないと感じた部分も多かったんですが、せっかく試したのでその備忘録も兼ねて。 紹介している内容やキャプチャなどは、WordPress Ver 5.0.3とBlock Lab Ver 1.1.1を使用した際のものになります。 インストール・有効化 管理画面のプラグインから「Block Lab」を検索してインストール、もしくは「Block Lab」からファイルをダウンロードして環境にアップロード。 プラグインを有効化するとメニュー最下部に「Block Lab」という項目が追加されるので、そこでブロックの作成・編集・削除などを行うことができます。 ブロックの作成と設定 ブロッ

July 26, 2021 追記 バージョンアップによってフック変更・新ブロック追加・ブロックスラッグの変更などあったために、ここで紹介している内容をそのまま利用できない部分があります。 Ver 5.8以降でのブロック表示制御については、「WordPress：Gutenbergのデフォルトブロックを非表示にする方法（Ver 5.8対応）」を参考にしてください。 正確には表示させたいものを再度設定するという形なので、特定のブロックを非表示にするのにはもっと適した方法がありそうですが、とりあえず備忘録。 Gutenbergには下のイメージのように沢山のブロックが用意されており、現時点の最新であるVer 5.0.1で5グループの63種類あります。 これらのブロックを利用することで様々な見栄えを表現することができるのですが、中にはサイトやクライアントにとっては不要なものもあったり、場合によってはデ

Gutenbergにはこれまでのエディタと同じように現在の内容を一定時間で自動保存してくれる機能があります。 ただ、デフォルトだと間隔が短すぎてリビジョンが大量に増えてしまったり、テストなどを行っていてそこまで頻繁に保存する必要ないときに邪魔になってしまうこともあるので、自動保存時間を任意で変更する方法です。 コードを記述して変更する 自動保存時間を変更するにはfunctions.phpに下記のように記述し、この場合はデフォルトで10秒なのを300秒（5分）に変更することができます。 また、自動保存をほぼ無効化したいとかであれば、例えば9999などのように数値を大きく設定しておくことでとりあえず対応可能です。 add_filter( 'block_editor_settings', 'custom_autosave_interval' ); function custom_autosave

Gutenberg（ブロックエディタ）を無効化する場合はとりあえずプラグイン「Classic Editor」を入れるぐらいの認識だったのですが、フックを使って限定的に無効とかもできるみたいなので備忘録です。 紹介している方法はWordPress Ver 5.0.0で確認等行ったものです。 紹介している方法を以前のバージョンで使用する場合は、フックをそれぞれgutenberg_can_edit_postやgutenberg_can_edit_post_typeにする必要があります。

「Flowchart kit 2.0」は、用意されているシンボルを組み合わせていくことで簡単にサイトマップやフローチャートを作成できるSketch素材です。 様々なシンボルが用意されているので、よくある構成であれば十分対応できると思います。 以下で紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。 大きいサイズで載せるとかなり長くなってしまうので引きのイメージではありますが、以下のようにグレースケールとダークカラーの2タイプのカードシンボルが用意されており、合わせると386種類も用意されています。 また、カードに限らず矢印・吹き出し・ラベル・デバイス・シェイプといったその他要素も豊富に用意されており、これらは3タイプのカラーがあります。 素材の中には上のようなサンプルも用意されているので、作り方や組み合わせ方の参考にしたり、少しカスタマイズして使うといったことも可

画像の軽量化やコード圧縮といったツールをはじめ、各種リファレンスサイト、利用している人が多いエディタやデザインツールのショートカット一覧など、web制作時に便利だと思うツール・サイト・チートシートを自分のブックマークがかなり乱雑化してきたのでその整理も兼ねて一気にまとめてみました。 もちろん他にもこういった便利なものは沢山ありますし、自分も普段からここで紹介しているもの全てを利用しているというわけではないのですが、こういったものを利用することで人によっては大幅に制作時間を減らすこともできると思います。 また、覚えておくとど忘れした時に容易に確認等もできたり、勉強時の参考にすることができるものもあります。 September 01, 2020 更新 リンク切れサイトを削除しました。（100サイト以下に縮小しました...。） January 16, 2016 追記 新たに5サイトを追加して10

CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"（青い背景色の領域）を可変、div class="side"（赤い背景色の領域）を固定にそれぞれする方法で、固

他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ

デザイン・アート制作時によく用いられるツールやよく見るレイアウトタイプなどをモチーフにしたデザイン関連のアイコンセットのまとめです。 デザイナーのポートフォリオ、チュートリアルなどでツール紹介時に何かワンポイント入れたいとき、わかりやすくレイアウトを説明したいときなどに使えそうなアイコンです。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。

プログラミング言語やフレームワークのロゴ、多くの開発者に利用されているwebサービスやツールのロゴ、シンプルでわかりやすくデザインされたファイルタイプ、フラットデザインで表現されたブラウザなど、いずれもweb開発に関連していると思うアイコン・アイコンフォントです。 普段のデザイン業務などにはほとんど使わないと思うものが多いですが、技術系ブログとかポートフォリオなんかでは便利そうです。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。 Devicons 言語・フレームワーク・Webサービス・ブラウザなど、Web開発関連のアイコンフォントセットで、見かけることの少ないツール系のロゴも多数用意されています。 Freebie: SVG Developer Icon Set SVGとAIの2形式が用意されている全17種類のアイコンセットで、見た目もカラーとモノクロの2タ

フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ

今年（2014年）で見かけて気になったものやダウンロードしたデザインUIキットのまとめです。 そのままデザイン素材として使用するだけでなく、パーツやカラーの組み合わせ方を参考にしたり、どのようなレイヤースタイルで作られているかなど制作時のヒントに繋がる場合もあると思います。 紹介しているUIキットを使用する際は、ライセンス等は各自で再度確認してください。

テキスト 文字の大きさ・字間・行間などを確認するためにダミーテキストを使いたい時に便利なツールやエントリーです。 文字の半角・全角の有無や出力する文字数などを任意で設定できるものや文章だけでなくpやtableといったHTMLのマークアップ付きでコピーできるものもあります。 すぐ使えるダミーテキスト - 日本語 Lorem ipsum 日本語用のダミーテキストジェネレータで、夏目漱石「私の個人主義」、宮沢賢治「セロ弾きのゴーシュ」、Wikipedia:引用のガイドライン(部分)、自分で指定の4種類から選択できます。 また、パラグラフ毎の文字数、空行、アルファベットや記号の半角・全角指定などといった指定を行うこともできます。 Lorem Ipsum - All the facts - Lipsum generator あらゆる分野で使用されているダミーテキスト「Lorem ipsum」を生成で

いずれもメニューを実装する際に便利なプラグインやチュートリアルで、もちろんPCサイトでも問題なく使えますが、レスポンシブwebデザインやスマートフォンサイトといったサイトを制作する際には特に便利なものです。 サイドからスライドしてくるものやウィンドウサイズが狭まるとセレクタやアコーディオンに変化するものなど、見せ方も様々なタイプがあります。 ずらっと並んではいますが大まかに同じような動きをするものはなるべく固めているので、気になる動きがあればその前後もチェックしてみてください。

実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ

有名なサイトだとPinterestやBehanceなどで取り入れているような、グリッドレイアウトを簡単に実装できるjQueryプラグインのまとめです。 少し前はポートフォリオのギャラリー部分などのような箇所で主に使われている印象が個人的にあったのですが、最近ではブログの記事一覧やECサイトなどでもよく見かけますし、コーポレートサイトのトップに採用しているサイトなども多く見かけます。 基本的な動きは同じようなものでもサポートブラウザやアニメーションの有無などがプラグインによって違うので、自分の中で幾つか使いやすいものを見つけておくと良いと思います。 一応グリッドレイアウトを実装するためのプラグインということでまとめていますが、中にはフィルタリング・ソート・ドラッグ&ドロップなどの機能も併せて実装できるプラグインもあります。 また、基本的にフリーで使用できるもの中心でまとめていますが、商用利用

使う機会がありそうなので調べたら、いくつか良さそうなものがあったので備忘録兼ねて紹介します。 商品の使用前後・家などのリフォーム前後・美容室のカット前後といったように、ビフォーアフターを見せたいときに便利なjQueryプラグインです。 全部で3つのプラグインを紹介していますが、どのプラグインも簡単に設置できてほとんどのブラウザで問題なく動作する感じです。 TwentyTwenty 使用方法 「TwentyTwenty」からファイルをダウンロードし、jQueryと併せて必要なファイルを下記のように記述します。 パスなどは自身の環境に合わせて変更してください。 <link href="css/twentytwenty.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js