WordPressの新しいブロック エディターにはまる

WordPress 5.0から標準エディターとして採用されたブロック エディターですが、とても使いやすいです。クラシック エディター（旧エディター）で書かれたものを全て書き換えたいくらいになるほどはまっています。

使い方ではまってしまったと言うわけではありません。すみませんｍ（_ _）ｍ

初めて使ったときは・・・

正直に言うと、最初は戸惑うことがありました。
しかし、使っていくうちにとても使いやすく感じました。

ブロック単位で操作が出来ることが、こんなに便利なものと使ってみて初めて分かりました。
Google 検索してみると ブロック エディター は使いづらいと書かれているページをよく見かけます。内容を読んでないので・・・と書くのもなんなので、今から少し読んでみます。（勘違いしてるといけないので）

巷で言われている ブロック エディターが使いづらい理由

意見としては、
「ただただ使いづらくなっただけ」
「やっぱり使ってみて思うのは今までのエディタの方が使いやすい」
「初めて見るこの画面で、今までのエディタと違って使い勝手がわかりません」
「新しいエディタは毎回ブロックの選択が必要なので無駄なクリックが多くなる」
となどなど意見。

このあたりは慣れの問題でしょうか。

次に、主観的でないヤバい理由もあるようです。
「テーマ固有や自作のショートコードはブロック エディター（Gutenberg）のエディターでは使用することができない」
「使用しているプラグインが不具合を起こした」
「プラグインの AddQuickTag など便利に使えていた機能も使えなくなってしまった」
などなど、今まで使えていたものが使えなくなると言う問題を抱えてしまったようです。

そこで、「クラシック エディターに戻る」と言う選択をする人も居るようです。

ショートコードは「カスタム HTML」で対応できないのかな？
アフリエイトだと個々のページの任意の場所にショートコードを入れるプラグインを使うなどしてのかな？
他人事だけど、なんか面倒くさそうですね・・・

メンテナンスフリーを希望してたので

私が使っているテーマは、WordPressにバンドルされている基本テーマしか使っていません。
理由は「WordPressとの相性が良い」の一点だけです。

他のテーマを使っている人には新しい ブロック エディター で不具合が出るかもしれません。実際に不具合が出ている人も居るようですし。
WordPress 5.0.3 のリリースでは、バンドルされたテーマの修正も多々入りましたし。

そのあたりの修正内容等は実際は詳しく見ていません。
仕事がらPHPファイルをガシガシ読むことも可能だと思いますが、できれば読みたくないですもんね。

WordPressを使う理由が細かなメンテナンスをしたくないからと言う理由もあり、メンテナンスフリーで使いたいからです。
ですからテーマやプラグインを選択する際も、最も大きな選択条件は 「WordPressとの相性が良い」 になります。

今回、不具合もなくスムーズに移行できたのはラッキーでした。
やはりメンテナンスフリーで運用を心がけると楽ですね。

人それぞれの使い方で

今回のケースでもそうですが、WordPressを無料で使わせてもらっている以上、自己責任が付きまといます。

ただ、仕事で使っている人は独自のカスタマイズでしか客先要望に応えられない場合もあると思います。
また、趣味等の世界を表現するのはやはりカスタマイズが必要な場合もあると思います。

使い方は人それぞれですから、良いとか悪いとかは無いと思います。

お勧めは

やはり ブロック エディターを使うようにしたいですね。
昔の「クラシック エディター」に頼っていても、いつかはそのプラグインも消えてなくなります。その時どうするか？です。

WordPressのメンテナンスに力を割くよりもコンテンツ作りに時間を割きたいですからね。

あくまでも個人の意見なので参考までに。
最後までお読みいただきありがとうございました。
あっ、最後の最後に ブロック エディター やはり使い易いですよ^^

