記事のデザイン

057-800px

記事のデザインに必須の「タイポグラフィ」について

ブログの説明その3」の最後に紹介した「タイポグラフィ」について、幾つか簡単に使い方を説明致します。
 タイポグラフィ(装飾デザインサンプル)

基本的なブログの書き方

ブログの使い方により、以下の2種類の使い方があります。
ご自身のイメージに合った使い方をご利用ください。
1)ページデザインもしたい方
  本文入力エリアの右上の「ビジュアル」「テキスト」タブを「テキスト」にしてください。
  HTMLタグやCSSなど、ご自身で自由なデザインを使うことが出来ます。
  「タイポグラフィ」をご利用の場合は、この種類をご利用ください。

2)写真と記事だけで良い方
  本文入力エリアの右上の「ビジュアル」「テキスト」タブを「ビジュアル」にしてください。
  「メディア」の追加で写真や動画、音源などを貼り付けてください。
  記事は、空いたエリアに自由にお書きください。
  それだけで、簡単にブログ投稿は実現できます。

デザインを使うブログの書き方

1)前記の1項の「テキスト」にて記事をお書きください。
※途中で間違って「ビジュアル」に切り替えて編集するとデザインが崩れることがあるのでご注意ください。

2)「メディア」の追加で写真や動画、音源などを貼り付けてください。

media-set

貼り付ける前の設定内容について説明致します。
①では、配置として「右」「中央」「左」「なし」の設定が出来ます。
「右」では、画像は右寄りになり、「中央」ではセンタリング、「左」では左寄りになります。
通常は、「なし」でOKです。

②では、リンク先として「メディアファイル」「添付ファイルのページ」「カスタムURL」「なし」の設定が出来ます。
通常は、「メディアファイル」か「なし」でOKです。
「メディアファイル」を選択すると、画像クリックで画像だけクローズアップ表示されます。
「添付ファイルのページ」を指定した場合は、別ページで画像を表示し、「カスタムURL」を指定した場合は、指定した別ページへ移動します。

③では、サイズとして数種類のサイズが指定できます。
通常は、フルサイズを指定しますが、表示ページの配置やデザインにより、好みのサイズをご指定下さい。

3)見出しで文章のタイトルを作りましょう。

 「タイポグラフィ(装飾デザインサンプル)」の「見出しデザイン」をご覧ください。

良く使うのは、1~8番までで、その中でも最も良く使うのが1番の「下にボーダー」です。
1番を例に、使い方を説明致します。
※:HTMLコード

<h2 class="h1style1">シンプルにタイトル下にボーダーを引いたものです。</h2>

この例では、H2タグを使いましたが、H1~H6まで使えますので、適宜編集してご利用ください。
【参考例】

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

※H3タグは、標準で「下にボーダー(破線)」になります。

 

4)Pタグで文章のブロックを作りましょう。

RUGBY CLUBブログでデザイン・ブログを書く場合、本文の基本はPタグです。
<p>文章</p>

この2,3,4項を繰り返すことで、一般的なブログページより、高度なページを作ることが出来ます。
実際に、ネット爺のブログのほぼ99%は、この書き方で出来ています。

さらに、高度なページ作りの方法については、皆さんのご要望があれば、随時公開していく予定です。
ちなみに、本ブログだけで一般の企業サイトより遥かにプロ志向のデザインページを作ることも出来ます。
本ブログでは、ネット販売や予約システム、ジムの方にはジム管理システムなど、各種システムをブログ上で
ご利用いただくことが出来ます。

このレベルになると、CSS、AJAXなど高度なノウハウを理解する必要がありますが、それらもパーツを組み立てるだけで実現できるようになっています。
ご要望の方は、お問い合わせください。

なお、このブログで、こんなデザインや仕組みの作り方教えてくださいと言う要望もお待ちしています。

下岡亜里

下岡亜里

ariari


最新のブログ




支援ファンド

  1. 支援ファンドは登録されていません。



リンク集



PAGE TOP