画像の右に余白を作って文字列を配置

ホームページの作成ー画像とその右の文字列の間に一文字分の隙間を作る

図形の右にテキストを配置する時、その間に隙間を一文字分付けたい時があります。「画像の左寄せ」だけだと、どうしても図形と文字がくっついてしまいます。
パソコン画面では文字列が一行で収まっているなら、最初の文字をスペースにすれば何とかなりますが、スマホで見た場合、下記画像のように二行になってしまうことがよくあります。そうすると、スマホ画面では二行目が図形とくっついてしまうので困ってしまうことがある。
下のスマホ画像のように、一行目も二行目も左に一文字分だけの空きを作成したい場合のやり方について書いてみました。

右余白を付ける

Hpb画面上では、以下の画面のように二つの設定をすればいい

  1. 画像を右クリックして、「属性の変更」画面を開きます。従来の通り、「画像の左寄せ」を選択する。(下の左画像を参照)
  2. 次に右下の「スタイル」をクリックして、「レイアウト」タブをクリックして、右方向のマージンに一文字分の高さを指定します。(下の右画像)
  3. 上記操作は、1.で  align=”left” 2.で style=”margin-right:1em;” を設定していることになります。
    下の左画面にある左右・上下の余白をいくら設定しても余白が出てきません。これは、vspaceやhspaceはhtml5に対応していないためだと思います。

HpbのWordPressマニュアルを印刷

ここで書いている内容は、Hpbクラッシックを使用してWordPressを作成している方が対象です。
WordPressサイトを作成する場合、マニュアルは欠かせない。
ビルダーを使ったら、簡単にWordPressサイトを作成できると言っても、やはりマニュアルをしっかり読まなければ、思うようなものはできない。
マニュアルを印刷して、手元に置きながら作業しないと効率が悪い。
私なんかよく忘れてしまうので、マニュアルにマーカーを付けたり、付箋を付けたりして、お客様の質問に答えられるよう工夫はしています。
大体、皆、疑問に抱くところは、同じようなところなんです。

マニュアルダウンロード
Hpb21のWordPressマニュアル
Hpb21のWordPressマニュアル
WordPressマニュアル

左画像:Hpbを起動した画面でPDFマニュアルをクリックする。
右画像:PDFファイルを印刷したもの

ページは79ページあり、印刷が大変ですが、仕方ない。以前と比べると枚数もかなり増えた感じです。
こんなにたくさんあるということは、簡単なようで簡単ではないということです。それなりに勉強しないといけないということです。
このマニュアルは、ホームページビルダー21クラッシックとWordPress3.9.2に準拠している。
WordPressは順次バージョンアップされているのでビルダーのアプリがいつもそれに適応しているのかどうか、不安は残ります。
適時アプリやテンプレートについて、アップデートモジュールが配布されればいいのですが。
古いHpbから新しいHpbバージョンが出ても、すんなり新しいバージョンへ乗り換えていいものかいつも心配になります。
古いバージョンも残しておいた方が安全かなと思う時がある。サイトのバックアップは大事です。古い分も何個か。
テンプレートとマニュアルはしっかりしているのだが、なんせテンプレートの数は限られている。この点が辛いところ。
新バージョンのHpbを購入しても、以前のテンプレートと殆ど変わらない。デザイン変更したくても限られていて、実際のところ変えられない。
テンプレートだけの販売もあったが、それも廃止になったし。
ビルダーのユーザーの使うテンプレートは数種類なので、どうしても似たようなページになってしまう。

  • 背景画像や壁紙やロゴなどを変えるだけでも、結構違ったものに見えたりします。どこでも変えたい部分を右クリックして「合成画像の編集」を選択すれば変更できます。
  • 大幅な変更をする場合、事前にサイトのエクスポートをして、バックアップを取っておくとよい。万一元に戻せなくなると困るので。
  • 独自で記述できる部分については、「htmlソース」画面上で、直接htmlタグを書いて編集できるようになっています。(「ページ編集」画面上の編集も、実は裏で、htmlで記述されています)