WordPressの5.0から新しいエディターが標準エディターになりました。
このページも新しいエディターで書いています。
慣れるまで違和感があるのと、細かな指定の仕方がわからないこともあり、多少戸惑っています。が、実は気に入り始めてます。
逆に単純に書き込むだけならより簡単になったようにも感じます。

「HTMLやCSSの知識が無くても使えるエディター」になっていますし、編集もしやすくなったと感じています。

また、文章の文字を修飾するカスタマイズを行いたい場合、以前のようにHTML表示に切り替えてHTMLを修正すれば済むそうなので細かなことがしたい場合にも問題もなさそうです。

新しいエディタ Block Editor（ Gutenberg ）

新しいエディタはBlock Editor と呼ばれているようです。
開発中は Gutenberg と呼ばれていたようです。
もっと詳しく知りたい場合は、しばらくの間は Gutenberg で検索した方が良いかも。

Block Editor の使い方

初めてのものは使うときに戸惑いますね。
私も最初に「どう操作するのかな？」って思いました。
なので少しだけ使い方と言うか、ブロックの追加と種類の確認をと。

で、 Block Editor の使い方ですが、エディタの名まえの通り、目的の種類のブロックを追加してテキストや画像等の追加と設定を行うだけです。
下の図の赤枠内の＋をクリックするとブロックが追加できます。

＋をクリックすると下の図ように追加したいブロックの選択メニューが表示されます。
デフォルトで［よく使うもの］が表示されるようですが、この他にも追加できるブロックの種類は多く全部を理解するのも大変そうです。

ブロックの種類は

• インライン要素
• Common Blocks
• 整形
• Layout Elements
• ウィジェット
• 埋め込み

と（今のところは）用意されています。
［よく使うもの］だけでも普通に記事も書けると思います。

ブロックは上下入れ替えもできるため、後で構成の見直しもできますし、間違ってへんなところに挿入されても入れ替えができるので苦になりません。

画像の貼り付けもペイントブラシ等でクリップボードにコピーをしておけば、ブロック エディター上で Ctrl+v や Ctrl+p で貼り付けができとても便利です。

ブロックの削除

ブロックの削除は下の図のようにメニューを表示して、ブロックの削除を選択すると消すことができます。

［段落］の場合はテキストが入力されていないとメニュー表示ができず、その時はBack space で消せるなど、少し癖もありますが少し試行錯誤すれば慣れると思います。

公開するには

公開するには左上の［公開する］をクリックして公開します。

ただし、公開する前に［文書］タブをクリックして、カテゴリーやタグを付けるなど忘れずに行いましょう。

まだ使い始めたばかりなので、おいおい試しながら使い方を学んでいこうと思ってます。
可能なら使い方も載せていきたいと思います。

以上、WordPressの新しいエディターについて少し書いてみました。

モバイル ファースト インデックス

この「WordPressでブログ」サイトにもようやくモバイル ファースト インデックス（Mobile-first indexing enabled）が実施されることになりました。
実施されたからと言って基本的に本Webサイト的には何も変わらないんですが、波に乗り遅れるのも・・・と。

モバイル ファースト インデックスとは？

ついでと言っては何ですが、モバイル ファースト インデックスとは何かを少し補足しますね。

モバイル ファースト インデックスとは、「インデックス登録とランキングの決定についてモバイル版のコンテンツを使用することで、ユーザー（主にモバイル ユーザー）が探している情報を見つけやすくするための仕様です」。
言い換えると「Mobile向けページの解析結果を優先的に検索インデックスと表示ランキングに反映させる」と言うことです。

現在、インターネットで検索する際に利用される機器・デバイスはパソコン（PC）かスマホ・タブレット（Mobile）がほとんどです。
情報発信のWebサイト側もそのことから、PC向けとMobile向けのページを用意しているところもあります。

2018年3月の終わりごろまでは、Googleは主にPC向けページの解析結果を検索インデックスに反映させていました。
しかし、現在はMobile検索が増えることを見越して、Mobile向けページの解析結果を検索インデックスに反映させるようになりました。

