facileはフラットデザインCSSボタンが利用可能です。

※この機能の使い方は、特典テンプレートfacile、fine、grandで共通となっております。

 

SIRIUS特典レスポンシブテンプレートfacileボタン画像1

SIRIUS特典レスポンシブテンプレートfacileボタン画像2


 

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ボタンのカスタマイズの場合、
編集 > スタイルシート編集を開いて、

 

SIRIUS特典レスポンシブテンプレートfacileCSSボタンカスタマイズPC表示

 

上記箇所がPCとタブレットで表示される箇所のカスタマイズが可能で、

 

スマホの場合は、

 

 

SIRIUS特典レスポンシブテンプレートfacileCSSボタンカスタマイズスマホ表示

 

上記箇所になります。

 

スマホで表示されるボタン画像の幅は、画面の大きさに対して93%にしています。
文字が入りきらない場合は97%にするなり、フォントサイズを小さくするなどの対応をすると良いと思います。

 

 

変更したら「保存」をクリックして、サイト生成>アップロードをお忘れなく!

 

 

もしCSSファイルだけアップロードしたい場合は、

 

SIRIUSスタイルシートのアップロード

 

FTP上からstyle.cssのファイルを右クリックしてアップロードを選択すればOKです。
ページ数が多いサイトでCSSをカスタマイズした場合は、このアップロード方法が短時間で済みます。

 

【管理人マナからの告知】
今ならほとんどの商品で新作テンプレが使える!申込期限は2017年11月30日中迄!
シリウス特典カスタムテンプレートB広告

新作はお陰様で大好評頂いております!期間限定でキュート版配布中! SIRIUS特典テンプレートfinegrandバナー

関連ページ一覧

【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時より前にダウンロードした方は、大変お手数ですが以下の修正を宜しくお願い致します。*バグ内容吹き出し機能を立ち上げるとエラー表示が出る(シリウ...

続きを読む


SIRIUSの機能解説 限定特典ご案内 限定特典付き購入方法 カスタマイズ&小技 アフィリエイトログ