ホームページビルダー17 新着情報の編集

今回は、「新着情報」を「お知らせ」に変更し、お知らせの内容まで変更できるようにします。一度作ってしまえば、あとは、ブログのように更新することができます。ホームページビルダー17の最大のメリットと言える場所になりますので、力を入れて説明します。

ホームページビルダー17 WordPressサイトの編集の続きとして説明します。

今回、説明するのは、以下の部分です。

この投稿部分に特化して説明します。

投稿部分の見出しを変更する

例えば「新着情報」を「お知らせ」に変えたい場合、残念ながら、直接編集してもできません。

変更できそうですが、実際に行うと出来ない。

ちなみに、背景画像は、右クリック⇒「背景画像の編集」で変更できます。余談ですが、こんな画像が貼り付けてあります。

変更するためには、「WordPress」ビューから行います。現在のページを右クリックし、「ページの変更」をクリック

「投稿記事一覧 - 新着情報」を選択し、「変更」をクリック

今回は、「新着情報」を「お知らせ」に変更しました。

※「投稿タイプ」と「表示形式」は、後ほど詳しく説明します

あとは、「OK」⇒「OK」で完成です。

【重要】投稿タイプについて

通常のブログでは、投稿場所が1か所だけです。WordPressでは、ページごとに設置することもできます。設置された投稿場所のことを投稿タイプといいます。

どのページにどの投稿タイプになっているかは、「投稿記事一覧の変更」ウィンドウの投稿タイプから判断します。この投稿タイプは、変更することも、新たに追加することもできます。投稿場所が9か所あるように見えますが、今回の例で使われているのは、「ブログ」と「ニュース」だけです。これは、ブラウザから確認できます。

また、ブラウザを使って投稿するときも、この投稿タイプから投稿場所を特定します。以下の例では、「ブログ」、「ニュース」が投稿場所になります。ニュースに投稿すると、トップページに。ブログに投稿するとブログのページ反映されます。※ブラウザの使い方は、後述

今回の例では、全部で、7ページありますが、ブログ感覚で変更できるのは、2ページだけであることがわかります。この投稿した記事は、ビルダーからの閲覧・編集ができません。そのかわり、ブラウザーを使ってブログ感覚で、変更ができます。

この部分意外は、従来のホームページ(フルテンプレートCSS)感覚でビルダーから変更できます。(ワードプレス上からも変更可)。よって頻繁に追加・更新する場所だけ、投稿タイプで作成し、他の部分は、投稿タイプ以外(固定ページ)で作ります。

尚、「コメント」は、投稿に対するコメントであって、投稿タイプではありません。

【重要】表示形式について

私が、驚いたのは、「投稿記事一覧の変更」ウィンドウの「表示形式」のところです。

投稿の表示形式を柔軟に変更できる点です。WordPressの中級者以上であれば、「要約」・「アイキャッチ画像」にときめくはずです。

表示形式は、全部で6種類ありますが、以下の2タイプをおさえておくと、実践レベルでは十分でしょう。

すべて

クリックしなくても、全情報を同じページ表示する方法

日付 + タイトル(初期値)

クリックすることで、別のページで詳細を表示する方法

日付 + アイキャッチ画像 + 要約(参考情報)

タイトルだけではなく、アイキャッチや要約を追加することにより、参照を促す方法。要約やアイキャッチ画像を別途準備するのが面倒ですが、効果は大きいです。私のホームページでは欠かせないものです。 ただ、途中から変更した場合、実用的ではないようです。別途カスタマイズが必要です。

ここでは、私のサイトを例にアイキャッチ画像と要約について説明します。ビルダーの場合、上級テクニックになりそうですね!

ビルダーでの表示について

ビルダーでの表示は、ひな形が表示されているだけであって、実際に表示されるものではありません。当然のことながら、「プレビュー」で「ニュースタイトル」クリックしても移動しません。

実際の表示ついて

ビルダー上では、確認できないため、実際の表示は、?「サイトの公開」処理をしてブラウザで確認しないといけません。まだ、「サイトの公開」をしていない状態のため、「新着情報」を「お知らせ」に変更した部分も反映していません。以下は、ブラウザから見た状態

早速、公開処理から

「かんたんナビバー」から「サイトの公開」をクリック

「公開」をクリック

するとインターネットエクスプローラーが起動します。

「hpbダッシュボード」⇒「データの反映」をクリック

更新したいページを「更新する」にして「データの反映を実行する」をクリック

「サイトを見る」をクリックし、変更されたことを確認

インターネットエクスプローラで見ると変更されていることが確認できるだけでなく、「ニュースタイトル」をクリックすることで、お知らせの内容を見ることもできます。

以下は、「ニュースタイトル」をクリックした時です。

現在は、お知らせが1件しか登録されていないため、2件ほど、追加したり現在のものを編集したりしましょう。

?ホームページをブログ感覚で更新するには!

ホームページをブログ感覚で更新するには、URL+wp-admin/で更新します。

例えば、「http://pcmanabu.com/hpb17/」のときは、http://pcmanabu.com/hpb17/wp-admin/です。

今回は、XAMPPを使ってみているため、「http://127.0.0.1/hpb1/」を編集するときは、「http://127.0.0.1/hpb1/wp-admin/」
※自分のパソコンか、同じネットワークからしか見れません。

