INSPIRE TECH » CSS

DISQUSをスマートフォンで利用する場合にも、FacebookやTwitterでのログインを可能にする方法

家富正幸 — Wed, 07 Nov 2012 01:24:01 +0000

WordPress等を利用している場合に、コメントシステムとして大変人気のあるDISQUSというコメントシステムがあります。

詳しくは下記のサイトなどをご覧頂くとして、このDISQUSはPC向けだけでは無く、スマートフォンなどでも表示できるモバイルテーマが標準で附属しています。

しかしこのモバイルテーマ、なぜかPC向けと違い、FacebookやTwitterでログインする機能が省略されてしまっています。

かといってPC版のインターフェースをスマートフォンで利用しようとすると、コメント部分は普通に利用できるものの、ログインウィンドウが画面からはみ出してしまい、相当解像度の高いスマートフォンではないとログインに支障がでてしまいます。

投稿の編集 ‹ INSPIRE TECH — WordPress

スマートフォン向け対応できるCSSを書いた

DISQUSはAPIの管理画面から、独自にCSSを適用することが可能です。

そこで、PC向けのログインウィンドウをスマートフォンで見た際にも、綺麗に画面内に収まるようカスタムCSSを作成してみました。


.dsq-popup[id] {
	position: absolute !important;
}

.dsq-popup-container .dsq-popup-close {
	right: 5px;
	top: 5px;
	position: absolute !important;
	z-index: 1200 !important;
}

.dsq-popup-container .dsq-popup-title {
	position: relative !important;
}

.dsq-popup-container .dsq-popup-title h3 {
	font-size: 12px !important;
}

.dsq-popup .dsq-tabbed-modal {
	background: none !important;
}

#dsq-popup-message #dsq-login-disqus iframe {
	height: 300px !important;
}

.dsq-popup-body {
	width: auto !important;
}

.dsq-login-box .dsq-popup-body {
	width: 300px !important;
}

.dsq-popup .dsq-modal-tabs {
	width: auto !important;
	float: none !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li {
	float: left !important;
	width: 43px !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li a {
	padding: 4px 6px !important;
	text-align: center !important;
	font-size: 0px !important;
	border-bottom: none !important;
}

.dsq-popup .dsq-tab-container {
	padding: 10px !important;
	font-size: 12px !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li.dsq-active a {
	border-bottom: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	background: #eee !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li.dsq-active a:hover {
	border-bottom: none !important;
}

適用方法

適用したいアカウントのアピアランスパネルを開きます。

スクロールして中ほどより下にある、Custom CSSの欄に上記コードを記述して保存します。

JavaScriptの設置

上記CSSだけではポップアップウィンドウの位置がおかしくなるため、下記JavaScriptを設置してください。

jQuery(function($) {
	setInterval(function() {
		$('#dsq-popup-message').css({
			'position': 'absolute',
			'top': $(window).scrollTop() + 10
		});
	}, 1000);
});

スマートフォンでの表示

こんな感じで表示されます。

注意

カスタムCSSはPC版にももれなく適用されてしまうため、PCとスマートフォンで利用する場合には、上記CSSにスマートフォンのみのクラス名やIDなどを追加するなどして、環境によって表示を切り替えられるよう工夫が必要です。

inline-blockを並べた場合に発生する「隙間」を消去するCSS

家富正幸 — Fri, 17 Jun 2011 08:44:59 +0000

IEを含めた最近のブラウザでは珍しくなくなったinline-block。
このinline-blockを利用する場合に発生する「隙間」を改善する方法です。

原因は改行コード

下記のようなHTMLを用意しました。
リストタグを使ったインラインブロックを実現しようとしています。





inline-block test





ボックスA
ボックスB
ボックスC

これを実際にブラウザで表示してみると。

期待していたのと違い、各リストタグの間に2px程度のマージンが空いてしまっています。
これはリストタグとリストタグの間に存在する改行が半角スペースとして表示されてしまっているからです。
その証拠に、下記のように

タグの間のスペースを除去してみます。


ボックスA
ボックスB
ボックスC

そうすると、期待通りの表示になりました。

CSSでなんとかなる

この改行コードの問題は、実に簡単なCSSで解決することができます。
インラインブロックを囲むタグ（この場合は

）に、下記のようなCSSを適用します。

.inline-block {
	letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
}

.inline-block li {
	display: inline-block;
	letter-spacing: normal; /* 文字間を通常に戻す */
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	line-height: 100px;
	text-align: center;
}

たったこれだけで、タグの間に改行があっても正しく表示できるようになります。
使い始めると便利なインラインブロック、無駄な隙間に悩んでいる方は是非お試しあれ。

HTMLのclass属性を利用して、要素の幅と高さを指定できるJavaScript

家富正幸 — Sat, 27 Nov 2010 17:06:12 +0000

CSSで複雑な表組みなどをデザインしている際、幅や高さをピクセル単位で細かく指定したいことがありますよね？

ただ、HTMLのstyle要素は記述が汚くなるから使いたくない、でもCSSでわざわざclassを作っているとCSSがごちゃごちゃしてしまう・・・。

そんな場合に、HTMLのclass要素を使って、簡単に幅と高さを指定できるJavaScriptを書いてみました。

ダウンロード

wh.js
※jQueryを利用しますので、別途jQuery 1.3.2以上のバージョンをダウンロードしてください。

ソース

(function($) {
    $(function() {
        $('[class*=w_], [class*=h_]').each(function() {
            var classes = $(this).attr('class').split(' ');

            for (var i in classes) {
                if (match = classes[i].match(/^([wh])_(\d+)(px|p)$/)) {
                    var key = '';
                    var value = '';

                    switch (match[1]) {
                        case 'w':
                            key = 'width';
                            break;
                        case 'h':
                            key = 'height';
                            break;
                    }

                    switch (match[3]) {
                        case 'p':
                            value = match[2] + '%';
                            break;
                        case 'px':
                            value = match[2] + 'px';
                            break;
                    }

                    $(this).removeClass(match[0]).css(key, value);
                }
            }
        })
    });
})(jQuery);

設置

jqueryを利用しますので、本ライブラリを読み込ませる前にjqueryの1.3.2以上を読み込ませてください。

利用方法

class指定に下記のような記述をしてください。

この場合、widthが100ピクセル、heightが200ピクセルの指定がされます。
また、パーセントでの記述も対応しています。

この場合、widthが100％、heightが33%の指定になります。
他のclassとの共存も問題ありませんので、比較的自由なデザインが可能になるかと思います。

CSSのroundedプロパティを簡単に設定する

家富正幸 — Fri, 27 Aug 2010 04:38:40 +0000

CSSのroundedプロパティは、IEに対応していないという点はあれど、ボタンやボックスを簡単に角丸に装飾できて便利なプロパティです。

ただ、IEを除いたブラウザに対応させる際も、WebkitやMozilla向け、さらにはCSS3対応のプロパティを併記するとなると少々面倒に感じることがあります。

そこで、数値を入力するだけで実際のイメージを見ながら、各ブラウザ向けのroundedプロパティを簡単に取得できるサイトをご紹介します。

http://border-radius.com/

上記のサイトに角丸の半径をピクセル数で入力すると、それに対応したプロパティが自動的に出力されますので、それをコピーして利用すると簡単です。