固定ページの新規作成

新規追加をクリック

ページ左列にあるメニューに表示された、上から4番目の「固定ページ」に2つのサブメニューが用意されています。

新規追加

新規追加メニュー

固定ページの所にマウスを持っていくかクリックすると以下の2つが表示されます。

  1. 固定ページの一覧
    今まで作成した固定ページの一覧が表示されます。
  2. 新規追加
    固定ページを新たに追加できます。

ここではページの新規追加を行うため、2の新規追加をクリックしてください。

 

 新規追加の流れ

新規追加をクリックすると、以下の画面が表示されます。

new-4この画面を元に新規追加までの一連の流れをご説明いたします。

 

1.タイトルを入力する。

新規追加画面

記事のタイトルを入力します。場所は(図①)赤枠部分です。

googleやyahoo等の検索結果に表示されるページタイトルの文字数は、全角で約30文字の為、なるべく30文字以内に収まるタイトル名を入力すると良いでしょう。また、タイトルにはホームページのおおもとのタイトルが追記されます。

これを考慮したページタイトルを考えるとベストです。

例)当サイトの場合

当サイトでは投稿記事のタイトルには必ず「| ブログシステム 操作マニュアル」という文字が追加されます。

この約16文字分を考慮し、記事のページタイトルはできるだけ14文字以内にすると、googleやyahoo等の検索結果でタイトルの全文が表示されるようになります。

 


 

※ご注意

タイトルを”半角数字のみで1文字~4文字”にすると、パーマリンクの部分にも同じものが設定され、ブログシステムが

年月日のいずれかが指定されたもの

と誤認し、「ページが見つかりませんでした」というエラーが表示されてしまいます。

タイトル入力部分下(図②青枠部分)のパーマリンクの設定は半角英数字(もし面倒なら最悪日本語のままでも構いません)で設定してください。

2.パーマリンクを設定する

新規追加画面
タイトルを入力すると、パーマリンク(図②)青枠した部分を含んだ一行分が追加表示されます。
※パーマリンクは、インターネット上でリンク先を特定する大切なURLとなるため、最初のドメインとブログ名称を表す部分は変更できません。ここでは記事固有の名称(青枠内部分=最後の/で区切られた部分)を特定します。何も変更を行わないとこのパーマリンクは記事のタイトルが自動的に入りますが、これはあまりおススメしません。

このパーマリンクは半角英数字にて設定してください。

{おススメしない理由}

パーマリンクを日本語で設定した場合、URLは表示上以下のようになります。

「https://sysb-web.jp/blog-manual/テスト投稿/」

しかし、実際にブラウザが認識しているURLは以下のような形です。

「https://sysb-web.jp/blog-manual/%e3%83%86%e3%82%b9%e3%83%88%e6%8a%95%e7%a8%bf/」

一見してお分かりのように5文字の日本語を表記する為に約45文字の半角文字を使用しています。

このため、日本語表記のURLはURLそのものが非常に長くなってしまい、yahooやgoogle等のページに対する認識度も下がってしまう可能性があります。

 

{どのような設定が良いのか}

できるだけ記事内容に即したパーマリンクが望ましいです。

 

例)ケーキについて書いた記事の場合・・・「cake」と設定する。

 

ですが、毎回このような設定を考えるのは難しいという方には、記事を公開した日の日付を設定されることをおススメしています。

 

例)2014年9月1日に書かれた記事の場合・・・「20140901」と設定する。


※ご注意

タイトルを”半角数字のみで1文字~4文字”にすると、パーマリンクの部分にも同じものが設定され、ブログシステムが

年月日のいずれかが指定されたもの

と誤認し、「ページが見つかりませんでした」というエラーが表示されてしまいます。

タイトル入力部分下のパーマリンクの設定は半角英数字(どうしても面倒なら、最悪日本語のままでも構いません)で設定してください。

3.各種ツールを使う

記事を書く上で便利なツールが多数ございます。

ここでは、 主にご利用頂くであろうツールについてご説明いたします。

メニューの使い方

3_0_menu

メニューの使い方を左から順番に解説します。

普段お使いのワープロソフトのようにお使いいただけます。

