ホームページビルダー17

ホームページビルダー17のスタイルエクスプレスでCSSの編集

更新日:

ホームページビルダーでスタイルシートを編集するには、スタイルエクスプレスで編集する方法、スタイルシートマネージャで編集する方法、CSSエディターで編集する方法等があります。今日は、スタイルエクスプレスでWordPressのテーマを編集する方法を調べてみましょう。

1. それでは、ホームページビルダーを起動したら、ガイドメニューから『WordPressページを開く』をクリックするか、あるいはホームページビルダーのトップ画面のメニューバーでWordPress⇛ページを開くとクリックします。

2. 『ページを開く』ダイアログが表示されたら、①編集するサイトを選択、②編集するページを選択して、③開くボタンをクリックします。とりあえずはトップページを編集してみましょう。

2. 固定ページ内の文字の編集に関しては、『ホームページビルダー17で文字の編集』を参照して下さい。それでは、右側のツールバーの下から2番目の①アイコンをクリックし、スタイルエクスプレスビューを開いたら、②『style.css(link)』という文字をクリックします。

3. すると下の方にセレクタ一覧が表示され、選択中のセレクタのプロパティ一覧がその下に表示されます。セレクタ一覧やプロパティ一覧をダブルクリックして、編集することも出来るのですが、もっと簡単な編集方法を見てみましょう。

4. ①『カーソル位置』タブをクリックし、ページの中の②編集したい箇所をクリックしたら、該当するセレクタが選択されますので、その中の③編集したいセレクタをクリックします。『外部CSSファイルの更新確認』ダイアログが表示されますので、④『はい』をクリックします。

5. 『スタイルの設定』ダイアログが開きますので、編集したいグループタブをクリックしてスタイルシートを編集します。それでは、試しに、文字サイズを変更してみます。

6. サイズを『予約語』から①『文字の高さ』に変更し、数字を『2』と入力します。文字の属性を③『太い』にチェックを入れ、④『OK』をクリックします。

予約語とは、ホームページビルダーのシステム内で設定している単位ですので、ちょっと分かりづらいと思います。スタイルシートをいじったことのある人は、ピクセルか、文字の高さ(em)か、%あたりの相対単位で設定すればいいと思います。単位の細かい説明は省略しますが、最近のスタイルシートでは、パソコンやブラウザの設定によりサイズが変動する相対単位で指定する事が多くなっているように思います。

7. 下記のように修正されました。極端に修正したのでちょっとみっともないですが、このように簡単に修正ができます。

8. 修正した箇所をホームページビルダー17のCSSエディターで見てみます。下記のようになっています。CSSがバリバリ書ける人はこのCSSエディターで直接修正することも出来ます。

9. 今日は、スタイルエクスプレスで修正する方法を調べてみました。次回は、スタイルシートマネージャで修正する方法を調べてみたいと思います。

本日は以上です。

-ホームページビルダー17
-

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.