Css

Drupal7にTwitter Bootstrap3 – Themeの環境でIE8をサポートする

Mar 23, 2015

AD:

本来であれば、Twitter Bootstrap3はIE8をサポートしているはずなんですが、なぜかDrupalのTwitter Bootstrap Themeを使用するとIE8でうまくいきませんでした。
下記の内容で問題なく表示されるようになりました。
原因はIE8がCDNをサポートしていないのが問題ではないかと言われていますが、実際のところなぜ起きるのかは追っていません。

モジュールのインストール

下記の２つのモジュールをインストール
Bootstrap Library
Respond.js

drush en bootstrap_library respondjs -y

1	drush en bootstrap_library respondjs -y

CSS&JSのAggregate and compress化

下記のページより変更が可能です。
/admin/config/development/performance

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

DroupalでJavascriptとCSSを圧縮する方法

Mar 23, 2015

AD:

はじめは、プラグインが必要かと思ったのですが、管理画面より設定が可能です。

下記のページより設定できます。
/admin/config/development/performance

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

Ubuntu(12.04) にlessをインストール

Feb 22, 2013

AD:

過去のサイトで、Lessを使用しているものがあったので、lessをインストール

$ gem install less
$ less --version
less 444
Copyright (C) 1984-2009 Mark Nudelman

1

2

3

4

$ gem install less

$ less --version

less 444

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

lessで@importしたらcacheが残って変更が反映されない件

Feb 13, 2012

AD:

WordPressのRoots Themeの中でlessが使われているのですが、ちょっとトラブったのでそのメモです。

問題は、lessの@importしたらcacheが残って変更が反映されない

それで、調べると同じような問題に起きている人がいる模様。
https://github.com/cloudhead/less.js/issues/47

解決方法

結局、下記のスクリプト追加して解決できました。
[php]
[/php]

ちなみに、bootstrap.lessの中はこんな感じです。

[php]
// CSS Reset
@import “reset.less”;

// Core variables and mixins
@import “variables.less”; // Modify this for custom colors, font-sizes, etc
@import “mixins.less”;

// Grid system and page structure
@import “scaffolding.less”;
@import “grid.less”;
@import “layouts.less”;
[/php]

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 1 | Pocket: 1 | Total: 2 | Feedly: 0

Ubuntuにlessをインストール＆設定

Feb 11, 2012

AD:

最近、WordpressのRoots Themeを触っているのですが、その中でlessが使われていたのでそのメモ

$ sudo gem install less 
Successfully installed libv8-3.3.10.4-x86-linux
Successfully installed therubyracer-0.9.9
Successfully installed commonjs-0.2.0
Successfully installed less-2.0.9

1

2

3

4

5

$ sudo gem install less

Successfully installed libv8-3.3.10.4-x86-linux

Successfully installed therubyracer-0.9.9

Successfully installed commonjs-0.2.0

Successfully installed less-2.0.9

lesscの場所を確認

$ locate lessc
/var/lib/gems/1.8/bin/lessc
/var/lib/gems/1.8/gems/less-2.0.9/bin/lessc
/var/lib/gems/1.8/gems/less-2.0.9/lib/less/js/bin/lessc

1

2

3

4

$ locate lessc

/var/lib/gems/1.8/bin/lessc

/var/lib/gems/1.8/gems/less-2.0.9/bin/lessc

/var/lib/gems/1.8/gems/less-2.0.9/lib/less/js/bin/lessc

コマンドを入力させやすくしておく

$ sudo ln -s /var/lib/gems/1.8/bin/lessc /usr/bin/

1	$ sudo ln -s /var/lib/gems/1.8/bin/lessc /usr/bin/

: Could not find RubyGem less と出てエラー

$ lessc hoge.less &gt; hoge.css
/usr/lib/ruby/1.8/rubygems.rb:779:in `report_activate_error': Could not find RubyGem less (&gt;= 0) (Gem::LoadError)
	from /usr/lib/ruby/1.8/rubygems.rb:214:in `activate'
	from /usr/lib/ruby/1.8/rubygems.rb:1082:in `gem'
	from /usr/bin/lessc:18

1

2

3

4

5

$ lessc hoge.less > hoge.css

/usr/lib/ruby/1.8/rubygems.rb:779:in `report_activate_error': Could not find RubyGem less (>= 0) (Gem::LoadError)

from /usr/lib/ruby/1.8/rubygems.rb:214:in `activate'

from /usr/lib/ruby/1.8/rubygems.rb:1082:in `gem'

from /usr/bin/lessc:18

調べてみると、sudoでインストールしたので、lesscのコマンドもsudoで実行しないといけないらしい。。。

$ sudo lessc hoge.less &gt; hoge.css

1	$ sudo lessc hoge.less > hoge.css

既に、Rubyの開発環境はrvmで導入済みの状態です。

せっかくなので、Roots Themeのlessでのcssを書き出しもメモしておきます。

$ cd ./wp-content/themes/roots/css/less
&#20840;&#20307;
$ sudo lessc bootstrap.less &gt; bootstrap.css
&#12524;&#12452;&#12450;&#12454;&#12488;&#31995;
$ sudo lessc responsive.less &gt; bootstrap-responsive.css

1

2

3

4

5

$ cd ./wp-content/themes/roots/css/less

全体

$ sudo lessc bootstrap.less > bootstrap.css

レイアウト系

