注)このページは未だ書きかけです。追々充実させて行きます。


目次

イナズマWebの基本的な使い方

管理画面の主な名称

layout.jpg

.瓮ぅ鵐淵咼押璽轡腑


メインナビゲーションには次のセクションが含まれています:

メイン - ダッシュボード(管理画面トップページ)へのリンク、Webページのプレレビュー、リソースの作成、ウェブリンクの作成。

エレメント - チャンクとアップロードしたファイルなど、システムのコンテンツ。

モジュール - システム内部の設定用メニューです。

ユーザー - 機能を限定して複数人でご利用いただくためのユーザー管理メニューです。

ツール とインポート/エクスポートのHTMLファイルのバックアップ-コントロール。

レポート -提供統計とログ。

▲汽屮淵咼押璽轡腑

メインが選択されて表示されるさまざまなオプションです。

サイトツリー

ウェブページのコンテンツを階層型ツリー構造で表示しています。コンテクスト・メニュー(右クリックで表示)により、カテゴリを指定したページの作成や、編集画面への移動が素早く行えます。

サイトツリーのアイコンの種類

tenkai.jpgサイトツリーを全て展開します。shukusho.jpgサイトツリーを最小に折りたたみます。
sakusei.jpg一番上の階層にリソースを新規作成します。weblink.jpg一番上の階層にウェブリンクを作成します。
reload.jpgサイトツリーを再読み込みします。sort.jpgサイトツリーをタイトル、ID、作成日時、編集日時、ディレクトリ、メニューオーダ順に並び替えることが出来ます。
trash1.jpgリソースを削除するとリソースタイトルに傍線が引かれ、アイコンがtrash2.jpgに替わります。クリックするとリソースを完全に削除します。
delete.jpg
close.jpgサイトツリーを閉じます。表示アイコンをクリックすると閉じたサイトツリーが再び開きます。
open.jpg
context.jpgクリックでコンテクスト・メニューを表示し、リソースの新規作成、ウェブリンクの新規作成、リソースの削除、編集ができます。
context_menu_0.jpg



ぅ灰鵐謄鵐張Εンドウ

ウェブページやサイトの設定に使われます。

ゥ罅璽挟浜バー

ログアウトすることができます。現在のパスワードを変更、ユーザまたは、確認のメッセージは、ヘルプファイルへのアクセス、。また、MODxのバージョンをを表示します。

管理画面ログイン方法

弊社の提供するURLにアクセスします。

loginnew.png

ログイン画面にアクセスし、弊社の提供するユーザー名、パスワードを入力し、ログインボタンをクリック。

編集の方法

編集画面にアクセスする方法は2通りあります。

その1:管理画面から

admin_edit.jpg

管理画面左側のリンクから編集したいページを探します。
編集したいページタイトルをクリックすると、画面右側が選択したページの編集画面に切り替わります。
タイトルの並びはツリー構造になっています。下層ページを編集したい場合は、タイトル左側の「+」をクリックすると展開し、展開している状態を元に戻したい場合は「-」をクリックすると戻ります。

その2:プレビュー画面から

admin_preview.jpg

画面左上の「プレビュー」リンクから表示用のページへ移動

prevew_edit.jpg

マウスカーソルをプレビュー画面上部に移動させると、「編集」ボタンが現れます。
クリックするとプレビュー画面上に編集画面が現れます。

preview_edit02.jpg

基本的なページの増やし方

page_insert01.jpg

page_insert02.jpg

page_insert03.jpg

page_insert01a.jpg

リソース名を右クリックして追加する事もできます。
クリックしたりソースのサブリソースとしてページが追加されます。

メニューへの表示・非表示

menu.jpg
「メニューに表示する」にチェックを入れると、メニューボタンにマウスポインターが触れると下層ページへのメニューが現れます。

menu2.jpg

ウェブリンクについて

linnk_insert01.jpg

linnk_insert02.jpg
リソース名を右クリックして追加する事もできます。
クリックしたりソースのサブリソースとしてリンクが追加されます。

link_insert02.jpg

link_insert03.jpg

イナズマWebの使い方(その1:ページ生成)

階層型のページの保持

0006.jpg

0008.jpg

_質悒據璽弧召鯑力。
▲據璽呼睛討鯑力。
メニューに表示するかどうかでチェックを入れる。
な歛献椒織鵑鬟リック。