基本操作は、記事内容の文字などの目的の場所をマウス・カーソルなどで指定してから、任意のメニューを選択することで、ご希望の更新が可能になります。作成手順はお好みによりますが、文章や画像などを先に準備してから各種レイアウトなどの編集作業をした方が手早くきれいに仕上がるかもしれません。

【ファイル】

【編集】

【挿入】

【表示】

【表示形式】

【テーブル】

テーブルツール
表作成は、こちらのメニューを使います。設定が詳細に渡り多岐の設定が可能です。

※Webの仕様によるため、お使いの環境によっては、指定した通りの表示にならない場合が多いようです。お困りの場合は、ご相談ください。

【ツール】

 

ツールバーの使い方

3_8_tools

メニューの下に並ぶ各種ツールボタンについて左から順番に解説します。

基本操作は、記事内容の文字などの目的の場所をマウス・カーソルなどで指定してから、任意のボタンをクリックするだけで、ご希望の更新が可能になります。メニューと同じ動作をするボタンも多くあり、ワンクリックで操作可能なので作業効率が上がるはずです。

一段目のツール

太字3_t01_on【太字】
文字を太く装飾します。右側が太字になっている、又は太字で書く事ができる状態を表しています。
【表示形式】-[太字]で代用できます。メニュー解説はこちら
イタリック3_t02_on【イタリック】
文字をイタリック(斜体)に装飾します。右側が斜体になっている、又は斜体で書く事ができる状態を表しています。
【表示形式】-[イタリック]で代用できます。メニュー解説はこちら
3_t033_t03_on【引用】
文章を引用文として装飾します。右側が引用文になっている、又は引用文として入力できる状態を表しています。
【表示形式】-[スタイル]-[ブロック]-[引用]で代用できます。メニュー解説はこちら
3_t043_t04_on【番号なしリスト】
文を箇条書きのリストにします。▼ボタンで先頭記号「●」「○」「■」を選択します。
3_t053_t05_on【番号付きリスト】
文を箇条書きのリストにします。▼ボタンで「アルファベット」「ローマ字」「ギリシャ文字」などを選択します。
3_t063_t073_t08【配置ツール】
文を配置します。「左寄せ」「中央揃え」「右寄せ」ができます。
【表示形式】-[スタイル]-[配置]-[左寄せ/中央揃え/右寄せ]で代用できます。メニュー解説はこちら
3_t093_t09_on【リンクの挿入/編集】
文に対してリンクを設定します。詳しい設定方法はこちら
編集可能な場所(すでに設定済)を選択している時に右側の状態に変わます。
3_t103_t10_on【リンクの削除】
リンクの設定を削除する時に使います。文字を選択すると、ボタンは右側のようになります。
テーブル【テーブル】
▼をポイントすると、表作成に使うためのメニューと同じものが表示されます。メニュー解説はこちら
3_t123_t13【取り消し/やり直し】
左の{取り消し}ボタンをクリックして、最新の更新を取り消しします。右の{やり直し}ボタンは取り消しした動作をやり直します。メニュー解説はこちら
3_t14【ツールバー切り替え】
クリックすると、2段目のツールバーが隠れます。再表示したい時は、もう一度クリックします。
3_t153_t163_t17【配置のクリア】
左から、「Clear left」「Clear right」「Clear both」。
配置指定の解除をします。文字や画像、改行位置などが、右(中央or左)に寄ったまま自由がきかない…時などにお試しください。
回り込みについて詳しい解説はこちら
3_t18【集中執筆モード】
クリックすると、作業環境が集中執筆モードに切り替わります。メニュー解説はこちら

二段目のツール

段落ツール【段落ツール】
表示形式メニューの中にあるスタイルと見出し・ブロックの一部をダイレクトに指定できます。
段落に見出しの大きさの指定などが可能です。
【段落ツール】-[Address]
問合せ先などの段落に、この設定をします。デザイン環境によりますが、斜体などで目立つレイアウトに変化します。
[見出し]メニュー解説はこちら
[Pre]メニュー解説はこちら

