ゆるゆるカフェ(以下、ゆるカフェ)では、自由に表現できるウェブサイトの運営とサポートを行っています。先週のミーティングでは、投稿ページのエディターについてお話をしました。ゆるカフェでは、制作ソフトにWordPress を採用しています。WordPress では投稿ページの作成に「ブロック」が採用されています。通常ブロックは下から積み上げていきますが、WordPress で取り扱う「ブロック」は上から下に積み上げていくイメージとなります。ブロックの中には、表示をしたい画像やテキストを入れていきますが、ブロックの中には、さらにその中にブロックを横に並べていきたいことがあります。その時に使用されるのが「カラム」ブロックです。「カラム」は、ブロックを横に2つまたは3つほど並べたいときに、使い勝手の良いブロックとなります。
モバイル・ファーストという言葉をどこかで聞いたことがあるかも知れません。ウェブサイトの制作は、モバイルでどう見られるかを最優先します。その次に、タブレット、パソコンの順番で、見られ方をチェックしていくことになります。WordPress の「ブロック」という考え方は、このモバイルでどう見られるかを基準にした制作となります(1カラム)。タブレットやパソコンで、見られる幅が横に広がった時に、初めて2カラム、3カラムの表示の仕方が有効な方法となってきます。
さてここからが本題です。WordPress では、初めの設定で上記「カラム」ブロックを選択することができますが、その比率は1:1であったり3:7であったりします。コンテンツに応じて、その比率は変えたいことがあります。そんな時にお勧めなのが「コードエディター」の使用です。
WordPress で投稿ページの画面を新規に開くと「ビジュアルエディター」で編集できるようになっています。直感的に操作をすることができて、効率のよい編集作業を実現しています。その一方で、細かい作業やデザインレイアウトの微調整が苦手です。その時は「コードエディター」に切り替えることで、すんなりとクリアできることが少なくありません。
「コードエディター」は、コードが敷き詰められたエディターです。初めはとっつきにくいかも知れませんが、少しずつ慣れていけると良いです。コードなしで制作・編集作業をするのが最近の流行りですが(ノーコード)、私はコードをまったく使わないことが良いことだとは思いません。使う必要のない状況でコードエディターを使う必要はないのですけれど、少し知っていれば、その使用により格段に編集領域、デザインの微調整の幅が広がるのです。
WordPress の初期設定で用意されている2カラムのブロックでは、3:7が用意されていますが、これを2:8に変えたい時は、コードエディターでその使われている数字を変更すればOKとなります。少しの知識またはテクニックであっても、それを理解することで格段に編集領域は広がります。コードを変更したブロックをよく使うのであれば、それをご自身のWordPress サイトに登録しておいて、必要に応じて、そのカスタマイズしたブロックをいつでも使えるようにすることも可能となります。
ゆるカフェで行っている毎週のミーティングでは、それぞれのブロックのコードがどう記載されているのか、必要に応じて覗き、少しずつその人に合った編集スタイルの幅を広げて頂けたら良いなと思っています。