スマホ版アメブロのCSS対策

先日からずっと悩んでいたアメブロのCSS対策についてです。 

このブログでは、cahtGTPの発言部分には

 

私がchatGPTです。なんでも相談してくださいね。

 

という風に通常のテキストをは別の可愛いスタイルをつけてみようとしましたが、意外と難航。なぜかというと、スマホではオリジナルのCSSは受け付けてくれないからです。

 

ほぼ100％の来訪者の方がスマホで閲覧しているという状況では、スマホで見れないとまったく意味がありません。

 

chatGPTと相談したところ、本文に直接インラインで書き込めばCSSが適用される可能性が高いとのこと。

コードをchatGPTにインライン用に作ってもらいました。

 

<div style="position: relative; padding-left: 60px; color: #666; background-color: #fff; border: 1px solid #d3d3d3; border-radius: 10px; padding: 20px; margin: 10px 60px; display: inline-block; font-size: 0.8rem; font-weight: normal; line-height: 1.5em;">
        <span style="position: absolute; left: -50px; top: 0px; width: 40px; height: 40px; display: inline-block; background: url('https://stat.ameba.jp/user_images/20240621/21/vision-design/8d/a5/p/o0040004015454317548.png') no-repeat center center; background-size: cover;"></span>
テキスト</div>

 

長い！

長いだけならいいのですが、なぜかいつのまにか<span></span>が消えてしまって、アイコンがみえなくなってしまうことが後日判明。

保存し直しなどのタイミングで削除されてしまうのでしょうか。

 

あきらめて、デフォルトのスタイルを使ってもいいのですが、せっかくアイコンも使ったし、検証もしてみたいのでファイルを別のサーバに置いて、読み込む方式を使うことにしました。

 

CSSはもうできていたので、自分の契約しているサーバにアップします。

 

（CSSのURLを書いて）CSSを外部から読み込むコード書いて

（importを正確に調べるのが面倒だった）

 

了解しました。ブログの本文内で外部CSSファイルを読み込むには、JavaScriptを使用してCSSを動的に読み込む方法があります。以下のコードをブログの本文内に追加してください。 
----------------------------------

html

<script> (function() { var link = document.createElement("link"); link.href = "URL"; link.rel = "stylesheet"; link.type = "text/css"; document.head.appendChild(link); })(); </script> <div class="chat"> これで設定は完了しました。お疲れ様です。</div>

 

----------------------------------

説明

  1. JavaScriptを使用してCSSを読み込む:

    • <script> タグ内にJavaScriptコードを記述し、外部CSSファイルを動的に読み込む。

    • document.createElement("link") を使用して link 要素を作成し、href 属性に外部CSSファイルのURLを指定。

    • document.head.appendChild(link) を使用して、link 要素を head 要素に追加。

  2. スタイルを適用するHTMLコード:

    • CSSファイルが読み込まれることで、.chat クラスのスタイルが適用されます。

これで、ブログの本文内に外部CSSファイルを読み込むことができ、スタイルが適用されるはずです。

 

あー。jsも禁止なんですよ。

なので、単純にimportのコードを書いてもらいました。

 

<style> @import url('CSSのURL'); </style>

を本文に埋め込むだけで、希望のスタイルが実現することになりました。

 

こんな感じです。

 

説明
CSSインポート:

<style> タグ内で @import を使用して外部CSSファイルを読み込みます。
@import url('URL'); を記述して、指定のURLからCSSをインポートします。
スタイルを適用するHTMLコード:

インポートしたCSSファイルが読み込まれることで、.chat クラスのスタイルが適用されます。
この方法で、ブログの本文内に外部CSSファイルを読み込むことができ、スタイルが適用されるはずです。

 

スマホでもみえていますでしょうか。

 

本日のAI画像は、「PCで作業するグラフィックデザイナー」シネマモードです。

 

 

どこでお仕事してるのでしょうか。