これからワードプレスでいろいろな記事を書いていこうと思いますけれども、ワードプレスにいろいろな種類のブロックがあります。それぞれのブロックがどのような効果があるのかというのを一つずつ試していきたいと思います。
＜見出しブロック＞見出しブロックを使うとこんな感じで選べますね。それぞれの章の一番初めに使うといいですね。
<見出し＞ H2 見出しを選ぶと、今度はH1からH234と選ぶことができます。これはH2
これはH3
これはH4
こんな感じに幅を変えることもできます
右側にあるスタイルで。変更することで、文字の色や背景色、サイズや枠線なども変えることができますね。
＜画像を挿入してみよう＞
カバーに設定し固定背景にするとこんな感じ
カバーブロックは上にコンテンツを載せることができる
ギャラリーは複数の画像を並べることができる（同時にドロップする）
グループを使うと一つのグループの中に文字や絵を挿入できる
グループの機能
引用 はこんな感じ
コードブロック
コードを表示するときに使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文字数カウント</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
textarea {
width: 100%;
height: 200px;
font-size: 16px;
}
.counter {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>文字数カウンター</h1>
<p>下のテキストエリアに文字を貼り付けると、文字数がカウントされます。</p>
<textarea id="textInput" placeholder="ここにテキストを貼り付けてください..."></textarea>
<div class="counter">文字数: <span id="charCount">0</span>文字</div>
<script>
const textInput = document.getElementById('textInput');
const charCount = document.getElementById('charCount');
textInput.addEventListener('input', () => {
charCount.textContent = textInput.value.length;
});
</script>
</body>
</html>
ファイルも貼り付けられます。
コメント