アフィンガー タグ

AFFINGER5(アフィンガー5)タグのレイアウト使い方【初心者向け】

 

タグの使い方が分からない 誰でも簡単に使えるの? 初心者にも分かり易く教えて欲しい

 

こんな悩みを持っている方に向けた記事になります。

 

本記事の内容

  • タグ機能:レイアウトの種類と作成方法

僕もPCの知識や経験も仕事でエクセルやパワーポイントなどは使用していた程度で、

家ではPCはほとんど触れてこない人生でした。(現在も苦手です)

 

そんは僕でも他の記事や取説を勉強しながら覚えていきました。

初心者の方でも分かり易いように記事をまとめていますので役立ててもらえるはずです。

 

ではタグ内のレイアウトの解説をしていきます。

 

全サイズ:デザイン(初期設定)

 

どんなデザインなのか確認したい方

全サイズには4個の機能があります。

 

【左右30:70%】

 

【左右50%】

 

【左右free%】

 

ポイント

%変更方法:テキストモードからstyle="width: %”を各入力して完成

 

【均等横並び】

 

ポイント

タグ内でEnterをクリックすると枠数を増やすことが出来ます。

 

画像の挿入はレイアウトのタグを選択→枠が出来るのでその中に画像を挿入して完成です。

 

PCとTab(959px以上):デザイン(初期設定)

 

どんなデザインなのか確認したい方

PCとTabには6個の機能があります。

パソコンとタブレットは画像が横表示、スマホは画像が縦表示されます。

デザインは下記があります。

  • 3分割
  • 左右30:70%
  • 左右70:30%
  • 左右40:60%
  • 左右60:40%
  • 左右50%

 

【参考:スマートフォンだと縦表示】

PCとTabについては以上になります。

 

 

DIV:デザイン(初期設定)

 

 どんなデザインなのか確認したい方

DIVには2個の機能があります。

※使用方法把握後に更新します。

 

背景ワイド:デザイン(初期設定)

 

 どんなデザインなのか確認したい方

背景ワイドには1個の機能があります。

※まだ使い方が分からないので分かり次第更新します。

 

現在分かっているデザインは背景が全面的に記事ひ広がっていること程度です。(灰色で仕切られている感じ)

 

 

背景ワイドについては以上になります。

 

タブ(切り替えボタン)

 

 どんなデザインなのか確認したい方

タブには3個の機能があります。(タブの切り替えが2~4つの違い)

 




サンプル画像①

サンプル画像②


 






サンプル①

サンプル②

サンプル③

サンプル④


 

 

ポイント

このように記事内にタブの切り替えが出来る機能になります。

 

この機能も使い方によっては記事を綺麗にまとめられるのでお勧めです。

タブについては以上になります。

 

今回は画像を追加した例題でしたがレイアウトの中にタグを追加したりなども応用が出来るので、

いろいろ試して見て自分のオリジナルレイアウトを作ってみましょう。

 

今回の記事は以上になります。

 

-アフィンガー, タグ

Copyright© はまる屋 Blog , 2024 All Rights Reserved Powered by AFFINGER5.