- このトピックには7件の返信、2人の参加者があり、最後に
により5年、 6ヶ月前に更新されました。
-
投稿
-
お世話になります。
HTMLやCSSのことはさっぱり分からないのですが、HPを作りたく奮闘していました。
少し文章の色や箇条書きを入れようと、HTMLを見よう見まねでいじっていたら、
「このブロックでエラーが発生したためプレビューできません。」と出て、今までの編集ができなくなってしまいました。
一応、サイト上では表示されるのですが、編集ができないので何か元に戻す方法があれば、と思い連絡させて頂きました。
よろしくお願いいたします。
いいねをした人: 居ません「このブロックでエラーが発生したためプレビューできません。」というメッセージは Gutenberg（ WordPress の新エディター） のものなので Gutenberg で編集されてたのかな？と思うのですが、Gutenberg はこれまでのエディタのように HTML を自分でいじるのには向きません。すぐこわれます^^;
編集画面の右側あたりに「リビジョン」というメニューがあると思いますので、クリックしてみてください。過去のセーブポイントに戻すことができます。
いいねをした人: 居ませんキタジマさん、お忙しい中、ありがとうございます。
早速、リビジョンでまだ過去のセーブポイントまで戻してみましたが、やはり「このブロックでエラーが発生したためプレビューできません。」と表示され、プレビューしてもほぼ崩壊しています。
旧エディター を選択しプレビューするとそれまで編集した部分までは、一応正常にはなりましたが編集画面上では崩れています((+_+))
今回、アンダーラインを入れたい（Snow Monkey Blocksのクラシックでの蛍光ペンよりもハッキリした色で入れたい）と思いHTMLを触ってみたのですが、何かいい方法はありませんでしょうか？
問題となったページはこれです↓
ワードプレス歴が2か月くらいで勉強不足で、質問の内容も的を得ていないかもしれませんが、よろしくお願いいたします。
いいねをした人: 居ませんワードプレス歴が2か月くらいで勉強不足で、質問の内容も的を得ていないかもしれませんが、よろしくお願いいたします。
いえいえ！ Gutenberg は制作者でもまだ慣れていない（触ってもいない）人が多いので、どんどん触ってみられているのが素晴らしいと思います！
えと、「このブロックでエラーが発生したためプレビューできません。」となるのは、
<span style="border-bottom: solid 4px #ffdc00;"></span>のコードをいれたブロックですよね？ Gutenberg がいつエラーになるのかは、Snow Monkey ではなく Gutenberg の仕様なので実は僕もちゃんとはわかっていないのですが、多分、手順として、「段落ブロック」を入れて、それを「HTML として編集」で編集された感じでしょうか？（なぜか僕のサイトでは「HTML として編集」をクリックした時点で「このブロックでエラーが発生したためプレビューできません。」になって編集すらできなかったのです…Gutenberg のバグな気がする）
HTML を入れたい場合は、段落ブロックではなく、「HTML ブロック」もしくは「クラシックブロック」のほうが良い気がします（まだ Gutenberg は開発中で不安定なのでそれでもエラーは発生する可能性はあります）。
もしくは、HTML を入れるというやり方よりは、bタグやiタグに黄色アンダーラインのスタイルをつけてやったほうが良いかもしれません。strong や em は段落ブロックのツールバーで「b」「i」を押したときに挿入されるもので、これを使えば「HTML として編集」とかしなくてもビジュアルのままやれるので。
例えばこんな感じです。
.c-entry__content em { font-style: normal; border-bottom: solid 4px #ffdc00; }これをカスタマイザー > 追加 CSSに追加したあとに、段落ブロックで範囲選択して「i」を押してみてください。
いいねをした人: 居ませんキタジマさん、ありがとうございます。
早速、やってみました！追加CSSを使えば、こんなことが出来ちゃうんですね！感動！！
追加CSSを使えば、ワードプレスでの可能性が広がりそうですね。面白くなってきました、もっと勉強してみます。
—————————————–
ちなみに
HTML を入れたい場合は、段落ブロックではなく、「HTML ブロック」もしくは「クラシックブロック」のほうが良い気がします（まだ Gutenberg は開発中で不安定なのでそれでもエラーは発生する可能性はあります）。
のところは一応「クラシックブロック」を選択していましたが、エラーが出たということは、僕のHTMLの書き方がミスったというよりは、まだGutenberg が不安定ということなんでしょうか？
—————————————–
あとTOPページは、Elementorを使って作ったんですが、直感的でとても使いやすかったです。しかし、ネットで見てたら
- Elementorは重いので上位表示されにくい、またスピードが遅く離脱する
- Elementorは言語（？）がむちゃくちゃ・・・
とありました、ここはどう考えたらいいでしょうか？
直感的に作れるし他のページにも使いたいと思っていますが、もしプロの目から見て「確かに！」って感じなら、初めは不慣れでもGutenbergに慣れていった方が後々いいのかも、と思いながら悩んでいます。
お忙しいところ恐縮ですが、よろしくお願いいたします。
いいねをした人: 居ません早速、やってみました！追加CSSを使えば、こんなことが出来ちゃうんですね！感動！！
良かったです！
「クラシックブロック」を選択していましたが、エラーが出たということは、僕のHTMLの書き方がミスったというよりは、まだGutenberg が不安定ということなんでしょうか？
そうなんですね。Chrome でしか試したことがなくて恐縮ですが、Chrome のデベロッパーツールを開いた状態で編集画面（Gutenberg）を開くと、Console タブになんでエラーになったのかというのが赤字で表示されるんじゃないかと思います。実際に出力されている span タグを見る限りでは構文違反とかはなさそうにみえますが、Gutenberg 的に NG ということがあるのかもしれませんし、または単純に不安定でバグ、ということもあるかもしれません。
直感的に作れるし他のページにも使いたいと思っていますが、もしプロの目から見て「確かに！」って感じなら、初めは不慣れでもGutenbergに慣れていった方が後々いいのかも、と思いながら悩んでいます。
これはいろいろなスタンスの人がいるのであくまで一参考に捉えていただければと思うのですが、僕は dispo さんのトップページの HTML がめちゃくちゃだとは思いませんし、表示速度が離脱したくなるほど遅いとも思いません。もちろんプロがオーダーメイドでコーディングしたほうがスマートで無駄のないマークアップはできるとは思いますが、現代の検索エンジンはマークアップがキレイだから上位表示させようということはないと僕は思いますし、最低限見出しは見出しタグで、みたいなことができていればよいのではないかと思います。
また、表示時間もいま2秒くらいで表示されているようで、理想を言えばもっと早いほうが良いのでしょうが、検索順位を極端に落とされるほど遅いとは思いません。Elementor を使うことで処理量は増えるので、使わないよりは遅くなりがちだとは思いますが、表示時間を計測して許容範囲内であれば使っても全然良いのではないかと思います。
いいねをした人: 居ませんキタジマさん、ありがとうございます。
キタジマさんが見られた感じ的に、トップページのHTMLが無茶苦茶でないと聞いて安心しました。外観的にきれいに仕上がってても、内部的なことの善し悪しは素人には分かりづらいので(^^;)
どんどん表示までが遅くなっていくようであればユーザビリティに欠けることになるので、その辺は表示時間を計測したり、自分でイラつかないかみながら判断していきます。
その辺を柔軟性をもっていいんだな～と知れたので、ご相談してみて良かったです。
ありがとうございました！
いいねをした人: 居ませんキタジマさんが見られた感じ的に、トップページのHTMLが無茶苦茶でないと聞いて安心しました。外観的にきれいに仕上がってても、内部的なことの善し悪しは素人には分かりづらいので(^^;)
どうしても手できれいにコーディングするよりはタグは増えますが、タグが多くても上位表示されているサイトなんていくらでもありますので、文法的に破綻してなければ良いのでは？と僕は思います。
どんどん表示までが遅くなっていくようであればユーザビリティに欠けることになるので、その辺は表示時間を計測したり、自分でイラつかないかみながら判断していきます。
ですね。定期的に計測されると良いかと！
では、トピッククローズしますね。
いいねをした人: 居ません
- トピック「Gutenberg 「このブロックでエラーが発生したためプレビューできません。」」には新しい返信をつけることはできません。