スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

bootstrap3のaffixの動作がおかしい対処

bootstrap3のaffixを使ってみたら、スクロールすると追従する方のコンテンツの横幅が変わってしまう&一番下まで行った時に上に戻ろうとすると一番上に戻ってしまう現象に遭遇。
それぞれどうもbootstrapのバグみたいだけど、わりと簡単に直ったのでメモ。
bootstrapは3.3.4。

1.横幅が変わってしまう
Affixプラグインでスクロール時に横幅が変わってしまう場合
この方は横幅が小さくなってしまうみたいだけど、同じ対処でおk。

調整用のjsを新たに作ってそこにコピペでbootstrapのjsよりあとに読み込ませればおっけー。

StackOverFlowにも同様の問題の対処法が載ってます。(コードが少し違うけど)
Bootstrap 3.0 affix with list changes width

affix起動時に一瞬ちらつくような感じがするけどまぁ解決。

2.一番下までスクロールしたあと戻ろうとすると位置がおかしくなる
一番下までスクロールするときはついてくるけど切り返すと一番下に固定されてる。で、一番上まで戻ると最初の位置になり、またスクロールしても追従してくる。
要は一番下まで行ったあと上に戻るときに追従してくれないということ。

Bootstrap3のAffixバグについて
Bootstrap 3.0 affix with list changes width

結局.affix-bottomクラスが付与され解除されないのが問題みたい。
これはCSSで解決可能。

affix-bottom にposition relativeを追加するだけ。
jsとcss両方でなんとかしてる人もいるみたいだけど、一応これだけで解決。

Affixってなんか難しい上にちょっとバグ多い気がするので、bootstrapでサイト制作しててもこの部分は外部jqueryプラグインとか使って同じような動きを実現したほうが早くて簡単かも知れません。

関連記事
ド素人だけどBootStrapでサイトを作ってみるよ
久々のテンプレ変更
Bootstrap3を使ってFC2ブログのテンプレを作ろうその一
Bootstrap3を使ってFC2ブログのテンプレを作ろうその二
Bootstrap3でFC2のテンプレを作ろう 2回目( blue-navbar )
Bootstrap3でFC2のテンプレを作ろう 2回目( lightgreen-navbar,black-navbar,white-navbar )
スポンサーサイト
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

新年明けましてテンプレート不承認

新年あけましておめでとうございます。
新年早々なんですが、年末に共有申請出してたテンプレートのうちのwhite版が不承認でした。
いや、前回blueで不承認だったんで、FC2検索バーを表示するように直してwhite、black、blue、lightgreenと一気に出してたんですけどね。

【テンプレート名】
blue-navbar

【不承認理由】
・FC2検索バーが表示されていないため。
原因はnavbar-fixed-topがFC2検索バーを隠してしまっていたこと。なのでnavbarのCSSにmargin-top: 27px; を追記してリベンジ。


修正のかいあって、white以外は通ったのでほしい方は共有からDLしてくださいな。例によってカスタマイズはご自由にどーぞな感じで、例によってビミョーに不具合(ドロップダウンが長いと表示しきれない)とかございますけれども。

1.なんで不承認だったし

平素はFC2ブログをご愛用頂き誠にありがとうございます。
今回共有テンプレートにご申請いただいた、[ basic_white ]ですが、
下記の理由により今回は承認を見送らせていただきます。

それでは次回のご申請の際もよろしくお願いいたします。
━━━━━━━━━━━━━━━━━━━━━━━━━━━
【テンプレート名】
basic_white

【不承認理由】
・公式テンプレートと差異が少ない。

━━━━━━━━━━━━━━━━━━━━━━━━━━━


えーーー、使ってる技術とかけっこう違うんだけどなぁ。しかも申請出したのnavbar-whiteなんですけどねー。
たぶんbasic_whiteってのとデザイン的に似すぎってことでしょうね-。ならなんで色違い通ったんだし!!ってことで基準がよくわからんのでまぁ仕方ない。今回はリベンジなしで。

2.それでもnavbarの白が使いたいんじゃー!!ってそんなあなたにソースコード公開
いや、前記事で公開してるんですけどね。


CSSの方も同じくほぼ全削除。

まぁこのへん差し替えればとりあえずnavbarは白になります。

3.編集とかめんどいんだけど?
えぇえぇ。めんどいですよね。人が書いたCSSなんてそうそう読めないですし。
まぁ、GitHubにあがってるのでご自由にどーぞ。HTMLとCSSまるごとコピって貼り付ければ使えるはずです。
あれー?Gitの方、fixed-top直したっけなー?よく覚えてないなー?とそんな感じの管理ですけど、まぁ一応うちのブログで動作確認はとれてますです。
リポジトリは↓
template_for_fc2
白版はbootstrapforfc2-whiteです。まぁ、Gitにあがってるこれは開発中バックアップ用みたいな感じなので、ある日突然変なコードが入ったり、一旦完成したらなんかよほどやりたいことできない限り放置とかになってますけど。