3_t22
【フォントツール】
フォントのサイズを指定します。
8pt-10pt-12pt-14pt-18pt-24pt-36pt 計7サイズの設定が可能です。
3_t23【横ライン】
仕切り用の水平ラインを配置します
【挿入】-[横ライン]で代用できます。メニュー解説はこちら
3_t243_t24_on【両端揃え】
自動改行された時に、右側のスペースが文字幅によりまちまちになる状態を改善します。メニュー解説はこちら
打ち消し打ち消し【打ち消し】
選択した単語や文字に、打ち消し線を付けます。
【表示形式】-[打ち消し]で代用できます。メニュー解説はこちら
3_t263_t27【インデントを減らす/増やす】
選択した場所で文字下げの調節をします。
左側がインデントを減らす(文字列は左に移動)。右側がインデントを増やす(文字列は右に移動)。
3_t283_t28_on【テキストとしてペースト】
貼り付けする時に、余計な書式を除いたテキストデータとして貼り付けします。
【編集】-[テキストとしてペースト]で代用できます。メニュー解説はこちら
3_t29【書式設定をクリア】
貼り付けする時に、余計な書式を除いたテキストデータとして貼り付けします。
【表示形式】-[書式設定をクリア]で代用できます。メニュー解説はこちら
3_t30【特殊文字】
キーボードで入力できない文字を一覧から選択します。
【挿入】-[特殊文字]で代用できます。メニュー解説はこちら
「続きを読む」タグを挿入【「続きを読む」タグを挿入】
キーボードで入力できない文字を一覧から選択します。
【挿入】-[「続きを読む」タグを挿入]で代用できます。メニュー解説はこちら
3_t32【顔文字】
顔文字を一覧から選択します。
3_t33【テキスト色】
文字色をカラーテーブルから選択します。
一覧にない色は、[Custom…]を選択し、別ウィンドウでお好みの色を選択します。
詳しい設定はこちら
3_t34【キーボードショートカット】
良く使うツールは、ショートカットを使うと早く作業ができます。
ショートカットの一覧が表示されます。
3_t35【印刷】
編集状態をプリントします。
【ファイル】-[印刷]で代用できます。メニュー解説はこちら

 

メディアを追加

やり方を動画で見る!

記事内への画像掲載方法を動画にてご覧いただけます。

 

投稿記事作成・固定ページ作成の途中、画像や動画などのメディアファイルを追加する方法

メディアを追加※左メニュー[メディア]の設定方法はこちら

写真や画像などのメディアファイルを追加

この青枠のついた[メディアを追加]ボタンをクリックして、表示される別ウィンドウで設定を行います。

  1. はじめに、記事中の追加したい場所を選んでおきます。
  2. [メディアを追加]ボタンをクリック
  3. コンピュータから ファイルを選択し、新規にアップロードします

ファイルをアップロード

「ファイルを選択」をクリックしてPC上のメディアファイルの場所を指定してアップロードするか、“アップロードするファイルをドロップ”と表示されている場所に、PCに保存しておいたメディアファイルのアイコンをドロップ(マウスボタンを押しながらアイコンを移動させ、ボタンを離す)することで、アップロードできます。
(この方法だと、複数画像を一度にアップロード可能。)

操作を終了したい場合は右上の[×]ボタンを押します。

3_9_media_lib※既にサーバに保存したファイルを利用したい場合は、

[メディアライブラリ]の中から必要なファイルを選択します。

 

4.本文の入力

 

記事内容をテキスト入力

5_fig05キーボードを使い、青枠の部分に文章を入力していきます。

赤枠部分が[メニュー][ツール]の場所です。

表示右上のタブが[ビジュアル]であることを確認してください。[テキスト]になっている時は、ツールが少なく、またHTMLの知識が必要です。

①文章を入力できる場所でカーソルが点滅していますので、その場所から、文字の入力を開始します。
※新規で作成する場合は、左上の位置で点滅しています。

先に文字を用意し、編集を加えたい文字位置をクリックやドラッグで選択し、次に[メニュー][ツール]などで変更を加えます。

 メニューやツールの使い方はこちらを参照

 

文字が未入力の状態で、先に大きな文字でタイトルを打って、次に小さな文字で説明文を、という手順で作成したい場合は、予めツールバーなどで、必要なボタンをセットしてから、入力を始めます。
また、先にセットできない装飾もあります。その場合は、文字をベタ入力して仮配置した後、詳細なレイアウトを追加しましょう。