$ sudo lessc responsive.less > bootstrap-responsive.css

ちなみに、上のRoots Themeは、標準では、css/の中にあるcssを読み込むんですが、下記のやり方だとlessの中に書き出されます。

$ sudo lessc ./less/bootstrap.less &gt; bootstrap.css
$ sudo lessc bootstrap.less &gt; ../css/bootstrap.css

1 2	$ sudo lessc ./less/bootstrap.less > bootstrap.css $ sudo lessc bootstrap.less > ../css/bootstrap.css

上記のコマンドを試したけどダメだったので、./inc/roots-actions.phpを書き換えました。

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 1 | Pocket: 0 | Total: 1 | Feedly: 0

CSSによる画像ロールオーバーのちらつきを防ぐ方法

Sep 23, 2009

AD:

最近、久しぶりデザインをすることが増えたので、CSSを触っているんですが
CSSを使って画像ロールオーバー使うことがあるのですが、それが画面を開いた段階では、a:hoverに指定した画像を読み込みに行ってくれなくて
困っておりました。そこで下記方法を思いつき対応しました。

サンプル

画像を一枚にまとめます

使用した画像

htmlのソース

&lt;p class="rollover"&gt;&lt;a href="#"&gt;&#12522;&#12531;&#12463;&lt;/a&gt;&lt;/p&gt;

1	<p class="rollover"><a href="#">リンク</a></p>

CSS

p.rollover a{
	display:block;
	width:150px;
	height:50px;
	text-indent:-9999px;
	overflow:hidden;
}
p.rollover a{
	background:url(rollover.jpg) top left no-repeat;
}
p.rollover a:hover{
	background:url(rollover.jpg) top right no-repeat;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

p.rollover a{

display:block;

width:150px;

height:50px;

text-indent:-9999px;

overflow:hidden;

}

p.rollover a{

background:url(rollover.jpg) top left no-repeat;

}

p.rollover a:hover{

background:url(rollover.jpg) top right no-repeat;

}

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

Fonts list for Mac & Windows in common.

Feb 28, 2009

AD:

I checked fonts list for Mac & Windows in common.

Arial	Smaple text
Arial Black	Smaple text
Century Gothic	Smaple text
Comic Sans MS	Smaple text
Courier New	Smaple text
Lucida Sans Unicode	Smaple text
Impact	Smaple text
MS UI Gothic	Smaple text
Times New Roman	Smaple text
Trebuchet MS	Smaple text
Verdana	Smaple text

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

text-indent:-9999pxでaタグにつく横棒を消す方法のメモ

Sep 29, 2008

AD:

今更ですが、よく忘れるのでメモしておきます。

outline: none;

1	outline: none;

にすると点線自体が消えるので　すべてのブラウザでクリック領域がわかりにくくなります

overflow:hidden;

1	overflow:hidden;

にするとMacのIEでおかしくなる（確かリンク自体機能しなくなるとか）という点を除けばこちらの方がいいと思います。
もしくは　Macにのみハックを使用するなどがもっとも

個人的に、「text-indent:-9999px」は使いたくないですが、どうしても昔のテーブルで作られたものを
コーディングし直すときにつかったりします。

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

meadow(Emacs)のCSS　css-mode.elのメモ

Jul 23, 2008

AD:

css-mode.el

Ctl＋C　＋　Ctl＋U = url（）を挿入
Ctl＋C　＋　Ctl＋C =　/* */を挿入
M＋tab キーで CSS の属性を入力補完してくれる。

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 2 | Pocket: 0 | Total: 2 | Feedly: 0

IE6をCSSで中央配置にする際のメモ

Jul 10, 2008

AD:

IE6をCSSで中央配置する際に、よく忘れるのでメモしておきます。

IE6には過去のIEの互換性のため、DOCTYPEの有無により、標準準拠モードと互換モードを切り替えるようです
（DOCTYPEスイッチだって）
で、互換モードだとtext-align:centerとか指定しないと中央配置されない。
HTML 4.01の標準モードだと、互換モードになるので、ちゃんと、htmlの一番上に宣言を明確に書くといいらしい。

参考として、

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br>
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br><input type="hidden" name="question" value='&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
'>

1

2

3

4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br>

'>

メモ
IE5(Win), IE5.5(Win), IE5.2(Mac)、ネスケ4もmargin:autoが未サポートだって。

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

Drupal7にTwitter Bootstrap3 – Themeの環境でIE8をサポートする

モジュールのインストール

CSS&JSのAggregate and compress化

DroupalでJavascriptとCSSを圧縮する方法

Ubuntu(12.04) にlessをインストール

lessで@importしたらcacheが残って変更が反映されない件

問題は、lessの@importしたらcacheが残って変更が反映されない

解決方法

ちなみに、bootstrap.lessの中はこんな感じです。

Ubuntuにlessをインストール＆設定

: Could not find RubyGem less と出てエラー

せっかくなので、Roots Themeのlessでのcssを書き出しもメモしておきます。

CSSによる画像ロールオーバーのちらつきを防ぐ方法

画像を一枚にまとめます

Fonts list for Mac & Windows in common.

text-indent:-9999pxでaタグにつく横棒を消す方法のメモ

meadow(Emacs)のCSS　css-mode.elのメモ

IE6をCSSで中央配置にする際のメモ

Search Keyword

Meta

FacebookPage

Popular Posts

My Tags

Status

Links

ARCHIVES