Gスカの3D素材やPCゲーブログ

ゆっくりキャラボイス設定記事、怖い話動画数800以上!とか、マイクラネタ(MOD、役立ち情報、データ解析)や、動画に使える自作MMD素材の配布とか記事にしてます。

ChatGPTすごい!!ブログのCSSも作れちゃった!!

ここんところずっとChatGPTにハマってるのですが、ChatGPTすごいですね!

ある程度の設定とかチャットで言わなくても

「○○の話作って」

と言うと作ってくれちゃったりします。

 

で、今日驚いたのがブログで特別なものを設置したい時、HTMLやCSSってのを記述しないといけないのですが、そんなの知識ない私には分からないものです(^^;

そういう時は誰かが説明してくれてるブログを見たりするのですが、それがはてなブログにあってない時もあったりしますからね。

 

今回ChatGPTに頼んだのはブログの記事内にスクロールバー付きのリストってやつで、更新履歴とか長くなっちゃうものをコンパクトに表示出来るやつです。

こんなやつ!

 

どうでしょう?こういうリスト、何気にほしい!って思う方いると思います。

って、画像だけじゃ本当に出来たのかどうか分からないと思いますので、ここにも記述したのを配置します。

  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5
  • 項目6
  • 項目7
  • 項目8
  • 項目9
  • 項目10

マウススクロールをさせるとスクロールバーが動いてくれてると思います。

 

早速それを設置する場合のコードを記述しますので自分のブログにも配置してみてください。

まずHTML側(ブログの記事内のHTML編集に貼り付けるやつ)に次のコードを貼り付けます。(青文字のところ全てをコピーするように)

<div class="scrollable-list">
  <ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
    <li>項目4</li>
    <li>項目5</li>
    <li>項目6</li>
    <li>項目7</li>
    <li>項目8</li>
    <li>項目9</li>
    <li>項目10</li>
  </ul>
</div>

項目1~10は自分が好きな事を見たまま編集で記入しちゃってokです。

 

続いてCSSに記述するコード。

これははてなブログのデザイン設定から工具マーク、一番下のデザインCSSの場所の空いているところに記述してください。

.scrollable-list {
  height: 200px;
  overflow: auto;
  border: 3px solid #ccf; /* 枠線を追加 */
}

/* スクロールバーのスタイル */
.scrollable-list::-webkit-scrollbar {
  width: 10px;
}

.scrollable-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scrollable-list::-webkit-scrollbar-thumb {
  background: #888;
}

.scrollable-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

 

枠線の太さを変えたい時は  border: 3px solid #ccf; という記述の3pxの数値を変更し、枠線の色を変更したい時は#ccfという所を変更してください。

あとは変更を保存するを押して記事をプレビューしてみるとスクロールバー付きになっています。

ちなみにこれはChromeブラウザ等のChrome等でしか動作しないとの事ですので、Chrome以外を使っていてこの記述でうまく動かない場合、ChatGPTに聞いてみるしかありません(^^;

 

追記

もし上記ので駄目だった場合次を試してみてください。

Google Bardが出力したやつ

HTML

<ul class="scroll-list">
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
  <li>リスト項目4</li>
  <li>リスト項目5</li>
</ul>

 

CSS

.scroll-list {
  border: 1px solid #ccc; /* 枠線の太さ、色 */
  padding: 10px; /* 内側の余白 */
  max-height: 200px; /* スクロールバーが出る高さ */
  overflow-y: auto; /* スクロールバーの表示 */
}