記事編集について

更新前の情報が表示されている可能性が高いため、ページを再読み込みしてご確認ください。

■パソコンの場合
Windowsをお使いの方：【Ctrl】キー＋【F5】キーを同時に押す
Macをお使いの場合　：【Cmd】キー＋【R】キーを同時に押す

※スマートフォンの場合は別のブラウザまたはシークレットモードでご確認ください。

▼シークレットモードの開き方
■iPhone/Safariの場合（外部サイトにリンクします）
https://support.apple.com/ja-jp/HT203036
■アンドロイド/Chromeの場合（外部サイトにリンクします）
https://support.google.com/chrome/answer/95464?co=GENIE.Platform%3DAndroid&hl=ja

記事が途中で消えてしまう原因としては、以下が挙げられます。

・絵文字を使用している
・機種依存文字を使用している
（例：旧漢字や半角カタカナ、丸のついた数字など）

これらは使用できませんので、使用している場合は、絵文字から後ろ、機種依存文字から後ろの文章がすべて消えてしまいます。

そのため、もし使用している場合は

▼絵文字の場合
・絵文字を「★」や「♪」もしくは記号の顔文字に変更

▼機種依存文字の場合
・半角カタカナは全角カタカナに変更
・旧漢字や丸のついた数字を使用しない

にてご対応いただけますと幸いです。

上記をお試しいただき解決しない場合は、サポートまでお問合せください。

ホームページに掲載されている記事は、公開日が最新のものから上に並んでいきます。
記事の順番を変更する場合は【記事の公開日】を操作します。

上に表示させたい記事の公開日を、下に表示させる記事の公開日より新しい日時に変更していただくことで記事の順番が入れ替わります。

なお公開日は必ず【20XX-XX-XX】【XX:XX:XX】の形式で設定します。
例：2021-01-01　10:00:00

公開中の記事を未公開にしたり、作成中の記事を未公開のまま保存したりすることができます。

未公開にする場合は【ステータス】の【公開】を【未公開（原稿）】に変更し、「公開」もしくは「更新」ボタンをクリックにて完了です。

【未公開（原稿）】に変更

すでにホームページに公開されていた記事は非表示となり、作成中の記事の場合はホームページに公開されることなく保存することができます。

ホームページ上に画像を配置することができます。

画像を挿入する記事の編集画面を開く

管理画面の左から[記事]→[新規]もしくは[一覧]をクリックします。

※新しくページを追加して画像を入れる場合は「新規」、すでにあるページに画像を入れる場合は「一覧」を選択します。

※「一覧」を選択すると「記事の管理」ページが開かれます。そのページで画像を挿入したいページの記事タイトルをクリックして、編集画面を開きます。

画像をアップロードする

画像を挿入したい箇所にカーソルをあわせ、画像の挿入をクリックします。

※デジカメやスマートフォンで撮影した画像はサイズが大きいため、アップロードする際は事前にサイズ調整をします。

サイズ調整の方法を見る

青いボタンを押して画像を選択するか、画像を画面にドラッグアンドドロップして、アップロードします。

アップロード後「挿入」をクリックし、

「位置」を選択し「完了」をクリック。

自動的に画像の記述が入ったら画像の挿入完了です。

最後に忘れずに[公開]（もしくは[更新]ボタン）を押して、サイト上で画像の表示を確認します。

配置の仕方によって適切な画像サイズがあります。

【横幅いっぱいに大きく表示する場合】...横幅800px程度

【画像の横にテキストを置く場合】...横幅300px程度

ペイントソフトを開く

アップロードしたい画像の上で右クリックをして[編集]をクリックします。

ペイントソフトが立ち上がったらサイズ変更をクリックします。

①単位...ピクセルを選択
②水平方向...調整したい画像のサイズを入力（横幅いっぱいの場合は「800」、画像の横にテキストを置く場合は「300」）
③縦横比...縦横比を維持するにチェックを入れる
④「OK」をクリックする

画像のサイズ変更が完了したら左上の[ファイル]→[名前を付けて保存]で画像を保存したらサイズ調整作業は完了です。

左に配置する

<img src="/××.jpg" alt="画像の名前" class="left" />

中央に配置する

<img src="/××.jpg" alt="画像の名前" class="center" />

右に配置する

<img src="/××.jpg" alt="画像の名前" class="right" />

文字の左に画像を配置したい

<img src="/××.jpg" alt="画像の名前" class="left" />ここに文章を入れます

ここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れます

文字の右に画像を配置したい

<img src="/××.jpg" alt="画像の名前" class="right" />ここに文章を入れます

ここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れますここに文章を入れます

以下の画像のような形で画像と文字がキレイに並ばない場合があります。

回り込みを解除することで、画像と文字をキレイに並べることができます。
文字の回り込みを解除したい箇所に、次の記述を追加してください。

<br class="clear" />

テキストにリンクをつけることができます。

例：詳しくはこちらをご覧ください。

リンクをつけるテキストをドラックして選択したあと、[リンクの挿入]アイコンをクリックします。

リンクのURLにリンク先のURLを入れて「挿入」をクリックします。

自動的にリンクの記述が入ります。忘れずに「保存」または「更新」をクリックして完了です。

ボタン風にリンクを設置することができます。リンク先を目立たせたいときに便利です。

ボタンリンク

以下の記述でご利用いただけます。（※テンプレートによってボタンのデザインが変わります）

