FC2ブログで使えるテンプレートを配布しています
01SP_Redを申請中です |
||
スマートフォン用FC2テンプレート【01SP_Red】を申請中です。どのくらい時間かかるかな?
運営しているサイトのアクセス解析等を行っていると、スマートフォンからのアクセスがどんどん増えている傾向が見られました。
これからはスマホの時代というわけですね(´∀`)
各箇所マイナーチェンジしております。
現在公開しておりません
スポンサードリンク
で、そんなこんなで現在スマートフォン用に力を入れています。
スマートフォン用になるとPC用のテンプレートに比べてカスタマイズ性が少なく、プラグインが少ないことも考えると、
独自の機能等で差別化を図るしかないのかなぁ・・・とか考えています。
ドロップダウンメニュー等はもちろんのこと、下部に常に表示されるようなナビゲーションバーなんかも付けてみたいなーとか考えています。でも、下部にナビバー付けると、FC2の下にずっと付いてくるオーバーレイ広告と被ってしまって、ボタン押せなくなったりするので、意味ないかな・・・とか思っています。
スマホ用テンプレートに、 ブログの上部にスクロールしても常に表示されるメニューバーっぽいものを設置したいで設定しているtop: 0;って箇所をbottom: 0;にしてあげたら常に下にくっつくようになるので、簡単作れるのですが、広告なんとかならないかなー。

タイトル部分の濃い赤色は、もうちょっと薄くても良かったかもしれません。
メニューバーのCATEGORYとCOMMENTはドロップダウンメニューに対応しています。

個別記事ページと、プラグインページです。下部の4つのアイコンはそれぞれ「ホームへ」「記事の上へ」「ログイン」「メールで友達に教える」です。アイコンのURLさえ変えれば自作のアイコンも使用可能です。

関連記事まわりは改善の余地アリです。
「コメント()」、「コメントを書く」もドロップダウンに対応しています。
公式テンプレートでは、コメントを書くページやコメント閲覧ページでは、元の記事を見ることができなかったため、このテンプレートでは個別記事と同じ箇所にコメント閲覧とコメント投稿をできるように改造しています。
その分、コメントを書く際に入力したURLの表示ができなくなってしまいました。
使用カラーも少なくし、簡単に色替えできるようにしました。
SP01_GrayやSP01_Blueの色違いなだけかと思いきや、各箇所マイナーチェンジしております。
もしかすると不具合があるかもしれませんが、もしよければダウンロードしてくださいね(^-^)
運営しているサイトのアクセス解析等を行っていると、スマートフォンからのアクセスがどんどん増えている傾向が見られました。
これからはスマホの時代というわけですね(´∀`)
各箇所マイナーチェンジしております。
現在公開しておりません
スポンサードリンク
で、そんなこんなで現在スマートフォン用に力を入れています。
スマートフォン用になるとPC用のテンプレートに比べてカスタマイズ性が少なく、プラグインが少ないことも考えると、
独自の機能等で差別化を図るしかないのかなぁ・・・とか考えています。
ドロップダウンメニュー等はもちろんのこと、下部に常に表示されるようなナビゲーションバーなんかも付けてみたいなーとか考えています。でも、下部にナビバー付けると、FC2の下にずっと付いてくるオーバーレイ広告と被ってしまって、ボタン押せなくなったりするので、意味ないかな・・・とか思っています。
スマホ用テンプレートに、 ブログの上部にスクロールしても常に表示されるメニューバーっぽいものを設置したいで設定しているtop: 0;って箇所をbottom: 0;にしてあげたら常に下にくっつくようになるので、簡単作れるのですが、広告なんとかならないかなー。


タイトル部分の濃い赤色は、もうちょっと薄くても良かったかもしれません。
メニューバーのCATEGORYとCOMMENTはドロップダウンメニューに対応しています。


個別記事ページと、プラグインページです。下部の4つのアイコンはそれぞれ「ホームへ」「記事の上へ」「ログイン」「メールで友達に教える」です。アイコンのURLさえ変えれば自作のアイコンも使用可能です。