なので、htmlタグを知っている方が有利です。細かい変更ができるし、またトラブった場合には、ソースを見てみないと解決できないことがよくあります。
「ページ編集」でうまくいかない場合は、「htmlソース」画面で直接書いた方が間違いが少ないし、早い。
htmlタグを使って変更した部分は、保存すると、htmlファイルではなく、その内容がXMLファイルとして保存されている。
私はPHPについては全く知りません。ただ、XMLファイルというのは、見たり、その形式で保存したりすることがたまにあります。
と言うのも、ホームページビルダーのWordPressでは、image以外は殆どXML形式で保存されています。これは、ビルダーの保存場所にあるファイルを見たら分かります。
XMLファイルはPHPに変換しやすいんだと思います。データ構造が分かりやすく、記述の仕方もhtmlと似ています。
Hpbでは、各部分をデータとしていったんXMLで保存し、アップする時に、それらをPHPに変換して送信しているようです。
詳しいことは分かりませんが。

HpbのWordPressサイトのメニューにプルダウンメニューを設定する方法

プルダウンメニューとは

今見ていただいているWordPressサイトで、メニュー項目の「業務内容」の上にマウスを置くと、下記の画像のように、「パソコン教室」と「パソコンの修理」がその下に現れます。
これが、プルダウンメニューです。Hpb画面でこれを設定する方法を書いてみました。

プルダウンメニュー

ページ構成とメニュー構成を変更する

  1. hpb画面で、WordPress→ページ構成→子のページを選択して「変更」ボタンをクリックします。子の該当ページについて、親ページを指定する。下記画像の左を参照のこと。
  2. hpb画面で、WordPress→メニュー構成→子のページを親のすぐ下に持っていきます。次に「階層」ボタンをクリックして、「下げる」をクリックすると子が親の下に表示される。下記画像の右を参照のこと。
  3. 2.だけでもプルダウンメニューは表示されますが、ページの階層についても変更しておかないと、パンくずリストに正確に表示されません。
    なので、「ページ構成」の階層については必ず設定してください。

Hpbの「WordPressの公開」の概要

  1. ホームページビルダーでのWordPressサイトの公開は、実行する度に、すべてのファイルが転送されます。一字変えただけでも、全部転送されます。
    転送した後、hpbダッシュボードで「反映する」ボタンを押して初めて更新されることになっています。
    公開の度に、phpファイルに自動で変換して転送されます。
    そして、公開の度に、バックアップをサーバーに保管してくれます。
    なので、転送に時間がかかります。バックアップしないようにして転送すれば早いですが。
  2. 固定ページに「お問い合わせフォーム」が付いているので、楽です。フォームの変更もビルダー画面で行えます。(ただし、メールアドレスの指定やメーセージはダッシュボード上から行います。)
  3. 「hpbダッシュボード」というプラグインがあり、ビルダーユーザーは、このhpbダッシュボードを使用して投稿やニュースやギャラリーを作成できるようになっています。
    「問い合わせフォーム」のメール設定については、hpbダッシュボードで行います。
    つまり、固定ページの編集以外は、原則、hpbダッシュボードから行うようになっている。
    hpbダッシュボードの「基本設定」にあるオプションを利用すると、WordPressのダッシュボードの機能すべてを利用できますが、それを使ったカスタマイズはhpbのサポートの対象外となります。
    WordPressのダッシュボードを使って固定ページを編集したりすることは厳禁です。hpbで作成した固定ページと一致しなくなるからです。(そのことを分かっていて、あえて行うのは自由ですが。)
  4. プラグインは自由に使えます。ただ、固定ページに変更を加えるようなものはだめです。
    例えば、ビルダー付属の「お問い合わせフォーム」が用意されているのに、プラグインのContact Formを入れたりすること。
    Plugin同士がぶつからないように、気を付けないといけない。
    とは言うものの、投稿や画像に関する細かい設定は、本来のダッシュボードを使わないとできないことが多々あります。
    なので、私もオプションで本来のダッシュボードの機能すべてを使えるようにしています。

HpbでWordPressサイトをバックアップ

Hpb(ホームページビルダー)で、WordPressサイトをバックアップできるのか?

ビルダー上で作成したテーマや固定ページ、設定については可能

