【コピペOK】左側に縦線、上にサブタイトル、下にタイトルを設置するHTMLとCSS【WordPressブロックエディタ】

このデザインを作る仕様ってたまに見かけるけど、結構実装しようと思ったら難しくない?

方法はHTMLとCSS、背景に縦線画像を設置してその上に文章を2つ掲載の2パターンあるよね。

今回はChatGPT4に考えてもらって一発で上手くいったので備忘録も兼ねて記述しておく。

いや~ChatGPT4いなかったら1時間は格闘していたかもね(汗)

マジで神、WebコーダやWebプログラマーはChatGPT4を有効活用しないと、有効活用できないやつらに負けよね。

■HTML

WordPressブロックエディタ > 見出しh2 > プレーン で制作
タグ名:heading-service

■CSS

.heading-service {
  position: relative;
  padding-left: 36px!important;
	  font-family: 'Noto Serif JP', serif;
}
.heading-service::before {
  content: "";
  position: absolute;
  left: 0px;
  top: -28px; /* 要素の上端からの相対位置 */
  width: 4px; /* 線の幅 */
  height: 96px; /* 線の高さ */
  background: linear-gradient(to bottom, #0098DA 0%, #0D62AD 100%); /* グラデーションの設定 */
}
.heading-service::after {
  content: "Service";
  position: absolute;
  top: -24px;
  left: 40px;
  font-size: 18px;
background: #0098DA;
background: linear-gradient(to right, #0098DA 0%, #0D62AD 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.2em;
	font-weight: 400;
	font-family: 'Noto Sans JP', serif;
}

以上、コピペ使ってね。

色やフォントの大きさなどは自由に適宜変更してね。

中級者ならそれくらいは分かるっしょw

分からなければ、ChatGPT4に分からない箇所とこうしたい!って希望を書くと、コード書き換えてくれるのでやってみてね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

売れる仕組みを創り、Webで売上アップさせる
株式会社WebSanta 代表取締役
 
幼少期、何も誇れる能力も無く、自分に自信が無い日々を過ごす。
小中高校時代、父の3億の借金、生死をさまよう交通事故、大火傷、彼女の死にも遭う。
それらをキッカケに「たった一度の人生、悔いなく生きたい!」と心に決める。
しかし、大学時代、バレンタインデーに当時の彼女にフラれ、自殺しようと銃社会アメリカに渡るもシリコンバレーのIT革命に魅せられ帰国。
 
ケンブリッジ大学語学留学、東京理科大学経営学部経営学科、すごい起業塾、ビジネスコンテスト優勝を経て、株式会社WebSantaを設立。
総額600万円の詐欺やうつ病に遭いながらも、起業12年・相談1000人・サイト制作100件・セミナー100回・総売上3億に貢献。
 
使命は「起業家に未来を届ける」
ビジョンは「Webマーケティングで起業家のビジネスを革新させる」
夢は「悲しい倒産を無くす」こと。

コメント

コメントする

目次