0009.jpg

「メニューに表示する」にチェックを入れると、メニューボタンにマウスポインターが触れると下層ページへのメニューが現れます。

一覧ページの生成

親ページの作成

0002.jpg

0003.png

使用テンプレートを変更すると上のような警告が出ますが「OK」をクリック。

下層ページの作成

0006.jpg

下層ページを新規作成します。

0010.jpg

_質悒據璽弧召鯑力します。
▲據璽呼睛討鯑力します。
使用テンプレートを「詳細ページ」に。

0003.png

使用テンプレートを変更すると上のような警告が出ますが「OK」をクリック。

ぅ瓮縫紂爾防充┐垢襪どうかでチェックを入れる。
ァ岼賤用項目」タブをクリック。

一覧用項目の設定

0007.jpg

Α岼賤用写真」を選択。
А岼賤用コメント」を入力。
保存ボタンをクリック。

0011.jpg
親ページに下層ページ一覧が追加されます。

イナズマWebの使い方(その2:画像・ファイル)


画像の入れ方

gazo_sonyu.png
A・・・使用したい画像URLをそのまま指定できます。

B・・・PC上の任意の画像をアップロードして使用できます。

Bを押すとFile Browserが立ち上がります。
filebrowser.jpg
_菫を選択
▲機璽弌爾縫▲奪廛蹇璽

フォルダを新規作成する場合は、.椒織鷁の”Create New Folder”を押してください。

file_select.png gazofinish_0.png
表示された画像をクリックすると記事に挿入されます。

delete_0.jpg・・・画像の削除
namechange.jpg・・・名前の変更
gazoueditor.jpg・・・オンライン画像編集(切り抜きやサイズ変更など簡単な編集のみ。PC上で予め編集してからのアップロードをおすすめします。)


画像と文字の位置関係


記事内で画像を回りこんで文字をレイアウトできます。

hyoujitab.png hyoujitab2.png

よく使う配置設定

  • Left・・・画像は左に配置され、画像より後ろにあるテキストは画像の右に回り込みます。
  • Right・・・画像は右に配置され、画像より後ろにあるテキストは画像の左に回り込みます。

    左の小窓に変更サンプルが表示されます
    配置・・・未設定
    Baseline
    Top
    Middle
    Bottom
    Text Top
    Text Bottom
    Left
    Right
    サイズ・・・ピクセルで指定
    上下余白・・・ピクセルで指定
    左右余白・・・ピクセルで指定
    枠線・・・ピクセルで指定
    クラス属性・・・ピクセルで指定
    style属性・・・CSSを直接書き込めます


PDFファイルの入れ方


この機能を使うとPDFファイルだけではなく、色んなファイルをアップすることが出来ます。

pdfup.png
リンクさせたいテキスト、および画像などをハイライトさせて、リンクを挿入ボタンを押します。

pdfup2.png
リンクURLに直接ファイルへのリンクを貼るか、参照ボタンを押してFile Browserよりファイルをアップロードしてください。
(File Browserについては、画像の入れ方をごらんください。)


イナズマWebの使い方(その3:表)

表の入れ方

table02.png

テーブルは一般に表形式のデータを表示するのに使われます。テーブルは縦横に複数のマスで構成されています。1マスを「セル」といい、横のセルの集合を「行」、縦のセルの集合を「列」といいます。

セルには、データを記入するデータセルと、見出しを記入するヘッダセルの2種類があります。

hyousounyu.png

hyousounyu2.png

  • 「列」と「行」の数を設定する。
  • 「Cellpadding」「Cellspaceing」の値を0にする。
  • 表に外枠が必要な場合は「枠線」に1以上の数値を入力。数値が大きいほど線の幅が太くなる。枠線が必要ない場合は0にする。
  • 「幅」と「高さ」を設定する(整数を入力)。空欄にすると自動的にデータの文字数に合わせる。
  • 表の上にタイトルを付けたい場合は「表に見出しを付ける」にチェックを入れる。

    列・・・列数
    行・・・行数
    Cellpadding・・・セル内の余白
    Cellspacing・・・セルの間隔
    配置・・・中央揃え
    左揃え
    右揃え
    枠線・・・ピクセルで指定
    幅・・・ピクセルで指定
    高さ・・・ピクセルで指定
    表に見出しを付ける・・・タイトル表示

