ホームページビルダーSP 表のバグ?

ホームページビルダー19 SP 解説サイトパーツ一覧にていくつかのパターンの表を作成してみました。 同じように見えるべき表が、以下のように、上の表は横並びになるはずのセル(123)が縦並びになってしまいます。 ホームページビルダーSP表   ホームページビルダーSPのプレビューでは、ちゃんと表示されるので、サイトタイプ=通常では問題がおきないと推測しています。 上の画面はサイトタイプ=WordPressのサイトのものです。どういう操作によってこういう状態なるのかは、不明です。 TH, TD に対するCSSが display: table-cell となるべきところが display: block になってしまうようです。

ホームページビルダー WordPressテンプレート CSSの使い方

ホームページビルダー.net はホームページビルダー・ワードプレス・テンプレートを使って作成しています。

サイドバーにウィジットをたくさん並べています。できるだけ詰め込みたいと思いウィジット・タイトルの下にある余白を減らすことにしました。

以下のスタイルを user.css に定義しました。

h1.widget-title {
 margin-bottom: 0px;
}

ホームページビルダークラシックWordPressテンプレートの使い方 フッターウィジットの背景色変更 .footer-widgets .widget

本サイト ホームページビルダー.net にフッターウィジットを追加しました。ウィジットの背景がページ全体の背景とあっていなかったのせ、ホームページビルダー側でCSSエディターを使って、スタイル(background-color: black;)

を変更しました。

 

style.css

.footer-widgets .widget{
display: inline-block;
margin-left: 10px;
width: 212px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
vertical-align: top;
background-color: black;
}

ホームページビルダーWordPressテンプレートの使い方 スマホ向けレスポンシブデザインをやめる

ホームページビルダーのワードプレス・テンプレートの使い方の応用です。テンプレートはレスポンシブ・デザインとなっており、パソコン向けのページを作成すれば、その同じページがスマホ上ではスマホの大きさに適した表示方法に切り替わります。

レスポンシブ・デザインはいらないので、パソコンと同じ画面をスマホでも表示したいとのご要望をいただきました。

ワードプレス・テンプレートで使われている、css media queries あたりを改造することになりました。

ホームページビルダー スマホ レスポンシブ デザイン

 

その結果が左の画面です。スマホの画面の大きさでもパソコンでの表示方法となっています。右は、オリジナルのテンプレートでの表示です。

ホームページビルダー テンプレートの使い方 スタイルシート 改造例

ホームページビルダー ワードプレス、フルCSSテンプレートどちらでも、テンプレートのデザインの一部を変更したいというご要望を生徒さんから時々いただきます。

例えば、テンプレート左上にあるロゴの画像をウェブアートデザイナーで大きくします。

ホームページビルダー スタイルシート

画像を大きくしただけでは、上の画面のように、画像の一部しか表示されません。これは画像を囲む領域の大きさ(この例では高さ)がスタイルシートで設定されているためです。

ホームページビルダー スタイルシート

 

スタイルシートマネジャーをつかって、スタイルシートの設定を変更すれば、こお画面のようの収めることができます。

スタイルシート変更には、ホームページビルダーの使い方というよりは、HTMLとCSSの理解が必要です。変更箇所を特定するためには、テンプレートの構造を読み解く力が必要となります。