上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
FC2用テンプレート・シングルフェイス

基本テンプレート3枚を更新!
現在バージョンアップし、この記事内容が適応できない部分もあります。

 読みやすさを最大限に得るためのテンプレート、シングルフェイスです。
 Javascriptが普通にオンになっている場合、ダイナミックにHTML、CSSを書き換え、視認性を最大限に確保。
 サイドバーが折りたたまれ、画面右上に収納されます。それに応じて、本文幅を最大限に広げます。

 操作性も落とさないよう、「jQuery」の特徴的な素早い動きで「サイドバーウィンドウ」をスムースにオープンすることも出来ます。
 また、追記部分は、画面遷移なしでオープンクローズが可能。
 さらに、記事詳細画面に進むと、コメントフォームも折りたたまれ、画面右上に収納されます。

 そして、「読みやすさ」を実現するために、フォントサイズも自由に調節でき、さらにクッキーを使用することで、訪問者の一番読みやすいフォントサイズに設定した後は、画面移動しても効果は存続します。
 フォントサイズデータは1週間保持されます。これも、右上のウィンドウ部分に。

 スクリプトをオフにしてウェブサイトをご覧になる方も相当数いることに配慮し、スクリプトが効かない環境では、デザインを継承したシンプルな2カラムテンプレートで表示されます。

2011/3/29 修正版を登録しました。IEで文字がギザギザになっていた問題を回避、Javaスクリプトの微妙なスピードアップと、スムーススクロールに対応致しました。
(ちなみに、このスムーススクロール、クロームとサファリでは動きません…ご容赦ください…何でだろう…?)
…動きました。
jQueryでscrollToを使うときの注意点 - NoteBook
 やっぱり、スクリプトはプロに頼まないとダメかなぁ…?
 こんなに簡単に動くなんて…一生懸命「Math.sin()」とか使ってがんばった一日は何だったんだ…

2011/5/1 さらに修正を重ねたバージョン2.1を登録しました。微妙だったプラグイン(サイドバー)の開閉を修正、新機能の検索バーの問題の修正、その他細かいCSSの調整を完了しました。だいぶ完成度が上がったのではないかと思います。




カスタマイズについて

 Javascriptで動的にスタイルシートを書き換えているテンプレートですので、構造的な部分を改造するカスタマイズには不向きなテンプレートです。

 ただし、背景画像や、背景色、バックグランドイメージなどの見た目を変えるカスタマイズは、普通のテンプレート同様に行うことが出来ます。
 ヘッダー部もフォントサイズが動的に変わるので、背景画像を設定するときは、余裕を持たせたサイズで。


■HTML詳細解説
シングルフェイスを徹底改造しよう




IE6について

 IE6は基本的にはフォローしていませんが、ある程度正常に動作すると思います。本文下の日付などの部分で、RSSアイコンが表示されない箇所がありますのでご注意ください。




クッキーについて

 フォントサイズのみクッキーを使用しています。通常1週間フォントサイズは保持されます。パソコンのセキュリティーの状態によっては、クッキーが機能しない場合もあります。




スクリプトオフ

 スクリプトがオフの場合は、「フェイス・スタンダード」をさらにシンプルにしたイメージのデザインで表示されます。




不具合

 不具合や、見づらい部分があるなどの構造的な問題など、お気づきの点がございましたら、コメントフォームなどからご連絡頂けると幸いです。




テンプレートの特徴


折りたたみアイテム JavaスクリプトがONであれば、サイドバー、コメントフォームが画面右上にコンパクトに折りたたまれます。
 そして、本文部分が900ox幅に広がります。
 文字を魅せるテンプレートで、しかも操作性を損なわないことを主眼に作成しています。
文字サイズ調整バー カラム幅いっぱいに広がった文字、訪問者が見やすいサイズに簡単に変更できるような、スライド式文字サイズ変換バーを入れています。
2カラムコメントフォーム スペースを利用した2カラムタイプです。コメント部分、情報入力部分に分けています。
ブックマークボタン&RSSフィードボタン
 グーグル、ヤフーのマイページに、アイコンクリックで簡単に追加できます。
 RSSフィードは多用途に。

 また、はてなブックマーク追加ボタン、ツイッターボタンで、訪問者の煩雑な作業を軽減。ブログが気に入られたのに、お気に入り登録やフィードの追加がめんどくさくてそのまま忘れられる。と言うのを防ぎます。
記事最下部ナビゲーション 次の記事の導入、新着エントリー、タグリストを本文下部に。
 ページを最後まで読み切ってくれた訪問者への利便性を上昇させています。次のページへのリンクや、新着記事が記事本文直下にあり、間髪入れずに次のページへのご案内。訪問者の興味が別のところに移るのを、なるべく抑える仕組みです。
クールなコメントフォーム 綺麗な便箋に必要事項を入力するイメージです。
 ストレートな入力フォームをデザインして、ソフト・クール・シンプルに。