ただ、一度に切り替えるのは困難だし混乱も招くと考えたのか、Mobile向けページの準備が整っているWebサイトから順次切り替える方法を採っています。

モバイル ファースト インデックス移行へのアナウンス

「Mobile-first indexing enabled for https://wordpress.bia.jp/」と来ました。
添付のアナウンス内容は以下の通りです。

PC向けとMobile向けを分けていないWebサイトでは、注意することも思いつかないし、特に注意する必要は無いと思います。

ただ、「スマートフォン用 Googlebot のログでサイトのトラフィックが増加している可能性があります」と有るように一時期的にWebサーバーに負荷がかかり、サイトにアクセスができないなどのトラブルが発生することも考えられます。
クロールエラーが出た場合、モバイル ファースト インデックス移行へのアナウンスが来ていないか確認しましょう。

WordPress 写真・画像の枠を消したい

WordPressに写真や画像を載せたときに、枠が邪魔になるときありませんか？

そんな時はサクッと枠を消してしまいましょう。

ちなみに、CSS を設定して、ブログ上の写真・画像全部に反映させる方法と、個別に設定して個別の写真・画像のみに設定する方法があります。

ブログ上の写真・画像全部枠なしにする

CSS を使って枠（ border ）を指定します。

CSSは通常、テーマの style.css で設定していますので、テーマの CSS の変更をするか追加するかになります。

探す目的の場所は、#content のimg です。CSS は後から読み込まれた設定が有効になりますので、img tag の設定が複数にわたっている場合は面倒なことになりますが、ちゃんとしたテーマなら直ぐに見つけられると思います。

ちなみに、設定がない場合はそもそも枠が表示されていないか、img tag の親 tag 例えば div tag のバックグラウンドが枠のように見えてたりしてると思いますので、親のバックグラウンドが枠のように見える場合は、この方法では対応できません。親のバックグラウンドの色を透明にする必要があります。

私の使っているテーマは Twenty Eleven なのですが、画像の枠の設定は以下のようになっています。

修正は WordPress ダッシュボード>外観>テーマ編集から style.css を直接修正するか、FTP を使って修正したファイルをアップロードするなど、適当に行ってください。

/* Image borders */
img[class*="align"],
img[class*="wp-image-"],
#content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    border: 1px solid #ddd;
    padding: 6px;
    max-width: 97.5%;
    max-width: calc( 100% - 14px );
}

これを見ると、border: 1px solid #ddd;となっていますので、枠は1pxで灰色です。

padding: 6px;は他の要素と6px離すという状態なので、どちらでも良いと思いますが、背景色を透過するのでpadding: none;も合わせて変更すると良いです。

    border: none;
    padding: none;

それから、キャプションを使っていると、キャプションを付けることで親にdiv を付けるテーマも有るので、キャプションを付けないか、キャプションを付けるなら親のdiv の背景色を透明に設定する必要があるかもしれません。

この辺りはテーマによって違うので、各々設定している箇所を探して修正するしかありません。

子テーマを使っている場合

子テーマを使っている場合は、必要な部分を含むところを書き換えるか追加してしまいましょう。

Twenty Eleven の場合は、

/* Image borders */
img[class*="align"],
img[class*="wp-image-"],
#content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    border: none;
    padding: none;
    max-width: 97.5%;
    max-width: calc( 100% - 14px );
}

子テーマを使っていない場合

子テーマを使っていない場合は、style.cssをそのまま修正します。

但し、テーマのバージョンアップが有ると再修正しないといけないので、バージョンアップしたら再度設定を忘れないようにしてください。

バージョンアップのために子テーマの導入を考えましょう。

Twenty Eleven の場合は、下のように修正します。

