初心者でも出来るホームページの作り方ガイド

記事の内容は動作や機能を100%保障するものではございません。悪しからずご了承下さいませ。※カスタマイズは必ずバックアップの上、自己責任にて行って下さい。

メモ

このサイトは「micata2」「AFFINGER4」の総合マニュアルサイトになっています

便利なクイックタグについて

2016-08-18_21h40_09

テーマには予めクリックするだけで様々なデザインなどが挿入されるクイックタグボタンを豊富に用意してあります。

機能 備考 micata2 AFFINGER4
codeNEW こんな<div class="hoge”>風に
p Pタグで囲みます
太字 サンプル
赤太字 サンプル
大文字 サンプル
小文字NEW サンプル
ドット線NEW サンプル
黄マーカーNEW サンプル
赤マーカーNEW サンプル
参考 サンプル
写真に枠線NEW medium_2233632419-580x386
記事タイトルデザイン  
アドセンス  
オリジナルSCNEW  
目次(TOC+)NEW  
YouTubeIDNEW YouTubeを画像で表示することで重くなることを防ぐショートコードを挿入
固定ページに子ページリンク 子ページの一覧を表示
公式ボタン(AFFINGER4のみ)

サンプル

詳細ボタン(AFFINGER4のみ)
グレーボックス
サンプル
黄色ボックス
サンプル
薄赤ボックス
サンプル
引用風
サンプル
olタグを囲む数字ボックスNEW
  1. 色は変更可能です
  2. 色は変更可能です
  3. 色は変更可能です
ulタグを囲むチェックボックスNEW
  • 色は変更可能です
  • 色は変更可能です
  • 色は変更可能です
table横スクロール修正 横幅の長いテーブルをスクロール表示します
装飾なしテーブル デフォルトでCSSで装飾されたテーブルデザインを解除します(カスタマイザーでも変更可能)
スマホに表示しないボックス スマートフォンに表示しないエリアの作成
PCに表示しないボックス PCに表示しないエリアの作成
PCのみ左右%ボックス

medium_2233632419-580x386

robin-1084615_640

PC閲覧時に左右2列で表示するレイアウトボックス(30~70%)

全サイズ左右50%ボックスNEW

medium_2233632419-580x386

robin-1084615_640

PCとスマホどちらでも50%の2列で表示するボックス

ランキング大見出し ランキングCSS管理の「大見出し」と同じデザイン -
ランキングエリア背景 ランキングCSS管理の「背景」と同じデザイン -
イベント イベントトラッキングを挿入
nofollow nofollowを挿入
はてなマーク アイコンの色はカスタマイザーで変更できます
注意マーク アイコンの色はカスタマイザーで変更できます
チェックマーク アイコンの色はカスタマイザーで変更できます
メモマーク アイコンの色はカスタマイザーで変更できます

※「マークアイコン」など一部のスタイルはビジュアルエディタでは反映されません。

使い方

2016-08-18_21h49_01

基本的にはデザインをしたいテキストを選択状態にしてクイックボタンをクリックします。

2016-08-18_21h41_25

赤い太字にしてみます。

2016-08-18_21h41_54

スタイルが反映されました。

リストの作成

2016-08-18_21h42_16

リストにしたい文字を全て選択してリストボタンをクリック

2016-08-18_21h42_30

リストになりました。

さらにクイックタグでデザインを追加します。

2016-08-18_21h43_16

リストは選択しにくいので、こういう場合は一度「テキスト」モードにしてから選択します。テキストモードにも沢山のクイックタグがあります。

2016-08-18_21h43_41

デザインが反映されました。
表示ページは以下のようになります。

  1. これはダミーのテキストです
  2. これはダミーのテキストです
  3. これはダミーのテキストです

※カラーは変更可能

メモ

クイックタグを多用する場合は大きいエリアから小さいエリアという順に設定していくのがコツです。

同じテキストに複数設定する場合は「テキストモード」で設定した方がタグが崩れることがなく安心です。

マークの挿入

2016-09-29_13h04_49

「はてな」「注意」「メモ」「チェック」マークを挿入します。

 2016-09-29_130107

挿入はブラウザ表示にてjQueryで挿入されます。エディタ画面には代わりに青い背景で反映が表示されます。

2016-09-29_130209

アイコンはカスタマイザーで着色可能です。

レイアウトボックスの挿入

予め用意された2列のレスポンシブレイアウトを挿入します。

2016-08-18_21h44_33

「タグ」のドロップダウンボックスから「全サイズ左右50%ボックス」を選択

2016-08-18_21h44_20

挿入されたボックスの「左側(右側)のコンテンツ50%」のテキストをそれぞれ適時変更します。

画像を入れるとこんな感じです。

shutterstock_238106908

shutterstock_259261364

ショートコード

アドセンスやオリジナルショートコード(ウィジェット参照)も簡単に挿入できます。

2016-08-18_21h44_57

人気記事

kawaii 1

以前にWordPressテーマ「STINGER PLUS+」を公開した際に作成したサンプルサイトが「可愛い!」と特に女性の方から非常に好評をいただきました。 今回の参考サンプルサイト ただ現在「STI ...

2

ホームページを今まで沢山作ってきましたが、リニューアル案件以外の方はやはり「予算重視」である場合が多く、こちらの言う「大切」な事とか「重要な事」なんていう意見は「わかっているけど・・・」とはいうものの ...

tonkotu 3

今回はまず、ベースとなる「ホームページのタイトル」の考え方と下層ページコンテンツに何を作るべきかを考えていきます。 「タイトル設定」はまず最初に行うべき事であり、またホームページの命運を分ける最重要項 ...

投稿日:2016年1月23日 更新日:

Copyright© ホームページ作成なら無料テンプレートのmicata(ミカタ) , 2016 AllRights Reserved Powered by AFFINGER4.