スタイルガイド
こちらのページでは、スタッフブログを作成する際のスタイルのガイドをご紹介します。
htmlを用いて、どのようなスタイルが適用されるかご確認ください。
スタイルガイドh1要素
h1要素になります。
webコンテンツの中で第一レベルの見出しとして、1回から小数回の利用を行います。
主にページのタイトルで利用しているためh1要素の多用に留意してください。
スタイルガイドh2要素
h2要素になります。
コンテンツ内の見出しでは、主にh2要素を利用します。
スタイルガイドh3要素
h3要素になります。
h2要素に続く見出しとして利用します。
スタイルガイドh4要素
h4要素になります。
h4～h6の要素は必要に応じて、ご利用ください。
スタイルガイドh5要素
h5要素になります。
スタイルガイドh6要素
h6要素になります。
太字文字です。
画像の中央寄せ
画像を一面に中央寄せした場合の、サンプルです。
画像を追加する場合は、コンテンツ入力欄の「メディアを追加」より追加して下さい。
画像の配置やサイズを設定するには、
「メディアを追加」ボタン押下後、メディアを挿入画面にてメディアを選択すると、画面左下に「添付ファイルの表示設定」が表示され、配置とサイズをお選びいただけます。
フルサイズで画像を中央寄せ
フルサイズで画像を中央寄せした場合は上のように表示されます。
最大のサイズはアップロードした画像のサイズに依存しますが、コンテンツの幅に制限されますので大サイズと同じ大きさで表示されます。
基本的には、大きいサイズで画像を出力する際には大サイズをご指定下さい。
大サイズで画像を中央寄せ
大サイズで画像を中央寄せした場合は上のように表示されます。
中サイズで画像を中央寄せ
中サイズで画像を中央寄せした場合は上のように表示されます。
サムネイルサイズで画像を中央寄せ
サムネイルサイズで画像を中央寄せした場合は上のように表示されます。
画像の左・右寄せ
画像を左寄せまたは右寄せにした場合のサンプルになります。
画像を左寄せまたは右寄せにして文章と共に表示する場合には、画像サイズが中サイズまたはサムネイルサイズのものを利用することになります。
尚、画面サイズがスマホのように比較的小さいサイズになると、中サイズの画像は中央寄せに一面に表示します。サムネイルサイズの画像は常に左寄せまたは右寄せの状態で、隣に文字が入る隙間があれば文章が画像の隣に表示されます。
画像を左寄せ、サイズを中サイズにした場合のサンプルになります。画像を左寄せ、サイズを中サイズにした場合のサンプルになります。画像を左寄せ、サイズを中サイズにした場合のサンプルになります。
画像を左寄せ、サイズを中サイズにした場合のサンプルになります。画像を左寄せ、サイズを中サイズにした場合のサンプルになります。画像を左寄せ、サイズを中サイズにした場合のサンプルになります。
画像を左寄せ、サイズを中サイズにした場合のサンプルになります。画像を左寄せ、サイズを中サイズにした場合のサンプルになります。画像を左寄せ、サイズを中サイズにした場合のサンプルになります。
画像を左寄せ、サイズを中サイズにした場合のサンプルになります。画像を左寄せ、サイズを中サイズにした場合のサンプルになります。画像を左寄せ、サイズを中サイズにした場合のサンプルになります。
画像を左寄せ、サイズを中サイズにした場合のサンプルになります。画像を左寄せ、サイズを中サイズにした場合のサンプルになります。画像を左寄せ、サイズを中サイズにした場合のサンプルになります。
画像を左寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を左寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を左寄せ、サイズをサムネイルサイズにした場合のサンプルになります。
画像を左寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を左寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を左寄せ、サイズをサムネイルサイズにした場合のサンプルになります。
画像を左寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を左寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を左寄せ、サイズをサムネイルサイズにした場合のサンプルになります。
画像を左寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を左寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を左寄せ、サイズをサムネイルサイズにした場合のサンプルになります。
画像を右寄せ、サイズを中サイズにした場合のサンプルになります。画像を右寄せ、サイズを中サイズにした場合のサンプルになります。画像を右寄せ、サイズを中サイズにした場合のサンプルになります。
画像を右寄せ、サイズを中サイズにした場合のサンプルになります。画像を右寄せ、サイズを中サイズにした場合のサンプルになります。画像を右寄せ、サイズを中サイズにした場合のサンプルになります。
画像を右寄せ、サイズを中サイズにした場合のサンプルになります。画像を右寄せ、サイズを中サイズにした場合のサンプルになります。画像を右寄せ、サイズを中サイズにした場合のサンプルになります。
画像を右寄せ、サイズを中サイズにした場合のサンプルになります。画像を右寄せ、サイズを中サイズにした場合のサンプルになります。画像を右寄せ、サイズを中サイズにした場合のサンプルになります。
画像を右寄せ、サイズを中サイズにした場合のサンプルになります。画像を右寄せ、サイズを中サイズにした場合のサンプルになります。画像を右寄せ、サイズを中サイズにした場合のサンプルになります。
画像を右寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を右寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を右寄せ、サイズをサムネイルサイズにした場合のサンプルになります。
画像を右寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を右寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を右寄せ、サイズをサムネイルサイズにした場合のサンプルになります。
画像を右寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を右寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を右寄せ、サイズをサムネイルサイズにした場合のサンプルになります。
画像を右寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を右寄せ、サイズをサムネイルサイズにした場合のサンプルになります。画像を右寄せ、サイズをサムネイルサイズにした場合のサンプルになります。
文章揃え
中央寄せ
中央揃えの文章です。
テキストが入ります。中央揃えの文章です。テキストが入ります。中央揃えの文章です。テキストが入ります。
中央揃えの文章です。テキストが入ります。中央揃えの文章です。テキストが入ります。
右寄せ
右揃えの文章です。テキストが入ります。
右揃えの文章です。テキストが入ります。右揃えの文章です。テキストが入ります。右揃えの文章です。
ボタンデザイン
ボタンデザインを3パターンご用意しました。
必要に応じてご利用ください。
ボタン1(注釈テキストなど)
ボタン2
(注釈テキストなど)
ボタン3
youtube埋め込み
埋め込みたいyoutubeの動画ページへ行き、共有からURLをコピーし貼り付けを行って下さい。
以上でスタイルガイドとなります。
コメントを残す