これは、スマートフォン・タブレット・その他ブラウザでも同等です。初めてログインするときは、ログイン画面が表示されます。何回もログインするのは大変なため、通常は、「ログオン状態を保持する」にチェックを入れてログインします。

尚、私のブログでは、この「ログオン状態を保持する」にチェックが入っていることを前提とし、説明の冗長を防ぎたいと思います。

ログインすると以下のような画面になります。

記事を新規追加する

記事を追加するには、「ニュース」⇒「新規追加」をクリックします。
そして、題名・記事を入力し、「公開」をクリックします。

次のステップのため、この操作を2回ほど繰り返します。

確認をしたい場合は、「公開」ボタンの上にある「プレビュー」を押します。

尚、公開する前に確認したい場合は、先に「プレビュー」を押して下さい。公開前のプレビューは、編集者しか見ることができません。

記事を削除する

記事を削除するには、「ニュース」をクリック後、ゴミ箱をクリックします。

削除した記事を、復元または完全に削除する

プログ経験者であれば、ある程度予想がつくのではないでしょうか。

スマートフォンでの編集

実は、この編集画面自身がレスポンシブWebデザインで作られています。私のスマホ「Galaxy S3」でみるとこんな感じです。

ホームページビルダーで、スマホで編集できる!書いてありますが、ちょっとしたお知らせや画像の添付ぐらいです。

この記事自身が、WordPressで作られていますが、スマホやタブレットで少々変更するのも厳しいです。

理由は、3つあります。

  • ソフトウェアキーボードを使うと、画面表示部分が著しく少なくなる
  • 「ビジュアル」で表示すると、表示が非常に遅い
    (この記事のように大量の文章があると)
  • 画像編集が苦手(私のブログは画像を多用します)

学校や、自治会などのちょっとしたお知らせ程度なら、スマホやタブレットでも十分です。

尚、ソフトウェアキーボードの問題は、ワイヤレスキーボードをつけることで解決できます。

タブレットでの編集

ARROWS Tab LTE F-01Dでみるとこんな感じ。ブラウザさえあれば、いくらでも編集できるって凄いですね!

Arrows Tab も、OSを4.0にすることで、BluetoothキーボードとBluetoothマウスを接続できます。まだの方は、ぜひお試しください。

記事を編集する

言葉通りです。記事を編集するには、[編集]をクリックすることで、簡単に変更できます。

編集画面。基本的に新規と変わりません。

[クイック編集]って知っている?

意外に使えるのが、クイック編集です。タイトル・カテゴリ・タグなどの以下の情報を、ページ移動なしで変更できるものです。変更したい場合ぜひお試しください。

 

 

   このエントリーをはてなブックマークに追加       

  • ロン

    先日からhpb17を使用しています。

    当方、まったくの初心者でテンプレートを使ってもわからないことだらけでした。

    その中で上記の「投稿部分」の削除がわからず、困ってるところにこのサイトを見つけて本当に助かりました!

    もしよろしければ教えて頂きたいのですが、
    現在、【ナチュラル5007/不動産業】で作成しております。
    そこで、テンプレの左の部分(バナー部分?)に、《検索窓・最近の投稿・最近のコメント・アーカイブ・カテゴリー・メタ情報》というのが初期のときからあるのですが、これを削除する場合はどうしたらよろしいのでしょうか?
    初めてのコメントでいきなりこんな不躾なことを聞いてしまい大変申し訳なく思ってはいるのですが、よろしければお教え下さい。

  • pcmanabu

    コメント頂きありがとうございます。
    現在、HPB18の環境にしているため、検証するには少し時間がかかります。

    週末(早くて日曜日)に時間がとれれば、調べます。

  • ロン

    ありがとうございます。
    検証して頂けると本当に助かります!
    結果、お待ちしておりますのでよろしくお願いいたします。

    • pcmanabu

      1時間ほどかけて、無事、できました。

      hpb17の環境がなかたっためインストール、XAMPPインストールを実施しました。
      なにかと面倒ですね。(汗)

      自分のサイトに救われました(余談)
      http://pcmanabu.com/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC17%E3%81%A8xampp%E3%81%A7wordpress/

      一部わかりにくい説明がありましたが、そこ以外は、良かったですね。(自己評価)

      安いビルダーを使っていることから
      5007が使えなかったので、0009で試しました。

      さて回答します。

      ご指摘のところは、「ピンク」の枠です。よってビルダー上では、消すことができません。
      ※グリーン枠は、消せます。

      ブラウザーから実施することで可能です。

      ブラウザーから管理者IDでログインします。

      URL+「wp-admin」

      http://hoge.comなら「http://hoge.com/wp-admin」

      「hpbダッシュボード」をクリックします。

      一番したの「基本設定」から「サイドバー設定」をクリック

      右側のサイドバー1の下の不要なものをクリックし、「削除」をクリックします。

      以上、削除されることを確認しました。
      追加したくなりましたら、左側の追加したいものをクリックし、「ウィジェット」を追加で復活し、ドラックで移動もできました。
      お試しください。

  • ロン

    お忙しい中、お手間を取らせてしまってすみませんでした。
    でも、本当に助かりました!ありがとうございます!!
    hpb上での削除は無理だったんですね。。
    レンタルサーバーもまだ契約してないので、無料で試せてるのはいいですね!
    色々と教えて頂き、本当にありがとうございました!