スマートフォンサイトを表示する

  1. TOP
  2. みんビズ制作講座 テンプレートを使って簡単スタート : 第4回 まずはココを編集してみよう

エキスパートコラム

みんビズ制作講座:テンプレートを使って簡単スタート(全4回)

第4回:まずはココを編集してみよう

執筆:志鎌 真奈美(Shikama.net)

2012年8月22日更新

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

閲覧数5,030views

このコラムをPDF形式でダウンロードする

みんビズの初期テンプレートを使って簡単に、そして「ちょっと見栄えよく」自社のホームページをスタートさせるには?みんビズの登録からヘッダー・背景画像の編集まで、知ってて損はないベーシックな編集のコツを解説します。
第4回目は「まずはココを編集してみよう」です。

第3回目までは、ヘッダーの画像やテンプレートの変更など、おもにサイトの「見た目」を編集する方法を解説してきました。今回は、いよいよコンテンツを更新していきます。

[1-1] 見出しを編集してみよう

1. ログイン後「新着情報」にマウスを合わせ、クリックします。

2. 編集可能な状態になりますので、文字を入れ替えましょう。

ヒント:

「見出し2」または「見出し3」にチェックをつけるつけると、見出しのレベルを変更することができます。

3. 編集が終わったら「保存」ボタンをクリックして完了です。

ヒント:

「保存」ボタンをクリックしるまでは、実際のサイトへは修正が反映されません。

[1-2] 文章を編集してみよう

1. [1-1] で編集した見出しの下部にマウスを合わせ、クリックします。

2. 編集可能な状態になりますので、文字を入れ替えましょう。

各ボタンの機能について

1文字の装飾 文字の装飾ができます。「B」は太字「I」は斜体です。
2文字の配置 「左揃え」「中央揃え」「右揃え」「均等割付」の設定ができます。
3箇条書き 「番号なしリスト」「番号付きリスト」の設定ができます。
4インデント 「インデント」(文頭に空白を挿入)の設定、解除ができます。
5文字色 文字の色を設定します。
6リンク 「リンク」の設定、解除ができます。
7テキストとして貼り付け 文字装飾のないテキストとして貼り付けることができます。(改行はそのまま引き継がれます。)
8フォーマット解除 文字装飾の設定を解除します。
9元に戻す 一つ前の作業状態に戻します。
10やり直す 10のボタンをクリックする直前の状態に戻します。
11HTMLソース編集 HTMLソースを直接編集できます。

3. 編集が終わったら「保存」ボタンをクリックして完了です。

[1-3] 写真付き文章を編集してみよう

1. 「新着おすすめ物件 宅地分譲」の下に、写真と文字が横並びになっているエリアがありますので、クリックします。

2. 編集可能画面になりますので、まずはそのまま文章を編集しましょう。(「1-2」と手順は同じです。)

3. 次に画像を入れ替えます。「画像を編集」タブをクリックしましょう。

4. 「ファイルを選択」をクリックし、画像をアップロードします。

5. 画像のアップロードが完了したら、サイズ調整やサブタイトルの書き替えなどを行います。

1拡大 画像を拡大します。
2縮小 画像を縮小します。
3幅の最大化 画像をコンテンツの幅に合わせて最大化します。
4写真を左寄せにする 写真(画像)を文字の左側に配置します。
5写真を右寄せにする 写真(画像)を文字の右側に配置します。
6回転 アップロードした画像を右回り、左回りに回転させます。
7サブタイトル 画像の下に表示される小さな文字を入力することができます。
(空白にすると、何も表示されません)
8リンク 画像にリンクを設定することができます。
9Dropbox Dropboxに保存した画像をアップロードできます。(あらかじめDropboxのアカウントを取得する必要があります)

6. 編集が終わったら「保存」ボタンをクリックして完了です。

[1-4] フォトギャラリーを編集してみよう

1. 「1-3」で編集したエリアの下に配置されている写真やイラストをクリックします。

2. プレビューをクリックします。黒枠のついた小さな画像一覧表示されますので、不要な画像を×印で削除します。

3. 「アップロード」をクリックすると、「画像アップロード」のパネルが表示されます。「選択」ボタンをクリックし、アップロードするファイルを選びます。

ヒント:

「Control」キーを押したままアイコンをクリックすると、複数の画像を選択することができます。

4. 選択が完了したら、「アップロード」ボタンをクリックします。

5. 「フォーマット」「比率」「サイズ」「スタイル」などを変更します。

1フォーマット 「一覧表示」か「スライドショー」を選択します。
2比率 画像の比率について、長方形か正方形かを選択します。
3サイズ 画像サイズの拡大・縮小が設定できます。
4スタイル 「枠あり」「枠なし」などを設定できます。
5プレビュー クリックすると、画像一枚ごとに「回転」「リンク」「サブタイトル」が設定できるパネルが表示されます。
6アップロード 画像を追加でアップロードすることができます。
7Dropbox Dropboxに保存した画像をアップロードできます。(あらかじめDropboxのアカウントを取得する必要があります)

ヒント:

一覧表示されている画像をドラッグし、表示順を入れ替えることができます。

6. 編集が終わったら「保存」をクリックして完了です。

[1-5] サイドバーを編集してみよう

1. 画面の右側、サイドバーのエリアにマウスを近づけます。

7見出し27見出し37文章

2. 上記のような作りになっています。「1-1」・「1-2」と同じ方法で、編集してみましょう。

「みんビズ制作講座:テンプレートを使って簡単スタート(全4回)」は、いかがでしたか?皆様のホームページ制作に、ほんの少しでもお役に立てることがあれば幸いです!

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

志鎌 真奈美(しかま・まなみ)

志鎌 真奈美(しかま・まなみ)

Shikama.net 代表/JimdoExpert
http://www.shikama.net/
http://www.web-supporter.jp/

北海道函館市生まれ。北海道教育大学函館校卒業。千葉県市川市在住。
1997年よりWeb制作を始める。ソフトウェア会社のWeb制作部門に5年間勤めた後、2002年4月に独立。Web制作・企画・制作、システム構築などに従事。
講師として、Webマーケティングやデザインのセミナー活動も行っている。

著書に『WebデザイナーのためのJimdoスタイルブック』(共著、マイナビ)、『Web文章の「書き方」入門教室~5つのステップで「読まれる→伝わる」文章が書ける!』(技術評論社)。

Web文章の「書き方」入門教室~5つのステップで「読まれる→伝わる」文章が書ける!

  • はじめてWEB 読も読もキャンペーン「テーマ別セレクト本」プレゼント!
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/10/8~2017/10/14]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