レスポンシブ対応のスタイリッシュなスライドショー実装「offbeatSlider」 – bl6.jp
offbeatSliderはレスポンシブに対応したアニメーション付きのスタイリッシュなスライドショーを実装することができるjQueryプラグインです。フェードによるさりげないアニメーションに加え、ナビゲーションやページネーションも備えています。 offbeatSliderのダウンロードや具体的な使い方は、以下のページからチェックできます。実際のデモ動作はダウンロードしたファイルから確認できます。 デモ デモではデフォルトスライダー、テキストオンリーのスライダー、画像 + ディスクリプションのスライダーの3つのサンプルが設置されています。 デフォルトのスライダーでは、左右に前後移動できる矢印とドットによるナビゲーションが表示されています。スタイリッシュなフェードアニメーションで画像が切り替わります。 テキストオンリーのスライダーも設置されているので、画像だけではなくテキストベースのスライダー
HexoPress - Googleドキュメントを使ったブログシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ブログエンジンで必ず必須になるのが管理画面ではないでしょうか。コンテンツをためておいて、一覧したり編集できる仕組みが必要です。静的なブログエンジンの場合はローカルのフォルダが管理する機能になるでしょう。 そんな中面白いのがHexoPressです。なんとGoogleドキュメントをコンテンツを蓄積する場としています。 HexoPressの使い方 最初にGoogleアカウントと接続します。その後設定をします。 最初は何も記事はありません。 そこでGoogleドライブに記事を書きます。hexopressというフォルダがありますので、そこに書きます。 書いたら管理画面でパブリッシュします。 そうすると記事ができあがります。 さらに写真を貼り付けてみます。 ブログ記事でもちゃんと写真が貼り付け
Githubをいい感じに表示してくれる、4つのブラウザ拡張 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
けもフレPPPのジェンツーちゃんがかわいすぎて、Gentoo Linuxインストールしたくなりました、TKです。 今回は、みんな大好きGithubをいい感じに表示してくれるブラウザ拡張を、4つご紹介します。Google Chrome版とFirefox版のリンクを記載しているので、自分の環境に合わせてインストールしてください。 いい感じのブラウザ拡張 GitHub Hovercard Chrome Web Store Mozilla Add-ons Store このブラウザ拡張を入れておくと、なんとリポジトリやユーザーページへのリンクにカーソルをホバーさせたときに、ツールチップでサマリーを表示させることができるんですっ！ 正直なところ、これを入れていて良かったなぁというシーンは今のところありません。見た目が良いので、ニヤニヤしながらホバーしてツールチップを眺めるのがナイスな使い方かなと思って
大好きなものは、大好きと伝えよう。 - プリキュアの数字ブログ
自分が「娘がプリキュアに追いついた日」という記事を書いてからちょうど1年が経ちました。 prehyou2015.hatenablog.com 自分と娘が小さかった頃のプリキュアの思い出を綴った文章ですが、 ありがたい事に1年経った今でもかなりのアクセスを頂きます。 当時は、沢山のプリキュアの関係者様にも読んで頂いた様で、ツイッターのリツイートなどで数多くのコメントなどを頂きました。ありがとうございました。 プリキュアのブログ書いていて良かったと、思う。 - プリキュアの数字ブログ で、ですね。 この文章を書いた後、自分のプリキュア環境がそれなりに変化しました。 表に出ているものでは、 価格.com様のプリキュアの玩具に関するサイトに関わらせて頂いたり、 kakaku.com 寄稿記事の依頼が来たり、 srdk.rakuten.jp 表に出ていないものも多数ありまして、 この1年で、例年以上
Scrapbox用のiPhoneアプリが無いならCoastを使おう - W&R : Jazzと読書の日々
Scrapboxに似合うWebブラウザを探してみました。ScrapboxはGoogle認証が条件。それをクリアできるなら専用に使えそう。Scrapbox以外は開かないようにする。何度も読み込むこともないから、Scrapboxを軽く捌けるんじゃないだろうか。 ブラウザを試してみたChrome - Google のウェブブラウザ 57.0.2987.137 分類: ユーティリティ 価格: 無料 (Google, Inc.) Google製だから認証はバッチリ。でもフルスクリーンにはならない。ちょっと上のURL欄が目障り。Scrapbox内が前提なのでバックボタンも要らないのです。 ドルフィン ブラウザ HD - 高速のアドブロック & 簡単シンプルウェブタブブラウザー 9.24.1 分類: ユーティリティ,仕事効率化 価格: 無料 (MoboTap Inc.) Google認証できました。下段
Simon - メニューバー常駐型のシステムステータス表示
コンピュータを使っていて、システム情報が気になることは多々あります。そのためのシステム監視を行うソフトウェアも常駐型であったり、細かなデータが取れるものなど様々に存在します。 今回紹介するSimonはPythonで作られた、スクリプトベースのシステムモニタリングソフトウェアです。 Simonの使い方 起動するとメニューバーに常駐します。 筆者環境では情報が出ませんでした…。 筆者環境では何も出なかったので、環境によっては情報が出ないかも知れません。Pythonスクリプトなので、カスタマイズして情報を追加するのも簡単にできそうです。 SimonはPython製のオープンソース・ソフトウェア（MIT License）です。 GitHub - hcyrnd/simon: Simple macOS menubar system monitor, written in Python.
画面サイドにあるバーをナビゲーションにするコンセプトデザイン:phpspot開発日誌
Expanding Bar Navigation Concept | Codrops 画面サイドにあるバーをナビゲーションにするコンセプトデザイン 画面を大きくつかったタッチスクリーンでもいい感じに使えそうなページデザインのサンプルがDLできます 関連エントリ ホバーでアイテムが立体的に傾くエフェクト実装「Tilt Hover Effects」
CSS Grid Layoutに触れてみよう！ CSS Grid Layoutのテンプレート定義を簡単に作成できるジェネレーター
Webページをレイアウトする際にfloatを使って、そして去年あたりからはflexboxを使っての実装が増えてきたと思います。 CSS Grid Layoutはようやくすべてのデスクトップブラウザでサポートされたばかりですが、レイアウトすることに特化されており、シンプルな記述でより柔軟なレイアウトを実装することが可能です。 CSS Grid Layoutのテンプレート定義を簡単に作成できるジェネレーターを紹介します。 CSS Grid Layoutってどんな感じ？ という人にもいいかもしれません。 CSS Grid Template Builder CSS Grid Layoutでレイアウトをするには、「grid-area」プロパティを使って、グリッドの定義をすることから始めます。例えば、通常のページの場合、ヘッダ・フッタ・コンテンツ・サイドバー2つのエリアを定義します。
アプリなどに使えるマイクロアニメーションの販売サイト『Micro Animations』 | 100SHIKI
ちょっとしたアニメーションがアプリにあるとぐっと華やかになるし、親しみやすくもなる。 ただしアニメーションを作れる人はそんなに多くはいない。 そこで登場したのがMicro Animationsだ。 このサイトではそうしたちょっとしたアニメーションを「マイクロアニメーション」と呼び、その販売サイトを立ち上げている。 まだ数は多くないが、無料から$3程度なので十分検討に値するだろう。 こうしたかゆいところに手が届くサービスはいいですね。
Photoshopの使い方を知ろう！参考にしたい新作チュートリアル、作り方46選まとめ 2017年春
Photoshopの使い方を学ぶのに適した、最新のデザインチュートリアルをまとめています。ステップごとにツールの使い方を覚えることで、より実践的なデザイン表現が可能になります。 今回は最近公開されたばかりのチュートリアルを中心に、Photoshopでの作業効率をアップしてくれる基本テクニックから、プロ顔負けのデザイン裏技など高品質な作品をまとめてご紹介します。お好みのデザインエフェクトを見つけて、今後の制作プロジェクトに活かしてみてはいかがでしょう。 やってみたかった表現をマスター！基礎力をつけるPhotoshopチュートリアル30個まとめ Photoshopの使い方を知ろう！参考にしたい新作チュートリアル、作り方まとめ 深海の美しい景色をデザインする方法 フィルタ機能や調整レイヤー、スマートオブジェクトなどを利用して作成する、これぞPhotoshopな合成テクニック。 光の軌跡が美しいタ
鶴瓶の家族に乾杯 - NHK
落語家の春風亭一之輔が富山県滑川市へ！地名をもじって「すべらない街」をうたう滑川の古い町並みで落語家２人が落ち合うと、赤ちゃんを抱いた女性達に話しかけられる。２人は、すぐそばの神社に参るが、誰もその名前を知らない。そのうち、家族や親類が続々集まる展開に…。その後、今が旬だというホタルイカの美味しさに感動した２人は、加工場が近くにあると聞き、向かう。そこで、出迎えた社長のパワフルな人柄に圧倒される。
ユーザーを惹きつけろ！魅力的なヒーローヘッダー作成の黄金ルール10個まとめ
ユーザーがあなたのホームページにたどり着いたとき、ページを開くまでに少しだけ時間があり、あなたが何をしているのか伝え、もっとページを見てもらえるように工夫することができます。しかし多くのサイトでは、訪問ユーザーに好印象を持ってもらう機会を逃しています。 ヒーローヘッダーをどのように他の要素から目立たせるか、詳しく確認していきましょう。 ヒーローヘッダーに必要な要素とは？ ヒーローヘッダーにデザイン要素を取り入れる方法はたくさんあり、新商品を紹介したり、ブランドが何をしているのかシンプルな文で説明する必要があります。多くのヒーローヘッダーに利用されている要素は以下のとおりです。 目を引く見出しタイトル、ヘッドライン Call-To-Action ボタン 印象的な背景イメージや動画 埋込み型の説明ビデオまたはアニメーション 特集コンテンツを紹介するカルーセル ブランディング要素 – ロゴやスロ
CCの無料写真を手軽に一括検索できるシンプルな写真検索サービス「FreePhotos.cc」
写真のダウンロード（CC0ライセンスの場合） 表示した写真がCC0写真の場合は、プレビュー画面右下のダウンロードボタンを押すと、 画像が表示され、そのままダウンロードできます。 写真のダウンロード（CCライセンスの場合） CC0ではなく、CCライセンスの場合（500pxサービスの場合）にダウンロードボタンを押すと、 写真に関する個別ページが表示されます。 上の写真だと、CC BY-SAライセンスなので、クレジットの表示義務があります。 Photo by Sy Taffel. と、こんな感じでCCライセンスの場合には、フォトストックサービスの個別ページが開かれます。それを踏まえた上で利用する場合は、ライセンスに準じて利用してください。 いろいろな写真検索結果 FreePhotos.ccにて、いろいろなキーワードで写真を検索してみました。 ちなみに、「ビジネス（business）」と検索すると
Redaxscript - モダンなデザインと軽量さが売りのPHP製CMS
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CMS（コンテンツ・マネジメント・システム）はWebの黎明期はもちろんのこと、現在でも多種多様に新しいソフトウェアが登場する分野です。トレンドも変わっていますし、新しいキーワードを取り込んで進歩し続けています。 今回はモダンで軽量さを謳ったCMS、Redaxscriptを紹介します。 Redaxscriptの使い方 インストールウィザード付きです。 こちらはユーザ向けの画面です。上に管理用のツールバーが表示されています。 管理画面です。カテゴリ管理。 設定画面です。言語は今のところ英語しか用意されていません。 新しい記事を書く画面です。 記事毎に言語やテンプレートが選択できます。 RedaxscriptはDockerコンテナイメージとしても配信されており、ごく簡単に立ち上げられるよ
WordPressの記事を下書き状態で管理者以外に共有したい時に使うプラグイン「Public Post Preview」
覚えておくと便利系。 本日も“monograph”をお読みいただきありがとうございます。 PITE.（@infoNumber333)です。 インタビュー記事を書く際や、人から依頼された記事を書いた後など記事を下書きの状態で誰かに共有したい時ってありますよね。僕は最近まで記事をパスワード付きで公開して、そのパスワードを記事を確認する人に渡して内容を見てもらっていたのですが、この方法だと記事の存在と記事タイトルが一般に公開されてしまうのであまりスマートではないんですよね。 そこでWordPressの記事の下書きを共有するのにちょうど良い方法がないかなと探してみたところ、かなり使いやすいプラグインを見つけたのでこちらご紹介しておきます。
Pen - WYSIWYGなMarkdownエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近Dropbox Paperというサービスが気に入っています。特にMarkdown風の記法で、WYSIWYGに編集できるのが便利です。しかしオフラインで使えないのは大きな問題で、これが解決できると便利だと感じることでしょう。 そこでWYSIWYGなMarkdownエディタを探しているのですが、その中で出会ったのがPenです。 Penの使い方 Penでは文字を選択するとツールチップが表示されて装飾できます。 引用やリストは記号を入力することでその場で認識されます。 コードを書いた例です。 Markdown表示にすることもできます。 PenはWYSIWYGなので、見た目と結果が確認しやすいのが利点です。ただし、Markdownとしてはテーブルタグの入力に対応していなかったり、画像はU
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
基本的なUIコンポーネントを備えたミニマルなCSSフレームワーク・「Look」
SVGを使ったプログレスバーを実装出来るスクリプト・「jQuery-svg-progress」
