WordPress5.x系の新しいGutenbergエディターはブロックエディターというビジュアルエディターに刷新され、コンテンツをブロック単位で作成していく方法になりました。
様々なタイプのブロックが用意されているので、それぞれのブロックがどのような機能や役割をもったブロックなのか、今ひとつ理解しきれていない方も多いのではないでしょうか？
そこで今回は、Gutenbergで利用できる全ブロックタイプについて解説していきます。
ブロックの機能や役割を理解してしまえば、旧エディターよりも使い勝手のよいエディターだと感じるはず。
各ブロックの使い方に加え、生成されるHTML・CSSコードについても紹介します。
「HTML・CSSはわからない」という方はコードの解説部分を読み飛ばしてもらっても問題ありません。
実際に操作しながらご覧いただくと、より理解しやすいでしょう。
ぜひサンプル用の記事をご準備ください。
2018年12月にメジャーアップデートが行われたWordPress。
バージョンが5.xへと変わり、記事のエディターの大幅な刷新が行われました。
とても大きな変化であったため、WordPressをずっと使ってきた方にとっては、わかりづらい、使いにくい、と言った印象を受けるかもしれません。
しかしながら、システム、アプリ、ツールなどのデジタルプロダクトは常に進化していくものですから、私達ユーザーもまたその変化に対応していかなければいけませんね。
Gutenbergと呼ばれる新しいエディターはどんなエディターなのでしょうか？
何が変わったのでしょうか？
本当に使いにくくなってしまったのでしょうか？
Gutenbergという新しいエディターのコンセプトから紐解き、操作方法と画面構成の解説をしていきます。
そろそろGutenbergに移行しようかなと考えている方、
移行したもののいまいち使い方が理解できていない方、
これからWordPressを始めたい方、
ぜひ参考にしてみてください。
その際、Autoprefixerを利用すれば、自動でコードを書き足してくれるため、記述のミスや手間を減らすことができます。
それだけではありません。
AutoprefixerにはIEのグリッドレイアウトを拡張してくれる機能が搭載されているため、本来IEでは使えないプロパティも一部IEで使えるように変換して対応くれます。
Autoprefixerを使ってもっと便利にグリッドレイアウトのIE対応をしていきましょう。
開発環境を構築する方が色々と便利ではありますが、Autoprefixer Onlineを使えばブラウザだけで利用できます。
最近では、CSSグリッドレイアウトで作られるWebサイトがどんどんと増えてきていますね。
とても便利なルールですが、その最大の難点は古いブラウザがサポートしていないこと。
Chrome、Firefox、Safariなどのモダンブラウザは対応しているので、問題なのは IE (Internet Explorer) ですよね。
「もはやIE対応自体が不要だ」という考えには賛同したいところですが、やはりどうしてもIE対応せざるを得ないケースもあるでしょう。
そんな時のために、IEでグリッドレイアウトを利用する方法を知っておきましょう。
続きを読む
CSSグリッドレイアウトには専用のCSSプロパティがあります。
似たような字面のプロパティががいくつもあるので、紛らわしくてわかりにくいと感じませんか？
そこで、CSSグリッドレイアウトで利用する各プロパティを一つずつていねいに解説していきます。
イチから覚えるのに、ブックマークして忘れた時の辞書代わりに、ご活用ください。
CSSグリッドレイアウトを採用するWebサイトが増えてきています。
しかし、floatプロパティを中心とした従来型のレイアウト手法とは大きく異なるため、なかなか理解しづらい部分があるかもしれません。
この新しいWeb制作手法を理解するには、基本的な考え方から理解することが習得のポイントです。
今回は、グリッドレイアウトの基礎知識から基本的な実装方法までを確認していきます。
続きを読む
Webサイトの高速化技術の古参にして強力な手段がキャッシュの設定です。
基本中の基本ではあるものの、その仕組みについては実はよくわかっていないことも多かったり。
そこでキャッシュの仕組みや設定について基本的なことをまとめてみました。
実は奥が深いな、キャッシュの世界。
しかし、何でもかんでもファイルを圧縮して送信すれば良いというわけでもありません。
サーバーでgzip圧縮を設定する方法と気をつけておくべきポイントなどについて紹介します。
これまでの方法が抱えていたデメリットと現在（これから）の標準となる実装方法、レガシーなブラウザへの対応方法など、レスポンシブな画像切り替えに必要な知識をまとめました。
基本的な画像レスポンシブ表示、古くなりつつあるCSS画像切り替え、高解像度ディスプレイに対応するためのメディアクエリなどの話を中心に、現在のCSSにおけるレスポンシブ対応について改めてまとめました。