isystk-theme 使い方ガイド：記事を彩る装飾・スタイル活用術

本ブログサイトで使用しているWordpressテーマ（isystk-theme）の専用装飾・カスタマイズ方法について解説しています。

💡 スタイルの適用方法

各ブロックを選択した際に、右側の設定パネルにある「スタイル」セクションから、目的のデザインを選択するだけで適用できます。手動でクラス名を入力する必要はありません。

見出し (h1～h6) の装飾

見出しブロックを選択し、以下のスタイルを選択してください。

スタイル：下線グラデーション(isystk-theme)

スタイル：背景グラデーション(isystk-theme)

スタイル：中央から下線(isystk-theme)

スタイル：マーカー(isystk-theme)

段落 (pタグ) の装飾

スタイル：中央から下線(isystk-theme) を指定すると、このように段落全体に中央から広がるような下線が付きます。<Shift+Enter>による改行も可能です。

スタイル：マーカー(isystk-theme) を指定すると、蛍光ペン風の装飾になります。複数行にわたる場合も各行にマーカーが引かれるのが特徴です。

引用 (blockquote) の装飾

引用ブロック、または段落ブロックにて スタイル：クラシック(isystk-theme) を指定してください。

引用のプレビューです。イタリック調で少し小さめのテキストになり、背景色が適用されます。TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT

リスト (ul / ol) の装飾

■ スタイル：ステッチ風(isystk-theme)

箇条書き（ulタグ）の場合はドットが表示されます。
メモ１
メモ２

番号付き（olタグ）の場合は数字が表示されます。
ステップ１
ステップ２

■ スタイル：チェックリスト風(isystk-theme)

チェック１
チェック２
チェック３

コード (pre) の装飾

用途に合わせて、コードブロックのスタイルを切り替えてください。

ファイルツリー (スタイル名：ファイルツリー):

.
├── public （公開ファイル）
├── assets （静的ファイル）
└── src （ソースコード）

Javascript (スタイル名：Javascript):

const message = "Hello, World!";
console.log(message);
function greet(name) {
  return `こんにちは、${name}さん！`;
}

コマンドライン (スタイル名：コマンドライン):
※別途 data-output="2-4" 属性を付与することで、実行結果部分のスタイルを分けることができます。

ls -l
total 0
-rw-r--r--  1 user  staff  0  1 12 10:00 index.js
drwxr-xr-x  3 user  staff  96 1 12 10:00 node_modules

画像・メディアの装飾

■ 画像の回り込み:
画像に align-right（右寄せ）または align-left（左寄せ）クラスを追加すると、テキストが回り込みます。

このように画像が右側に配置され、残りのスペースにテキストが流し込まれます。TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTE

■ 動画サムネイル (is-style-video):
IMGタグに is-style-video クラスと data-video-src を指定すると、再生ボタンが表示され、クリックで動画に切り替わります。

■ 画像ギャラリー (モーダル対応):
標準のギャラリーブロックを使用すると、クリックで拡大スライド表示が可能です。

会話風の吹き出し表示

グループブロックの「スタイル」から配置を選択できます。

こんにちは！左側に画像があるタイプです。Flexboxで高さが自動調整されます。

こちらは右側に画像があるタイプです。スタイルから簡単に切り替えられます。

考え事スタイルは、しっぽの部分が丸い形になります。内省的なシーンにどうぞ。

【HTML記述例】（カスタムHTMLブロックを使用する場合）

<div class="balloon is-left">
  <figure>
    <img src="path/to/icon.jpg" alt="アイコン">
    <span class="balloon-image-description">名前</span>
  </figure>
  <div class="balloon-text">
    <p>メッセージ内容</p>
  </div>
</div>