【コーディング用語集】ソリッドデザイン
- 2020年9月23日
ソリッドデザインはサイズが固定されたWebデザインの事を言います。
ブラウザの横幅が変更されても表示が変更されないようなWebデザインのことです。
WordPressのエディター「Gutenberg」について
- 2020年9月21日
今回は、Wordpress5.0から実装されたブロック型エディターの「Gutenberg（グーテンベルグ）」についてご紹介します。
ブロック型エディター「Gutenberg」とは？
Gutenberg（グーテンベルグ）は、ブロック要素で記事を作成するWordPressのエディターです。記事の編集方法は、各段落、画像、動画など、それぞれのコンテンツが個別ブロックとして表示されるので、そのブロック内を編集します。例えば、大見出しは「見出しブロック」、本文は「段落ブロック」、画像は「画像ブロック」、まとめの文は「段落ブロック」を利用して配置すると1つの記事が完成します。ブロック内は、常に公開後の状態で確認することが出来ます。Gutenbergは記事のプレビューを確認しながら編集できるという特徴があります。
「Gutenberg」の特徴■ 常に記事の完成像を確認しながら編集できる
- Gutenbergのエディターは、常に公開後の状態で表示されます。今までは「プレビュー」ボタンをクリックして公開後の見栄えを確認しなくてはいけませんでしたが、常に仕上がりを見ながら編集できるため、画面を行き来する必要がなくなります。そのため、作業に集中することが出来ます。
■ 簡単にレイアウト変更できる
- Gutenbergは、見出し、段落、画像などの要素がブロックで管理されています。このブロックは、ブロック単位で移動することが出来るため、「上部に挿入した画像を最下部で表示するよう変更したい」という時にも簡単に配置変更することが可能です。
■ HTMLの知識がなくても視覚的に記事を作成できる
- Gutenbergにはさまざまな種類のブロックが用意されています。画像や動画の挿入も該当ブロックを追加するだけで、記事に表示することが出来ます。HTMLでコーディングしなくてもリッチなページを作成できる点が魅力です。
おわりに
Wordpress5.0未満のエディターに慣れている方は、Gutenbergのブロック型エディターが使いにくいため、旧バージョンを使用している方も多いのではないでしょうか。しかし、このままWordpress5.0未満のまま利用し続けるとセキュリティ的に不安があるのも事実です。セキュリティ的な不安には、Wordpressのアップデートは潜在的なセキュリティホールの修正が含まれるため、アップデートを行わないと脆弱性が残ったままになってしまうという点が挙げられます。Gutenbergが使い辛くてバージョンアップを行わない方には「Classic Editor」というプラグインがオススメです。このプラグインをインストールすると、WordPress5.0以上でも旧エディターが使えるようになります。そのため、Gutenbergが使い辛いという理由でバージョンアップを見送っている方は、「Classic Editor」の導入およびWordpressのアップデートについて検討してみてはいかがでしょうか。
【コーディング用語集】RGB
- 2020年9月21日
RGBとはテレビやパソコンのディスプレイといった画面上で使う発色方式です。
Red＝赤、Green＝緑、Blue＝青
これら三つの原色を混ぜ合わせ、量を変化させることで全ての色を表現しています。
印刷物の場合はCMYKの表現方法で作成します。
【コーディング用語集】グローバルナビゲーション
- 2020年9月17日
グローバルナビゲーションとは、Webサイトの全ページに共通して表示するメニューです。
主要ページへの案内リンクのことを指します。
【コーディング用語集】プルダウンメニュー
- 2020年9月15日
プルダウンメニューとは、サイトページの各項目をクリックすると更に各項目の選択肢が垂れ下がって表示されるメニューのことを言います。
ドロップダウンメニューとも言われています。
コーディング代行へ外注する際に必要な知識－文字コードについて（UTF-8/Shift_JIS/EUC-JP）
- 2020年9月14日
コーディング代行へ外注する際には、さまざまな情報が必要になります。
特にリニューアルやページ追加の案件の場合には、既存サイトの文字コードを認識しておく必要があります。文字コードが異なると途中で文字化けが発生したりするので、基礎知識をご紹介いたします。
文字コードとは？
文字コードとは、コンピューターで「文字」や「記号」を表現するために、個別に割り当てられた「固有の番号」のことを指します。
欧米の英数字を表すものや、漢字を含む日本語を表すものなど、文字コードにはそれぞれ種類があります。
日本語を表す文字コードは、JIS、Shift_JIS、ECU-JP、UTF-8などが用いられています。
文字コードの歴史
コンピューターが登場した頃は、英語しか扱うことが出来ませんでした。そこで、その他の言語も表示できるように国や各メーカーが独自開発したものが現在の文字コードです。
その後、世界中でコンピューターの普及が進み、各国でバラバラに作成した文字コードに互換性を持たせるため、「Unicode（ユニコード）」が開発されました。Unicodeは、英語、日本語、ロシア語、記号など、世界中の文字に対して番号を割り振り、利用できるようにした文字集合体です。現在、Unicodeは文字コードの業界規格になっています。
UTF-8
UTF-8（ユーティーエフエイト）は、Unicodeで割り振られた数字をコンピュータが理解できるように変換する方式の一つです。Unicodeで定義された数値を変換するため、世界中の文字を表現することが可能です。そのため、UTF-8は世界で最も使われており、世界標準の文字コードとされています。
Shitf-JIS
Shift_JIS（シフトジス）はMicrosoft社が日本語を表示させるために開発した文字コードで、WindowsやMacなど、多くのコンピューターで使用されています。日本語を扱う文字コードとして広く利用されていますが、使い方によっては文字化けするなどのデメリットがあります。
EUC-JP
EUC-JP（イーユーシージェーピー）は、UNIX系のOSで日本語を表示する時に使用される文字コードのうちのひとつです。WindowsやMacでもウェブブラウザで表示することが可能ですが、テキストエディタでは対応していない場合があります。
まとめ
今回は、文字コードについてご紹介しました。
テキストファイルやWebサイトなどで、文字化けに遭遇したことがある方も多いのではないでしょうか。文字化けは文字コードの違いで発生するため、文字コードという概念を押さえておくと文字化けを回避することが出来ます。Web制作において、もし、利用する文字コードで迷った時は「UTF-8」の利用を検討してみて下さい。UTF-8は世界中の言語に対応しているため、どの環境で見ても文字化けの心配がありません。ですので、特に理由がない場合は「UTF-8」の利用がオススメですよ。
【コーディング用語集】UX
- 2020年9月14日
UXとは、User Experience(ユーザーエクスペリエンス)の略称です。
ユーザーが製品やサービスを通して得られる体験や経験のことです。
WebサイトでいうところのUXは、対応が丁寧であったり商品のクオリティが高かったり、フォントが読みやすかったりといったものがUXとなります。
「使い勝手が良い」「印象的な見た目をしている」など、サービスを利用する中でユーザーが感じたことがすべてUXとして認識されます。
【コーディング用語集】UI
- 2020年9月10日
UIとは、ユーザーインターフェイス（User Interface）の略称です。
WebサイトでいうところのUIは、サイトの見た目や、使いやすさのことを指します。
デザインやフォントなどもUIに含まれます。
【コーディング用語集】ラジオボタン
- 2020年9月8日
ラジオボタンとは、項目の選択に用いられる画面の部品のひとつです。
複数項目から取捨選択させて常に1つのボタンだけが押された状態になる特徴を表しています。
altタグの重要性とは？
- 2020年9月7日
Webサイトを制作するとき、画像データにaltタグを正しく設定していますか？
altタグにふさわしくない内容を設定していると、SEO評価が下がってしまうことがあります。そこで今回は、正しいaltタグの書き方についてご紹介します。
altタグとは？
alt（オルト）タグは、Webページに画像データを表示させる時に設定する「画像の説明文」のことを指します。
altタグに設定した説明文は、Webページの読み込みに時間がかかりタイムアウトになった場合や、何らかの理由で画像の呼び出しに失敗した場合に表示されます。ちなみにaltタグの説明文は、画像を表示する予定だった場所にテキスト表示されます。
altタグに設定する文章とは？
altタグに設定する文章は、簡潔で分かりやすい「画像の説明文」を記載します。例えば、バナナの画像なら「バナナ」、人物画像なら「写っている人の名前や愛称」など、短くて分かりやすい内容が適しています。
altタグの設定にふさわしくない内容
altタグにSEOで上位表示させたいキーワードを詰め込んだり、画像とは関係ない文章を設定すると、検索エンジン側からSEOスパムと認定されペナルティを受ける可能性があるため注意してください。ペナルティの内容は、検索順位の急激な下降やインデックスの削除等が挙げられます。
altタグの重要性
altタグは、Webページの画像について検索エンジンに伝える役目もあります。検索エンジンは、altタグに設定された内容から画像データの表示内容を理解します。すなわち、altタグに設定した文章がそのままキーワード検索に用いられるのです。「バナナ」を検索した場合は、altタグに「バナナ」と設定してある画像がヒットします。そのため、altタグには「画像の説明文」を正しく記述するようにしましょう。
まとめ
altタグは、Webページの画像が表示できない時に代わりに表示される文章です。画像の説明に迷った時は、閲覧者の立場になって文章を考えてみることをオススメします。画像が表示されなかった時に分かりやすい説明文が代替表示されていると、どんな画像だったのか想像することが出来ます。altタグを設定する際は、簡潔な文章を記述するよう心掛けましょう。
