Bartenderの代替に！ macOSのメニューバーのアイコンを常に表示・非表示にできるオープンソースのアプリ -Ice
macOSのメニューバーにたくさんのアイコンが表示されて邪魔！ という人に便利な無料アプリを紹介します。 アイコンは常に表示するアイコン、基本非表示でクリックやホバーで表示するアイコンにすることができ、簡単に言うとBartenderのようなことができます。私はBartenderを長く使用していましたが、この記事で紹介するIceに変更しました。 「…」の右が常に表示、左が非表示でクリック・ホバーで表示されます。 Ice -Menu Bar Manager Ice -GitHub Iceの特徴 Iceのダウンロードとインストール Iceの使い方 Iceの特徴 Iceは、macOSのメニューバーを管理するオープンソースの無料アプリです。主な機能は、メニューバーに表示されているアイコンの表示・非表示ですが、ほかにも便利な機能が備わっています。 対応OSは、macOS 14（Sonoma）です。ライ
外部サイトのリンクにだけ特定のアイコンを付与する | かちびと.net
Result 外部サイトのリンクにだけ特定のアイコンを付ける、みたいなの やってる事は単純で、href属性に自サイトのドメインを含んでる場合は除外するようにしています 相対パスも対応する場合は便宜変更してください css a:not([href^="https://codepen.io/"]):after{ content: ""; background-image: url(foobar.gif); display: inline-block; background-size: cover; } 上記の場合はhttps://codepen.io/で始まるリンクを除外したコードとなります via Inline Icons & Wrapping
GitHub File Icon - GitHubのファイルアイコンを最適に
開発者であればGitHubのサイトを訪れる機会は多いと思います。その際にはファイルブラウザを見ると思いますが、すべてのファイルが同じアイコンになっているので分かりづらいかも知れません。 そこで使ってみたいのがGitHub File Iconです。拡張子に応じたファイルアイコンに変換してくれます。 GitHub File Iconの使い方 元々の表示。シンプルです。 インストール後。一気に可読性が高くなりました！ IDEであったり、OSのファイル管理でも拡張子ごとにアイコンを変えるのはよくあることです。それによってファイルの判別がつきやすくなります。これは何もローカルに限らずGitHub上でも同じです。ファイルがアイコンと色で区別されると見やすさが増すでしょう。 GitHub File IconはGoogle Chrome/Firefox用の機能拡張（MIT）です。 xxhomey19/gi
Alt＋Tabっぽい使い方でタブ切り替えを劇的に効率化できる無料アプリ「Pintasking」を使ってみました
例えばメールを読んで、その内容をコピーしてブラウザで検索し、開いたページのリンクをコピーしてLINEで友達に送るなど、複数のアプリを行き来しながら作業する場合、画面下部にある「タブ切り替え」アイコンからアプリを選択して開かないといけないため、作業が非常に面倒に感じることがあります。そんな面倒なタブ切り替えを劇的に効率化できるアプリが「Pintasking」で、タブ切り替えがどれくらい効率化されるのか実際に使って確かめてみました。 Pintasking - Google Play の Android アプリ https://play.google.com/store/apps/details?id=com.phinxapps.pintasking Pintaskingを使うには、上記URLを開いて「インストール」をタップします。 「同意する」をタップ。 インストールが終わると、ホーム画面にP
Movable Typeの日付カスタムフィールドを2つ使って「開催中」を表示する方法
Movable Typeの日付カスタムフィールドを2つ使って「開催中」を表示する方法を紹介します。 １．概要 先日「Movable Typeの日付カスタムフィールドを使って現在時刻と比較する方法」を紹介しましたが、本エントリーではカスタムフィールドに設定した開始日と終了日をチェックして、現在の日付が期間内であれば「開催中」と表示します。 下のスクリーンショットは「最近のブログ記事」の右側に状況を表示させてみたものです。 完成例 前のカスタマイズ同様、jQueryを使ってリアルタイムに判定します。 ２．事前準備 次のようなカスタムフィールドを事前に2つ作成してください。 まず、開始日用のカスタムフィールドです。 システムオブジェクト：ブログ記事 名前：開始日（任意の名称でOK） 種類：日付と時刻 オプション：日付と時刻 ベースネーム：（任意の名称） テンプレートタグ：EntryCFStart
WordPressのコメント一覧に新着マークを表示する「wp_recent_comments_with_newmarkプラグイン」に投稿日付表示機能追加
WordPressのコメント一覧に新着マークを表示する「wp_recent_comments_with_newmarkプラグイン」に投稿日付表示機能を追加しました。 １．「wp_recent_comments_with_newmarkプラグイン」について このプラグインを適用すれば、最近のコメント一覧のコメント投稿ユーザー名の右側に新着マークを表示することができます。 完成例 ２．変更点 タイトルの通りですが、コメント投稿ユーザー名の右側に投稿日付を表示できるように改修しました。 変更後の完成例 さらに投稿日付のフォーマットはウィジェットで自由に変更できるようにしました。デフォルトのフォーマットは「n/j」にしています。 日付フォーマットについては「WordPress における日付／時間の表示とフォーマット変更方法」の最後の方で詳しく解説しています。 ３．ダウンロード プラグインのダウンロ
WordPressのコメント一覧に新着マークを表示する「wp_recent_comments_with_newmarkプラグイン」
WordPressで最近のコメント一覧に新着マークを表示する「wp_recent_comments_with_newmarkプラグイン」を公開します。 １．機能 このプラグインを適用すれば、最近のコメント一覧のコメント投稿ユーザー名の右側に新着マークを表示することができます。 完成例 コメント一覧は専用のウィジェットで簡単に制御できます。表示件数はもちろん、新着マークや新着表示時間を変更することも可能です。 ２．プラグインのダウンロード・インストール 下記のリンクをクリックしてプラグインをダウンロードしてください。 変更履歴 2012.12.20 初版 2013.02.20 v0.0.2 投稿日付を表示（関連記事） wp_recent_comments_with_newmark_0_2.zip ダウンロードしたプラグインを展開し、中にあるwp_recent_comments_with_ne
Web フォントでアイコン表示。 Font Awesome 使ってみた
Blog のデザインをリニューアルしました報告でもちょっと書いたんですが、アイコン関係を Web フォントを使ってやってみました。その時に利用させてもらったのが 「Font Awesome」 でして、今回はその簡単な使い方について書いてみようと思います。 Font Awesome, the iconic font designed for use with Twitter Bootstrap Font Awesome は簡単に言ってしまえば、Twitter Bootstrap のアイコンを Web フォントで扱えるようにしたもの。Twitter Bootstrap のアイコンは CSS Sprite で利用できるようにひとまとめになった 「画像」 として提供されていますが、Web フォントとして提供されることで、よりサイズ、カラーなどを柔軟に扱えるようになっています。 Font Aweso
WordPressのカテゴリーリストに新着マークを表示する「wp_list_categories_with_newmarkプラグイン」
WordPressのカテゴリーリストに新着マークを表示する「wp_list_categories_with_newmarkプラグイン」を公開します。以前コメントでご要望を頂いていたものです。 １．機能 カテゴリーリストの該当カテゴリーに新着記事がある場合、「New!!」などの新着表示を行います。新着マークに画像を表示させることもできます。 下のスクリーンショットはTwentyElevenテーマで表示させたサンプルです。 ２．プラグインのダウンロード・インストール 以下のリンクからプラグインをダウンロードしてください。 変更履歴 2012.01.25 v0.1 初版 wp_list_categories_with_newmark_0_1.zip プラグインのご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。 アーカイブを展開し、中にあるwp_li
簡単なコードでアイコン付きの分かりやすい通知を実装できる「Notifier.js」:phpspot開発日誌
Notifier.js ? Elegant Javascript notifications | Srirangan 簡単なコードでアイコン付きの分かりやすい通知を実装できる「Notifier.js」。 次のようなオシャレなアイコン付きの通知を表示できます。一定期間が終われば１個のアイテムはそれぞれ消えていく流行りのインタフェースです。 Notifier.success('User registration successful') のように関数を呼び出すだけで簡単に使うことができるので、使いやすそうです。 アイコンを変えるには、success の代わりに info や warning, error, notify といったメソッドを使えばOKです。 後から出てきただけあって、ポップアップなんかよりも邪魔にならないというところがいいですね 関連エントリ ピュアCSSでページ上に通知を出すチ
新着マークを画像に表示する
Movable Typeの新着表示のカスタマイズで、画像に新着マークを表示するカスタマイズです。 ここでは下のように4つの画像を横に並べ、新着の画像には「New!」という文字を画像の中に表示する方法を紹介します。クリックすればサンプルページにジャンプします。 画像を横に並べる方法は色々あると思いますので、このエントリーで掲載する以外の方法も色々試してみてください。 新着マークを表示するカスタマイズについては、予め下記のカテゴリーをご覧ください。 新着表示カテゴリー 「新着表示」とは、例えば、3日以内に投稿されたブログ記事について、最近のブログ記事リストに「New!」という文字を表示するようなことを指します。 １．テンプレートの追加 ウェブサイトまたはブログにアップロードした画像を新着表示に利用するには、次のテンプレートを用意します。 <mt:Assets lastn="4"> <div c
マウスカーソルの横にAjaxのローディングアイコンを表示してくれる、たった4KBのjQueryプラグイン『prettyLoader』 - IDEA*IDEA ～ 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
jQueryUI Icons List / Cheatsheet
クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」:phpspot開発日誌