/* Image borders */
img[class*="align"],
img[class*="wp-image-"],
#content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    /*border: 1px solid #ddd;*/
    /*padding: 6px;*/
    border: none;<span style="font-family:Consolas; font-size:10pt">
    padding: none;
    max-width: 97.5%;
    max-width: calc( 100% - 14px );
}

個別の写真・画像のみ枠なしにする

この場合は、投稿記事の html に掲載した写真のstyleを枠なしにする設定をします。

基本的には、

style="border: none; padding: none;"

を img tag に付け加えるだけです。

テキストエディタでスタイルを追加し枠を無くす

ビジュアルエディタではhtml を修正できないので、写真・画像（ img ）の修正もできません。

そこで、テキストエディタに切り替え該当 img に枠なし設定を追加します。

１）テキストエディタに切り替え
右上に［ビジュアル］ ［テキスト］タブがあります。［テキスト］をクリックします。

写真・画像の枠なし 個別設定 テキストエディタ切り替え

２）枠なしにしたい写真・画像のimg tag を探し、「<img ・・・・・・/>」の「/>」の前にstyle=”border: none; padding: none;”を追加します。

写真・画像の枠なし 個別設定

３）確認します。

写真・画像の枠なし 個別設定 結果

上手く枠がなくなっています。

CSSに保存しておきクラスを付けて枠を無くす

上の応用技です。記述ミスが起こりにくいので良いかも知れません。

この場合も（子）テーマの style.css を使います。

１）style.css に以下のようなCSS を追加します。
my-border-none は、クラス名です。写真・画像のCSSクラスにこのクラス名を設定すると、style に反映されます。
クラス名は重複しなければ適当でかまいません。

img.my-border-none{
    border: none;
    padding: none;
}

とりあえず、追加してみましょう。

追加は、WordPress ダッシュボード>外観>テーマ編集から style.css を直接修正するか、FTP を使って修正したファイルをアップロードするなど、適当に行ってください。

２）ビジュアルエディタにして、写真・画像をクリックし、メニュー？を表示します。
鉛筆マークのアイコンをクリックし、画像詳細画面を開きます。

写真・画像の枠なし 個別設定 ビジュアルエディタでCSS設定呼び出し

３）画像詳細画面の「上級者向け設定」を開きます。

写真・画像の枠なし 個別設定 画像詳細画面で上級者向け設定を開く

４）画像 CSS クラスを設定します。
画像 CSS クラスを設定後、更新ボタンをクリックして更新します。

写真・画像の枠なし 個別設定 画像詳細画面でCSS設定

５）確認します。

まとめ

全体の写真・画像に枠なしを行いたいか、一部に対して行いたいかで方法が変わってきます。
また、使用しているテーマによっては、修正箇所がわかりづらかったりもするかもしれません。

用途やスキルに合わせて、方法を選択してください。

以上、「WordPress 写真・画像の枠を消したい」の方法紹介でした。
[I want to erase the pictures or image frame in WordPress]

WordPress の日本語版と英語版の違い

一昨日 WordPress 4.9.3 がリリースされましたが、今朝になってまた WordPress 4.9.4 がリリースされました。
どうやら 4.9.3 の重大なバグが発見され、緊急修正・リリースされようです。

今は自動リリースされてしまうので既に WordPress 4.9.3 になっています。
そんな重大なバグなら早速と思ったのですが、自動更新ができな不具合を修正したみたいですね。慌てることもないかな。
でもまぁこの際忘れて放置も困るので 4.9.4 に更新しとくのが良いかと。
日本語版は出ていないようなのでとりあえず、オリジナルの英語版の英語版を入れることになるのですが、そこで今更ながらオリジナルの英語版と日本語版の主な違いを調べてみました。

ちなみに、-jaが付くものが日本語版です。
英語版は WordPress 4.9.4
日本語版は WordPress 4.9.4-ja 「 WordPress.org 」からダウンロードできます。

WordPress の日本語版と英語版の主な違い