関連記事まわりは改善の余地アリです。
「コメント()」、「コメントを書く」もドロップダウンに対応しています。
公式テンプレートでは、コメントを書くページやコメント閲覧ページでは、元の記事を見ることができなかったため、このテンプレートでは個別記事と同じ箇所にコメント閲覧とコメント投稿をできるように改造しています。
その分、コメントを書く際に入力したURLの表示ができなくなってしまいました。
使用カラーも少なくし、簡単に色替えできるようにしました。
CSS上で、Ctrl+Fで検索して置換していただければきれいに色替えできるかと思います。メインカラー :#B22222(濃)
メニューカラー:#FF3333(鮮)
サブカラー :#FFFAFF(薄)
ラインカラー :#DDBBDD(線)
SP01_GrayやSP01_Blueの色違いなだけかと思いきや、各箇所マイナーチェンジしております。
もしかすると不具合があるかもしれませんが、もしよければダウンロードしてくださいね(^-^)
繝?せ繝?
[ 2013/09/29 10:34 ]
[ 編集 ]
トップ絵について
yuta様、はじめまして。
スマートフォン用テンプレート「01SP_Blue」について少々伺いたい事があります。
タイトル部分をトップ絵に入れ替えたいのですが、どうしても左右にサイズが合わずに半分くらいしか表示されません。
画像サイズは幅640px。サイドにテンプレート画像のブルーの雲?画像が表示されています。
初歩的な質問で申し訳ありませんが、ご回答頂けると幸いです。
スマートフォン用テンプレート「01SP_Blue」について少々伺いたい事があります。
タイトル部分をトップ絵に入れ替えたいのですが、どうしても左右にサイズが合わずに半分くらいしか表示されません。
画像サイズは幅640px。サイドにテンプレート画像のブルーの雲?画像が表示されています。
初歩的な質問で申し訳ありませんが、ご回答頂けると幸いです。
[ 2013/10/04 05:09 ]
[ 編集 ]
Re: Re: トップ絵について
コメントありがとうございます。
HTML編集にて、<h1>~</h1>を以下のように変更したと仮定します。
<h1>
<a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="画像URL" border="0" /></a>
</h1>
この場合、私も確かに画像が中途半端な表示しかされないのを確認いたしました。
解決方法として、CSS編集にて、以下の赤い箇所を変更または追加してみてください。
/*============================================================
●●ヘッダー●●
============================================================*/
/****************************** ▼全体▼ */
#header {
position:relative;
min-height: 60px;
margin:0 0 0px;
padding: 0 0px;
background-color:#B22222; /* ヘッダ背景色(全体)*/
color:#FEFEFE; /* ヘッダ文字色 */
text-align: center; /* 中央寄せ */
background:url("http://blog-imgs-42.fc2.com/x/x/n/xxnostalgiaxx/17_s.jpg")
}
/****************************** ▲全体▲ */
/****************************** ▼タイトル文字部分▼ */
#header h1 {
overflow: hidden;
width: 100%;
margin:0 auto;
padding: 0px 0;
font-size:20px; /* 文字の大きさ */
text-overflow: ellipsis;
white-space: nowrap;
}
#header img {
width: 100%;
}
#header h1 a { color:#FFFFFF;} /* 文字色 */
#header h1 a :hover{ color:#FFFFFF; } /* 触れた時の文字色 */
/****************************** ▲ヘッダタイトル部分▲ */
もし不要でしたら
background:url("http://blog-imgs-42.fc2.com/x/x/n/xxnostalgiaxx/17_s.jpg")
は削除してくださいね。
#header imgで、width: 100%;を設定しています。
挿入したTOP画像がどんな大きさであろうとも、テンプレートの横幅100%の大きさの画像になるように調整してあります。もし、大きすぎる場合などがありましたら、値を変更してみてください。
yuta様、はじめまして。
スマートフォン用テンプレート「01SP_Blue」について少々伺いたい事があります。
タイトル部分をトップ絵に入れ替えたいのですが、どうしても左右にサイズが合わずに半分くらいしか表示されません。
画像サイズは幅640px。サイドにテンプレート画像のブルーの雲?画像が表示されています。
初歩的な質問で申し訳ありませんが、ご回答頂けると幸いです。
HTML編集にて、<h1>~</h1>を以下のように変更したと仮定します。
<h1>
<a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="画像URL" border="0" /></a>
</h1>
この場合、私も確かに画像が中途半端な表示しかされないのを確認いたしました。
解決方法として、CSS編集にて、以下の赤い箇所を変更または追加してみてください。
/*============================================================
●●ヘッダー●●
============================================================*/
/****************************** ▼全体▼ */
#header {
position:relative;
min-height: 60px;
margin:0 0 0px;
padding: 0 0px;
background-color:#B22222; /* ヘッダ背景色(全体)*/
color:#FEFEFE; /* ヘッダ文字色 */
text-align: center; /* 中央寄せ */
background:url("http://blog-imgs-42.fc2.com/x/x/n/xxnostalgiaxx/17_s.jpg")
}
/****************************** ▲全体▲ */
/****************************** ▼タイトル文字部分▼ */
#header h1 {
overflow: hidden;
width: 100%;
margin:0 auto;
padding: 0px 0;
font-size:20px; /* 文字の大きさ */
text-overflow: ellipsis;
white-space: nowrap;
}
#header img {
width: 100%;
}
#header h1 a { color:#FFFFFF;} /* 文字色 */
#header h1 a :hover{ color:#FFFFFF; } /* 触れた時の文字色 */
/****************************** ▲ヘッダタイトル部分▲ */
もし不要でしたら
background:url("http://blog-imgs-42.fc2.com/x/x/n/xxnostalgiaxx/17_s.jpg")
は削除してくださいね。
#header imgで、width: 100%;を設定しています。
挿入したTOP画像がどんな大きさであろうとも、テンプレートの横幅100%の大きさの画像になるように調整してあります。もし、大きすぎる場合などがありましたら、値を変更してみてください。
yuta様、はじめまして。
スマートフォン用テンプレート「01SP_Blue」について少々伺いたい事があります。
タイトル部分をトップ絵に入れ替えたいのですが、どうしても左右にサイズが合わずに半分くらいしか表示されません。
画像サイズは幅640px。サイドにテンプレート画像のブルーの雲?画像が表示されています。
初歩的な質問で申し訳ありませんが、ご回答頂けると幸いです。
[ 2013/10/04 14:32 ]
[ 編集 ]
Re: Re: トップ絵について
yuta様、ご丁寧に解説して頂きどうもありがとうございます。
当方全くの初心者なのでとても助かります。
該当部分の変更、追加したところ、お陰様でPC版のグーグルクロームではきちんと表示されるようになりました。
しかし、手持ちのスマホ3機種(GALAXYSⅢ等)のブラウザでは余白が出来てしまいます…
また、当初からなのですが、右下のメールアイコンが大きくなり、その他アイコンの下に空白部分が出来てしまっているので、もしかしたら私のスマホのブラウザ?画面サイズのせいできちんと表示できていないだけなのかもしれません。
お忙しいところ申し訳ありませんが、何か解決法があれば教えて頂きたく存じます。
当方全くの初心者なのでとても助かります。
該当部分の変更、追加したところ、お陰様でPC版のグーグルクロームではきちんと表示されるようになりました。
しかし、手持ちのスマホ3機種(GALAXYSⅢ等)のブラウザでは余白が出来てしまいます…
また、当初からなのですが、右下のメールアイコンが大きくなり、その他アイコンの下に空白部分が出来てしまっているので、もしかしたら私のスマホのブラウザ?画面サイズのせいできちんと表示できていないだけなのかもしれません。
お忙しいところ申し訳ありませんが、何か解決法があれば教えて頂きたく存じます。
[ 2013/10/04 23:14 ]
[ 編集 ]
Re:Re: Re: トップ絵について
http://10lab.blog.fc2.com/?spのように、当サイトのトップ絵を変更してみましたが、PC、スマホ(T-01D、F-06E)、タブレット(NEXUS7)共に特に余白は見られませんでした。
トップ絵の画像自身に余白などはないでしょうか?もしよろしければ、サイト又はトップ絵を見せていただけたらと思っています。その際は右下のメールフォームからURLを送って頂ければと思います。
バグのご指摘ありがとうございます。確かにメールアイコンだけが大きくなっていました(^_^;)
CSS編集にて、
/*============================================================
●●下部ナビ●●
============================================================*/
/****************************** ▼下部ナビ▼ */
#page_navi {
overflow:hidden;
border-bottom: 3px solid #B2D5E6; /* 枠線色 */
}
#page_navi li {
min-width:25%;
border: 0px solid #B2D5E6; /* 枠線色 */
}
#page_navi .page_home{ float:left; margin:0px;} /* ホーム 左寄せ */
#page_navi .page_top { float:left; margin:0px;} /* ページトップ 右寄せ */
#page_navi .login { float:left; margin:0px;} /* ログイン 左寄せ */
#page_navi .osieru { float:left; margin:0px;} /* 教える 右寄せ */
赤の箇所のようにwidthをmin-widthとしてみてください。おそらく改善されるかと思います。
また、レイアウト自体に影響を与えるものではありませんが、青い箇所も訂正して頂ければと思います。完全に表記ミスをしておりました。申し訳ありません(´Д`;)
トップ絵の画像自身に余白などはないでしょうか?もしよろしければ、サイト又はトップ絵を見せていただけたらと思っています。その際は右下のメールフォームからURLを送って頂ければと思います。
バグのご指摘ありがとうございます。確かにメールアイコンだけが大きくなっていました(^_^;)
CSS編集にて、
/*============================================================
●●下部ナビ●●
============================================================*/
/****************************** ▼下部ナビ▼ */
#page_navi {
overflow:hidden;
border-bottom: 3px solid #B2D5E6; /* 枠線色 */
}
#page_navi li {
min-width:25%;
border: 0px solid #B2D5E6; /* 枠線色 */
}
#page_navi .page_home{ float:left; margin:0px;} /* ホーム 左寄せ */
#page_navi .page_top { float:left; margin:0px;} /* ページトップ 右寄せ */
#page_navi .login { float:left; margin:0px;} /* ログイン 左寄せ */
#page_navi .osieru { float:left; margin:0px;} /* 教える 右寄せ */
赤の箇所のようにwidthをmin-widthとしてみてください。おそらく改善されるかと思います。
また、レイアウト自体に影響を与えるものではありませんが、青い箇所も訂正して頂ければと思います。完全に表記ミスをしておりました。申し訳ありません(´Д`;)
[ 2013/10/05 13:17 ]
[ 編集 ]
Re:Re: Re: トップ絵について
yuta様、何度もご丁寧に解説して頂きどうもありがとうございます。
どうやら修正後の更新が上手くいっていなかったようで、何度も繰り返していたらきちんと表示されるようになりました。
この度はとても親切に対応して頂きましてどうもありがとうございました。
とても使いやすく素敵なテンプレートなので、これからも大事に使わせて頂きます。
どうやら修正後の更新が上手くいっていなかったようで、何度も繰り返していたらきちんと表示されるようになりました。
この度はとても親切に対応して頂きましてどうもありがとうございました。
とても使いやすく素敵なテンプレートなので、これからも大事に使わせて頂きます。
[ 2013/10/05 22:29 ]
[ 編集 ]
コメントの投稿
トラックバック
検索フォーム
スマートフォン用テンプレート
TopNTagCloud
フリーエリア
メールフォーム
何か質問等ありましたらお気軽にお問い合わせください。
RSSリンクの表示
最新コメント
最新トラックバック
ブロとも申請フォーム