WordPressテンプレート ウィジット ページ毎の表示・非表示の使い方

ホームページビルダー.net は ホームページビルダーのWordPressテンプレートで作成しています。

左側のサイドバーにバナー画像(ウィジット)を配置しています。ページ毎に表示・非表示の設定をしています。

ホームページビルダー標準のhpbダッシュボードの使い方では実現できませんが、WordPressプラグインを利用して実現しました。

例えば以下のページでは左上に表示されるバナー画像の種類・数が異なります。

ホームページビルダー教室

ホームページビルダー19入門講座

ホームページビルダー作品集

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

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

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

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

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

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

ホームページビルダーWordPressテンプレートで作成したホームページには、左右どちらかにサイドバーとよばれる領域があります。(以下の例では右側にあります。)

hpbダッシュボードならサイドバー設定、WordPressダッシュボードならば外観・ウィジットでウィジットの並び替えはドラッグ&ドロップという簡単な操作で行うことができます。

WordPress サイドバー ウィジット

WordPress サイドバー ウィジット

 

ちなみに、ホームページビルダー教室では、本サイトとは別に上記の鶴見区のパソコン教室サイトも運営しております。そちらもホームペービルダーWordPressテンプレートを使用しています。(サーバーはお名前.com)

 

WordPressテンプレート・サイドバーバナーの使い方 背景透明化@ホームページビルダー教室

ホームページビルダー.net 左側にサイドバーがあります。上部にはバナー画像をいくつか配置して、さらに場所を固定(スクロールしても常に表示されるように)されています。下部のバナー・ウィジットはスクロールされます。その様子がよくわかるようにバナーウィジットの背景色透明にしました。

ホームページビルダー.net

次のようにスタイルシート(style.css)を変更しています。スタイルシートの編集は、ホームページビルダー19クラシックのスタイルシートエディターを使用しました。

[html]
aside.widget.widget_sp_image {
padding-bottom: 0px;
background-color: transparent;
box-shadow: none;
}
[/html]

ホームページビルダー クラシックでのグーグル翻訳の使い方 Google Language Translator ワードプレス・プラグイン

ホームページビルダー教室の生徒さんから、作成中のホームページを多言語に(自動)翻訳したいとのご要望をうかがいました。 Google Language Translator ワードプレス・プラグインの使い方を早速、調査・実験しました。 当サイト ホームページビルダー.net の左側のサイドバーの一番下に、次のウィジットを設置しました。 ぜひお試しください。 グーグル翻訳ウィジット   ホームページビルダー.netの英語への翻訳例 グーグル翻訳 英語 ホームページビルダー.netの中国語への翻訳例 グーグル翻訳 中国語

Q2W3 Fixed Widgetプラグインの使い方@ホームページビルダー.net

ホームページビルダー.netに導入しました。Q2W3 Fixed Widget ワードプレス・プラグインを導入、試用中です。 左側にあるバナー画像を、ページをスクロールしても固定するために使っています。 Q2W3 Fixed Widget Q2W3 Fixed Widget   本サイトはホームページビルダー19クラシックWordPressテンプレートで作成・更新しています。  

ホームページビルダー教室の臨時休業日 Biz Calendarワードプレス・プラグインの使い方

ホームページビルダー.netサイトでは、ホームページビルダー教室の営業日(授業日)の掲示のために、Biz Calendar というWordPressプラグインを使っています。教室の生徒さんにも使ってもらっています。今日は、年末年始休みまでの予定を設定しました。曜日・祝日などはルールとして指定できますが、その他は日付を入力して指定します。本サイトの左側のサイドバーに表示されます。

Biz Calendar プラグイン設定

サイドバー・フッターウィジットエリア ウィジットの使い方@ホームページビルダー教室

ホームページビルダー.net (時々変更するの今日時点での設置例です。)のサイトではサイドバーにウィジットを以下のように設置しています。 WordPressダッシュボードの使い方の一例です。外観→ウィジット 画面で設定します。 ワードプレス ウィジット   サイドバーウィジットエリアには もともとあった、最近の投稿 最近のコメント アーカイブ カテゴリー メタ情報(ログイン、投稿のRSS、コメントのRSS,WordPress.org) を削除して、

  • 画像ウィジット*
  • 最近の投稿(カスタム投稿)
  • 検索
  • Biz Calendar*
  • テキスト・ウィジット

を使っています。(*の付いているウィジットはワードプレスの標準ではなく、プラグイン=機能強化) また、フッターウィジットエリアには

  • テキスト・ウィジット

を使っています。 ウィジットの活用、プラグインの追加などは、ワードプレスの使い方であって、ホームページビルダーの使い方ではありません。

ホームページビルダークラシック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;
}

ホームページビルダークラシック フッターウィジットエリアの使い方@ホームページビルダー20教室

ホームページビルダークラシックで作成したワードプレス・サイトのフッターウィジットエリアにテキストウィジットを配置して、そこのA8NETのアフィリエイト広告を埋め込んでみました。 こちらのサイトご覧いただけます ⇒ パソコン教室横浜鶴見.net