・ WordPress に日本語翻訳ファイルが付いてくるかどうか
・ WP Multibyte Patch プラグインの同梱
・ readme.html の日本語化
・ wp-config-sample.php の日本語化
・ version.php に $wp_local_package = ‘ja’; が付加されている
・ 新規インストール時の設定初期値が日本語版は、タイムゾーンが東京、サイトの言語が日本語

英語版の日本語化

もともと日本語版の WordPress がインストールされていれば、何もする必要はないようです。

初めてインストールする場合のみ、日本語化します。
で、 WordPress は多言語対応なので、英語版の言語設定を変更するだけで日本語化できるようです。
上の差異から、
・サイトの言語
・ユーザー毎の言語
を変更して、
・WP Multibyte Patchプラグインをインストール

とりあえず、・タイムゾーンを東京もかな？
しなくても日本語化になるけど、、、

以上で、日本語化完了です。
気になるようなら、WordPress 4.9.4-ja が出るのを待って更新すれば良いですし。

以上、「WordPress の日本語版と英語版の違い」についてでした。

ドメイン更新料

今回は、 ドメイン更新料 について少し調べたのでその メモ（備忘録） です。
※なお、ドメイン更新料は比較的価格も変わりやすくキャンペーンなども良く行われるため、都度チェックを行う必要があります。

独自ドメインを使っていると、更新時期になると更新料が気になります。
そこでドメイン更新料がどのドメイン管理会社が安いかを調べて比較してみました。
と言っても、今回は .com のみですが^^；

尚、更新料・価格はキャンペーンなどによって変わるため、時期によって変わると思います。
また、移管料が安いと移管した方が安上がりの場合もあります。
なので、更新料が載ったページにリンクを貼り、すぐに調べることが可能なようにしてあります。

ドメイン更新料 比較

比較するドメイン管理会社は、個人的に良く聞くところにしてあります。
個人で契約出来ないところは省いています。

・ お名前.com
・ ムームードメイン
・ バリュードメイン
・ スタードメイン
・ エックスドメイン

この他にも格安なドメイン管理会社があると思いますが、この中では1,180円の スタードメイン と エックスドメイン が100円安で頭一つ抜けてますね。※2017年8月時点での価格です。

更にスタードメインだとポイントも付くのでお得感がアップします。
スタードメインのポイントはまた別の機会に紹介します。

注意！
ドメイン管理会社ごとにサービスが異なります。
例えば、
・ 自動更新 が簡単にできるか
・ Whois情報 の公開代行をしてくれるか
・ 電話サポート があるか
・ レンタルサーバと連携していてそちらで割引サービスがある
・ 管理がわかりやすいか
・ すぐに他のドメイン管理会社に移行できるか
・ ネームサーバーの設定サービスがあるか
などなど。
更新料だけでなく、他のサービスも重要なので注意してくださいね。

ドメインの種類について

ドメインは、一般トップレベルドメイン ＝ gTLD (generic Top Level Domain)と国別コードトップレベルドメイン ＝ccTLD (country code Top Level Domain)と呼ばれるものがあります。

gTLD は誰でも取得できるドメインで、 ccTLD は国や地域ごとに割り当てられた（一部取得に条件がある）ドメインです。

gTLD には、.com .net .info .biz .org .asia などがあります。
ccTLD には、 .jp .co.jp ne.jp .or.jp .jp.net .jpn.com などがあります。

ドメイン更新を忘れてたらどうなるの？

ドメイン更新を忘れていると、そのドメインを使用したURLにアクセスしてもサーバーが見つからなくなります。
サーバーが見つからないので、誰も訪れる人が居なくなります。

更にドメイン自体は、他の人の申請で買われてしまうこともあるため、2度と手に入らないことになることもあります。
名刺やその他の媒体にURLやメールアドレスを記載していると結構大変なことになります。

ドメイン運営会社によっては更新日が過ぎても復活させることができるサービスがあるところもあります。
しかし、即時復旧されるかの問題もありますので、自動更新ができるところが望ましいです。