固定ページやテーマやWordPressの設定は、ビルダーのメニューから、「WordPress」→「エクスポート」を実行すれば、簡単にバックアップできます。バックアップファイルからの復元(インポート)を何度も行いましたが、いとも簡単に復元できます。
ビルダー上で作成したテーマや固定ページ、設定などは、ビルダー上でバックアップも復元もできる。当然と言えば当然です。これを使わない手はない。
※ビルダーを使って、時々、このエクスポートをしておいた方がいい。

これとは別に、公開時に「サイトのエクスポートファイルをサーバーにバックアップする」にチェックを入れていると、毎回公開するたびに、WordPressがインストールされているサーバーのフォルダーの中にある「wp/wp-content/themes」フォルダーの「hpb△△T○○*1」というフォルダーに、「backup.zip」という名前で転送される。zipファイルの中身は、phpに変換される前のものです。
ビルダーのファイル転送ツールを使うと、backup.zipを確認できる(下の画像)。このファイルを選択して、左下向き矢印をクリックすると、ダウンロードできます。

つまり、ビルダーメニュー(ダッシュボードのメニューではありません!)の「WordPress」→「インポート」で、このbackup.zipを指定すれば最新版で元通りになるはずです。
公開操作するたびにバックアップを取るので、非常に時間がかかるので、チェックを外している方もおられるかもしれません。先ほどのエクスポートと二重にはなりますが、より安心です。

ダッシュボード上から投稿した記事や写真については、別の方法でバックアップしないといけない

上記のエクスポートをしても、ダッシュボード上から投稿した記事や写真まではバックアップされません。(※CSSはバックアップされるので、記事の見出しや壁紙などのスタイルは保持されます。)
hpbの「エクスポート」は、あくまでビルダー画面上に表示されている部分だけです。ビルダー画面で見えない部分(ダッシュボード上で行った投稿や設定、プラグインなど)は、バックアップされない。
なので、この部分については、自分でバックアップするしかないということになります。

【その方法】

●バックアップは、WordPressダッシュボードの「ツール」→「エクスポート」で行います。

1.の操作により、ビルダー側でテーマや固定ページ、固定ページの表示設定、ビルダー付属のお問い合わせフォームなどは、既にバックアップされています。
なので、固定ページやコンタクトフォームを除いた項目だけを個々にエクスポートしておけばいいと思います。(記事自体は、データベース内に保管されている。PHPファイルに入っているわけではない。)

●ダッシュボードを利用してアップした画像については、ビルダーのファイル転送ツールを使用して、レンタルサーバーに接続して、uploadsフォルダをまるごとパソコンにダウンロードしておく。

●プラグインについても復元したい場合は、pluginフォルダもダウンロードしておく。

復元する時は、「ツール」→「インポート」で行います。この際、「Download and important file attachments」にチェックを入れると、投稿記事でアップした画像をダウンロードしてからインポートされます。結構ここで失敗するケースがあるようです。
万一、インポートしたのに、uploadsフォルダに必要な画像が入っていないという場合のみ、ファイル転送ツールを利用して、ダウンロードしたuploadsフォルダをアップロードします。

ビルダーユーザが、最低限すべきことは、投稿・ニュース・ギャラリーのエクスポート(データベースとPHPから情報を取り出す)とuploadsフォルダ内の添付画像をダウンロードしておくこと。

【注意】
実際のところ、私は投稿記事までバックアップと復元をしたことがありません。なので、この記事が正しいかどうかの確証は得ていない。恐らく、若干の修正が必要になるでしょう。

【参考記事】
WordPress 記事のバックアップの取り方 ロリポップ推奨のバックアップ
WordPressの「インポート/エクスポート」を使ってサイトをバックアップし復元する

ホームページのSSL化(http→https)