プラグイン3
 トップページのみに表示されるプラグインです。
 本文部分に表示されます。



テンプレートサイズ

●ヘッダー
900px
●メインカラム
850px
●サイドバー1
264px
●フッター



ブロック構造

<div id="conteinar">
コンテナ
<div id="header">
ヘッダー
</div>
<div class="menu_category">
カテゴリーバー
</div>
<div id="main">
メインカラム
</div>
<div id="side">
サイドバー(画面フロート)
</div>
<div id="footer">
フッター
</div>
</div>




カスタマイズしてみよう


 最低限のテンプレート最適化は施してあります。あとは、自由にテンプレートを改造していくだけ。
 簡単にできるカスタマイズから始めてみよう!

①タイトルロゴで、他のブログに差を付けよう。
②ランキングボタンやブックマークボタンを配置しよう。

 これらのヒントは、カスタマイズカテゴリーの項目にヒントが隠されています。

テンプレート簡単カスタマイズ
世界のブログパーツ




ヘッダー画像・ロゴをオリジナルに

 このテンプレートには、あえてヘッダーに画像を入れていません。
 オリジナルのロゴ画像を挿入し、他のブログに差を付けることを考慮に入れてデザインしています。

■ロゴ作成のチュートリアル
ロゴをデザインしてみよう
CUTIE PHOTOSHOP・キューティーフォトショップアート
 ロゴ | CUTIE PHOTOSHOP・キューティーフォトショップアート

■素材探し
無料写真素材・もみじローカル
きらきらフォントコレクション




テンプレートのダウンロード方法


テンプレートダウンロードは、FC2管理画面の共有テンプレート検索「作者」で

 で、一覧が表示されます。

☆FC2ログイン画面へ
FC2ID


■全テンプレート一覧はこちらから。
テンプレート一覧


 このテンプレートに関してのご質問、不具合は、必ず以下のコメント欄からお願いいたします。FC2サポートやヘルプ等では、恐らく個別のテンプレートに関しての質問は受け付けていないと思いますので…
このエントリーをはてなブックマークに追加
Wed.09.08.2010
Comment
109
シングルフェイスの使用感です
シングルフェイスをダウンロードして利用させてもらっています。使ってみて気づいた点等を利用させていただいたお礼に報告します。

気づいた点
・検索バーを表示する設定になっているとコメントメニューが見事に隠れます。
⇒私は検索バー表示非表示どちらでもよかったので検索バーを消す設定にしました。

・コメントを入力する際に入力フィールドが背景と同じ色なので、マウスで選択する際に戸惑う場合があるようです。
⇒知り合いがコメントしようとして何回かクリックしたのに入力できなくてあせったといってました。

・プラグインのメニューで同じカテゴリ名をクリックしたときに閉じる⇒開くという動作になります。
⇒私はこの動作に違和感があったので、slideUp部分をコメントアウトしました。開いたとこは開きっぱですが・・・ 一応同じ部分をクリックすれば閉じてくれるので・・

文句ばかりな感じになってしまいましたが、このテンプレートは記事本体のスペースが広くてとても気に入っています。これからもかっこいいテンプレートを作ってください。

110
Re: シングルフェイスの使用感です
 ありがとうございます、実際使用して頂いた方のコメントは非常に参考になります。改良試してみます。

122
IEでサイドバーが開きません(~_~)
single-faithを使わせていただいているものです。開閉式のサイドバーが個性的でお気に入りのテンプレートです。

いま自分はダウンロードした初期の方のシングルフェイスに改造を加え、使っています。この前、最新版があるのを知り、ダウンロードして使ってみました。しばらく使ってみたのですがクロームでは上手く作動するのですが、IE8,9などではサイドバーが開かないことがあるみたいです。一応、何回もアンインストールとダウンロードを繰り返して見たのですが、上手く行きませんでしたので現在も初期版のを使わせてもらっています。修正して頂くことはできませんでしょうか?

またこの前自分のブログを改造していたら余計なところを削除してしまったようでバックアップを取っておらず、最新版をDLしてみたのですが、この問題があって困ってしまいました。ご迷惑でなければ初期の方のsingle-faithのHTMLを公開して頂くことはできないでしょうか?(メールでもかまいません)

 ご迷惑なお願いがありましたら申し訳ありません。同じような個性的で機能的なテンプレートは他にみたことがなく、ずっと使っていたいので、不具合の方をお知らせさせていただきました。