ちょっと凝った表の作り方


上級者タブで、より高度な表を作成できます。

hyoupro.png

  • 「スタイル」に数値が入力されている場合はそのままにしておく。
  • 表に外枠を設定したい場合は「枠線の色」のカラーをクリックして色を選択する。
  • 設定が完了したら「挿入」ボタンをクリックする。

イナズマWebの使い方(その4:新着情報)

イナズマWebには、ページごとに公開(またはページを非公開にする)日時を設定することができます。新着情報についても同様に、一定の日時に成った時点で、表示される機能を実現するために、新着情報を個別のリソースとして登録する仕様となっています。

新着情報の新規作成

新着情報のリソースアイコンを右クリック

whatsnew_icon.jpg

「ここに新規作成」を選択

whatsnew_here.jpg

タイトルと内容を入力し、保存します。

whatsnew_nyuryoku.jpg

新着情報の管理方法について

編集日(表示日時)の変更

date001.jpg

ヾ浜画面から日付を変更したい新着情報のリソースの編集画面へ移動します。

◆嵎埆呼設定」タブ内の編集日設定のプルダウン項目から「Manual」を選択します。

date002.jpg

J埆呼付の入力欄の中をクリックするとカレンダーが表示されるので、
上段のプルダウン項目から月と年を選択し、
中断から変更したい日付の数字をクリックすると、
入力欄に変更された日付が表示されます。

date003.jpg

ぁ嵎歛検廛椒織鵑鬟リックし、変更完了。

イナズマWebの使い方(その5:レイアウト方法)


テンプレートの使用方法


テンプレートを使用することで、予め用意された定型文を挿入できます。挿入後は、テキストをサイトに合ったものに変更してください。
template.png

template2.png
プルダウンよりテンプレートを選んでください。表示例が出ます。

Layout Left・・・画像左回りこみ
Layout Right・・・画像右回りこみ
Color Table・・・会社概要などに使える表
CSS Button・・・各種色のお問い合わせボタン


サイドメニューの文字インデント

.據璽犬魍稜
001.jpg

管理画面にログイン

リソース「サイト設定」をクリック

002.jpg

ぁ屮汽ぅ廟瀋蝓廛織屬鬟リック

003.jpg

ァ屮汽ぅ疋瓮縫紂爾離ぅ鵐妊鵐函廚旅猝椶凌値を変更する

004.jpg

Δ匹譴世臼Δ砲困蕕靴燭いをピクセル単位で設定します。

005.jpg

保存ボタンをクリック。

006.jpg

┘廛譽咼紂爾燃稜А

007.jpg

〜┐魴り返し調整します。

ページの一括非公開設定

手順

.皀献紂璽襯瓮縫紂滋Doc Manager画面→「その他」タブへ移動

▲螢宗璽垢粒銅鐇瀋
変更対象の設定プルダウンを「公開/非公開」に
ラジオボタンを「非公開」に

A犧鄲仂(操作元)のリソースIDを指定項目
下記指定方法を参考に トップページ、ヘッダーメニュー、サイドメニュー(下層ページを含む)を非公開にする場合は 「1**,14**,15**」
と入力し、適用ボタンで完了

hikoukai.jpg

指定方法

  • n*  - その親リソース(コンテナ)と直下のサブリソースを意味する指定
  • n** - その親リソース(コンテナ)と配下の子、孫など全てのリソースを意味する指定
  • n-m - n から m までのIDの範囲を意味る指定。n、m を含みます
  • n   - IDがnの1つのリソースを意味する指定
  • 例:1*,4**,2-20,25 - この指定では、1、1のサブリソース、4、4の全配下リソース、 2から20までの19個のリソース及び25 の各IDのリソースが指定されています。

ページエディタの使用方法

コンテンツウィンドウ内のページ内容編集エリアについての説明です。

各機能と名称


