許可されていない属性が HTML タグ「span」にあります！！

	ブログをはじめるログイン

超可愛い河村友歌さんとブログ構成パーツ.. ｜Youtube動画をソネットブログに貼り.. ブログトップ

許可されていない属性が HTML タグ「span」にあります！！　[WEB ネット関係] [編集]

天邪鬼的にAMPエラーに対処してみたぞって事（笑）

今回は久しぶりのPCブログ関連ネタで・・・『AMPエラーに対処したぞ』！！

因みに『AMP』とは『Accelerated Mobile Pages』の略で・・・

GoogleとTwitterなどが推進する『高速モバイル専用ページ』の規格で・・・

スペックが低いスマホやタブレットでも高速でサクサク表示できるようにしたWeb Page規格って事！！

そんな感じでエラーに対処したんだけど・・・

ほら・・・昨日、13件の過去記事のリビジョンを再アップしてるのがわかるでしょ？？

実はその他にも4件、記事のリビジョンを過去時間でアップしてるんだけど・・・

それら記事がみんな『AMPエラー』がでてた投稿記事だったりするのです！！

なので現在は修正済みでエラーが出ていないので・・・ちょいと気持ち良かったり？？

あはは・・・こんな偉そうなことを書いてるけど、ただのド素人である私が対処できる事って言ったら・・・

Google Analytics・・・じゃなかった・・・Google Search Console のベータ版（以下、GSC）で示されたエラーの詳細を確認してCSSを書き換えるってな事くらいだったり？？

なので専門職の方から見たら・・・『スクリプトがきったねえーっ』って絶対に思うだろうけど・・・

まあ、それでも問題に対処できたのでいっかなぁって事（笑）

そんな感じでGSCで示された問題のうち、今回は13件のエラーが発生してた・・・

『許可されていない属性が HTML タグ「span」にあります』をどーやって修正したのか・・・

それを開示することで素人対策ながら少しは皆さんの助けになるかなって思うので・・・

恥ずかしながら開示していきたいって思うのです！！

　

『SPANタグ』には『Color』は指定できないのです！！

この問題って今までブログに開示して無かったけど、実は2016年7月以降の記事には対処済みで・・・

今回紹介するAMPエラーになった記事は、その修正を適用していなかった投稿に発生してしまっていたのです！！

そんなエラーの原因は・・・『<span>』（SPANタグ）には『Color（色）』は指定できないって事！！

これってホントに基本的な事なんだけど・・・ほら、2017年にAMPがアップデートされたでしょ？？

そこで仕様変更があって、現在でもPCでブログを表示させる分には問題なく使用できるんだけど・・・

AMPでは『SPANタグ』での『色指定』はNGって事になってしまったのです（泣）

ホント・・・こうした紆余曲折ってチョー迷惑なのでやめて欲しいんだけど・・・

まあ・・・無料で使わせてもらってる身としては甘んじて受け入れるしかないよねって事！！

エラー問題の対策！！

そんな感じでここからは実際の対策なんだけど・・・

『SPANタグで色指定してた箇所』は『メインタイトルバー』と『サブタイトルバー』だったのです！！

なので『冒頭にあるピンクのタイトルバー』部分と、このすぐ上にある『サブタイトルバー』に使用してたってわけ！！

ありゃりゃ・・・これって思い返してみれば『ブログパーツ』として公開してた部分だよね・・・

ホント・・・ゴメン！！

これからは新しい『メインタイトルとサブタイトルバー』を使用してねって事で・・・

上記、『メインタイトル』と『サブタイトルバー』をコピーして、自分のブログに張り付けても良いけど・・・

現在のソネットの仕様で『<div>』が勝手につく事により・・・

変な行間が空いちゃう事で記事が崩れることも多いので・・・

出来れば『テキストエディター』画面のタブ部分にある『<>』（ソースコード）をクリックして・・・

ポップアップしてきた画面に直接、コードを張り付けた方が簡単にできるかもね・・・

って事でコードです（笑）

【メインタイトル：改良版単行ブログヘッダー（背景ピンク＋黒文字）】

<div style="background: #fedffb; padding: 10px; border-radius: 10px; border: 2px solid #cccccc; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #aaa;"><div style="color: #000000; font-size: xx-large;">枠内の文章</div></div><br /><br />あ<br />

【サブタイトル：改良版単行サブヘッダー（背景ブルー＋黒文字）】

<br /><div style="background: #dffdfe; padding: 10px; border-radius: 10px; border: 2px solid #cccccc; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #aaa">枠内の文章</div><br /><br />あ<br />

【サブタイトル：改良版単行サブヘッダー（背景ピンク＋黒文字）】

<br /><div style="background: #fedffb; padding: 10px; border-radius: 10px; border: 2px solid #cccccc; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #aaa">枠内の文章</div><br /><br />あ<br />

それで上記って『単行』のみの設定だけど『改行を挟んだ複数行』にすることも可能で・・・

その場合、一旦コードを張り付けてヘッダー内に文字を書いたら・・・

『Shift+Enter』・・・コードでは『<br />』で（Break End）でOKって事！！

この説明だけど、一般的な『インライン要素』の場合はコードの後ろに『 / 』を付ける事により『要素エンド（閉じる）』と命令できるので・・・

『<br />』のみ追加するだけで文章を改行でき、複数行にすることが可能だって事なのです！！

それで背景色を変えたい場合は・・・

『background：#fedffb;』って、ピンクの色指定部分の『#fedffb;』をブルーの『#dffdfe;』にすることで変えられるのでやってみてね！！

それで他の色コードは・・・『原色大辞典さん』などで調べられるのでいろいろと試してみてね！！

そもそも『SPAN』って何モノ？？

