タイトルをここに表示します
投稿者名
本文の文章ブロックをここに表示します。
基本機能
初期設定
スライダー
ウェブアイコン
QRコード
インビュー
シェア
ブログ表示
ブログ編集
- ウェブコンボの基本機能
- ウェブコンボでご利用いただける各種機能の説明です。
- ブラウザの判別
- ウェブコンボでは閲覧するデバイス及びブラウザの判別を行い、対象外のブラウザで閲覧しようとした際や、デバイスの向きによって制限がある場合などでアナウンスを出すことができます。
- レスポンシブ対応
-
ウェブコンボで使用できる各種機能は全てレスポンシブ対応の機能となっています。
また、予め設定されたcodeをbody要素に吐き出すことができるので、cssの@mediaを使用せずにスタイルの設定ができるようになります。
- サイズ系カスタムプロパティ
- ウェブコンボでは、デフォルトで設定した内容を元に各種カスタムプロパティが自動生成されるようになっています。
-
- --fixdvh
- ページ読み込み時のウィンドウサイズを元に変動しない1vhの値になります。
- --windowfixdheight
- ページ読み込み時のウィンドウサイズの高さになります。
- --windowMaxHeight
- ユーザーが利用しているブラウザのウィンドウサイズの最大の高さになります。
- --headerBtnSize
- ヘッダーのボタンサイズになります。
- --headerLeft
- ヘッダー内のinnerに指定しているpadding-leftのサイズになります。
- --headerRight
- ヘッダー内のinnerに指定しているpadding-rightのサイズになります。
- --catchcopyheight
- ページ内のキャッチコピーの高さになります。
- --windowwidth
- 現在のウィンドウの横幅になります。
- --topDifNum
- stickyで追従するヘッダーの高さになります。
- --columnWidth
- カラムを使用した際のカラムの横幅になります。
- --innerWidth
- ヘッダーやフッターなどのinnerの横幅になります。
- カラー系カスタムプロパティ
- ウェブコンボでは、デフォルトで設定した内容を元に各種カスタムプロパティが自動生成されるようになっています。
-
- --bodyBgColor
- htmlやbodyの背景色になります。
- --defBgColor
- コンテンツの背景色になります。
- --sysBgColor
- システム系の背景色になります。
- --defColor
- 文字色になります。
- --contrastColor
- 文字色の反対色になります。
- --accentColor
- アクセントの色になります。
- --supportColor
- サポートの背景色になります。
- --borderColor
- ボーダーの色になります。
- --topBgColor
- ページトップ時のテーマカラーになります。
- --bottomBgColor
- 主にフッターの背景色になります。
- A0～A99
-
[--defColor][--bodyColor][--contrastColor][--accentColor]ので指定した色はアルファ値を0～99まで指定して色を使用する事ができるようになっています。
それぞれのカスタムプロパティ名の最後にA0～A99を付け加えることで利用可能です。
- レスポンシブ対応
-
ウェブコンボで使用できる各種機能は全てレスポンシブ対応の機能となっています。
また、予め設定されたcodeをbody要素に吐き出すことができるので、cssの@mediaを使用せずにスタイルの設定ができるようになります。
- ウェブコンボの初期設定
- ウェブコンボを使用するための初期設定についての説明です。
- 必要なファイル
-
以下の編集が必要なファイルの編集後フォルダ、ファイルをアップロードして下さい。
編集ファイル
-
-
- /
- サイトのルートフォルダ
-
- index.html
- サイト公開までの間、準備中として表示するページ
-
-
- wcsrc
- ウェブコンボのフォルダ
-
- default.js
- ウェブコンボの基本設定ファイル
-
- base
- ウェブコンボのデバッグ時に使用する各種ファイルが格納されたフォルダ
-
- css
- ウェブコンボの各種cssファイルが格納されたフォルダ
-
- js
- ウェブコンボの各種jsファイルが格納されたフォルダ
-
- fonts
- ウェブコンボのデフォルトのウェブフォントファイルが格納されたフォルダ
-
- icons
- ウェブコンボのデフォルトのアイコンファイルが格納されたフォルダ
-
- sys
- ウェブコンボのテンプレートの読み込み等のシステムファイルが格納されたフォルダ
-
-
- templates
- ウェブコンボ各種テンプレートファイルが格納されたフォルダ
-
- common.tpl
- ページ内に共通のファイルを読み込みするためのテンプレート
-
- footer.tpl
- フッターのテンプレート
-
- head.tpl
- ページ内に共通のファイルを読み込みするためのテンプレート
-
- header.tpl
- ヘッダーのテンプレート
-
- drawermenu.tpl
- ドロワーメニューのテンプレート
-
- columnmenu.tpl
- カラムメニューのテンプレート
-
-
-
-
- img
- 画像を保存するフォルダ
-
-
- favicon
- ファビコンを保存するフォルダ
-
- android-chrome-192x192.png
- PCやandroid用のファビコンデータ
-
- apple-touch-icon.png
- iOS用のファビコンデータ
-
- favicon.ico
- ファビコンデータ
-
- safari-pinned-tab.svg
- ページ読み込み完了までの間表示するsvgデータ
-
-
-
-
- wcadmin
- 管理ページが必要な場合に管理ページの各種ファイルが保存されているフォルダ
-
- index.php
- ログイン後に表示される管理のトップページ
-
- login.php
- ログイン用のページ
-
- sys
- ウェブコンボの管理ページ用テンプレートの読み込み等のシステムファイルが格納されたフォルダ
-
-
- templates
- ウェブコンボ各種テンプレートファイルが格納されたフォルダ
-
- footer.tpl
- フッターのテンプレート
-
- header.tpl
- ヘッダーのテンプレート
-
- headermenu.tpl
- ドロワーメニューのテンプレート
-
- columnmenu.tpl
- カラムメニューのテンプレート
-
-
-
- index.htmlの編集
-
サイト公開までの期間準備中として表示するページになります。
以下の箇所の変更をして下さい。 -
- titleタグのテキスト
-
head内のtitleタグの[SITE NAME]を正しいサイト名に変更して下さい。
- <title>サイト名を記入 / ページ名を記入</title>
- h1タグのテキスト
-
ページ内のh1タグの[SITE NAME]を正しいサイト名に変更して下さい。
- <h1>サイト名を記入</h1>
- pタグのテキスト
-
ページ内のpタグの[SITE NAME]を正しいサイト名に変更して下さい。
- <p>サイト名を記入のウェブサイトオープンに向け～～</p>
- default.jsの編集
-
サイト内で使用する各種色とレスポンシブで切り替える設定をしているファイルになります。
必要に応じて内容を変更してください。 -
- wcDefColors
-
サイト内で使用する各種色が記載されています。
[全体の色]、[ヘッダー関係]、[フッター関係]で必要に応じて色部分を変更してください。
- wcMediaQuery
-
レスポンシブで切り替えの設定が記載されています。
必要に応じて内容を変更してください。
- ファビコンの設定
-
ウェブコンボでは以下の3タイプの画像データを使用しています。
- android-chrome-192×192.png
- apple-touch-icon.png
- favicon.ico
- safari-pinned-tab.svg
-
- ファビコンに使用する画像を選択
-
- iOSのホーム画面用の調整
-
変更する場合は、項目内の[Settings]のタブをクリックし、[Add a solid, plain background to fill the transparent regions.]を選択して色を変更して下さい。
- Androidのホーム画面用の調整
-
iOS同様に背景が透明になりますので、こちらも必要に応じて変更してください。
- Generate your Favicons and HTML codeをクリック
-
- ファビコン一式をダウンロード
-
- zipの中を確認
-
その中から、- android-chrome-192×192.png
- apple-touch-icon.png
- favicon.ico
- safari-pinned-tab.svg
- ウェブフォントの設定
- ウェブコンボでウェブコンボ内のフォントを使用する場合は以下を設定します。
-
- 日本語のフォントの指定
-
htmlタグに[wc-jpfont="使用するフォント名"]を記入して下さい。
- <html wc-jpfont="使用するフォント名"></html>
- 英語のフォントの指定
-
htmlタグに[wc-enfont="使用するフォント名"]を記入して下さい。
- <html wc-enfont="使用するフォント名"></html>
-
上記の指定無しでウェブコンボでウェブコンボ内のフォントを使用する場合は以下を設定します。
- デフォルトフォントの指定
-
htmlタグに[wc-font]を記入して下さい。
- <html wc-font="使用する場合はtrueで使用しない場合はfalse"></html>
-
上記の全ての指定をしなかった場合はブラウザのデフォルトのフォントが使用されるようになります。
- 指定なし/日本語フォント
font-family: "Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
- 指定なし/英語フォント
font-family: "Helvetica Neue","Helvetica","Arial",sans-serif;
- 指定なし/日本語フォント
-
- ウェブコンボのフォント
- ウェブコンボで現在使用できるウェブフォントは以下になります。
- font-family : "Gothic";font-weight : 400;
- font-family : "Gothic";font-weight : 700;
- font-family : "Mincho";font-weight : 400;
- font-family : "Mincho";font-weight : 700;
- font-family : "SansSerif";font-weight : 400;
- font-family : "SansSerif";font-weight : 700;
- font-family : "Serif";font-weight : 400;
- font-family : "Serif";font-weight : 700;
- font-family : "Oswald";font-weight : 400;
- font-family : "Oswald";font-weight : 700;
- font-family : "Number";font-weight : 400;
- font-family : "Number";font-weight : 700;
- htmlファイルの設定
- スライダーについて
- ウェブコンボのスライダーは、レスポンシブ対応の高機能スライダーです。
test
- ウェブアイコンについて
-
ウェブコンボのアイコンは、全てSVGで作成されており、ブラウザ上でどのようなサイズで表示しても劣化することなく使用する事ができます。
基本的にアイコン名を指定するだけで使用可能です。
- QRコードについて
-
ウェブコンボのQRコードは、QRCode.jsを利用した、QRコードを自動生成するプログラムです。
背景色、セルの色、マーク、サイズを指定する事ができ、生成されたQRコードはpng画像として使用する事ができます。
- インビューについて
-
ウェブコンボのインビューは、IntersectionObserverを利用した、可視範囲に要素が入った際に動作するプログラムです。
通常は要素が可視範囲に入ると指定した要素にclass="wcvisible"が設定されます。
また、可視範囲外での動作指定も可能となり、その場合はclass="wcvisible"が外されます。
- インビューの設定
-
監視する要素に[viewtarget]を指定することで利用ができます。
その際に[inview-type]で動作のタイプを指定することができ、指定がない場合は[inview-type="single"]となります。
- [inview-type="single"]又は指定なし
- 指定した要素が対象となり、可視範囲に入ったかどうかを判別します。
- [inview-type="wrap"]
- 指定した要素の子要素が対象となり、可視範囲に入ったかどうかを判別し、子要素に順番にクラスの着脱が行われます。
- [inview-type="page"]
- 指定した要素の子要素が対象となり、可視範囲に入った場合に指定したページを読み込んで表示します。
- [inview-type="count"]
- 指定した要素の子要素が対象となり、可視範囲に入ったかどうかを判別し、指定した別の要素に結果を反映させることができます。
-
- 要素の高さを指定した場合
-
指定した要素の高さが加算されていきます。
例の場合、要素に[margin-bottom: 1vh;]が指定している為、最終のラインの高さが足りなくなってしまいます。 -
[count-type="height"]
[style="height:300px;margin-bottom: 1vh;"][count-type="height"]
[style="height:200px;margin-bottom: 1vh;"][count-type="height"]
[style="height:300px;margin-bottom: 1vh;"][count-type="height"]
[style="height:200px;margin-bottom: 1vh;"][count-type="height"]
[style="height:300px;margin-bottom: 1vh;"][count-type="height"]
[style="height:200px;margin-bottom: 1vh;"][count-type="height"]
[style="height:300px;margin-bottom: 1vh;"][count-type="height"]
[style="height:200px;margin-bottom: 1vh;"][count-type="height"]
[style="height:300px;margin-bottom: 1vh;"][count-type="height"]
[style="height:200px;margin-bottom: 1vh;"][count-type="height"]
[style="height:300px;margin-bottom: 1vh;"][count-type="height"]
[style="height:200px;margin-bottom: 1vh;"]
- 数値を指定した場合
- こちらは指定した数値が加算されていきますので、予めmargin分を含めた数値で設定することで、最終のラインの高さを揃える事ができます。
-
[count-type="number"]
[count-value="31,vh"]
[style="height: 30vh; margin-bottom: 1vh"][count-type="number"]
[count-value="31,vh"]
[style="height: 30vh; margin-bottom: 1vh"][count-type="number"]
[count-value="31,vh"]
[style="height: 30vh; margin-bottom: 1vh"][count-type="number"]
[count-value="31,vh"]
[style="height: 30vh; margin-bottom: 1vh"][count-type="number"]
[count-value="31,vh"]
[style="height: 30vh; margin-bottom: 1vh"][count-type="number"]
[count-value="31,vh"]
[style="height: 30vh; margin-bottom: 1vh"][count-type="number"]
[count-value="31,vh"]
[style="height: 30vh; margin-bottom: 1vh"][count-type="number"]
[count-value="31,vh"]
[style="height: 30vh; margin-bottom: 1vh"][count-type="number"]
[count-value="31,vh"]
[style="height: 30vh; margin-bottom: 1vh"][count-type="number"]
[count-value="15,vh"]
[style="height: 30vh; margin-bottom: 1vh"]
- シェアについて
-
ウェブコンボのシェアは、Web Share APIを利用した、テキスト、URL、ファイルなどのデータを共有するためのプログラムです。
シェアの内容として、テキスト、URL、ファイルのいずれかの一つは必須となっており、タイトルのみのシェアは不可能となっているので、ウェブコンボのシェア機能では、タイトルのみのシェアの場合はテキスト部分としてシェアされるようになります。 -
- タイトルの指定
- [wc-share]を指定した要素に[share-title="ここにタイトルを指定"]でタイトルを指定する事ができます。
-
タイトルを指定してシェア
- テキストの指定
- [wc-share]を指定した要素に[share-text="ここにテキストを指定"]でテキストを指定する事ができます。
-
テキストを指定してシェア
- URLの指定
- [wc-share]を指定した要素に[share-url="ここにURLを指定"]でURLを指定する事ができます。
-
URLを指定してシェア
- ファイルの指定
-
[wc-share]を指定した要素に[share-file="ここにファイル要素を指定"]でファイルを指定する事ができます。
ページ内のinput[type="file"]要素、画像などのファイルを指定するか、直接ファイルパスを指定する事ができます。 -
ファイルを指定してシェア