code_icon.jpghtmlをソースコートで編集するcss_icon.jpg選択部分のスタイルの編集
bold_icon.jpg選択テキストを太字にするitalic_icon.jpg選択テキストをイタリックにする
underline_icon.jpg選択テキストを下線にするstrike_icon.jpg選択テキストを打消にする
txtcolor_icon.jpg文字色の選択するbgcolor_icon.jpg背景色の選択する
[添付]classを選択するformat_select_icon.jpg書式を選択する
fontsize_select_icon.jpgフォントサイズを選択するcode_format_icon.jpgコードの整理をする
format_clear_icon.jpg書式を削除するsub_icon.jpg下付文字を挿入する
sup_icon.jpg上付文字を挿入するundo_icon.jpg元に戻す
redo_icon.jpg一段階進むjustifyleft_icon.jpg選択テキストを左揃え
justifycenter_icon.jpg選択テキストを中央揃えjustifyright_icon.jpg選択テキストを右揃え
justifyfull_icon.jpg選択テキストを両端揃えblockquote_icon.jpg選択テキストを引用文にする
list_icon.jpg黒点リストを作るlist_number_icon.jpg数字のリストを作る
indent_off_icon.jpg選択したテキストエリアを1タブ分左にずらすindent_icon.jpg選択したテキストエリアを1タブ分右にずらす
link_icon.jpg選択テキストのリンクを追加または編集するclear_link_icon.jpg選択テキストのリンクを削除する
anchor_icon.jpgアンカーを追加または編集するpaste_txt_icon.jpg書式なしで貼り付け
paste_word_icon.jpgワードからの貼り付けsearch_icon.jpgテキストを検索する
replace_icon.jpgテキストを検索/置換するtable_create_icon.jpg表の挿入・編集
tbl_property_line_icon.jpg行の編集tbl_property_cell_icon.jpgセルの編集
tbl_insert_row_above_icon_i.jpg上に行を挿入tbl_insert_row_down_icon.jpg下に行を挿入
tbl_delete_row_icon.jpg行を削除tbl_insert_clm_left_icon.jpg前に列を挿入
tbl_insert_clm_right_icon.jpg後に列を挿入tbl_delete_clm_icon.jpg列を削除
clear_cell_binding_icon.jpgセルの分割cell_binding_icon.jpgセルの合体
hr_icon.jpg罫線の挿入strange_char_icon.jpg特殊文字の挿入
picture_icon.jpg画像を挿入または編集するmedia_icon.jpgメディアを挿入または編集する
template_icon.jpgテンプレートの挿入select_all_icon.jpg全てを選択する
fullscreen_icon.jpgフルスクリーンモードに切り替えるhelp_icon.jpgヘルプを表示する