そんな『SPAN』って単語の意味は文字通り『物と物との間の短い距離、何かに挟まれた狭い空間や短い時間』などを示してるので・・・

例えば、英語圏で1スパン（Span）と言えば、親指と小指の間の長さ＝9インチ（22.86cm）の事であり・・・

普通に時間を示す場合は概ね短時間・・・数分から1時間以内を示すときに使用されたりするのです！！

でも短時間って言っても国や人種、状況によってまちまちで・・・

90分前後の大学などの授業時間を示す際にも普通に1スパンって言うし・・・

ちょいとコンビニまで行くって時や次の電車が来るまでの間、それに後日、再会しようって時も1スパンって言っちゃったり？？

でも一般的な常識でドイツや英国、豪州や米国で1スパンと言えば15分以内の場合が多いし・・・

イタリアやフランス、イスラエルやロシアでは数時間かかっても1スパンだと言われちゃう事もあるし・・・

インドやシンガポール、台湾や中国、インドネシアやフィリピンではそれが数日間だったりするのでホントにごっちゃごっちゃ（笑）

まあ、そんな感じで全世界で結構多用される『Span』がPCワードとなると・・・

『<span> ～ほにゃらら～ </span>』で囲った部分が『ブロックレベル要素 (Block Level Elements)』内の『インライン要素（Inline Elements)』として働くって事！！

それで『インライン要素』ってどんな単語があるのって話だけど・・・主なのはこんな感じかな？？

<a>、<abbr>、<b>、<basefont>、<bdo>、<big>、<br>、<code>、<dfn>、<em>、<font>、<i>、<iframe><img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<textarea>、<u>

こんな感じでリンクを添付する時に使用する『<a>~</a>』とか、改行する時に使用する『<br />』とか、みんなも多用してる単語が多いので馴染みがあるでしょ？？

そんな『インライン要素』は『ブロックレベル要素』の中で使用すべき単語なのでついでに説明しちゃうと・・・

『ブロックレベル要素』ってのは『見出し、タイトル、表などの記事内の大きな塊』として使用する要素で主なモノは以下の通りだったり？？

<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>,<h6>、<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

因みに上の単語群・・・正確には要素群だけど・・・WEBで見ると細い枠で囲われてるでしょ？？

これが典型的な『ブロックレベル要素』で・・・

『<blockquote>～文字列～</blockquote>』で挟むとこのように塊（ブロック）とすることができたりするので・・・例としてわかりやすかったでしょってな感じかな？？

それで話は戻って、この『SPANタグ』ってあくまでも『ブロック内の文章の一部』として指定する時に使うモノなのだけど・・・

使用してしまうと行間や文字サイズ、改行や色指定などがおかしくなる場合が多く・・・

またとんでもない箇所に影響したりして思いがけない突飛な行動を起こすので超苦手だったり？？

なのでブログ作成時には『SPANタグ』を極力使用せず、代わりに『<div>』（Division）に置き換えて使用してるのです！！

そんな感じで使い難い『SPANタグ』なんだけど、実は別のタグにも使用しちゃうと同じように挙動不審な行動をしてブログの構成をめちゃくちゃにしちゃうのがあって・・・

それが非常に一般的な『<p>~</p>』の『Paragraphタグ』だったりするのです（泣）

なのでこの『Paragraghタグ』も非常に苦手で・・・

一文の末尾に改行代わりに使用して行間を空けたいと”お祈り”しながら数回、コードを入れ込んでも・・・

テキストエディター上はその回数分だけ、行間が空いて綺麗に纏まってるのにも関わらず・・・

何故か公開すると行間がぐちゃぐちゃで文字列や写真、動画などの配置も理解できない”カオス状態”！！

なので全てがめちゃくちゃな感じなのが残念すぎるのです（泣）

その為、ブログ記事内の文章を改行したい場合は同じ『インライン要素』の『<br />』（Break）を記載して・・・

『<br />』を『空けたい行間数分＋1個』・・・例えばこの記事のように1行だけ、文章と文章の間に行間を空けたい場合は・・・

『A文章』＋『<br />』＋『<br />』＋『B文章』とコードに書き込めば・・・

『A文章』
『行間』
『B文章』との表記となるので・・・

テキストエディター上で確認できる行数分をそのまま公開させられるので重宝してるってわけなのです！！

それでキーボードで打つ場合は『Shift+Enter』を打ち込めば、わざわざコードを打たなくても良いので簡単に改行できちゃうぞ！！

あっ、それで追記で・・・

下記の線って『<hr />』とソースコードに打ち込むことで表示させられるので、良かったらこれも試してみてねって事なのです！！

こんな感じで今回はこれでおしまい！！

他にも『amp-iframeエラー』が残ってるけど、それは記事に添付してある『Youtube動画』に関連するエラーなので・・・

別記事で『ブログへのYoutube動画の貼り方』と共に『amp-iframeエラー』への対処も書くつもりなので待っててね！！

それで毎回、言ってるけど改めて・・・

私たちのブログで使用してるパーツや私たちが撮った写真、文章などはいくらでも使用、転用してもらってOKだぞっ！！

でも商業目的の場合は困っちゃうし・・・

同じく『ぱくたそさん』からお借りしてる、河村友歌さんなどのフリー素材写真も・・・

『ぱくたそさん』にて『間接利用及び商業目的での使用はNG』とされてるので・・・

河村友歌さんなどの写真を使用したい場合は『ぱくたそさん』にて規約を確認後、直接イメージを取ってくるようにしてもらいたいのです！！

その場合も含めて・・・あくまでも普通の個人ブログならOKって事！！

なので私的利用の個人目的に限定するって事に十分留意してねってお願いしちゃうぞっ！！