ホームページビルダー教室の生徒さんのご要望がありボーダースタイルの使い方を調査しました。
- border-style:groove
- border-style:ridge
- border-style:inset
- border-style:outset
『何でも相談できる駆け込み寺』 日本IBM出身 ホームページビルダー元開発責任者 鎌田裕二
ホームページビルダー20 SP テンプレートでは、スタイルの詳細設定が可能になりました。
サイト情報のスタイル
パーツトップ
配置
パーツのサイズ
幅 ピクセル・パーセント・自動
高さ ピクセル・自動
縦横比を固定する
表示形式
通常・左配置・右配置・絶対配置 絶対配置の表示基準
マージン 上・下・左・右
回り込み解除
表示メディア
表示ページ
すべて・個別に指定する
文字
プレビュー
フォント
文字サイズ
文字色
文字飾り
背景
背景色 透明・指定する
背景画像 なし・指定する
繰り返し表示 繰り返す・繰り返す(垂直方向)・繰り返さない
表示位置 左右位置・上下位置
サイズ 自動・含む・覆う
枠
ボーダー すべて固定・上下左右固定・別々に指定
ボーダータイプ
線の太さ
線の色
パディング 上・下・左・右
角丸
はみ出した内容をクリッピングする
などのスタイルが設定できます。CSSをコーディングする必要はありません。
ホームページビルダー19クラシック ワードプレス・テンプレート CSS(スタイルシート)の知識があれば、改造が可能です。
ホームページビルダー教室での改造例を紹介します。
テンプレート(ミニマル0027)原型はこちら
改造後(PC表示)はこちら・・・
サイドバー、ナビゲーションメニューなどを取り去っています。PC版はとてもシンプルなものにしました。その理由は、このサイトはスマホ(スマートフォン)表示を優先して設計したからです。スマホ表示はこちら・・・
実際のサイトはこちら⇒ 天然石・パワーストーン卸リアルアートコーポレーション
ホームページビルダー教室 本日の授業から・・・ ワードプレスのテーマのカスタマイズ中、CSSファイルに #fc8 のような3桁のカラー指定がでてきました。通常は#ffffff のように6桁の形式で授業をしています。その間の変換に CSS Color Converter を使いました。