大学留学留学センター > 0 削除禁止 サンプル使用ルール

0 削除禁止 サンプル使用ルール

1.全体のルール

コンテンツとコンテンツの間を空けたいは<div class=”section”>と</div>で囲む

</div>の後ろに自動的に隙間が入ります。

内部リンクは相対パス、外部リンクと画像のURLは絶対パスで記入する

リンク先が内部リンクの時(当大学留学センターのサイト内のページの場合)は相対パスを入れてください。画像は、当ワードプレスからアクセスできますが、URLはすべてhttps://storage.googleapis.comで始まる別ドメインのものなので、絶対パスを利用します。
外部リンクの場合は絶対パスを入れてください。
相対パス:/reason/(https://www._______.com より後ろのURL)
絶対パス:https://wwww._______/reason/

テキスト内リンクのルールについて

外部リンクは新しいウィンドウが開いて表示されるようにする

外部リンクを設定する際は、<a>内に<target=”_blank”>を設定してください。リンク先に飛ぶ際に、新しいウィンドウが開くようになります。

画像の横幅は750px以上にする

小さな画像は、スマホなどの高解像度のデバイスで表示するとぼやけてしまうので、横幅が750px以上のものを使用してください。高さについては、特に指定がない限り制限はありません。

画像はなるべく再利用する

ダミー
サーバーを圧迫しないために、画像はなるべく既にアップしているものをお使いください。
新しく画像を追加する際は、その画像を連想できる単語をタイトルに入れ、後ほど検索しやすいようにしてください。
(例)左の画像の名前は「dummy.jpg」です

画像は必ずaltを記入する

画像のパスを入れる<img>の中には、必ずalt=””を設定してください。こちらは、何らかの要因で画像が表示されなかった場合に表示される代替テキストです。ただし、飾りとして配置している画像など、画像そのものに意味がない場合は記入しなくても大丈夫です。

ページ編集の際はなるべく「テキスト」で行う

「ビジュアル」で編集すると、設定した改行などが消えてしまったり、意図しない見た目になってしまったりする場合があります。ページの編集はなるべく「テキスト」で行い、やむを得ず「ビジュアル」を使う際は更新する前に必ず見た目を確認してください。

2.見出しのルール

見出しの優先順位はh2 > h3 > h4 > h5となります。重要度の高い見出しにはh2を、h2見出しの内容に含まれるものはh3を指定してください。ページ同士の見た目の統一感を保つため、h2を使う箇所はすべてh2 class=”ttl_box orange”のクラスを使う、h3を使う箇所はすべてh3 class=”ttl_border” etcを使います。例:h3 class=”ttl_box orange”(これは本来h2クラス)みたいに見出しのデザインを残して、見出し優先度だけを変更するのはNGとします。
基本的にh2の下にはh3、h3の下にはh4がきます。ただし、h5に関しては、少し文字を目立たせたい場合などに、順番を無視して使用して構いません(例:h2の下にh5)。また、2種類のh5には優劣はなく、どちらを利用でもOKです。


h2 class=”ttl_box black”

h2 class=”ttl_box orange”>

h3 class=”ttl_border”

h4 class=”ttl_border_bottom”<span>テキストテキスト</span>

h4 class=”ttl_border_bottom center”<span>テキストテキスト</span>

h5 class=”ttl_border_left orange”
h5 class=”ttl_border_left gray”
h6 class=”ttl_gray”
h6 class=”ttl_gray center”
<span class=”txt_highlight”>テキストテキスト</span>
<span class=”txt_highlight”<テキストテキスト</span>

3.テキスト内リンクのルール

内部リンク

サイト内のリンクは相対パスを入れてください。
class=”link_internal”


外部リンク

外部サイトへのリンクは絶対パスで別窓で開くようにしてください。(target=”_blank”をつける)
class=”link_external” target=”_blank”

4.リンクリストのルール

ページの見出しや、複数のリンクを表示したいときに使用します。
見出しは、目次の場合は「目次」、その他のリンクリストの場合は適宜文言を変えるか削除してください。


6.ボックス(背景色)のルール

汎用的なもの

基本的にはこちらを使います。ボックスには、内部に見出し、画像、リストなどを入れることが可能です。

ダミー
見出し
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。
目立たせたいもの

目立たせたいコンテンツにはこちらを使います。

ダミー
見出し
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。

7.ボックス(ボーダー)のルール

一重の線のもの:div class=”box border”
汎用的な内容にはこちらがおすすめです。
二重の線のもの:div class=”box double”
目立たせたいときはこちらがおすすめです。

8.箇条書きリストのルール

箇条書きをする際は、必ずこちらのリストをお使いください。
※改行して文頭に「●」や「▶」などをつける書き方では、2行になったときに2行目のインデントが「●」の下に来てしまうので見づらくなります(特にスマホ)
NG 例:
●テキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプル
▶テキストサンプルテキストサンプルテキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプル



オレンジ:ul class=”list_dot”
  • サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
  • サンプルサンプルサンプルサンプルサンプルサンプル
  • サンプルサンプルサンプルサンプルサンプルサンプル
黒:ul class=”list_dot black”
  • サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
  • サンプルサンプルサンプルサンプルサンプルサンプル
  • サンプルサンプルサンプルサンプルサンプルサンプル

9.チェックリストのルール

  • サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

    サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

  • サンプルサンプル

    サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

  • サンプルサンプル

  • サンプルサンプル

10.ポイントリストのルール

  • POINT1

    ul class=”list_point”

    テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります

  • POINT2

    画像などを挿入することもできます

    ダミー
    テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
  • POINT3

    テキストが入りますテキストが入りますテキストが入ります

  • POINT4

    テキストが入りますテキストが入りますテキストが入ります

11.Q&Aリストのルール

質問事項が入ります。
この文章はダミーです。ダミー。
質問事項が入ります。この文章はダミーです。質問事項が入ります。
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。
質問事項が入ります。この文章はダミーです。質問事項が入ります。質問事項が入ります。質問事項が入ります。
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。
12_1. テキスト左寄せ:table class=”table_color”
サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
12_2. テキスト中央寄せ:table class=”table_color ce”
サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル
12_2. 【重要】列が多くなる場合:
div class=”table-wrap scroll-hint” style=”position: relative; overflow: auto;”
div class=”table-wrap”で囲む

項目が多い表は、スマホで見にくくなったり、画面の外に飛び出してしまうので、必ず表をdiv class=”table-wrap”で囲んでください(横スクロールできるようになります)

項目の多いtable サンプル サンプル サンプル サンプル サンプル サンプル
div class=”table-wrap”で囲む サンプル サンプル サンプル サンプル サンプル サンプル
サンプル サンプル サンプル サンプル サンプル サンプル サンプル
13_1. お問い合わせ関連ボタン(1列表示)

お問い合わせ関連へのリンクは、こちらのボタンをお使いください

  • お問い合わせ(メール相談、カウンセリング予約などが含まれる)フォーム
  • 説明会関連
  • LINE関連
  • オンライン学校申し込みフォーム など

13_2. その他のボタン

サイト内の他のページへリンクさせるためなどに使ってください


13_3. ボタン(2列・3列表示)

ul class=”list_btn ce” を使うと、ボタンを2列・3列表示させられます。ページ内の複数の別ページ、2種類の問い合わせフォーム、別ページ+問い合わせフォーム両方に誘導させたい時などに便利です



※ボタンは別々の色でも、同じ色でもOK



3列表示


14_1. 画像左・文字回り込みなし:dl class=”dlist_photo_l”
タイトル
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。
14_2. 画像左・文字回り込みなし:dl class=”dlist_photo_r”
タイトル
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。

img src=”images/dummy.jpg” alt=”タイトル” width=”300″と画像の大きさを指定することも可能です

14_3. 画像中央・文字回り込みなし:class=”aligncenter”
タイトル

この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。

14_4. 画像左・文字回り込みあり:class=”photoL”
タイトル

この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。

14_5. 画像右・文字回り込みあり: class=”photoR”
タイトル

この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。

14_6. 画像左・画像下に背景色(薄オレンジ)が付くもの:class=”shadow lightOrange”
タイトル
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。
14_7. 画像右・画像下に背景色(オレンジ)が付くもの
タイトル
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。
14_8. 画像左・画像下に背景色(薄グレー)が付くもの:class=”shadow lightGray”
タイトル
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。
14_9. 画像右・画像下に背景色(グレー)が付くもの:class=”shadow gray”
タイトル
この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。ダミー。ダミー。ダミー。ダミー。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。ダミー。この文章はダミーです。この文章はダミーです。ダミー。この文章はダミーです。

15.ハイライトのルール

文章中に目立たせたい表記がある場合は、ハイライト span class=”txt_highlight” をお使いください。


サンプルサンプルclass=”txt_highlight”サンプルサンプル
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル


または class=”txt_orange” で文字をオレンジにすることもできます


サンプルサンプルclass=”txt_orange”サンプルサンプル
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル


Contact us