<span class="t-c"><a href="リンク先を入れます" class="a-btn">ボタンに入れるテキストを入れます</a></span>

例：「詳細はこちら」をボタン風に設置してイベントページにリンクしたい

<span class="t-c"><a href="リンク先を入れます" class="a-btn">詳細はこちら</a></span>

詳細はこちら

例：「お申込はこちら」をボタン風に設置してお問合せフォームにリンクしたい

<span class="t-c"><a href="リンク先を入れます" class="a-btn">お申込はこちら</a></span>

お申込はこちら

下記ページのように、ボタンをクリックすると該当箇所までスクロールする方法です。
https://www.personal-noi.com/member/p_color/spring/

ボタンの記述

■ ボタンの記述 ①
<ul class="typebox3">
<li><a href="#sample1" class="a-btn">●●●</a></li>
<li><a href="#sample2" class="a-btn">●●●</a></li>
<li><a href="#sample3" class="a-btn">●●●</a></li>
</ul> 赤字には「id」が入ります。

• ●●
• ●●
• ●●

■ ボタンの記述 ②
<ul class="list-btn typebox2-3">
<li><a href="#sample1">●●</a></li>
<li><a href="#sample2">●●</a></li>
<li><a href="#sample3">●●</a></li>
<li><a href="#sample4">●●</a></li>
</ul> 赤字には「id」が入ります。

• ●●
• ●●
• ●●
• ●●

1つのボタンの記述は「<li>」から始まり「</li>」で終わります。

追加する際は「<ul class="typebox3">」から「</ul>」までの間に記述をいれてください。

青字箇所の数字を変更すると、ボタンの横並びの数が変わります。「typebox2」にするとPC時は横2列、スマホ時は横1列になります。

「typebox2-3」はPC時は横3列、スマホ時は横2列という意味です。 ご用意している並び数に限りはありますのでご了承ください。

移動先の記述「id」 ボタンをクリックした移動先の文字は「id」が付与された「<span>」のタグで囲います。

■ 記述例 <span class="h3" id="sample1">ここにタイトルがはいります</span>

「class="h3"」はタイトルを装飾する記述です。タイトルの文字装飾は下記ページにて記述方法をご案内しております。
https://www.personal-noi.com/sample.html#a-sample-htag

赤字は、さきほどのボタンの記述内にあった「href="#sample1"」と同じ「id」が入ります。ボタンの記述の方には「#」が必要です。

実際の記述

続けて書くと下記のような記述になります。 <ul class="typebox3">
<li><a href="#sample1" class="a-btn">●●●</a></li>
<li><a href="#sample2" class="a-btn">●●●</a></li>
<li><a href="#sample3" class="a-btn">●●●</a></li>
</ul>
<span class="h3" id="sample1">ここにタイトルがはいります</span> あああああああああああああああああ <span class="h3" id="sample2">ここにタイトルがはいります</span> あああああああああああああああああ <span class="h3" id="sample3">ここにタイトルがはいります</span> あああああああああああああああああ

• ●●
• ●●
• ●●

ここにタイトルがはいります あああああああああああああああああ

ここにタイトルがはいります あああああああああああああああああ

ここにタイトルがはいります あああああああああああああああああ

文字に色を付ける場合には、以下の記述を入れます。

<span class="fc-●●">文章</span>

色は次から選ぶことができます。

<span class="fc-black">文章</span>

<span class="fc-gray">文章</span>

<span class="fc-silver">文章</span>

<span class="fc-whiter">文章</span>

<span class="fc-red">文章</span>

<span class="fc-brown">文章</span>

<span class="fc-orange">文章</span>

<span class="fc-yellow">文章</span>

<span class="fc-lime">文章</span>

<span class="fc-aqua">文章</span>

<span class="fc-blue">文章</span>

<span class="fc-fuchsia">文章</span>

<span class="fc-pink">文章</span>

<span class="fc-maroon">文章</span>

<span class="fc-olive">文章</span>

<span class="fc-green">文章</span>

<span class="fc-teal">文章</span>

<span class="fc-navy">文章</span>

<span class="fc-purple">文章</span>

文字のサイズを変える場合には、以下の記述を入れます。

<span class="fs-●●">文章</span>

大きさは次から選ぶことができます。数字が大きいほど、文字サイズは大きくなります。

<span class="fs-1">文章</span>

<span class="fs-2">文章</span>

<span class="fs-3">文章</span>

<span class="fs-4">文章</span>

<span class="fs-5">文章</span>

<span class="fs-6">文章</span>

<span class="fs-7">文章</span>

文字を太文字にする場合には、以下の記述を入れます。

<span class="b">太文字にする文章</span>

例）太文字になりました

一度に複数の装飾をする

半角スペースで区切って複数の装飾をすることができます。
「赤の太字」「赤の太字で文字サイズを大きく」などを組み合わせて記述できます。

<span class="fc-red b">装飾する文章</span>

例）文字を赤く、太文字にしました

文字の周りに枠を付ける場合には、以下の記述を入れます。

<span class="linebox●">枠を付ける文章</span>

<span class="linebox">パターン1</span>

<span class="linebox2">パターン2</span>

<span class="linebox3">パターン3</span>

<span class="linebox4">パターン4</span>

<span class="linebox5">パターン5</span>

<span class="linebox6">パターン6</span>