【ShareHtmlを、もっと綺麗にしたメーカー】をうまく表示できないあなたへ

コミュニケーション 生活

こんにちは!「人に優しく、人を楽しませる」コミュニケーションが信条で、日本を、世界を癒しの力で包み込みたい看護師タレントユウジです。

このブログでは、病棟、高齢者介護施設、新型コロナウィルス軽症者宿泊施設、訪問看護ステーション、大学院生、教員、派遣など、様々な場所で看護を考えてきた看護師歴10年の僕だからこそいえる内容をブログ記事にして発信しています。

今回は、「ShareHtmlを、もっと綺麗にしたメーカー」について記事にします。

これは、ブログ記事のアイキャッチ画像と、ブログ記事のディスクリプション(説明文)を表示し、下記のように長方形のどこをクリックしてもブログ文章にジャンプすることができるリンクカードです。

どこのブログでも、簡単にきれいにできる、と絶賛されているのですが、僕は5,6回に分けてチャレンジしましたが、できませんでした。

この理由は2つあり、

  1. ビジュアルエディタをメインで使っている
  2. テキストエディタとビジュアルエディタを切り替えると、コードが崩れること

これでした。ですので、

テキストエディタをメインで使っている方は、躓きません。

ビジュアルエディタをメインで使っている人だけ、躓きます。

つまり、初心者の僕や、初めたばかりの人が躓きやすいといえます。

「ShareHtmlを、もっと綺麗にしたメーカー」はテキストエディタでしか使えない

ビジュアルエディターでは無理です

「ShareHtmlを、もっと綺麗にしたメーカー」で作成したリンクコードは、ビジュアルエディターで貼り付けても、コードが表示されるだけで、リンクカードは表示されません。

ソースコードを扱うのが初心者の僕は、何度もソースコードをブログ記事に表示させては、消していました。

「簡単」「ソースコードを貼り付けるだけ」という他ブログのうたい文句がプレッシャーになってきます笑

初心者の僕には、「ソースコードを貼り付けるだけ」の「だけ」が、

  1. テキストエディターなのかビジュアルエディターなのか?
  2. テキストエディターでどこに貼り付ければいいか?

が「簡単」ではなかったのです。

1.の答えは、「テキストエディター」であり、2.の答えは、貼り付けたい場所の前の文章の</○○>の後(右か下であり、下が見やすい)です。※○○には、aとか、pとかが入ります。

テキストエディターを使いましょう

あるときに、「これ、テキストエディターに使うんじゃね??」と思い、やってみたところ、できました。

できたのですが、表示ができただけでした。今度はクリックできない(リンクが載っていない)という現象が起きました。

ShareHtmlを、もっと綺麗にしたメーカー,表示できない,使えない

テキストエディターに貼り付けたとき、リンクあり

ShareHtmlを、もっと綺麗にしたメーカー,表示できない,使えない

ビジュアルエディターに変更すると、ソースコードが崩れてリンクがなくなった

「ShareHtmlを、もっと綺麗にしたメーカー」のソースコードが崩れる要因

テキストエディタからビジュアルエディタをクリックでコードが崩れる

ShareHtmlを、もっと綺麗にしたメーカー,表示できない,使えない

テキストエディターで貼り付け、その後ビジュアルエディターに変更する

ShareHtmlを、もっと綺麗にしたメーカー,表示できない,使えない

ビジュアルエディターからテキストエディターに変更

ShareHtmlを、もっと綺麗にしたメーカー,表示できない,使えない

ソースコードが変更してしまっている(リンク先にジャンプするコード;a href が崩れている)

なんで表示がうまくいくのに、リンクがないのか不思議に思いました。

そこで、ソースコードを見てみたところ、リンクがなくなっていることに気づきました。

対策:テキストエディタからビジュアルエディタへ変更しない

対策は、ブログをビジュアルエディターで作って、最後にテキストエディターへ変更し、リンクカードを貼り付ければOKです。

対策:どうしても変更したい場合は、ソースコードのコピーをとっておく

ブログのリライトなどで、どうしてもテキストエディターからビジュアルエディターへ変更をしたい場合があると思います。そういうときは、ソースコードのコピーをとっておいて、最後に貼り付けることが大事です。

対策:子テーマにPHPを書いてエディターを変えたときにコード崩れを防げるらしい

これは経験できていない、というか理解できずどうすればいいのかわからなかったので、紹介までです。スミマセン💦

僕は理解できなかったので、テキストエディター→ビジュアルにしないようにして管理しています笑

意外にこのやり方で大丈夫です。

まとめ

ソースコードが見えるテキストエディターは、どうしても苦手意識が先行したり、生理的に無理って人もいると思います。

僕もそうでした。ただ、人間は必要悪でも見ていると少しずつでも慣れてきますので、少しずつ見慣れていって、ソースコードの意味を理解していきたいものです。

他にもこんな記事を書いています。

最後までお読みくださり、ありがとうございました。

お問い合わせは、Twitterのどのツイートでもリプライしていただいてかまいませんし、お問い合わせページから、いつでもお待ちしています。