facileはフラットデザインCSSボタンが利用可能です。
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。
facileではランキング機能のカラーボタンとは別に、コンテンツのどの部分でも気軽にテキストも変更して設置できるCSSボタンタグを表示させることが出来ます
これもレスポンシブ対応になっておりますので安心してご利用ください。
こういうフラットデザインボタンが主流になってきましたので、【facile】でも簡単に設置できるようにしています。
画像ボタンの場合、スマホで表示させると粗く見えてしまう欠点があります。
しかしCSSボタンの場合は、画像ではないためボタンが綺麗に見えるというメリットがあります。
なお、青・橙・緑・シアン・赤・桃の6カラーX2で12種類のコードを予め搭載しています。
1はマテリアルデザインカラー、2は原色です。
フラットデザインCSSボタンタグのHTMLコード
下記コードはコピペして利用できます。
URLとテキストは各自変更してください。
<p class="fbutton_blue1"><a href="<% pageDepth %>category2/entry31.html">フラットデザインボタン【青1】</a></p>
<p class="fbutton_blue2"><a href="<% pageDepth %>category2/entry31.html">フラットデザインボタン【青2】</a></p>
<p class="fbutton_orange1"><a href="<% pageDepth %>category2/entry31.html">フラットデザインボタン【橙1】</a></p>
<p class="fbutton_orange2"><a href="<% pageDepth %>category2/entry31.html">フラットデザインボタン【橙2】</a></p>
<p class="fbutton_green1"><a href="<% pageDepth %>category2/entry31.html">フラットデザインボタン【緑1】</a></p>
<p class="fbutton_green2"><a href="<% pageDepth %>category2/entry31.html">フラットデザインボタン【緑2】</a></p>
<p class="fbutton_cyan1"><a href="<% pageDepth %>category2/entry31.html">フラットデザインボタン【シアン1】</a></p>
<p class="fbutton_cyan2"><a href="<% pageDepth %>category2/entry31.html">フラットデザインボタン【シアン2】</a></p>
<p class="fbutton_red1"><a href="<% pageDepth %>category2/entry31.html">フラットデザインボタン【赤1】</a></p>
<p class="fbutton_red2"><a href="<% pageDepth %>category2/entry31.html">フラットデザインボタン【赤2】</a></p>
<p class="fbutton_pink1"><a href="<% pageDepth %>category2/entry31.html">フラットデザインボタン【桃1】</a></p>
<p class="fbutton_pink2"><a href="<% pageDepth %>category2/entry31.html">フラットデザインボタン【桃2】</a></p>
ボタンカラーやテキストサイズのカスタマイズ方法
ボタンカラーやテキストサイズのカスタマイズですが、
例えば 青1のCSSボタンのカスタマイズの場合、
編集 > スタイルシート編集を開いて、
上記箇所がPCとタブレットで表示される箇所のカスタマイズが可能で、
スマホの場合は、
上記箇所になります。
スマホで表示されるボタン画像の幅は、画面の大きさに対して93%にしています。
文字が入りきらない場合は97%にするなり、フォントサイズを小さくするなどの対応をすると良いと思います。
変更したら「保存」をクリックして、サイト生成>アップロードをお忘れなく!
もしCSSファイルだけアップロードしたい場合は、
FTP上からstyle.cssのファイルを右クリックしてアップロードを選択すればOKです。
ページ数が多いサイトでCSSをカスタマイズした場合は、このアップロード方法が短時間で済みます。
関連ページ一覧
【facile】テンプレートのインストール方法 | ホームページ作成ソフトSIR...
特典サイトにて2商品購入者用IDとパスを入力し、テンプレートファイルをダウンロードします。ダウンロードファイルはZIPファイルになっているので、ダブルクリックして解凍します。解凍されたフォルダを開いてください。ランキング機能の付加方法次に、...
【facile】利用画像のサイズ幅 | ホームページ作成ソフトSIRIUS
facileで利用できる画像幅について解説します。【facile】テンプレート推奨画像サイズヘッダー部分・・・最大幅980pxコンテンツ部分・・・最大幅610px(これより大きい幅は自動リサイズされる)サイドバー広告部分・・・PCでは幅29...
【facile】PCとスマートフォン表示切替設定方法 | ホームページ作成ソフト...
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。【facile】デモサイトを見て頂ければ分かりますが、コンテンツの一部分がPC端末で見た場合と、スマートフォン端末で見た場合で表示される画像・文...
【facile】追尾機能とフリースペースを増やす方法 | ホームページ作成ソフト...
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。このテンプレートではメインメニュー(下段)部分が自動で追尾されます。特別な設定は必要はありません。追尾チェックの注意点なお、テンプレートを初めて...
【facile】ランキング機能ボタン画像カラーの変更方法 | ホームページ作成ソ...
「画像管理」を開くと、「詳細ページはこちら」と「公式ページはこちら」のボタンのカラーバリエーションが同梱されています。「詳細ページはこちら」は、「button_more.png」が、「公式ページはこちら」は、「button_official...
【facile】youtube、Googlemapのレスポンシブタグ | ホーム...
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。youtubeの埋め込みタグは動画上で右クリックをすると取得できますが、それをSIRIUSの編集画面上にそのまま貼り付けてしまうと、スマホなどで...
【facile】個別ページのヘッダー画像変更方法 | ホームページ作成ソフトSI...
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。レスポンシブテンプレートの仕様上の都合で、エントリーページ(個別ページ)のヘッダー画像をトップページのものと別の画像にしたい場合は、HTMLのカ...
【facile】フラットデザインCSSボタンの活用 | ホームページ作成ソフトS...
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。facileではランキング機能のカラーボタンとは別に、コンテンツのどの部分でも気軽にテキストも変更して設置できるCSSボタンタグを表示させること...
【facile】グローバルメニューの横並びの数について | ホームページ作成ソフ...
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。【facile】PCで見えるテンプレートのグローバルメニューは、1列5個までの設定となっています。メニューの6個目以降は2列目に配置される仕様で...
【facile】スマホで見た時のフォントサイズ変更 | ホームページ作成ソフトS...
※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。SIRIUSのテンプレートは、サイトオプションから文字サイズの調整が出来ます。これはfacileも同様ですが、ここで指定した文字サイズは、スマー...
【facile】サイトマップ修正の件
お世話になっております。マナです。facileオレンジのサイトマップファイルに不具合が発見されました。私が制作中のサイトマップHTMLファイルをテンプレートに入れてしまっており、サイトマップにしっかりした表示がされない不具合がございます。お...
【facile】スタイルシート一部ファイル削除の件
お世話になっております。facileテンプレートのバグが見つかりました為、2015年11月3日21時より前にダウンロードした方は、大変お手数ですが以下の修正を宜しくお願い致します。*バグ内容吹き出し機能を立ち上げるとエラー表示が出る(シリウ...