4.今年はどうしようねー
えー、まぁなんだかんだで2008年からこのブログやってますけど(途中仕事が殺人的なとこに入ってしまって一年程放置してましたが)、テンプレ作ったのは2014も終わりにかかった頃にやっとこさ初めて作ったんですよねー。
これはHTML+CSSの勉強がてら、あとBootstrapの練習がてら、実戦は最高の練習ですからねー。
今はJavascriprtの勉強なんかも始めてるので、そのうちプラグインとか作ってみたりするかも知れないし、jQueryのパーツ組み込んだテンプレとか作るかも知れません。まぁボチボチとやってくつもりですのであまり期待しないでください。
とりあえずjQuery使ったスクロールすると出てくる「TOPに戻る」ボタンを「ちゃんと理解して」作るとこまでは早いとこ行きたいと思ってます。
あと、去年後半からCMSの記事増えてるんですけど、concrete5とWordPressはちゃんと理解して使いたいなーとか。

あぁ、そういえば家宅捜索後のFC2どうなってるんでしょうかね?大丈夫なんですかね?
まぁ大丈夫なうちに色々遊ばせてもらおうと思いますけど、できれば今年前半にはレンサバでサクッとWP+concrete5のサイト作れるくらいにはなっときたいなーと思います。
あぁ、自作PCの方はAMDもうちょっと元気にならないと購買意欲がそそられないので記事が書けないですね。困ったものです。とはいえこちらもWindows10の正式リリースあたりに一台何とかしようかと思ってる(パーツはまた使いまわすだろうけれども)のでその頃になって慌てて色々調べてなんのかんのやるかも知れないしやらないかも知れません。(Vistaの寿命がアレなので・・・
とはいえここまで来ちゃったんで、FC2大丈夫なうちはこのブログは続けさせてもらおうと思ってますので、まぁなんだかんだ今年もよろしくお願いいたします。

関連記事
久々のテンプレ変更
Bootstrap3を使ってFC2ブログのテンプレを作ろうその一
Bootstrap3を使ってFC2ブログのテンプレを作ろうその二
Bootstrap3でFC2のテンプレを作ろう 2回目( blue-navbar )
Bootstrap3でFC2のテンプレを作ろう 2回目( lightgreen-navbar,black-navbar,white-navbar )
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

Bootstrap3でFC2のテンプレを作ろう 2回目( lightgreen-navbar,black-navbar,white-navbar )

Bootstrap3でFC2のテンプレを作ろう 2回目( blue-navbar )で作ったのの色違いをいくつか作ってみています。共有申請してるけど通るかどうかは知りません。
例によってGitHubにあがってるのでほしい方はご自由にどーぞ。

1.なんで作ったし
やっぱ色違い欲しいよねー。
あとナビバーの色白黒に関してはデフォルトで用意されてる(Navbarのnavbar-defaultとnavbar-inverse使えるからCSSがシンプルになっていいよねー。というかデフォルトでいくつかの色を用意してくれればいいのに。あぁ、だからBootswach

2.とりあえず作ってみたwhite
基本があると楽だよねー。
前回(blue)の時にナビバーのclass指定でnavbar navbar-custom navbar-fixed-top にしてnavbar-customにCSSをあててみたんだけど、今回はデフォルトのをそのまんま使うのでnavbar navbar-default navbar-fixed-topに変えればそれでおっけ。


ついでにCSSのナビバーのところもほぼ全削除。残したのはドロップダウンの文字サイズ指定とナビバー自体への影の部分だけ。

シンプルなのはいいことだ。"Keep it simple, stupid"の精神的にはこれが一番ですねー。

ついでにbackground-color とかborderの色をなんとなく合うように淡目の黒に変換。#666; でほとんどの部分を統一。
"Keep it simple, stupid"!!
デフォルトのナビバーのCSSってことでなんか調節しないとうまく動かないとことかあるのかと思っていたらすごいあっさり行って逆に拍子抜け。

3.とりあえず作ってみたblack
whiteと同じくこれまたNavbarのサンプル(?)から
navbar navbar-custom navbar-fixed-top のとこをnavbar navbar-inverse navbar-fixed-topに差し替えるだけ。


CSSの方も同じくほぼ全削除。

これまた影とドロップダウンの文字色だけ。"Keep it simple, stupid"!!

あとはbackground-colorとかborderの色をナビバーに合わせてwhiteより若干濃い目の黒#222 とか#080808 に変えてみましょう。

4.とりあえず作ってみたlight-green
ぶっちゃけこれが一番楽だと思ってたら一番めんどかった。
blueと同じくclassはnavbar-custom。でBootswachのSandstoneの2つ並んでる下の方の色にしよー。明るい緑っていいよね。(白抜き文字が見えにくくなるとか考えてなかった)
#2fa4e7のところを#89BE3D(デフォルト色) #178accのところを#89be3d に変更。これでカーソル当てた時に少し濃い緑になります。

ついでにbackground-colorはナビバーより少し濃い目の#2eb72e;当たりをチョイス。
あとborderももうちょい深めのグリーンで統一。

色の濃淡とか明暗の調整がけっこうめんどいんだけど、ここ→ ColorHexa  を見つけてから若干捗るようになりました。

5.現状での問題と今後の課題
5-1.ナビバーからプルダウンで月別アーカイブとかカテゴリとか表示できるのはいいんだけど、うちのブログですら月別アーカイブ収まってないんだよねー。で、スクロールしようとしても、プルダウンじゃなくて表示してるページのほうがスクロールしちゃう。これじゃ超縦長画面でしか見れないじゃんねー。。。
なので結局コンパクトタイプなんかのアーカイブとかカテゴリ表示するプラグインは表示しなきゃアクセス的にあれ。なのでプルダウンで表示できるやつ結局うちでもサイドに表示してます。

5-2.ナビバーからのプルダウンの背景色と文字色の指定がよくわからん。ナビバーのフォント色白にしたらプルダウンの背景も白で真っ白なプルダウンメニューが開いたように見えてしまう。(実際は表示されてるのだけれど、白地に白文字で表示されてるので読めない)。結局プルダウンの背景色を付けて回避したりしたけど、これどーにかしたかった。

5-3.最近流行りのjqueryかなんかでにゅるっと出てくる「Topに戻る」ボタンつけたいねー。せっかくCDNでjqueryもjquery mobileも読み込んでるのにあまり意味感じないとかね。いや、削ったらそれはそれで表示崩れるとことかあるんだけれども。

6.やってみてよかったこと
コメント欄には毎度毎度ハマったけど、それ以外は基本的にいい練習になるねー。コードって書かないとすぐ忘れちゃうから、とりあえずなんかやってみよう、ってときにはテンプレ作ったりプラグインや機能考えて実装するためのなんやかんややったりするのは楽しいかも。
あといくつかの何かを勉強してから作りなおすと、先月自分が書いたクソコードに苦しまされるとともに、先月自分が躓いたところが簡単に感じられることもあるし、同じとこでハマって進歩ねーなーってこともあります。
でもPHPはそこそこ使えるかもだけど、SQL云々とかになってくると限界はあるよねー。
参入障壁的には低いと思うし、クソテンプレ作って公開したところで何が起こるかってDLされないだけだから気楽にできるしねー。
けどFC2何の審査してんだかしらないけど承認待ちが長いから何とかしろ。

色違いのリクとかあったら作るかも知れないし作れないかも知れないし、作れても作らないかも知れません。

追記
ハジカレマシタ
【テンプレート名】
blue-navbar

【不承認理由】
・FC2検索バーが表示されていないため。
原因はnavbar-fixed-topがFC2検索バーを隠してしまっていたこと。なのでnavbarのCSSにmargin-top: 27px; を追記してリベンジ。



関連記事
ド素人だけどBootStrapでサイトを作ってみるよ
久々のテンプレ変更
Bootstrap3を使ってFC2ブログのテンプレを作ろうその一
Bootstrap3を使ってFC2ブログのテンプレを作ろうその二
Bootstrap3でFC2のテンプレを作ろう 2回目( blue-navbar )
新年明けましてテンプレート不承認
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

ブログ内検索

カスタム検索

フリーエリア

クリックで救える命がある。

レンタルサーバー

さくらのマネージドサーバ
さくらインターネットのVPS
ConoHaのVPS
WebARENA VPSクラウド
99円レンタルサーバー
【CloudCore VPS】
GMOクラウドのレンタルサーバー
転送量無制限 ABLENET
@WAPPYレンタルサーバー
SPPDレンタルサーバー

カテゴリー+月別アーカイブ

 

アクセスカウンター

現在の閲覧者数:

プロフィール

Author:tmin
PCヲタ。ライト2ちゃんねら。
スロット好きのギャンブラー。(元
むしろ人生がギャンブルだが目下のところ負けっぱなし。
座右の銘は「結果オーライ」。故に基本適当。
トラブルもまた楽しみのひとつ

コメント、トラバ、相互リンク歓迎。お気軽にどうぞ。
当ブログについて
Twitterでこっちとあっちの更新情報流すことにしてみます。
http://twitter.com/t_min
Project Mikunchu♪Wikiできました。
Mikunchu200x40.png


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。