このブログの文字のスタイルをchatGPTと作ったお話の続きです。
このブログのchatGPTの発言を表す部分のスタイルを作っていました。
前回で、アイコンはこちらに決まりました。
次は、スタイルの設定です。
いちいちクラス指定をするのが面倒なので、h3にスタイルを設定して、
アメブロのブログの入力画面で「中見出し」を選ぶと、すぐに希望のスタイルになる、という計画です。
希望の形は
・左側にアイコン 少し隙間をあけて、グレーの囲み、中に標準の大きさの文字
という形でした。
まず、アメブロにアイコンの画像をアップして、そのURLを控えてから、
chatGPTに指示をだします。
指示が悪い！
もうちょっとビジュアル的にわかりやすくすればよかった。
以下のCSSコードを使用して、指定されたh3スタイルを作成できます。
----------------------------------------------------------------
css
h3.custom-style
{ position: relative; padding-left: 50px; /* 画像の幅 + 隙間 */ color: #333; border: 1px solid #d3d3d3; padding: 10px; display: inline-block; }
h3.custom-style::before
{ content: url('URL'); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
このコードは、h3タグにカスタムクラスcustom-styleを追加して使用します。
html
<h3 class="custom-style">見出しテキスト</h3>
-----------------------------------------------------------------
h3にクラスをいちいち指定するのは意味がありません。
h3を指定したら、自動でそのスタイルが適用されるようにして
h3タグに対して自動的にスタイルを適用するには、カスタムクラスを使わずに直接h3タグにスタイルを適用するようにCSSを変更します。
以下のCSSコードを使用してください：
------------------------------------------
css
h3 { position: relative; padding-left: 50px; /* 画像の幅 + 隙間 */ color: #333; border: 1px solid #d3d3d3; padding: 10px; display: inline-block; } h3::before { content: url('URL'); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
-------------------------------------------
このCSSを適用することで、h3タグに自動的に指定されたスタイルが適用されます。HTMLコードは以下のようにシンプルに保つことができます：
---------------------------------------------
html
コードをコピーする
<h3>見出しテキスト</h3>
---------------------------------------------
これでやってみましょう。
あー残念、文字がかぶってる。そしてデカい！
結局手動でいろいろ調整して、実際に適用してみると。
サイドメニューの見出しに全部適用されてしまったｗｗ
ここ、全部h3だったんですね。
ちなみに、h4もフッターの「お問い合わせ」「スパムを報告」などのテキストの部分に設定されていました。
また、h3の文字の大きさは簡単にかえることができず
h4にクラスを設定することにしました。
そして、実際にあててみたのがこれです。
あっ。。
ど素人ですなｗｗ。
そのあたりを調整してできたのがこちらです。
希望通りになりました。
しかし、いちいち手動で設定するのが面倒ですね。
以下のいくつかの方法で対応することが考えられます。
方法1: ブログ記事内でインラインスタイルを使用する
記事内で直接インラインスタイルを使用して、特定の要素にスタイルを適用する方法です。インラインスタイルはスマホ版でも反映される可能性が高いです。