モノラルログ

マツオ ( @matsuoshi / monaural.net ) のざっくりしたブログです

Twitter Bootstrap の Navbar の表示を、常にスマホっぽい動きのある感じにしたい

Twitter Bootstrap の Navbar はレスポンシブな感じになっていて、ブラウザの横幅に応じて表示状態が変わります。デフォルトでは

  • 横幅が768px以上 → ナビのメニューをふつうに表示
  • 横幅が768px未満 → こんな感じのボタンだけが表示され、クリックするとメニューがにょろっと出現 (スマホっぽい)

Bootstrap のサイトの一番上のメニューがそれですね、ブラウザの横幅を変えてみると勝手に表示が切り替わります、便利ですね

で、
これをブラウザの横幅にかかわらず、常に ボタンだけが出ている状態にして、メニューをにょろっと表示させたい場合はどうするか

Bootstrap のサイトでは、less を使って変数 @grid-float-breakpoint の値を変更してカスタマイズしてどうのこうの、と書かれているっぽい

めんどくさい

ということでとりあえず、以下のような css を追記したら動きました
これでPCのブラウザでも、Navbar がスマホっぽいにょろっとしたメニュー表示になります。

@media(min-width:768px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
}

Small Archives: WordPress の月別アーカイブをコンパクトに表示してくれるプラグイン

昔作った WordPressプラグインを、あらためて体裁整えて公開します。

Small Archives
http://wordpress.org/plugins/small-archives/


WordPress に限りませんけど、ブログって長いこと書いてると、サイドバーの「月別アーカイブ」の表示がやたらと縦に伸びませんか。
こんなかんじで。

longlongsidebar

短文のエントリだと、画面の大半が空白なのにサイドバーだけがやたら下に長くなっちゃったりしてちょっと不格好なかんじ。WordPressだとドロップダウン表示にもできるけど、それも一覧性が低いし味気ないかなー、とか。

ということで、"Small Archives" は月別アーカイブをすっきり表示させるためのプラグイン(サイドバー用ウィジェット)です。

インストールして管理画面の「外観→ウィジェット」から Small Archives を使うようにすると、月別アーカイブの表示はこんなかんじでスッキリします。

small archives

その差歴然。

オプションでその月の投稿数を表示したり、年や月の表示順を逆にしたりも可能です。


WordPress の公式プラグインディレクトリにも置いてもらえましたので、ダウンロードはそちらからどうぞ。
http://wordpress.org/plugins/small-archives/

GitHub にもソース一式置いています。
https://github.com/matsuoshi/wp-small-archives

WordPress の自作プラグインを公開する手順(途中)

練習がてら、昔作った WordPressのちょっとしたプラグインwordpress.org の Plugin ディレクトリに置いてもらうための手続きを調べた(まだ途中です)

  1. 作ったプラグインをzipでどっかに置く
    GitHub 使っていれば、勝手に zipを作ってくれるのでそれが都合いいかも
  2. wordpress.org の Add Your Plugin フォームに行く
  3. プラグインの名前と説明文とzipのアドレスを書いて、申請ボタンを押す
  4. 「チェックするから待て」と言われる
  5. 待つ ← イマココ

こっから 1週間くらいかかるっぽい??

進展があったら更新します


【追記】
進展があったので更新しました。無事に公開完了。

WordPress の自作プラグインを公開する手順(完了) - monaurallab
http://matsuoshi.hatenablog.com/entry/2014/01/16/143508

Tumblr で、動画のサムネイル画像を取得するタグ

タイトルそのまんまですが、Tumblr のタグで、動画のサムネイルを取得できるものがあった。
{VideoThumbnailURL} みたい。

{block:VideoThumbnail}
  {VideoThumbnailURL}
{/block:VideoThumbnail}

こんな感じでよし。
Facebook向けの og:image とかにも使えそう(デフォルトで設定されてますけど)

ということで、TumblrYouTube動画を貼り付けたら サムネイルを背景画像に設定するようなカスタマイズをしてみた。

http://colorlesspsychedelics.tumblr.com/


参考

Creating a custom HTML theme | Tumblr

Mac の Excel で 編集と改行のショートカット

Mac の エクセルのショートカット2つ、覚え書き。

選択したセルを編集したい → control + u

(windows だと F2 だっけ)

セル内で改行したい → command + option + enter

(windows だと alt + enter)

すんごいよく使うのに windows と違ってて覚えられなかったので、メモでした。