[「続きを読む」タグを挿入]ついて

[「続きを読む」タグを挿入]を指定すると、画面②のような—MORE—が表示されますが、プレビューでは表示されません。

これは、記事一覧ページを表示した時に記事冒頭だけを表示させるためのタグです。
一覧表示の時、この点線以下の文章は「続きを読む」という表示に代わり、その表示をクリックすることで、全文表示に切替るような仕組みになっています。

長めの記事を作成する時は、最初の段落を目途に、このタグを挿入します。

改行について

記事内で改行をするとき、普通に[enter]キーを押します。

これが通常の改行です。(タグで囲まれた1行分の段落)

もしも行間が拡がり過ぎている、直前まで行っていた装飾がクリアされてしまう。などの場合は、[shift]+ [enter]キーを押します。
(キーボード上の[shift]キーを先に押して、[enter]を押す)
(タグの改行)文章(段落)の中で文字が折り返すため行間が詰まります。

※お使いの環境によって、両者の差に大きな違いがない場合もあります。

4_ex01

(例)
左図の①の部分が普通に[enter]を押した改行。
②の部分が[shift]+ [enter]の改行になります。

使用用途や表示内容に応じて使い分けてみて下さい。

 

 

メディアを追加する

写真などの画像を追加する

  1. まずご利用のパソコンで、必要な画像を準備しておきます。
  2. 画像を表示させたい場所でクリックし、カーソルが点滅していることを確認します。
  3. [メディアを追加]のボタンを押します。

設定詳細は、こちらを参照

画像の編集については、こちらを参照

複数の画像がある場合は、一つのフォルダにまとめておき、先に左側のサイドバー(一番上の図例では、左側の黒い部分)から「メディア」を選択し、先に全ての画像を保存しておいた方が効率が上がるかもしれません。
記事作成画面に戻った時は、画像配置したい場所を指定し、[メディアを追加]-[メディアライブラリ]で画像一覧から任意の画像を選択します。

動画(音楽・ドキュメント・その他メディアファイル共通)を追加する

基本操作は、上記画像と同様で、まずご利用のパソコンで動画(任意の)ファイル(20MB以下*お使いの環境によって異なります)を準備し、表示させたい場所にカーソルを置き、[メディアを追加]のボタンを押します。

YoutubeにUPした動画を表示させる

4_ex02

  1. 表示させたい動画ページを開き、URLをコピーします。
  2. 編集画面に戻り、動画を表示させたい場所をクリック
  3. ツールメニュー[挿入]- [動画を挿入]を選択
  4. 開いたウィンドウの[ソース]に、1.でコピーしたURLを貼り付けます。
  5. プレビューで、動画が確認できます。
    意図どおりの表示がされない場合は、下記オプションを設定します。

別ウィンドウの設定方法を確認

 

 

4_ex03

※ソース指定以外の詳細設定

◆Youtubeでの操作

①動画タイトルの下に表示される「共有」タブをクリック

②「埋め込みコード」を選択する。

③表示されたコードをコピーする。

必要に応じて、「動画のサイズ」や他オプションを追加設定してからコードコピーします。

◆記事作成画面での操作

  1. 動画を表示させたい場所をクリック
  2. ツールメニュー[挿入]- [動画を挿入]を選択
  3. 別ウィンドウの[埋め込む]タブを開き、youtubeの埋め込みコードを貼り付けします。

 

画像と文字の回り込みの解除

画像と文章の水平配置が、思うようにできない時は、配置のクリア指定が必要です。

画像の詳細設定はこちら

画像と文章の回り込み設定と解除

 

4_ex05画像の設定で「配置」が左・右であれば、その余白に画像を避けた文字が回りこむように設定されます。

左図では、写真が左寄せで設定されているため、文字は、写真の右側に配置されます。

画像のすぐ右側から始まった文字は、適当な場所(通常は右端)で折り返し、画像を避けて文が続く限り並びます。左に画像がなくなった行からは、再び左端から文字が並び続きます。

