Bootstrapのボタンスタイルを拡張する

button_styled

button_styled

Twitter Bootstrapをよく使います。
それはそれは、よく使いまくっています。

WEBアプリ系のデザインは、ほぼすべてと言っていいほど使っているのですが、使えば使うほどもっとこんなスタイルもほしいなぁなんて欲がでてきます。

そこで、たまにBootsnippなどで面白いUIがないか探したりしているのですが、Bootsnippなんかで見つけて、実際に自分が作ったサイトで使っている、ボタン周りの追加CSSをご紹介します。

例えば、通常のボタンのスタイルは

ですが、そこに追加で「btn-outline」を追加して

このようにすると、

button_styled

こんな感じになったり、

このように指定すると

button_styled

このように表示されたりする、追加用のBootstrap用のアドオンのようなCSSを作りました。

追加したスタイルは、「btn-outline(アウトライン表示)」、「btn-border(太枠線表示)」、「btn-square(角丸解除)」、「btn-circle(丸ボタン)」、「btn-round(左右丸表示)」の5つです。

button_styled

「btn-sm」や「btn-lg」なんかと組み合わせることも出来ますし、追加CSS同士を組み合わせて表示させることも出来ます。
ちなみにDEMOページもありますので、興味のある方はダウンロードしてお使いください。

CSSダウンロード(zipアーカイブ・1.4KB)

ダウンロードして解凍したCSSをBootstrapのCSSを読み込んだあとで、読み込んでください。

これで、対象のクラスを付与するだけで、スタイルを追加できます。

このサイトにアタックする輩は・・・

WordPressは世界で圧倒的シェアで利用されているCMSですが、それゆえ不正アクセスの標的にもなったりします。
ちなみに、当ブログのようなそれほどアクセス数もない弱小サイトでも、それなりにアタックされています。
不正アクセスしてくるような輩なので、IPも含めてさらしておきます。

attack

明らかに個人を狙っているような名前と、やっぱり「admin」が多いですね。
今でもWordPressインストール時に「admin」っていれる人が多いようで、圧倒的に「admin」でアクセスされてます。

ちなみに、同じように不正アクセスをブロックしたい方は、「Limit Login Attempts」プラグインでログイン試行回数や、ロックアウトの制限を設けましょう。
そもそも、ログイン画面にアクセスさせたくない場合は、「Login rebuilder」プラグインで、ログインURL自体を変更してしまうのも良いかもしれません。
この2つのプラグインは併用可能なので、併用するとさらにセキュリティがアップしますね。

CPIのサーバーでownCloudをインストールする

すげー久々の更新ですが、ちょっと軽めの記事を。

レンタルサーバーのCPIをよく使いますが、CPIのACEプランは月額3800円(税別)×12ヵ月で、マルチドメイン無制限・サーバー容量無制限という、ある意味反則的なサーバーで、WEB制作者にはよく知られていると思います。

そしてownCloudは、Dropboxのようなサービスを自分で構築できるオープンソースプロジェクトなのですが、このCPIとownCloudを組み合わせれば、容量無制限のDropboxという、夢のようなサービスを自分で構築できます。あらステキ。

ただ、CPIにownCloudをインストールした際にちょっとつまずいたので、自分的メモ。

続きを読む

Bootstrapを利用した管理画面構築フレームワーク「AdminLTE」

adminlte

AdminLTEは、Twitter Bootstrapを拡張する形で、様々な機能を追加したフレームワークになっています。

続きを読む

ALERT表示をカスタマイズできるjQuery Alertをカスタマイズしてみる

jqueryalert_google_jqa

入力チェックや、警告表示に使うJavascriptのalertメソッドですが、ブラウザによって表示が全然違うので、そこを統一したいと考えました。
ちなみに、現在のMSIE、Firefox、Google Chrome、Operaだと以下のような表示です。

jqueryalert06

そこで、統一するために、Javascript(jQuery)とCSSを使って作ればよかったんですが、同じ用途のjQueryプラグインがあることがわかったので、そちらを試すことにしました。

続きを読む

CSSで、テーブル印刷時に複数ページにまたがって印刷しても見出し部分を全てのページに印刷させる

今回はCSSのお話です。

最近は帳票をHTML形式で出力させることが多いのですが(わざわざPDFなどにしなくても、十分使える帳票印刷ができますよね)、
その際にテーブルをループで回して表示していると、1ページに収まらなくなることがあります。

そんなときに便利なのが、CSSのdisplayプロパティ!
値にtable-header-groupとしてやると、印刷時にテーブルが複数ページにまたがったとしても、見出し部分を全てのページのトップに出してくれます。
これ、地味に使いまくりです。見出し部分をthead要素で囲んでやらないとダメですが、それとCSS指定するだけです。

でも、この指定をしてもChromeだけ見出しが印刷されないんですよね。
最新のバージョン 33.0.1750.146 mにしているんですが・・・

なんとかならないもんですかね、これ・・・

jQuery UIのdatepickerで日付が1899年や1900年になる

datepicker01

Bootstrap+jQuery+jQuery UIでインターフェースを作ることが多いのですが、そんな中はじめて陥ったDatepickerのワナをご紹介。

続きを読む

BootstrapでjQuery UIのDatepickerを使う場合

datepicker02

日付の入力インターフェースとして、jQuery UIのDatepickerは、もはや常套手段いって過言ではないのではと個人的には思ってます。
どのように入力されるかわからない日付形式より、入力の手間も省け、定型で入力させるためによく使いますよね。

続きを読む

iPhoneへプッシュ通知でハマった・・・

APNs-PHP

iPhoneへのプッシュ通知を行う際に、APNs-PHPというライブラリを使って通知ロジックを仕掛けていました。

スクラッチ開発する場合に参考にしたサイトに書いてあったような、通知制限などを自動的に回避してくれる的なことがあったためにAPNs-PHPを使ったのですが、
導入に際してはこちらを参考にすればさほど難しいこともなく、普通に導入できました。

続きを読む

Google Map API V2の提供終了

Googleさんから、以下のようなメールが来ました。

Google Map V2が、2013年11月19日に提供終了になるようです。

続きを読む

%d人のブロガーが「いいね」をつけました。