ホームページビルダーを利用して、WordPressサイトを作成している方が、
自分のホームページを、「http://~」から「https://~」に変更する場合の手順
(レンタルサーバーにロリポップを使っている場合を例にしています。)
  1. ロリポップ側の設定
    ロリポップの「ユーザー専用ページ」を開いて、
    ・左メニューの「セキュリティ」→「独自SSL証明書導入」→無料独自SSLを設定します。
    ここに「SSL保護有効」と表示されていれば、そのままでOKです。
  2. WordPress側の設定変更
    ダッシュボードの「設定」→「一般」の項目で
    ・WordPressアドレス→https://~に変更し、
    ・サイトアドレス→https://~に変更します。
  3. ホームページビルダー側の設定変更
    WordPress設定の変更
    ・サイトのURLをhttps://~に変更。
    ・ダッシュボードURLをhttps://~に変更。
  4. せっかくSSL化したのに、自分のホームページを表示してみると、安全でないサイトと表示され、困ってしまうことがあります。
    URL欄の先頭に〇印の中にiが入ったマークが表示されているので分かります。
    このマークをクリックすると、安全でないとか、保護されていないサイトとか表示されている。
    この場合、サイト内にあるリンク(画像だけでなくCSSファイル、Javaスクリプト内の記述も含みます)で、httpから始まるURLをすべてhttpsに変更すると直ることが多い。

    HPBを利用したWordPressの場合、固定ページについては、3.の操作が完了していたら、自動的にhttpsに修正されているはずです。
    それでも問題が起きる場合、hpdダッシュボード上で行った設定や投稿した画像リンクである場合がほとんどです。

    例えば、はてなアイコンのソーシャルボタン設定やOGP設定などが、htttpのままになっていることがあります。いったん設定を削除すると直ったこともあります。

    とは言うものの、どれが該当部分なのか、なかなか見つけにくい。
    簡単な方法は、サイト内の画像一つ一つマウスを置いてみて、httpかhttpsかを左下の画面で確認してみることです。
    その他、Google Clomeのブラウザのデベロッパーツールを利用して、自分のサイトをチェックしてみる方法もあります。

  5. それと、.htacsessというファイルを書き換えないといけないようです。
    これは、httpでアクセスしてこられた方をhttpsに誘導するためです。
    下記のサイトを参照して、変更してください。

    ロリポップで常時SSL化した際に設定する301リダイレクト

    今見ていただいているこのサイト場合、.htacsessファイルをいじらなくてもhttpsに誘導されていたので全く気が付かなかった。
    恐らく、私の場合、「サイトガード」というプラグインを入れていたので、上記2.を実行したとき、連動して.htacsessファイルも自動的に書き換えられたのだと思います。

HpbでWordPressサイトの公開に失敗

★この記事は、ロリポップのレンタルサーバを利用している際に起きたトラブルです。他のサーバーで、同じことが起きるかどうかは、分かりません。

下記のように、ホームページビルダーでWordPressサイトの公開を実行したら、

公開ダイアログ

サイトの公開画面

下記のようなメッセージが表示されて、公開に失敗することがあります。

ダッシュボードは開くことができるのに、公開できないという場合、
サーバーのFTPアクセス制限に引っかかっている可能性があります。
ホームページビルダーとは関係がありません。

原因は、プロバイダから割り当てられるグローバルIPアドレスが、時々変わるからです。
何度も公開している方は、こういう事態に慣れていますが、慣れていないとびっくりします。
面倒ですが、新しいIPアドレスに登録し直す必要があるのです。

例えば、レンタルサーバーがロリポップの場合、
下記のように、FTPアクセス制限に登録されている以前のIPアドレスを現在のIPアドレスに置き換えてやる必要があります。

【注意】
ログイン「ユーザー名」や「パスワード」は正しいのに、ダッシュボードを開くことができないという場合は、上記の件とは別です。
ロリポップを利用していて、よくあるのは、上記の.ftpaccessではなく、.htaccessの方です。この二つは、トラブルの定番です。
これも、IPアドレスが勝手に変わることが原因ですが、.htaccessによるログインページ(wp-login.php)へのアクセス制限が実施されているためです。
この場合、IPアドレスで登録せず、Allow from HOST NAMEの形式で、接続元ホスト名で登録すれば、IPアドレスが変わっても大丈夫です。
詳しい内容は、下記のサイトをご覧ください。

WordPressログインページの.htaccess編集

固定ページにギャラリーを作る

ホームページビルダーで、特定の固定ページにギャラリーを設けたい時があります。
ビルダーのツールにある「ギャラリー」や「サムネイル」は、WordPressでは使用できません。

それでは、どうしたらよいのか?

要するに、投稿タイプを自分で作って、投稿として、WpordPressの「ギャラリー」機能を利用すればいいのです。

以下その方法

