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

更新日：2012年10月27日  タグ:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

すべて

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

日付 + タイトル（初期値）

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

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

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

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

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

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

実際の表示ついて

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

早速、公開処理から

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

「公開」をクリック

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

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

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

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

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

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

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

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

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

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

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

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

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

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

記事を新規追加する

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

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

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

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

記事を削除する

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

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

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

スマートフォンでの編集

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

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

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

理由は、3つあります。

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

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

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

タブレットでの編集

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

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

記事を編集する

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

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

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

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

 

 

11:30 PM| カテゴリー：ホームページ作成| タグ：

デバック用: FB:0 TW:0 Po:0 B:0 G+:0 Pin:0 L:0

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