124
Re: IEでサイドバーが開きません(~_~)
 確認しました。
 どうも、FC2アナライザーがエラーを出しているようです。
 ちょっと専門的なことは私も解らないんですが、何かウチの方で、使っちゃいけない物を使っているとかカナ?
 アナライザーを外すと正常に動くようです。FirefoxとIE9(多分クロームも)ですが、エラー自体は出ているようですが、ただ単にそれを無視しているだけみたいなので…
 どちらかを諦めていただくしかないのかも…。
 一応確認してみてください。こちらでは完全には解りかねますので…

 アクセス解析なら、Googleアナリティクスとかお勧めですよ。画面上には何も表示されないので、わざわざソースを見ないとアクセス解析を置いていることを悟られることもありませんし。(とか言ってみたりして…)
 クリック先が知りたいなら、「Qlook」と言うアクセス解析がイイと思います。こちらは小さなロゴ表示が必要ですが…どちらも無料の割にはかなり精度が高いと思いますよ。

 すいません、あと、古い方はすでに破棄してしまい…

133
上手くいかないです・・・
 すいません最新版のシングルフェイス、アクセス解析のタグをつける前の段階でメニューバーとフォントサイズ、エントリーオープンが作動しないんです(´Д`)・・・たしかダウンロード時のプレビューからだったと思います(当然解析タグは入っていません)。
http://denjisyaku911.blog25.fc2.com/?template=single-faith&index

134
Re: 上手くいかないです・・・
 なるほど…
 現在ブログ自体は現在はクロームでもIEでも正常に動作しているようです。よね?
 で。プレビュー画面だけですよね? おかしいの。プレビュー画面とブログ表示の時に違うものというと、「プラグイン」が違う場合があるんです。
 FC2のシステム的な部分なのか何なのかは私には分かりませんが、「昔実装し、今はとっくに外しているサイドバープラグイン」さらに「プラグイン3」と言うヤツが、プレビュー画面の時だけ残っている場合があるみたいなんです。


 もしかしたら、サイドバーに何かのスクリプトが残っているか、或いは「プラグイン同様に、テンプレート側にも何かキャッシュのようなものが残っている」のかも知れません。
 テンプレートをプレビューするときは、テンプレート編集画面のHTML或いはCSS編集ボックス下「更新」「プレビュー」のボタンのプレビューの方で確認してみてください。こちらは、純粋に「最新の状態・ボックスのHTML」でのプレビューになるみたいです。


 申し訳ない、ウチのブログでテンプレートを適応した場合は、正常に動作するんです。
 もし、プレビューではなく普通にシングルフェイスを適応→パソコン・ブラウザのキャッシュクリア→閲覧して異常が出た場合、これは私の手には負えません。

 確認する際なんですが、テンプレートを適応した後、色々ブログ内をページ移動をしてみて下さい。正常に動作するページ、異常なページがあれば、記事に問題がある場合が多いです。
 トップページだけおかしければ、プラグイン3に何か衝突するスクリプトが入っている場合があります。


…多分ですが、「?template=single-faith&index」で見る場合のプレビューはブログの最新の状態ではない可能性があるので、それが原因じゃないかと思うのですが…

136
そうですか・・・
 わかりました。一応思いつくことはすべてやってみてだめでしたので・・・。

現在クロームでジャバスクリプトが作動しないようで、作動する前提で画像幅を決めていて、いま見ずらくなってまして・・・。新しいのをDLしようとしたのですが・・・

上手く行く時と上手くいかない時があるようですね。分かりました。ありがとうございました。

137
Re: そうですか・・・
 う~ん…
 うちのクロームでは、電磁石。さんのテンプレートは正常に動いているんですが…

 もしかしたら、若干何か「ダウンロード」が遅いサイトのブログパーツか何かを使っておられませんか?
 このテンプレートは、「jQuery」というライブラリを使用していて、テンプレートすべての描画が終わってから、スクリプトが作動するようになっています。
 テンプレート全体を「jQuery」で操作するため、どうしてもこのようなタイミングでスクリプトを作動させないとエラーが出てしまうのです。

 もしも、ロードが遅い素材を置いていたり、FC2が重くて、なかなか最後までブログが表示されない場合、スクリプトはブログ全体が描画されるまで動作待ちとなっているので、それだけ最終的な描画も遅くなってしまいます。
 ブラウザによっては、画面下に「~の応答を待っています」とか「~から呼び出しています」などと小さく表示されるものもありますので、それで「ダウンロードが遅い素材・ブログパーツなど」を特定し、何か別のツールに変えて頂くか、FC2本体が重いときは、テンプレートが最後まで読み込まれるまで待って頂くしかない状態です。


 上手くいくとき、上手くいかないときがある可能性があるのは、プレビュー画面の時です(プレビュー画面で不具合が出ても、訪問者はプレビュー画面を見ることはないので…)。普通にブログを表示したときは、FC2は他社と比べても引けを取らないかなり安定した高品質なブログサービスですので、あまりそういう不具合はないハズと思います。

…後は、「クロームのキャッシュ」か「クロームのスクリプトの設定」か…

138
キャッシュ
あ!今キャッシュをすべて削除してみたんですが、上手く作動しました!!

不勉強だったせいみたいです。お騒がせしました。大変申し訳ないです!

 


Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。