Whois情報公開代行について

まず、Whois情報とはドメインの登録者情報のことで、ドメインの登録者情報をネット上で公開することが義務付けられています。
ドメインを登録した人の名前・住所・メールアドレスなどの個人情報を公開することになります。

公開すると個人情報の漏洩やスパムメールが来るなどのデメリットが多いので、ドメイン管理会社ではWhois情報を代行してドメイン管理会社の情報に変えて公開してくれるサービスをするところがあります。
このサービスが Whois情報公開代行 と呼ばれています。
Whois情報公開代行 サービスを利用することで 登録者の情報 を公開する必要がなくなります。

個人では個人情報が公開されるだけでメリットが無いので、Whois情報公開代行サービスを利用することをおすすめします。

以上、ドメイン更新料 を比較してみました。

WordPressのデータベースとは？

WordPressはデータベースにデータを保存しています。そしてWebサイトに表示する際は、データベースに保存したデータを取り出し、適宜加工してホームや記事、記事一覧を表示しています。
ちなみに、管理画面で設定した項目や作成した記事内容などの入力データは、全て「データベース」に保存されます。この記事では、WordPressのデータベースについて少しご紹介します。

WordPressを使うにはデータベースが必要

WordPressを使うにはデータベースが必要です。そしてデータベースは、サイト管理者自身が用意・管理しなければなりません。
しかし、心配する必要は有りません。
なぜなら、ほとんどのレンタルサーバに既に用意されていますから。

データベースを用意する

ここをお読みの方は「レンタルサーバー」や「ホスティングサーバー」を借りているかもしくは借りる予定の方だと思います。
WordPressの自動インストールを行ってもらえるサービスが提供されているところも多いですし、データベースを設定することも難しくありません。

WordPressのデータベースはMySQL

WordPressのデータベースは基本的に「MySQL」と言う名称のデータベースです。
他に「MariaDB」と言うデータベースも使えるようですが、私はまだ見たことが有りません。

WordPress 日本語版の推奨動作環境

MySQL バージョン 5.6 以上 または MariaDB バージョン 10.0 以上です。
「古い PHP や MySQL しか利用できないレガシーな環境でも、PHP 5.2.4 以上、かつ MySQL 5.0 以上であれば WordPress は動作しますが、公式サポートは終了しており、サイトがセキュリティの脆弱性にさらされる危険があります。」と有りますので、可能な限り上の推奨動作環境をクリアしているレンタルサーバを選びましょう。
また、使用するプラグインにも推奨動作環境が有るかもしれませんので、インストールする前に利用予定のプラグインやテーマの動作要件をご確認しておきましょう。
ちなみに、私の利用している「IX Web Hosting」レンタルサーバは5.1.68なので、推奨動作対象外です( ﾉД`)ｼｸｼｸ…

データベースの管理とは？

特に何かをする必要は有りません。
WordPressのバージョンアップに伴うデータベースの更新も自動で行ってもらえるので、あまり心配する必要は有りません。
「WordPress　データベースの更新が必要です」のようにデータベースの更新を行う旨の表示がされ、更新が実行されます。
インストールしているプラグインによって、データベースの更新に失敗することも有るようですので、注意するか対応できるようにスキルを上げるようにしましょう。
その他、高度なカスタマイズをしたりする場合は、データベースにも手を加えることも有るようですが先の話ですね。

データベースに保存されるものは？

WordPressをインストールすると、データベースにはデータを保存するための「テーブル」が自動的に作成されます。
そのテーブル内に管理画面で設定した項目や作成した記事内容などの入力データが全て「データベース」に保存されます。

テーブルとその保存対象

WordPress をインストールしたときに作成されるテーブルと、そのテーブルに保管される内容は以下の通りです。

詳しく知りたい場合は、「WordPress Codex 日本語版」のデータベース構造を参照してください。