4_ex06もし、右図のように、ある場所で文字を左から配置しなおしたい時には、画像が切れる場所まで改行を沢山入れて、カーソルが最も左の位置に移動した時に文字入力を再開する方法もありますが、それでは、文章の変更を行ったときに、文字数などの関係で、それ以降のレイアウトが崩れてしまうかもしれません。

こういった時に、画像に設定した「配置」解除ができれば、後の文章が画像に関係なく、配置ができるようになります。

3_t15[ツール]-[配置のクリア]で説明したツールボタンを使います。

回り込みを断ち切りたい場所にカーソルを置き、[Clear left]のボタンを押します。

右図の黄色矢印で指示したように、(左にある画像に沿って左への)文字の偏りがクリアされ、画像の影響がない場所、つまり画像のすぐ下の位置で、再び文字が左から配置されます。

5_fig06 一方、記事作成の画面では、[Clear left]を指定した場所に「仕切り」用のガイド線が入ります。

この仕切りは、プレビューでは非表示です。

ドラックして移動が可能なので、全体のバランスを確認しながら、調節してもよいでしょう。

サンプル画面では、Clear right(右寄せの解除) とClear both(左右両方の同時解除)を長い文章の途中に挿入した時の様子です。

5.地図の作成

MapPress利用方法

「MapPress」というプラグインを設置している場合、記事内やページ内にgoogle mapを簡単に挿入することができます。

※以下の説明に出てくる画像はMapPress Version:2.43.4です。
バージョンアップによって表示が変わる可能性がございます。予めご了承ください。

6.共有の設定

作成したページに、ソーシャル共有のためのアイコンを表示するかどうかの設定をします。

6_social

 

7.アイキャッチ画像の設定

記事の象徴として代表的な画像を1枚設定します。

記事一覧表示した時に、この画像と、タイトルと冒頭のテキスト(「続きを読む」タグを設定した場所まで)をインデックスとして表示します。
各記事をひとつひとつ作成していると見落としがちな機能です。
(この構成は、ブログの仕様によって異なります)

アイキャッチ画像

7_eyecatch記事作成画面の右サイドバーの一番下にある

“アイキャッチ画像を設定”リンクを開きます。

画像一覧が表示されるので、通常の画像を挿入するのと同様に画像を1枚選択し、“アイキャッチ画像を設定”ボタンをクリックで設置完了です。

もしも、一覧に必要な画像が存在しない場合は、“ファイルをアップロード”で画像を新規で追加画面に切り替えができます。

画像など詳細設定はこちら

8.ページ属性の設定

[ページ属性]は、固定ページの関連性についてを設定します。

ページ相互の関連性や、ページのレイアウトを決めるテンプレートの変更などを行います。

親子関係の設定

8_property

[右サイドバー]-[ページ属性]-[親]

固定ページでは、ページ相互の関連性から、親子関係を持つことができます。

作成したページが、既存ページの内容を補足するなどの関連性があれば、そのページを親として設定します。プルダウンで、各ページが表示されるので、指定します。

独立した内容であれば、(親なし)でOKです。

[右サイドバー]-[ページ属性]-[テンプレート]

ページのデザインを作成しやすいように、テンプレートが用意されています。

サイト全体のデザイン環境によって、プルダウンで表示される最適なテンプレートを選択すると良いでしょう。

[右サイドバー]-[ページ属性]-[順序]

固定ページが多くなり、親子関係も複雑になることがあります。

特に1つの親ページに対して子ページが複数ある時に順番を付けることができます。

表示したい順番で「数字」を入力します。

 

10.公開設定

記事を作成中は、[下書きとして保存]をします。下書き中に閲覧できるのは、ログインしているメンバー限定のため、作成途中でも内容の正確性や完成状態を気にせずに保存ができます。
記事作成が完了し[公開]することで、web上の一般ユーザの記事閲覧が可能になります。

保存と更新

※記事を作成している時、公開状態が、「下書き中」と「公開後」で設定内容が変化します。

ブログシステム 操作マニュアル

ここで解説されている内容は2014年9月15日現在のものです。ご覧いただく時期によっては内容が古くなっている可能性もございます。予めご了承ください。
↓