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

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

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

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

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

ホームページビルダー クラシック フルCSSテンプレート スマホ対応の使い方

ホームページビルダー19クラシック フルCSSテンプレートは、19からはレスポンシブ・デザインになり、パソコン版、スマホ版が自動表示切替となりました。以前のように、パソコン版とスマホ版を別々に作る必要はありません。

しかし、別のものにしたいとの要望がなりわけではありません。スマホ版はスマホの事だけを考えて最適化するという選択肢も有効です。
以前のように、別にスマホ版のサイトを作成して、リダイレクトすることはホームページビルダー19になっても可能なようです。

ホームページビルダー19クラシックの使い方

スマホ(スマートフォン)対応ページの重要度@ホームページビルダーの使い方

ホームページビルダー.netなど、私自身が運営している主なホームページをグーグル・アナリティクスでアクセス解析しています。 パソコンから見にくるのか、スマホなどから見にくるのか調べてみました。

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

グーグル アナリティクス モバイル サマリー   ホームページビルダーとうパソコン上の道具に関するサイトのためか、パソコンからのアクセスが多くなっています。

パソコン教室横浜.net

グーグル アナリティクス モバイル サマリー こちらは、スマホからのアクセスの方が多くなっています。 一般的なサービスでしたら、スマホの割合はもっと多くなると思われます。(ホームページビルダー教室生徒さんの事例に基づく) パソコン版のページより、スマホ版のページを優先して、サイトを設計したほうがいいのではないでしょうか? ホームページビルダー19 SP、クラシック どちらもレスポンシブ・デザインで、スマホに対応しています。

ホームページビルダー JQuery フォトモーション 画像ファイル名の使い方

ホームページビルダー18、ホームページビルダー19に搭載されている JQuery フォトモーション ホームページビルダー教室の生徒さんも使われています。ホームページビルダーのプレビュー画面、またパソコン上のブラウザー表示ではカルーセルが表示されます。しかし、サーバー上では、下のような画像のロード画面から先にすすみません。

ホームページビルダー フォトモーション カルーセル

本日の授業中では問題が特定できませんでした。私の宿題にしました。

該当ページをクロームで完全保存して、さあ調べようとしたら、原因は一目瞭然でした。

JQueryフォトモーションで指定している画像ファイル名の文字種が原因でした。

次回の授業で画像ファイル名を変更してもらいます。

 

 

ホームページビルダーの使い方 スマホ ページから電話発信 

【ホームページビルダー教室】の実際の授業からのヒントです。

スマホ(スマートフォン)のページの特徴は、電話番号をタップするとスマホの電話機能を呼び出すことができることです。リンクの設定の応用で実現します。

tel:

電話発信

 

上の見本はホームページビルダー19クラシック ワードプレス・テンプレートの例です。

(パソコンでは、必ずしも電話機能があるわけではありませんが、私のパソコン教室の環境では、スカイプが起動されます。)

 

WordPress スマホからの投稿の使い方@ホームページビルダー.net

本サイト ホームページビルダー.net は WordPressテンプレートを使って作成しています。 ワードプレスでサイトを作成しておけば、スマホやタブレットから写真のアップロード、記事の投稿を行えます。 (以下の画面はスマホの例です。) 1.メディアのアップロード

ワードプレス メディアのアップロードScreenshot_2014-11-03-05-08-10Screenshot_2014-11-03-05-10-19

ダッシュボードからファイルを選択して、メディアをアップロードします。

今回はスマホでのスクリーンショットをアルバムから選択します。   2.投稿の新規作成

ワードプレス新規投稿を追加  

メディアの追加ボタンで挿入する写真を選択します。  

ホームページビルダー19クラシック 「特殊文字の入力」の使い方

ホームページビルダーでノーブレークスペース (non-breaking space) のような特殊文字を入力するには、

挿入 特殊文字

ホームページビルダー クラシック 特殊文字 入力

 

この画面で文字をクリックするとページに挿入されます。

ホームページビルダー クラシック 「リンク先ページを開く」の使い方

ホームページビルダーでサイト(フルCSSテンプレート)の更新作業をしています。

ページが増えてくると 「サイトの確認」 で表示されるビジュアルサイトビューで ページを探すのが大変になってきます。

ページ編集中にリンクされているページを開くには、リンクを右クリックして「リンク先ページを開く」を使うと便利です。

ホームページビルダー リンク先ページを開く

ホームページビルダー19クラシック JQuery フォトモーションの使い方

ホームページビルダー19クラシック  JQuery フォトモーション 実演ページ を作成しました。

ホームページビルダー18で同様のページは作成してあったのですが、ホームページビルダー19クラシックにWordPressサイトを移行してから、動作がおかしくなってしまったのでした・・・

ホームページビルダー SP クラシック 使い方

ホームページビルダー19が10月に発売開始されたました。SPというまったく新しいエディタが搭載されました。従来のホームページビルダーの機能強化版はクラシックという名前で引き続き搭載されています。

ホームページ作成の方式として

  • ホームページビルダーSP サイトタイプ=通常版 HTMLファイルが生成される。通常のウェブサーバー上にホームページを公開できる
  • ホームページビルダーSP サイトタイプ=WordPress ワードプレス・サイトを作成する。サーバー上にWordPressのインストールが必要
  • ホームページビルダー クラシック フルCSSテンプレート 通常のウェブサーバー上にホームページを公開できる。バージョン19からはスマホ対応が従来の別ページへのリダイレクトではなく、レスポンシブデザインでの対応
  • ホームページビルダー クラシック ワードプレス・テンプレート ワードプレス・サイトを作成する。サーバー上にWordPressのインストールが必要
  • ホームページビルダー 独自にHTML/CSSコーディングする・従来のサイトの編集

ホームページビルダー教室の生徒さんや、HPB19入門セミナー参加者、無料体験参加者から話をうかがうと

  • 従来のサイトの編集が、ホームページビルダーSPにより、簡単になると思った
  • 従来のサイトの更新をスマホから行える(=WordPress)と思った

と、サイトを新規作成しないと利用できない機能を、従来のサイトに使えるいう勘違いが少なからずあるようです。

では、ホームページビルダーで新規作成するとして SP にするのか クラシックにするのか、どちらがいいのでしょうか?

ホームページビルダー教室では、まず、ワードプレスにするか・しないかを考えてもらいます。

ワードプレスの長所・短所を実例を通して、実際にご覧いただいて検討していただければと思っています。

ホームページビルダー教室無料体験と教室へのご入会、ホームページビルダー19入門セミナー、時間外マンツーマン個別指導など、いくつかの場をご用意しております。私自身のホームページ作成経験に限らず、生徒さんの実例(作品集)を説明いたします。