FC2ブログ - レスポンシブテンプレート全文表示タイプ - Generic
-
sho
FC2ブログ - レスポンシブテンプレート全文表示タイプ - Generic
超シンプルです。トリッキーなものは一切入れていません。
グローバルナビゲーションが追尾するタイプのテンプレートではスマホで見た場合画面の最上部に常にグローバルナビゲーションが張り付いて、肝心の記事本文が表示される面積がただでさえ狭いのにより狭められるのが、私的には面白くない。（私の記事はビッチリ詰め込み型が多いので、今回はグローバルナビゲーションが追尾型でない定点的であるGenericを試してみることになりました。）
18/07/27「試させてください。」でダウンロード、即、適用中。
主にカスタマイズしたいことは「リンクの色の変更」と「背景画像を全て取り払う」です。
Genericはリンクの色が記事とサイドメニューで違うし、トップの背景画像を取っ払うも今まで成功したことがないので、今のところ、前途多難です(-_-;)
2018.10.26記
Genericを適用して直ぐにＳＳＬ化に成功したと記憶しているのですが、最近Google検索の仕様が変わったせいか、URL欄の鍵マークが表示されているのはホームページ（ｈttps://syakoudancetoyama.blog.fc2.com/）のみで、それ以降は「ｉマーク」ばかりが表示されてしまう。(^_^;)
トップページだけでも鍵マークが点灯しているのには大いにありがたいのですがゆくゆくはなんとかしたいと思っています。
鍵マーク この接続は保護されています
お客様がこのサイトに送信した情報（パスワード、クレジットカード番号など）が第三者に見られることはありません。
〇ｉマーク
このサイトへの接続は完全には保護されていません。
このサイトで目にする画像は、悪意のあるユーザーによって差し替えられたものである可能性があります。
レスポンシブテンプレート全文表示タイプGenericのカスタマイズの記録
（2018.10.26現在、このブログはレスポンシブテンプレート全文表示タイプGenericが適用されています）
アクセス解析研究所の解析タグをHTML編集の＜body＞の直下の
＜!-- アクセス解析はここから --＞
＜!-- ここの間 --＞
の間に置いた。
1. 以下の meta タグをコピーして、サイトのホームページにある <head> セクション内の、最初の <body> セクションの前に貼り付けます。
＜meta name="google-site-verification" content="*******************************************" /＞
Ctrl+Fキー検索
s=24
htmlソースの上のほうに1箇所あります。
赤字部分が表示時間の指定で、時間単位です
24で24時間表示。
10日に設定されるのであれば 240 に変更。
私はデフォルトの24のままにしておきました。
この記事を更新する度にアップロード日付を新しくして行くので当分ずっと新着New!マークが点灯したままになると思います。
リンクが掛かっている文字の色が灰色となっているのを、全てGoogle検索のリンク色にしたい。
a:linkというのは、未訪問（未読）のリンク。
a:visitedは、訪問済み（既読）のリンク。
a:hoverは、ポイント時の（マウスポインターを合わせた時の）リンク。
a:activeが、選択中のリンク、つまりクリックした時のリンクです。
Google検索のリンク色
スマホにはマウスオーバーがないので注意
Google検索結果のリンクの色では未読とマウスオーバーは色は同じですが下線が付くかどうかの違いがあります。
以下が基本色調です
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。
例) 51,51,51
rgb(115,122,164) 基本リンク色 など
…いっこだけかい
115,122,164で検索したら12か所
rgb(115,122,164)で検索したら10か所
取り敢えず「注)基本リンク色」の辺りだけを修正してみることにしました。
a {
text-decoration: none;
color: rgb(115,122,164);/* 注)基本リンク色 */
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
a:hover {
color: rgb(51,51,51);
}
↓
a {
text-decoration: none;
color: rgb(26,13,171);/* 注)基本リンク色 */
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
a:visited {
color: rgb(102,0,153);
}
a:hover {
color: rgb(26,13,171);
}
これを実行したら
パソコンで見たら記事内のリンクは未読も既読も同じ紫色っぽいリンク色になった。
パソコンで思い切り古い日付の記事のリンクに色を見たら紫色っぽいのもあれば青色のものも有った。
何か失敗のような感じですが、ひょっとしたらパソコンが古い・汚いとか？
（カテゴリーに飛ぶリンクの色は灰色）
しかしながら、スマホで見ると
未読は青色で既読は紫色っぽいリンク色で明らかに未読と既読の区別が付きます。
スマホでは成功してるように見えます。
うーん(-_-;)なのですが、取り敢えずこうしておこうということにしました。
で、サイドメニューのリンク色は相変わらず灰色のままです。
（但し、楽天市場商品バナーのリンクは青色）
全部青色にするにはどこをカスタマイズすれば良い？
今後の私の課題にしておきます。
私の環境は
NECデスクトップ Windows 7 + Chrome
iPad iOS 11.0 + Mobile Safari
iPad iOS 11.2 + Mobile Safari
AQUOS SERIE SHL25 Android 4.4 KitKat + Chrome
Google先生はRGBや16進数カラーコードの色も教えてくれる | iwb.jp
vanillaice000 リンクの色 - Google検索
vanillaice000 リンク 色 変更 Generic - Google検索
text-transformプロパティ
none テキストを変換しない
uppercase 全ての文字を大文字にする
ブログタイトルが英字の場合で小文字も大文字になってしまう原因にはいろいろあるみたいですが、
「Generic」の場合は「#blog-title」の所で「text-transform: uppercase;」と指定されてるのが原因と思われます。
従って、今回はここだけを「text-transform: none;」と打ち替えれば良さそうに思えます。
因みに「text-transform: uppercase;」を検索すると8か所もヒットしますが今回は最初のだけを修正します。
・・・成功したように見えます。
↑以上、2018/07/27現在、カスタマイズ済み
↓以下、カスタマイズ未済
（vanillaice000さんの他のテンプレートを試している時の記録や参考記事です。
一部、Genericカスタマイズのために私の素人考えで書き替えてたりしています。
このテンプレートの部分的なカスタマイズに成功する度に適宜修正して、「以上」の方に書き写して行くつもりです。）
グローバルナビゲーションのリンクの編集
グローバルナビゲーション＝HOME INDEX ABOUT RSS LOG IN SEARCH
ホーム以外は、新しいタブで開いたほうが、訪問者にとって
ユーザビリティが高く、滞在時間も長くなります。
新しいタブでサイトを開かせるにはURLの後ろに半角スペースの「target=”_blank”」を付け足します。
vanillaice000 グローバルナビゲーション - Google検索
グローバルナビゲーション内Aboutのカスタマイズ
＜li＞＜a href="ここにリンクアドレス"＞テキスト＜/a＞
↓
＜li＞管理ページ
記事送りなどのPREV NEXTは当然有って然るべきものですが、ここに記事のタイトルを表示するのは、、、,,,。
グーグル検索で想定外のキーワードで来訪されることが有りますが、どうもここをGoogleさんが重視してる時が多々あるような。。。...？
なので、PREV NEXTのリンクは残すが記事のタイトルは表示されないようにしたい。
vanillaice000 PREV NEXT - Google検索
vanillaice000 個別記事ブラウザサイドページ送り(カテゴリ間移動) - Google 検索
カテゴリ間移動＝カテゴリー内移動 or 別のカテゴリーとの移動？
ヘッダー内の文字の色を白色から黒色に変更したい
#blog-title a {
color: white;/* 注)ヘッダー内ブログタイトルリンク色 */
}
#site-description {
margin-top: 20px;
width: 100%;
max-width: 850px;
color: white;/* 注)ヘッダー内ブログ説明文文字色 */
line-height: 1.5;
font-size: 1.2rem;
}
background-color: white;/* 注)ヘッダー内上部ナビゲーションハンバーガーボタンの色 */
↓
？？？
その他雑多な情報
Generic以外のテンプレートに関する情報を含みます。
ブログの標準的な文字の大きさ - Google検索
記事のフォントの標準的な文字の大きさ14pxか16PXなので、これより大きくまたは小さくするのは来訪者に任せた方が良い。。。...らしい。
.element-title {
でCtrl+F(Windows)/ Command+F(Mac)キー検索。
text-shadow: 2px 4px 3px rgba(0,0,0,.1);
の直下に以下の内容を追加。
text-align: left;
続いて
header-info {
で検索。
font-size: 1.2rem;
の直下に以下の内容を追加。
text-align: right;
ヘッダー自体の大きさ変更は、
#banner
を検索し、
padding: 150px 0 250px;
150pxがヘッダー上辺からブログタイトルまでの距離、250pxがヘッダーブログ説明文とヘッダー下辺までの距離ですのでそれぞれ調整してください。
#banner {
margin: auto;
width: 100%;
background-color: black;
padding: 150px 0 250px;
text-align: center;
}
↓
#banner {
margin: auto;
width: 100%; background-color: black;
padding: 50px 0 150px;
text-align: center;
}
フォントを大きくしたい件?
/* 注)全体背景色 (approx)White Smoke */
でCtrl+F(Windows)/ Command+F(Mac)キー検索して頂きますと、CSSソース内(管理画面下段)に1箇所ヒットします。
その直近の
font: 13px/1.7 'Roboto', '游ゴシック'?省略
赤字部分が記事内のフォントサイズ指定ですので、大きい数字に変更してください。
文字の変更・背景の変更 | マニュアル | FC2ブログヘルプ
> 記事内フォント大きさ変更
以下の内容をCSS末尾に追加。
.inner-contents {
font-size: 数値px;
}
単位はremでもpxでもOKです。
remを使用する場合は
13px = 1.3rem, 14px = 1.4rem
といったように小数点が必要です。
---------
> サイドメニューのフォント大きさ変更
#secondary {
で検索、その括りの中の
font-size: 1.3rem;
赤字の数値を変更してください。
単位もろとも消去してのpx指定も可。
vanillaice000 - Google検索
vanillaice000 レスポンシブテンプレート 全文表示タイプ - Google検索
レスポンシブテンプレート全文表示タイプGeneric - Google検索
Webテク倉庫 - レスポンシブ
FC2｢共有テンプレート追加｣ vanillaice000さん（＝Akiraさん）の『 Out-of-style 』
The other way round
webのあれこれ - MFIローンチの前にPC版とSP版の表示確認をしましょう
やったぁ～～～ヽ(^。^)ノ - パソコン＆iPhone
ついにわたしのブログも【保護された通信】になりましたぁ～SSL化
FC2ブログのレスポンシブテンプレート全文表示タイプ（作者vanillaice000さん＝Akiraさん）の一覧表
レスポンシブ Responsive 全文表示タイプ カスタマイズ
変更 取替 比較 選ぶ 探す 覚書 メモ
FC2ブログ - レスポンシブテンプレート全文表示タイプ - Generic
無料fc2ブログの常時ＳＳＬ化（ｈｔｔｐｓ化）挑戦録
FC2ブログのレスポンシブテンプレート全文表示タイプ（作者vanillaice000さん＝Akiraさん）の一覧表
(社交ダンス sho)fc2
all ｈｔｔｐｓ
| テンプレート名 | 説明 | 幅px メイン サイド |
背景色 全体 記事欄 サイド |
リンクの色 記事欄 サイド |
グローバルナビゲーション | |
| 1 | Generic ↑プレビューとダウンロード |
専用記事 ↑説明記事 |
810 右320 |
ヘッダー画像 白 白 白 |
薄青 灰 |
定点 |
超シンプルです。トリッキーなものは一切入れていません。
グローバルナビゲーションが追尾するタイプのテンプレートではスマホで見た場合画面の最上部に常にグローバルナビゲーションが張り付いて、肝心の記事本文が表示される面積がただでさえ狭いのにより狭められるのが、私的には面白くない。（私の記事はビッチリ詰め込み型が多いので、今回はグローバルナビゲーションが追尾型でない定点的であるGenericを試してみることになりました。）
18/07/27「試させてください。」でダウンロード、即、適用中。
主にカスタマイズしたいことは「リンクの色の変更」と「背景画像を全て取り払う」です。
Genericはリンクの色が記事とサイドメニューで違うし、トップの背景画像を取っ払うも今まで成功したことがないので、今のところ、前途多難です(-_-;)
2018.10.26記
Genericを適用して直ぐにＳＳＬ化に成功したと記憶しているのですが、最近Google検索の仕様が変わったせいか、URL欄の鍵マークが表示されているのはホームページ（ｈttps://syakoudancetoyama.blog.fc2.com/）のみで、それ以降は「ｉマーク」ばかりが表示されてしまう。(^_^;)
トップページだけでも鍵マークが点灯しているのには大いにありがたいのですがゆくゆくはなんとかしたいと思っています。
鍵マーク この接続は保護されています
お客様がこのサイトに送信した情報（パスワード、クレジットカード番号など）が第三者に見られることはありません。
〇ｉマーク
このサイトへの接続は完全には保護されていません。
このサイトで目にする画像は、悪意のあるユーザーによって差し替えられたものである可能性があります。
レスポンシブテンプレート全文表示タイプGenericのカスタマイズの記録
（2018.10.26現在、このブログはレスポンシブテンプレート全文表示タイプGenericが適用されています）
| アクセス解析研究所の解析タグ |
アクセス解析研究所の解析タグをHTML編集の＜body＞の直下の
＜!-- アクセス解析はここから --＞
＜!-- ここの間 --＞
の間に置いた。
| Search Console - 推奨: HTML タグ |
1. 以下の meta タグをコピーして、サイトのホームページにある <head> セクション内の、最初の <body> セクションの前に貼り付けます。
＜meta name="google-site-verification" content="*******************************************" /＞
| 新着New!マーク |
Ctrl+Fキー検索
s=24
htmlソースの上のほうに1箇所あります。
赤字部分が表示時間の指定で、時間単位です
24で24時間表示。
10日に設定されるのであれば 240 に変更。
私はデフォルトの24のままにしておきました。
この記事を更新する度にアップロード日付を新しくして行くので当分ずっと新着New!マークが点灯したままになると思います。
| リンクが掛かっている文字の色の変更 |
リンクが掛かっている文字の色が灰色となっているのを、全てGoogle検索のリンク色にしたい。
a:linkというのは、未訪問（未読）のリンク。
a:visitedは、訪問済み（既読）のリンク。
a:hoverは、ポイント時の（マウスポインターを合わせた時の）リンク。
a:activeが、選択中のリンク、つまりクリックした時のリンクです。
Google検索のリンク色
| 未訪問（未読） | 訪問済み（既読） （visited） |
マウスオーバー （hover） |
|
|---|---|---|---|
| 十六進 | 1a0dab | 660099 | 1a0dab |
| RGB | rgb(26,13,171) | rgb(102,0,153) | rgb(26,13,171) |
スマホにはマウスオーバーがないので注意
Google検索結果のリンクの色では未読とマウスオーバーは色は同じですが下線が付くかどうかの違いがあります。
以下が基本色調です
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。
例) 51,51,51
rgb(115,122,164) 基本リンク色 など
…いっこだけかい
115,122,164で検索したら12か所
rgb(115,122,164)で検索したら10か所
取り敢えず「注)基本リンク色」の辺りだけを修正してみることにしました。
a {
text-decoration: none;
color: rgb(115,122,164);/* 注)基本リンク色 */
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
a:hover {
color: rgb(51,51,51);
}
↓
a {
text-decoration: none;
color: rgb(26,13,171);/* 注)基本リンク色 */
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
a:visited {
color: rgb(102,0,153);
}
a:hover {
color: rgb(26,13,171);
}
これを実行したら
パソコンで見たら記事内のリンクは未読も既読も同じ紫色っぽいリンク色になった。
パソコンで思い切り古い日付の記事のリンクに色を見たら紫色っぽいのもあれば青色のものも有った。
何か失敗のような感じですが、ひょっとしたらパソコンが古い・汚いとか？
（カテゴリーに飛ぶリンクの色は灰色）
しかしながら、スマホで見ると
未読は青色で既読は紫色っぽいリンク色で明らかに未読と既読の区別が付きます。
スマホでは成功してるように見えます。
うーん(-_-;)なのですが、取り敢えずこうしておこうということにしました。
で、サイドメニューのリンク色は相変わらず灰色のままです。
（但し、楽天市場商品バナーのリンクは青色）
全部青色にするにはどこをカスタマイズすれば良い？
今後の私の課題にしておきます。
私の環境は
NECデスクトップ Windows 7 + Chrome
iPad iOS 11.0 + Mobile Safari
iPad iOS 11.2 + Mobile Safari
AQUOS SERIE SHL25 Android 4.4 KitKat + Chrome
Google先生はRGBや16進数カラーコードの色も教えてくれる | iwb.jp
vanillaice000 リンクの色 - Google検索
vanillaice000 リンク 色 変更 Generic - Google検索
| ブログタイトルが英字の方で大文字縛りをなくしたい |
text-transformプロパティ
none テキストを変換しない
uppercase 全ての文字を大文字にする
ブログタイトルが英字の場合で小文字も大文字になってしまう原因にはいろいろあるみたいですが、
「Generic」の場合は「#blog-title」の所で「text-transform: uppercase;」と指定されてるのが原因と思われます。
従って、今回はここだけを「text-transform: none;」と打ち替えれば良さそうに思えます。
因みに「text-transform: uppercase;」を検索すると8か所もヒットしますが今回は最初のだけを修正します。
・・・成功したように見えます。
↑以上、2018/07/27現在、カスタマイズ済み
↓以下、カスタマイズ未済
（vanillaice000さんの他のテンプレートを試している時の記録や参考記事です。
一部、Genericカスタマイズのために私の素人考えで書き替えてたりしています。
このテンプレートの部分的なカスタマイズに成功する度に適宜修正して、「以上」の方に書き写して行くつもりです。）
| テンプレートGenericで他にやりたいカスタマイズ |
グローバルナビゲーションのリンクの編集
グローバルナビゲーション＝HOME INDEX ABOUT RSS LOG IN SEARCH
ホーム以外は、新しいタブで開いたほうが、訪問者にとって
ユーザビリティが高く、滞在時間も長くなります。
新しいタブでサイトを開かせるにはURLの後ろに半角スペースの「target=”_blank”」を付け足します。
vanillaice000 グローバルナビゲーション - Google検索
グローバルナビゲーション内Aboutのカスタマイズ
＜li＞＜a href="ここにリンクアドレス"＞テキスト＜/a＞
↓
＜li＞管理ページ
記事送りなどのPREV NEXTは当然有って然るべきものですが、ここに記事のタイトルを表示するのは、、、,,,。
グーグル検索で想定外のキーワードで来訪されることが有りますが、どうもここをGoogleさんが重視してる時が多々あるような。。。...？
なので、PREV NEXTのリンクは残すが記事のタイトルは表示されないようにしたい。
vanillaice000 PREV NEXT - Google検索
vanillaice000 個別記事ブラウザサイドページ送り(カテゴリ間移動) - Google 検索
カテゴリ間移動＝カテゴリー内移動 or 別のカテゴリーとの移動？
ヘッダー内の文字の色を白色から黒色に変更したい
#blog-title a {
color: white;/* 注)ヘッダー内ブログタイトルリンク色 */
}
#site-description {
margin-top: 20px;
width: 100%;
max-width: 850px;
color: white;/* 注)ヘッダー内ブログ説明文文字色 */
line-height: 1.5;
font-size: 1.2rem;
}
background-color: white;/* 注)ヘッダー内上部ナビゲーションハンバーガーボタンの色 */
↓
？？？
その他雑多な情報
Generic以外のテンプレートに関する情報を含みます。
| ？ |
ブログの標準的な文字の大きさ - Google検索
記事のフォントの標準的な文字の大きさ14pxか16PXなので、これより大きくまたは小さくするのは来訪者に任せた方が良い。。。...らしい。
| 個別記事のタイトルの左寄せ |
.element-title {
でCtrl+F(Windows)/ Command+F(Mac)キー検索。
text-shadow: 2px 4px 3px rgba(0,0,0,.1);
の直下に以下の内容を追加。
text-align: left;
続いて
header-info {
で検索。
font-size: 1.2rem;
の直下に以下の内容を追加。
text-align: right;
| タイトル部分を小さくする |
ヘッダー自体の大きさ変更は、
#banner
を検索し、
padding: 150px 0 250px;
150pxがヘッダー上辺からブログタイトルまでの距離、250pxがヘッダーブログ説明文とヘッダー下辺までの距離ですのでそれぞれ調整してください。
#banner {
margin: auto;
width: 100%;
background-color: black;
padding: 150px 0 250px;
text-align: center;
}
↓
#banner {
margin: auto;
width: 100%; background-color: black;
padding: 50px 0 150px;
text-align: center;
}
| フォントを大きくしたい |
フォントを大きくしたい件?
/* 注)全体背景色 (approx)White Smoke */
でCtrl+F(Windows)/ Command+F(Mac)キー検索して頂きますと、CSSソース内(管理画面下段)に1箇所ヒットします。
その直近の
font: 13px/1.7 'Roboto', '游ゴシック'?省略
赤字部分が記事内のフォントサイズ指定ですので、大きい数字に変更してください。
文字の変更・背景の変更 | マニュアル | FC2ブログヘルプ
| フォントの大きさ変更 |
> 記事内フォント大きさ変更
以下の内容をCSS末尾に追加。
.inner-contents {
font-size: 数値px;
}
単位はremでもpxでもOKです。
remを使用する場合は
13px = 1.3rem, 14px = 1.4rem
といったように小数点が必要です。
---------
> サイドメニューのフォント大きさ変更
#secondary {
で検索、その括りの中の
font-size: 1.3rem;
赤字の数値を変更してください。
単位もろとも消去してのpx指定も可。
vanillaice000 - Google検索
vanillaice000 レスポンシブテンプレート 全文表示タイプ - Google検索
レスポンシブテンプレート全文表示タイプGeneric - Google検索
Webテク倉庫 - レスポンシブ
FC2｢共有テンプレート追加｣ vanillaice000さん（＝Akiraさん）の『 Out-of-style 』
The other way round
webのあれこれ - MFIローンチの前にPC版とSP版の表示確認をしましょう
やったぁ～～～ヽ(^。^)ノ - パソコン＆iPhone
ついにわたしのブログも【保護された通信】になりましたぁ～SSL化
FC2ブログのレスポンシブテンプレート全文表示タイプ（作者vanillaice000さん＝Akiraさん）の一覧表
レスポンシブ Responsive 全文表示タイプ カスタマイズ
変更 取替 比較 選ぶ 探す 覚書 メモ
FC2ブログ - レスポンシブテンプレート全文表示タイプ - Generic
無料fc2ブログの常時ＳＳＬ化（ｈｔｔｐｓ化）挑戦録
FC2ブログのレスポンシブテンプレート全文表示タイプ（作者vanillaice000さん＝Akiraさん）の一覧表
(社交ダンス sho)fc2
all ｈｔｔｐｓ