添付ファイル: filehikoukai.jpg 351件 [詳細] filetemplate2.png 301件 [詳細] filetemplate.png 280件 [詳細] filehyoupro.png 291件 [詳細] filehyousounyu2.png 312件 [詳細] filehyousounyu.png 310件 [詳細] filetable02.png 306件 [詳細] filepdfup2.png 328件 [詳細] filepdfup.png 297件 [詳細] filehyoujitab2.png 308件 [詳細] filehyoujitab.png 321件 [詳細] filefile_select.png 328件 [詳細] filegazofinish_0.png 311件 [詳細] filegazo_sonyu.png 326件 [詳細] file0003.png 308件 [詳細] filelink_insert02.jpg 303件 [詳細] filelinnk_insert02.jpg 298件 [詳細] filemenu.jpg 311件 [詳細] fileadmin_edit.jpg 317件 [詳細] fileloginnew.png 324件 [詳細] filelayout.jpg 333件 [詳細] filetrash1.jpg 405件 [詳細] filetenkai.jpg 423件 [詳細] filetrash2.jpg 413件 [詳細] filetemplate_icon.jpg 357件 [詳細] filewhatsnew_nyuryoku.jpg 392件 [詳細] filetxtcolor_icon.jpg 417件 [詳細] filewhatsnew_here.jpg 365件 [詳細] filewhatsnew_icon.jpg 360件 [詳細] fileweblink.jpg 400件 [詳細] fileundo_icon.jpg 389件 [詳細] fileunderline_icon.jpg 425件 [詳細] filestrange_char_icon.jpg 333件 [詳細] filestrike_icon.jpg 429件 [詳細] filesub_icon.jpg 399件 [詳細] fileshukusho.jpg 417件 [詳細] filereplace_icon.jpg 401件 [詳細] filesort.jpg 412件 [詳細] filesakusei.jpg 390件 [詳細] filesearch_icon.jpg 419件 [詳細] fileselect_all_icon.jpg 313件 [詳細] filesup_icon.jpg 427件 [詳細] filetbl_property_line_icon.jpg 405件 [詳細] filetbl_insert_row_down_icon.jpg 321件 [詳細] fileswan building map.xlsx 280件 [詳細] filetbl_property_cell_icon.jpg 336件 [詳細] filetbl_insert_clm_right_icon.jpg 365件 [詳細] filetbl_insert_row_above_icon_i.jpg 326件 [詳細] filetbl_insert_clm_left_icon.jpg 333件 [詳細] fileswan building map_0.xlsx 239件 [詳細] filetbl_delete_clm_icon.jpg 345件 [詳細] filetable_create_icon.jpg 415件 [詳細] filetbl_delete_row_icon.jpg 322件 [詳細] filepage_insert02.jpg 465件 [詳細] filepage_insert01a.jpg 464件 [詳細] filepage_insert01.jpg 478件 [詳細] filepage_insert03.jpg 457件 [詳細] fileredo_icon.jpg 432件 [詳細] filepreview_edit02.jpg 471件 [詳細] filereload.jpg 408件 [詳細] fileprevew_edit.jpg 443件 [詳細] filepicture_icon.jpg 332件 [詳細] filepaste_word_icon.jpg 442件 [詳細] filepaste_txt_icon.jpg 419件 [詳細] fileopen.jpg 374件 [詳細] filelink_insert03.jpg 472件 [詳細] filelist_icon.jpg 398件 [詳細] filelink_icon.jpg 397件 [詳細] filejustifyright_icon.jpg 422件 [詳細] filemadorizu401 (2).jpg 252件 [詳細] filelinnk_insert01.jpg 460件 [詳細] filemedia_icon.jpg 340件 [詳細] filelist_number_icon.jpg 418件 [詳細] filemenu2.jpg 445件 [詳細] filenamechange.jpg 381件 [詳細] fileindent_icon.jpg 428件 [詳細] fileitalic_icon.jpg 422件 [詳細] fileindent_off_icon.jpg 421件 [詳細] filehelp_icon.jpg 327件 [詳細] filegazoueditor.jpg 393件 [詳細] filehr_icon.jpg 348件 [詳細] filejustifyleft_icon.jpg 420件 [詳細] filejustifycenter_icon.jpg 394件 [詳細] filejustifyfull_icon.jpg 382件 [詳細] filecontext.jpg 419件 [詳細] filedelete.jpg 411件 [詳細] filedelete_0.jpg 394件 [詳細] filecode_icon.jpg 427件 [詳細] filecontext_menu.jpg 171件 [詳細] filedate003.jpg 417件 [詳細] filefilebrowser.jpg 389件 [詳細] filecontext_menu_0.jpg 402件 [詳細] filedate001.jpg 424件 [詳細] filedate002.jpg 432件 [詳細] filecss_icon.jpg 437件 [詳細] fileformat_clear_icon.jpg 419件 [詳細] filefontsize_select_icon.jpg 452件 [詳細] filefullscreen_icon.jpg 364件 [詳細] fileformat_select_icon.jpg 430件 [詳細] fileclear_cell_binding_icon.jpg 345件 [詳細] fileclose.jpg 428件 [詳細] filecell_binding_icon.jpg 361件 [詳細] fileblockquote_icon.jpg 418件 [詳細] file003.jpg 401件 [詳細] filebgcolor_icon.jpg 415件 [詳細] filecode_format_icon.jpg 419件 [詳細] filebold_icon.jpg 426件 [詳細] fileclear_link_icon.jpg 427件 [詳細] file007.jpg 380件 [詳細] fileadmin_left_link.jpg 230件 [詳細] fileanchor_icon.jpg 443件 [詳細] file006.jpg 426件 [詳細] fileadmin_preview.jpg 502件 [詳細] file004.jpg 394件 [詳細] file005.jpg 415件 [詳細] file0007.jpg 447件 [詳細] file0006.jpg 376件 [詳細] file0008.jpg 428件 [詳細] file001.jpg 414件 [詳細] file002.jpg 410件 [詳細] file0002.jpg 425件 [詳細] file0011.jpg 430件 [詳細] file0010.jpg 430件 [詳細] file0009.jpg 430件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-08-05 (水) 11:55:15 (1048d)