ホームページビルダー教室 クラシックWordPressテンプレート フォントの指定 CSSの使い方

ホームページビルダー20クラシック WordPressテンプレートでのフォント指定(英語フォント)

こちらは見本の文章です。It is sunny today.

こちらは見本の文章です。It is sunny today.

こちらは見本の文章です。It is sunny today.

こちらは見本の文章です。It is sunny today.

こちらは見本の文章です。It is sunny today.

ページ内容のCSSスタイル(ボーダー編)の使い方 ホームページビルダー20 SPテンプレート

ホームページビルダー20 SPでは、19のときにはできなかったスタイルの詳細設定が可能になりました。

ページ内容のスタイル、リスト、水平線のボーダーを設定してみました。

リストはパーツですが、水平線はパーツではありません。

SnapCrab_No-0017

ホームページビルダー20・21 SP テンプレート スタイル設定の使い方

ホームページビルダー20 SP テンプレートでは、スタイルの詳細設定が可能になりました。

サイト情報のスタイル
パーツトップ
配置
パーツのサイズ
幅 ピクセル・パーセント・自動
高さ ピクセル・自動
縦横比を固定する
表示形式
通常・左配置・右配置・絶対配置 絶対配置の表示基準
マージン 上・下・左・右
回り込み解除
表示メディア
表示ページ
すべて・個別に指定する
文字
プレビュー
フォント
文字サイズ
文字色
文字飾り
背景
背景色 透明・指定する
背景画像 なし・指定する
繰り返し表示 繰り返す・繰り返す(垂直方向)・繰り返さない
表示位置 左右位置・上下位置
サイズ 自動・含む・覆う

ボーダー すべて固定・上下左右固定・別々に指定
ボーダータイプ
線の太さ
線の色
パディング 上・下・左・右
角丸
はみ出した内容をクリッピングする

などのスタイルが設定できます。CSSをコーディングする必要はありません。

ワードプレス・テンプレートの使い方@ホームページビルダー教室

ホームページビルダー19クラシック ワードプレス・テンプレート CSS(スタイルシート)の知識があれば、改造が可能です。

ホームページビルダー教室での改造例を紹介します。

テンプレート(ミニマル0027)原型はこちら

ホームページビルダー ワードプレス・テンプレート

改造後(PC表示)はこちら・・・

ホームページビルダー ワードプレス・テンプレート

サイドバー、ナビゲーションメニューなどを取り去っています。PC版はとてもシンプルなものにしました。その理由は、このサイトはスマホ(スマートフォン)表示を優先して設計したからです。スマホ表示はこちら・・・

ホームページビルダー ワードプレス・テンプレート

実際のサイトはこちら⇒ 天然石・パワーストーン卸リアルアートコーポレーション

CSS Color Converter 3桁 6桁 カラー変換の使い方@ホームページビルダー教室

ホームページビルダー教室 本日の授業から・・・ ワードプレスのテーマのカスタマイズ中、CSSファイルに #fc8 のような3桁のカラー指定がでてきました。通常は#ffffff のように6桁の形式で授業をしています。その間の変換に CSS Color Converter を使いました。

CSS Color Converterの使い方