SIRIUSのレスポンシブウェブデザイン・テンプレートを公開
ということで、
ありそうでなかったレスポンシブウェブデザインのSIRIUSテンプレートの無料公開をしてみます。
まだまだベータ版なので完成度は低いかもしれないけど(随時更新予定)、需要もあるかもしれないので、一応公開しときます♪
デモサイト
(このサイト自体も同じテンプレを使っていますが、配布版未導入の機能も含まれている場合があります)
特徴
①レスポンシブwebデザイン
・PC、スマホ、タブレット等、いろんな媒体に対応させるためのマルチなデザイン
②SEOに拘る
・トップページ以外の<title>は「ページタイトル|サイトタイトル」にする
・h1、h2、h3…の位置を調整
・最もクリック率が高い左上のサイトロゴとなる部分の文言をどのページでも同じになるようにする
等など、色々といじくってます。
③超シンプル設計
・画像は極力使わないシンプルな設計
④広告効果の高いデザイン
・実績豊富なSTINGERの仕様を参考にテンプレを構成
・960px(記事部分=630px、サイドバー=300px)の幅広設計なので、広告を入れやすい
⑤文字コードUTF8に照準を絞った構成に
・現在主流のバイリンガルな文字コードUTF8仕様のテンプレ
・㈱や①等の特殊文字や最近新たに流通しだした顔文字等の文字化け率が低くなる
(。◕‿◕。) ლ(╹◡╹ლ) (´◉◞౪◟◉`)b (☄ฺ◣д◢)☄ฺワシャー ʅ(´◔౪◔)ʃ
⑥SNSボタンを標準搭載
・ツイッター、はてブ、facebook、google+の4つを全ページに配置
⑦追尾型サイドバー
・サイドバーに追尾型エリアを設け、縦長のページになった際の無駄な余白を生じさせない
⑧ページの先頭に戻るボタンを配置
・ニュルーっと「先頭に戻る」ボタンを搭載。ある程度スクロールした時のみ現れる仕様
スポンサーリンク
スポンサーリンク
使用方法
①ダウンロードしたファイルを解凍
②解凍されたフォルダ"SIRIUSカスタム研究所"を「SIRIUSがインストールされているフォルダ\templates」に放り込む
③"サイト全体設定"の"サイトURL(半角英数字)"を入力
④"サイト全体設定"の"テンプレート(必須)"から"SIRIUSカスタム研究所"の"2カラム(右)"を選択して"OKを押す"
※文字コードの関係上からか、プレビューの表示が異常に遅い場合があります
⑤"サイトオプション" → "サイトデザイン"タブ → "文字サイズ・文字の位置"タブ → "ページタイトルの位置/表示"を"非表示(HTMLから削除・推奨)"にする
⑥"サイトオプション" → "iPhoneサイト設定" → "iPhoneサイトを同時生成する"のチェックを外す
使用条件
カスタマイズも商用サイトでの利用も自由にしてもらって結構ですが、二次配布や販売はご遠慮ください。
また、その他ご不明な点は以下までご連絡お願いします。
テンプレートのダウンロード
自作SIRIUSテンプレート更新履歴
2014年12月10日(Ver1.1.0)はてブボタンのデザイン変更+Facebookボタンの位置ズレ修正「追尾型サイドバー」と「ページの先頭に戻るボタン」の動作不良修正(すみません。jsファイルUPし忘れてましたm(_ _)m ご指摘ありがとうございます)2014年11月20日(Ver1.0)「追...
Q&A(SIRIUSレスポンシブデザインテンプレについて)
レスポンシブテンプレについて色々と質問をいただいたので、出来る限りここでその内容を他の皆様と共有したいと思います。 "iPhoneサイトを同時生成する"のチェックを付けたままでも良いですか?はい。問題ありません。当方では、以下を考慮して外す事を推奨しているだけです。別URLが生成される(SNS等のシ...
スポンサーリンク