ホームページビルダー上で、メニューから、「WordPress」→「ページ構成」をクリックします。ギャラリーを作成したい固定ページを選択して、「変更」をクリックする。
ページの変更画面で「追加」をクリックします。すると、「投稿記事一覧の追加画面」が出ます。
この画面の右上にある「管理」をクリックします。「投稿タイプの管理」画面が出てきます。
ここで、「追加」をクリックします。すると、識別子とラベルを入れる画面がでてきます。
例えば、識別子に「gallarey」,ラベルに「ギャラリー」と入れます。自分に分かりやすい名前を入れることが大事です。

それと、投稿タイプを新たに作った場合には、必ず表示する最大投稿数を選択しておいてください。ビルダー初期設定では、1ページに1件の投稿しか表示されませんので、注意してください。
これで、「ギャラリー」という投稿タイプが作成できました。
特定の固定ページにこの「ギャラリー」という投稿タイプの記事を追加すれば、OKです。
ビルダーには、元々、投稿タイプに「ブログ」や「ニュース」、「F&Q」などが用意されていますが、ピッタリするものがなければ、自分で作った方が分かりやすくて間違いも少ない。

次に、WordPressの「ライブラリ」に画像をアップロードします。その画像を使ってギャラリーの作成をするためです。すでにアップロードされている画像を使用する場合には、アップロードは不要です。
アップロードする画像サイズは、事前に、中画像《640×480》程度にしておく。今回、サムネイル画像をクリックすると、640×480の画像サイズで拡大されるようにしたかったから、そうしただけで、サイズは自由です。
アップロードが完了すると、次に投稿を行います。投稿は、hpbダッシュボードの「新しく投稿する」で「ギャラリー」を選ぶと、投稿できます。
投稿にタイトルを付けた後、ギャラリーを作成します。ライブラリから画像を複数クリックして選びます。
サムネイルを指定する欄があるので、そこにチェックを入れます。
列は3列にします。これは、自由で指定しなくても構いませんが、3列にすると、丁度収まりがいいので、そうしました。

※このホームページのメニュー「お知らせ」の下のほうに、「ギャラリー」を実際に作ってみました。参考にしてください。
この中の画像をクリックすると、同じ画面上で拡大しますが、これは、プラグイン「Sinple Lightbox」をインストールして、有効にしているからです。Sinple Lightboxについては、少し前のブログにインストール方法を書いておりますので、それをご覧ください。

GALLAREY  toukou

アクセスカウンタの設置

ホームページビルダーのアクセスカウンタは、有効期限が過ぎると利用できない。

それでは不便なので、アクセスカウンタをプラグインをインストールして使ってみました。

使用したのは、Count per Day プラグインです。ZIPファイルをダウンロードしてアップロードしました。

詳細は下記のサイトを参考にしました。

【Count per Day】の使い方

Simple Lightbox プラグインを利用して画像拡大

写真をクリックすると拡大できるように、WordPressのプラグインを利用することにしました。

実際にやってみると以外に簡単だったので、ここに記録しておきました。

  1. プラグインの新規追加で、「Simple Lightbox」を検索して、「今すぐインストール」をしてみた。
  2. Sinple Lightboxの設定は、初期設定のままとし、何も触らなかった。

ここで「メディアを追加」から、一つの画像だけをアップロードしてみた。
それが下記の画像。

どうかな?お!ちゃんと拡大できてる。意外と簡単!

それなら、ギャラリー機能を使って、複数の画像ではどうなのかなと思い、メディアファイルから適当に画像サイズの異なる4つの画像を抽出して試してみた。
カラム3にしたら、一部の画像が崩れてしまった。
サムネイル画像のサイズを適当に変更しないと、画面の幅に3つの画像が並ばない。それで、サムネイル画像のサイズ設定を変更してみた。

  1. ダッシュボードの下、「設定」→「メディア」をクリックして、メディア設定で、サムネイル画像の大きさを180×180にした。
  2. 「自動でトリミングする」のチェックを外してみました。

それで、メディアの追加から、ギャラリー作成をおこなってみると、うまく並んだ。クリックすると、ちゃんと拡大しました。
★下記画像が正方形なのは、以前のサムネイル画像を利用しているためです。新たにアップロードした画像からは、縦横比は保持されます。