多分初めて真面目に弄ったレスポンシブテンプレート。

レスポンシブデザイン。最近よくきくアレです。
PC用サイト生成→ブラウザの横幅によりちゃんとリサイズされて表示される、スマホ対応のサイトです。

 

※このサイトのテンプレートです。

 

 

私はクラウドテンプレート・ゴールドプランにあるテンプレートをSIRIUS用にカスタムするのが非常に好きなのですが、レスポンシブ対応にも関わらず今までそのレスポンシブ部分は削除して作成していました。

 

が、やっとそこさえも反映させたSIRIUSテンプレートを作ったのですーヽ(´ー`)ノ
出来たーーー出来たーーーでございますよっ★

 

某SIRIUS好きさんのサイトでは動画で解説とかしてあったから私も真似しようかと思ったけど、技術不足で良く判らないのでキャプチャだけ貼り付け(*ノノ)

表示サンプルのご紹介!(自己満足)

ガチのレスポンシブSIRIUSテンプレートを作った話

PCサイズ(横幅1000px位)だとこんな風⇒

 

画像なので全く判らないと思いますが、ヘッダー画像はスライドショー。
キャプチャーサンプルページはカテゴリーページです。
なので配下子ページリンクはこんな感じ♪
可愛く出来たと、うふうふなるですよ!!

 

 

そして真下↓はタブレットサイズ。
ブラウザの横幅を狭めると、自動的にリサイズされるようにしておりますから、SIRIUSのiphoneサイト生成とかしなくてもちゃんとスマホデザインに変更されます。
(サイトが長すぎて下まで入ってません…)


 

ガチのレスポンシブSIRIUSテンプレートを作った話

 

今回のキャプチャはプレ公開用のデザインなので、仕上がったテンプレートよりちょっとリサイズっプリが違うのですが、それでもこんな感じって…伝わるかな?

 

レスポンシブに対応させるに至って…
SIRIUS自体の制約がとてもとても多かったのは言うまでもないですが、かなり時間をかけて表示確認をしながら作ったので、いわのり的には大満足★

 

でももう…やっぱりクラウドテンプレートをSIRIUS化する時レスポンシブはスルーしよう…と心に誓ったのでした。
労力が半端なさすぎたのでした(*ノノ)

 

色味も7色も作ったし、
ガチパワーサイトにどんどん使うぞーヽ(´ー`)ノ

 

 

SIRIUSテンプレートの作成はHTMLとCSSが判れば簡単に出来るですよ。
私みたいなただのおばちゃんにだって出来るんですから。
理想のテンプレートがあったら是非挑戦されてみてくださいね♪仕上がった時の達成感は凄いですw

この記事の関連ページ

■ SIRIUSの独自タグってどんなん?
SIRIUSは各種ブログなどと一緒で独自タグが設定されていて、そのタグにこの文言って風に表示がされるのです。なのでそれを知ってれば、オリジナルテンプレートが作れるってわけです。
■ 関数について調べてみましょ★
独自タグ・関数表に載ってる関数の使い方をまず説明しましょうか!!
■ メモ★サイドバーのHTML構成
SIRIUSは独自タグで構成されておるので、もれなく定型タグが貼りつきます。うん。今回はサイドバーの話。
■ サイドメニューのHTML構成が変更したいぞ!
良くあることだと思うのですがSIRIUSのサイドメニューの構成は特徴的。
一般的なサイトだとこうなのに…と思っちゃったりしますよね。
それも変更可能です。という話。
■ サイドメニューを固定してみようか。
静的サイト生成ツールSIRIUS様を弄くり倒す。そんないわのりのSIRIUS愛なページです。この溢れんばかりの愛(カスタマイズ魂)を皆様にもお届け!
■ 追加テンプレ2女性向け汎用のカスタム
追加テンプレ2の女性向け汎用が一番使いやすいと思うんだよね。でも、これ縦幅が固定されてるんだ…せめて可変になれば…ってカンタンやーん(*´Д`*)っていう話。
■ そのうちポータルサイトテンプレートも…
シリウスの魅力を活かせばどんなサイトでも出来そうな気がしています…