検索結果

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。SIRIUS2には（ver.1.03のアップデートで）＜見出しデザイン＞の一括変更機能が搭載されました。この機能はとても便利なんですが、1カラム（ワイド含む）時のレイアウトが個人的にちょっと使いづらいかなあと思うこともあったので《【Volar2】オリジナル見出し一括変更》も考えてみました。※＜見出しデザイン＞についてはこちらの記事をご参照ください。見出しデザイン見出し用装飾スタイルについての詳細ページ。概要SIRIUS2の＜見出しデザイン＞の一括変更機能はとても便利です。用意されてるスタイルの数も豊富だし、テキストカラーやテキストサイズの変更も簡単です。ただし全ぺージ同じスタイルが適用されます。そのためトップページとエントリーページで別々の見出しデザインを設定するといったようなことはできません。といってもやれないことはないです。エントリーページに＜見出しデザイン＞の一括変更を使って、トップページは＜見出しデザイン＞の個別設定を使うとかですね。これならトップページだけ別のデザインの見出しにすることはできます。あと一部の＜見出しデザイン＞は1カラムのような横に広がるレイアウトだと間延びした印象になりかねないものもあります。特にH2の大見出しはです。（h3以下の見出しはあまり気になりません）そういう場合は中央寄せの見出しを使えば収まりはいいのですが、好みのものがない場合は悩ましいところです。そんなわけでカスタムテンプレート【Volar2】では2カラムでは（原則として）左寄せかつコンテンツ幅で広がる見出しに、1カラム（ワイド含む）では中央寄せかつテキスト幅での表示になる《【Volar2】H2見出しデザイン》を加えてみました。どちらかというと1カラム向けの見出しデザインです。一部のデザインの中には2カラムでも中央寄せになるスタイルも含んでます。余談ですが、＜見出しデザイン＞機能を使わない状態での［ベース”テンプレート］では下のような挙動の違いがみられます。例えばデフォルト状態での”H2見出し”だとグレーの（四角い）背景色が付きます。ここでレイアウトを”1カラム”に変更してみると上と同じような左寄せでグレーの背景色もついたままで変わりはありません。しかしながら”1カラム（ワイド）”に変えてみると下のように中央寄せでの配置に変わり、背景色も付かなくなります。あえてそういう仕様なのか、調整ミスなのかはわかりませんがちょっと戸惑いを感じます。【Volar2】のH2見出しデザイン《【Volar2】H2見出しデザイン》はH2見出しのみに反映されます。H3以下の見出しに関してはそのまま使うか、SIRIUS2標準機能の＜見出しデザイン＞一括変更を使うかになります。SIRIUS2標準の＜見出しデザイン＞一括変更を使ってH2見出しのデザインを変更している場合はそちらが優先表示されます。ここから下が【Volar2】で用意したH2専用の見出しデザイン一覧です。SIRIUS2標準搭載の＜見出しデザイン＞とほぼ同じデザインのものもあればオリジナルデザインもあります。（仰々しいのは外してさりげない感じのものだけに絞ってます）ただし色（の変更が可能なデザイン）に関しては専用のスタイルシート上での変更になります。ここがSIRIUS2標準搭載の機能と大きく異なる点でデメリットでもあるんですが、こればっかりは仕方ありません。（色はどんなサイトでも使い回しが可能なようにデフォルトではグレー系で作成してます）見出しh2-01（背景のみ）テキストカラー・背景色は変更可。（※専用スタイルシート上で）1カラム（ワイド）にすると見出しテキストの大きさが若干大きくなります。スタイルを調べたら確かにそういう記述がありました。ということで仕様みたいです。ここから先は1カラムと1カラム（ワイド）のレイアウト自体は同じなので1カラムと1カラム（ワイド）は同一のキャプチャ画像で紹介します。見出しh2-02（ストライプ背景）設定が複雑なので背景色は変更不可。見出しh2-03（背景＆ステッチ）テキストカラー・背景色・ステッチカラーは変更可。（※専用スタイルシート上で）見出しh2-04（タグ風）テキストカラー・背景色は変更可。（※専用スタイルシート上で）見出しh2-05（背景色・角丸［テキスト中央］）こちらはどのページレイアウトでもテキストは中央寄せになります。テキストカラー・背景色は変更可。（※専用スタイルシート上で）見出しh2-06（上下線）上下線カラーは変更可。（※専用スタイルシート上で）見出しh2-07（二重下線）下線カラーは変更可。（※専用スタイルシート上で）見出しh2-08（左線）左線カラーは変更可。（※専用スタイルシート上で）（背景色やテキストカラーも一応変更可）見出しh2-09（左線2）左線カラーは変更可。（※専用スタイルシート上で）（背景色やテキストカラーも一応変更可）見出しh2-10（左上にワンポイント）ワンポイントカラーは変更可。（※専用スタイルシート上で）（背景色やテキストカラーも一応変更可）見出しh2-11（二重枠線）変更は不可。見出しh2-12（短い2色下線［中央］）こちらはどのページレイアウトでも中央寄せになります。2色の線カラーは一応変更可です。（※専用スタイルシート上で）見出しh2-13（左右線シンプル［中央］）こちらはどのページレイアウトでも中央寄せになります。線カラーは一応変更可です。（※専用スタイルシート上で）見出しh2-14（左右線グラデーション［中央］）こちらはどのページレイアウトでも中央寄せになります。線カラーは変更不可です。見出しh2-15（左右線グラデーション）こちらはどのページレイアウトでもテキスト自体は中央寄せになります。線カラーは変更不可です。見出しh2-16（短い下線［中央］）こちらはどのページレイアウトでも中央寄せになります。下線カラーは変更可。（※専用スタイルシート上で）見出しh2-17（大かっこ）線カラーは変更不可です。見出しh2-18（上下に弧線）こちらはどのページレイアウトでも中央寄せになります。線カラーは変更可。（※専用スタイルシート上で）見出しh2-19（背景に画像）こちらはどのページレイアウトでも中央寄せになります。専用スタイルシート上に画像ファイル名をペーストするだけで表示可。見出しh2-20（下に丸）こちらはどのページレイアウトでも中央寄せになります。丸の色は変更可。（※専用スタイルシート上で）見出しh2-21（左上にワンポイント2）こちらはどのページレイアウトでも中央寄せになります。ワンポイントの色は変更可。（※専用スタイルシート上で）見出しh2-22（2個の正方形）正方形の色は変更可。（※専用スタイルシート上で）使い方それぞれ専用のモジュールを用意しており、使いたいスタイルのモジュールの［有効］のチェックをONにすれば即反映されます。『・・・【エントリー】』とついてるのはカテゴリーページとエントリーページ両方に反映されます。『・・・【トップ】』とついてるのはトップページのみに反映されます。

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。各見出し（H2,h3...）にオリジナルの装飾を施せる＜見出しデザイン＞機能が新しく搭載されました。設定画面の見方設定画面＜見出しデザイン＞は装飾を付けたいテキストを選択した後、記事装飾メニュー最上段の【見出し】→【見出しスタイル】から選択します。見出しの設定縮小版①プレビュープレビューエリア。設定変更するとリアルタイムで反映されます。②スタイルここで好きなスタイルを選択します。用意されてるスタイル一覧がこちら。③カラーここで見出しの背景色やボーダー色を選択できます。全部で15色用意されてます。ちなみに”レッド”を選択するとこんな感じになります。④形角丸と円形（半径が大き目の角丸）が用意されてます。こちらが角丸のサンプル。⑤見出しタグどの見出しにするかの選択項目。見出しタグではない「DIV」タグも用意されてます。⑥単色背景色やボーダー色を淡い色合いに変えられます。⑦ボーダースタイルによってはボーダーの形状を変えられます。詳細設定①アイコン見出し前にアイコンを付けられます。こちらはSIRIUS2に付属のアイコンを付けてみたサンプル。②文字サイズ文字サイズを変更したいときはここで調整できます。見出しデザインの共通化アップデートで機能追加済み実は最初にこの機能のことを知った時、H2見出しなら全ページのH2見出しデザインを一括変更できる機能だと思ってたんです。でも実際にはページ内で個別の見出しデザインを変える機能でした。じゃあこの機能はどんな時に使えるのかといえば、おそらくトップページや通常のエントリーページとは異なるランディングページ（LP）などで他とはページイメージを変えたい時なんかに使える機能なんだろうと思います。でもそこだけでしか使えないのはちょっともったいないです。せっかくいろんなパターンが用意されてるんですから。とうことで【Volar2】では見出しデザインを全ページ共通の統一見出しデザインとしても使えるようカスタマイズしてみました。追記：2022.8.25SIRIUS2のアップデートで「見出しデザイン」の”一括変更（共通化）”が可能になりました。詳しくはこのあとご紹介します。＜見出しデザイン＞は編集画面内（ページ内）限定なので『記事タイトル』に入力したH2見出しは変えられません。そのため＜見出しデザイン＞で個別に装飾を付けたH2が存在すると、同じH2見出しなのにデザイン違いのH2が混在することになります。これを防ぐには『記事タイトル』には見出しを記述せず、編集画面内に見出しを記述することです。見出しデザインの一括変更SIRIUS2アップデート（ver.1.03）にて見出しデザイン機能が一括で変更できるようになりました。この機能を使えばすべてのH2（H3,h4...）見出しを設定したデザインで統一表示させることができます。こちらの機能を使えば『記事タイトル』に記述したH2見出しにも反映されます。変更のやり方【デザイン】タブ→【見出しデザイン】で設定画面を開きます。こちらが設定画面で、左側には各見出しの指定欄が、右側にはプレビュー画面があります。（設定を変更するとプレビュー画面に即反映されます）例えばH2見出しを変更したいなら青丸で囲ったH2見出し「変更」ボタンをクリックします。見出しデザイン変更画面になるのでこれまでご説明してきたやり方を参考に好きなデザインを指定していきます。サンプルとして下の設定で「OK」をクリックしてみます。H2見出しが指定したデザインで登録されました。プレビュー画面にも変更が反映されてます。これですべてのH2見出しが変更したデザインで表示されるようになります。こんな感じで他の見出しも同様に変更できます。筆者『H2見出し』脇に”記事タイトル”と付いてますが、記事中に設定したH2見出しも設定したデザインでの表示に変わります。解決済みアップデート（Ver1.090）にて解消されました。ココがちょっとH2見出しに限ってですが、目次タグの<% index %>が挿入されてる記事ではH2見出しがデフォルトデザインのままで変更できません。これはおそらく調整ミスでしょう。この仕様はアップデートで変更になる（？）設定をパターン登録たとえば「H2見出しを別のデザインに変えてみたいけど毎回細かくカスタマイズするのが面倒くさい」なんて時は設定をパターン登録しておくと変更がとてもラクになります。こんな感じですね。H2見出しのスタイルを「上下線」に変更、さらに色は「淡色」、ボーダーは「二重下線」にして…これをスタイルを変えるたびにあちこちポチポチやっていくのはとても面倒です。こういう時は設定を「パターン登録」しちゃいましょう。「設定をパターン登録」をクリックするとパターン名の登録画面になるのでわかりやすい名称で登録しておきます。こうしておけばたとえば下のようなデザインを別の登録したデザインに変更したい場合、「パターン設定の読み込み」をクリックして出てきた選択画面から変更したい登録名をクリックすれば瞬時に登録したデザインで置き換わります。筆者各見出しごとに登録が必要です。一括登録はないようです。ただこのパターン登録機能が真価を発揮するのは新サイトを作る際に「そういえばあの見出しデザインにしようか」ってなったときじゃないかと思うんです。好きなデザインでいくつか登録しておいて（モジュールやクラスの設定のように）他サイトでも使えるような「ファイルに保存」で書き出しておければ別サイトでも1発で呼び出せますでしょ。この仕様はアップデートで変更になる（？）【Volar2】オリジナル機能【Volar2】でも《H2見出しデザイン》の一括変更機能を付けてみました。SIRIUS2標準の＜見出しデザイン＞の機能限定版かつちょっとだけオリジナル機能も含んだデザイン変更機能です。※【Volar2】＜H2見出しデザイン＞についてはこちらの記事をご参照ください。【Volar2】H2見出しデザインの一括変更1カラム専用の【Volar2】オリジナルH2見出しデザインと通常ページのH2見出しデザインを別々に設定できます。