SIRIUS2深掘り

検索結果

「 見出し 」の検索結果
  • アイキャッチ画像
    見出しデザイン-SIRIUS2
    当サイトでは基本的にベーステンプレートでの動作検証となってます。そのため他のテンプレート利用時にはここで使用しているキャプチャ画像とは若干異なる場合もあります。また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。各見出し(H2,h3...)にオリジナルの装飾を施せる<見出しデザイン>機能が新しく搭載されました。設定画面の見方設定画面<見出しデザイン>は装飾を付けたいテキストを選択した後、記事装飾メニュー最上段の【見出し】→【見出しスタイル】から選択します。見出しの設定縮小版①プレビュープレビューエリア。設定変更するとリアルタイムで反映されます。②スタイルここで好きなスタイルを選択します。用意されてるスタイル一覧がこちら。③カラーここで見出しの背景色やボーダー色を選択できます。全部で15色用意されてます。ちなみに”レッド”を選択するとこんな感じになります。④形角丸と円形(半径が大き目の角丸)が用意されてます。こちらが角丸のサンプル。⑤見出しタグどの見出しにするかの選択項目。見出しタグではない「DIV」タグも用意されてます。⑥単色背景色やボーダー色を淡い色合いに変えられます。⑦ボーダースタイルによってはボーダーの形状を変えられます。詳細設定①アイコン見出し前にアイコンを付けられます。こちらはSIRIUS2に付属のアイコンを付けてみたサンプル。②文字サイズ文字サイズを変更したいときはここで調整できます。見出しデザインの共通化アップデートで機能追加済み実は最初にこの機能のことを知った時、H2見出しなら全ページのH2見出しデザインを一括変更できる機能だと思ってたんです。でも実際にはページ内で個別の見出しデザインを変える機能でした。ページ内限定ですから記事タイトルに入力したH2見出しを変えることはできません。ということは記事タイトルのH2見出しとページ内に設置したH2見出しの装飾(スタイル)が同じH2見出しなのに違ってくることもありえます。(もちろん”記事タイトルのH2見出しには何も書かない”というのであればこの問題は発生しません)さらにはたとえばページ内でH3見出しに何らかの<見出しデザイン>を適用させた場合、他のページでも同じスタイルを付けてやらないと見出しの統一感が失われます。かといって毎回その作業をやるのは現実的ではないでしょう。そうなると通常のエントリーページ内ではちょっと使いにくいかなあという印象があります。H2やH3といった見出しというのは統一した装飾で表示されてないとサイト訪問者は戸惑うものです。無意識に”このデザインのテキストは大項目でこのデザインのテキストは中項目だな”と認識してますから。じゃあこの機能はどんな時に使えるのかといえば、おそらくトップページや通常のエントリーページとは異なるランディングページ(LP)などで他とはページイメージを変えたい時なんかに使える機能なんだろうと思います。でもそこだけでしか使えないのはちょっともったいないです。せっかくいろんなパターンが用意されてるんですから。とうことで【Volar2】では見出しデザインを全ページ共通の統一見出しデザインとしても使えるようカスタマイズしてみました。追記:2022.8.25SIRIUS2のアップデートで「見出しデザイン」の”一括変更(共通化)”が可能になりました。詳しくはこのあとご紹介します。見出しデザインの一括変更SIRIUS2アップデート(ver.1.03)にて見出しデザイン機能が一括で変更できるようになりました。この機能を使えばすべてのH2(H3,h4...)見出しを設定したデザインで統一表示させることができます。変更のやり方【デザイン】タブ→【見出しデザイン】で設定画面を開きます。こちらが設定画面で、左側には各見出しの指定欄が、右側にはプレビュー画面があります。(設定を変更するとプレビュー画面に即反映されます)例えばH2見出しを変更したいなら青丸で囲ったH2見出し「変更」ボタンをクリックします。見出しデザイン変更画面になるのでこれまでご説明してきたやり方を参考に好きなデザインを指定していきます。サンプルとして下の設定で「OK」をクリックしてみます。H2見出しが指定したデザインで登録されました。プレビュー画面にも変更が反映されてます。これですべてのH2見出しが変更したデザインで表示されるようになります。こんな感じで他の見出しも同様に変更できます。筆者『H2見出し』脇に”記事タイトル”と付いてますが、記事中に設定したH2見出しも設定したデザインでの表示に変わります。解決済みアップデート(Ver1.090)にて解消されました。ココがちょっとH2見出しに限ってですが、目次タグの<% index %>が挿入されてる記事ではH2見出しがデフォルトデザインのままで変更できません。これはおそらく調整ミスでしょう。この仕様はアップデートで変更になる(?)設定をパターン登録たとえば「H2見出しを別のデザインに変えてみたいけど毎回細かくカスタマイズするのが面倒くさい」なんて時は設定をパターン登録しておくと変更がとてもラクになります。こんな感じですね。H2見出しのスタイルを「上下線」に変更、さらに色は「淡色」、ボーダーは「二重下線」にして…これをスタイルを変えるたびにあちこちポチポチやっていくのはとても面倒です。こういう時は設定を「パターン登録」しちゃいましょう。「設定をパターン登録」をクリックするとパターン名の登録画面になるのでわかりやすい名称で登録しておきます。こうしておけばたとえば下のようなデザインを別の登録したデザインに変更したい場合、「パターン設定の読み込み」をクリックして出てきた選択画面から変更したい登録名をクリックすれば瞬時に登録したデザインで置き換わります。筆者各見出しごとに登録が必要です。一括登録はないようです。ただこのパターン登録機能が真価を発揮するのは新サイトを作る際に「そういえばあの見出しデザインにしようか」ってなったときじゃないかと思うんです。好きなデザインでいくつか登録しておいて(モジュールやクラスの設定のように)他サイトでも使えるような「ファイルに保存」で書き出しておければ別サイトでも1発で呼び出せますでしょ。この仕様はアップデートで変更になる(?)【Volar2】オリジナル機能<見出しデザイン>の一括変更機能はとても便利なんですが、トップページとエントリーページで別々の見出しデザインを設定することはできません。また通常の2カラムと1カラム(ワイド)ではH2見出しのデザインが微妙に変わってしまう現象も見受けられます。(※ベーステンプレートでのお試し事例)そこでカスタムテンプレート【Volar2】ではそれらを解消可能なオリジナルのH2見出しデザインを加えてみました。※【Volar2】<H2見出しデザイン>についてはこちらの記事をご参照ください。【Volar2】H2見出しデザインの一括変更1カラム専用の【Volar2】オリジナルH2見出しデザインと通常ページのH2見出しデザインを別々に設定できます。
    Read More
  • アイキャッチ画像
    H2見出しデザインの一括変更-Volar2
    SIRIUS2には(ver.1.03のアップデートで)<見出しデザイン>の一括変更機能が搭載されました。この機能はとても便利なんですが、使い方によってはちょっととまどうことにもなりそうです。※<見出しデザイン>についてはこちらの記事をご参照ください。見出しデザイン見出し用装飾スタイルについての詳細ページ。1カラムと2カラムページでの挙動の違い当方でいろいろ試してみた結果、以下のような現象が見られるようです。(※ベーステンプレートでの検証になります)デフォルトの”H2見出し”だとグレーの(四角い)背景色が付きます。ここでレイアウトを”1カラム”に変更してみると、左寄せでの配置でグレーの背景色もついたままでの表示になります。ただし<見出しデザイン>の一括変更を適用してH2見出しに「スタイル18」などの中央寄せのスタイルを適用すれば中央寄せでの配置になります。今度は”1カラム(ワイド)”にしてみます。するとなぜか中央寄せでの配置に変わり、背景色も付かなくなります。筆者こんな感じで素のH2見出しはレイアウトによって異なる挙動になるようで、見せ方によっては若干注意が必要です。こちらも<見出しデザイン>の一括変更で「スタイル13」などの中央寄せのスタイルを適用すると同じように中央寄せでの配置になります。(スタイル13,17,18の)中央寄せ以外のデザインを適用すると見出しは強制的に左寄せでの表示になります。ここでたとえばトップページのみ1カラム(ワイド)にしてプロっぽく見せようと思ったら、H2見出しは(SIRIUS2公式サイトのように)中央寄せの方が見栄えはよくなります。ということで<見出しスタイル>一括変更でH2見出しに中央寄せのスタイルを選択してみます。当然のことながら他の通常の2カラムページでもH2見出しが中央寄せで表示されます。それでもよければ特に問題はないのですが、通常のページでは”ノーマルな”見出しを使いたいとか左寄せで表示した方がしっくりくるなんてご意見もあるでしょう。でも1カラムページのみ中央寄せのレイアウトにして他の2カラムページでは通常の左寄せにするとか、1カラムと2カラムでデザインを変えようとしたら大幅なスタイルの変更が必要になります。個別に<見出しスタイル>でデザインを変更すればこの問題はクリアできます。ただし修正作業時には面倒さが付いて回ります。あとこれで修正可能なのは編集画面内の見出しのみで『記事タイトル』内の見出しは変更できません。(その見出しを編集画面内に移動してH2に変換すればこれまた解決にはなりますけど...)【Volar2】のH2見出しそこで【Volar2】では1カラム(”ワイド”含む)ページと通常の2カラムページで別々の見出しデザインを一括表示できる設定を加えてみました。この機能はこちらで用意しているスタイル設定をテンプレート上で有効化する仕様になってます。SIRIUS2標準の<見出しデザイン>一括変更を使うとそちらが優先表示されてしまいます。もちろん全ページ同じH2見出しでかまわなければ【Volar2】の機能は使う必要はありません。SIRIUS2の<見出しデザイン>一括変更でのH3以下の見出しに関してはそのまま使えそうなので、当初は搭載していた【Volar2】オリジナルのH3見出しスタイルは廃止することにしました。そしてこちらが【Volar2】で用意したH2専用の見出しデザイン一覧です。1カラムページで使えるH2見出しは仰々しいのは外してさりげない感じのものだけに絞ってます。また中央寄せ固定のレイアウトになります。(色はどんなサイトでも使い回しが可能なようにグレー系で固定)2カラムページで使えるH2見出しはSIRIUS2に搭載されてる見出しデザインに近いものもあれば【Volar2】オリジナルデザインのものもあります。こちらもどちらかと言えばシンプルなものに限定してます。(色はどんなサイトでも使い回しが可能なようにグレー系で固定)H2見出しスタイル一括変更の概要【Volar2】の”H2見出しデザイン一括変更”機能は専用スタイルシートの読込みというやり方で有効化します。トップページには1カラム専用H2見出し用スタイルシート読込みコマンドが、トップページ以外には通常のH2見出し用スタイルシート読込みコマンドが予め書かれています。(デフォルトではコメントアウトして無効化してあるので有効化するにはコメントアウトを解除します)※<コメントアウト>についてはこちらの記事をご参照ください。コメントアウトの効率的な使い方旧SIRIUS時代から受け継がれてる便利なコメントアウト機能を詳しくご紹介します。1カラム専用H2見出しは6種類、通常のH2見出しは11種類用意してあり、有効化したら末尾の番号を変えるだけで見出しデザインが瞬時に変わる仕様です。
    Read More