お勧めなCSSスライド式サイドバー９選
speckyboy Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web. かつて、ナビゲーションメニューは決まってページの一番上に表示されていました。その後、メニューが左か右のカラムに収まっていた時期がありました（中でも特に、左側がメニューのレイアウトが好まれていました）。そして、横からメニューがスライドして出てくる『ドロワーメニュー』の時代が訪れました。突如現れたこのメニューは、とても理にかなっていました。まるでパズルの最後のピースがようやく見つかったかのようです。 そしてこのドロワーメニ
ブラウザー上でカスタマイズできるSVGアイコン、背景パターン、イラスト
2019年4月19日 SVG, Webサイト制作 高解像度ディスプレイでもきれに表示できるSVG形式の画像。アイコンの表示などでは一般的に普及してきたかと思います。SVG形式ではカスタマイズがしやすいところもメリットのひとつですね。今回はブラウザー上で簡単に自分好みに変更できるSVGアイコンや背景パターン、イラストを配布しているWebサイトを紹介します。 ↑私が10年以上利用している会計ソフト！ ICONSVG ICONSVGは矢印やインターフェイスまわりで使えるシンプルなアイコンを揃えています。サイズや線の太さ、色などをカスタマイズできます。SVGコードが表示されるので、そのままコピペして利用できますよ。「Download icon」ボタンからファイルをダウンロードすることも可能。商用利用OK。 Ikonate IkonateもシンプルなSVGアイコンをまとめています。サイズや太さ、色を
Google Maps APIs Styling Wizard を使って カスタマイズしたマップを使う ｜ Tips Note by TAM
2018.05.16 Google Maps APIs Styling Wizard を使って カスタマイズしたマップを使う サイトでGoogle Mapを埋め込む時に、マップの色が浮いてしまったり、表示される項目が多すぎてわかりづらくなってしまう事もあると思います。 その際、マップの色や、表示される項目を調整できるのがGoogle Maps APIs Styling Wizardです。 Googleのツールなのですが日本語化されてないせいか、なかなか使い方が見つからなかったので、簡単な流れを共有したいと思います。 ベーシックな表示項目の調整をする まず、表示する予定地周辺の地図を表示し、デフォルトでの見え方をみてみます。 右上の検索エリアに入れればすぐに出てきます。 次に、左カラムで大まかな表示項目の調整をします。 Theme(テーマ) … 大まかな色のルールを選びます。 ※テーマによっ
個人でWebアプリを開発する時に便利な高機能JavaScriptライブラリ6選！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webアプリやサービス作りなどで便利に使える高機能なJavaScriptライブラリを厳選してご紹介してみようと思います。 ライブラリ単体でそのままWebアプリとしてリリースできそうなレベルのものから、ちょっとした機能を追加できるものまでピックアップしてみたのでご興味がある方はぜひ参考にしてみてください！ なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。 オーディオファイルを柔軟に制御できるライブラリ！ 【 howler.js 】 MP3 / WAV / AAC / OGG…など多彩なコーデックに対応しているうえ、オーディオスプライトによる制御も可能なライブラリが「howler.js」です。 音楽プレイヤーはもちろん、オーディオ制作アプリやゲー
Googleマップのカスタマイズに挑戦してみた！
今回は初めてGoogleマップのカスタマイズに挑戦したので、備忘録としてやり方をまとめました。 カスタマイズできると知ってはいるけど難しそうで試したことない人も多いはず…そんな方は是非チェックしてみてください！ それではどうぞ！ Googleマップのカスタマイズをする意味 実店舗があるお店のサイトにとって、そのお店の行き方や場所が分かるマップは重要なコンテンツだと思います。初めてお店に行きたい時に、サイトにマップがあるととても分かりやすいですよね！ そんな時よく使われるのがGoogleマップです。ただサイトによってはマップとサイトデザインがあっておらず違和感を感じる場合もあります。 デザインをあわせるためにオリジナルの地図画像を作るという手もありますが、道が変更されたり、目印のお店が無くなったりするたびに変更しないといけないので正直あまり実用的ではありません。そこでオススメしたいのが、Go
Instagramブログパーツ「RSS.stagram」がSnapWidgetよりもおすすめな理由 | Sumirexxx
Instagramの写真をブログTOP画面に乗せるのがお気に入りです。 気が付けば、結構昔からこのスタイル。一時期、表示するのに時間がかかると思ってやめていたのですが、やっぱりなんか物足りなくなっていつからか復活しています。 スマホ表示にはInstagramの写真を載せていないのですが、PC表示ではいつもこんな感じになっています。 つい昨日Instagramの表示を左側縦1列に変更しました。 （アイキャッチとかぶって少々見にくいのでまた変更するかもしれませんが…。） 今まではこの表示に「SnapWidget」という海外のツールを使って作っていました。 こちらが本家サイト↓ SnapWidget | Instagram Widget 結構使い勝手がよかったんですが、最近どうも無料だとうまく取得できなくなってしまいました。（私だけかもしれません） ↑ページが削除されていました。（2019.8.
TwのツイートボタンとFBのシェアボタンをカスタマイズする方法 - Tecuration .com
結構苦戦したので、書いておこうと思います。Twitterのツイートボタンと、Facebookのシェアボタンをデフォルトの表示から、自分の好きな画像などに変更する方法です。 きっかけはFacebookのデフォルトのいいね！ボタンがあまりに重く、画面のロードに大きな影響を与えていたことです。そもそも見た目がイケてない！というわけで、Twitterボタンも含めてカスタマイズすることにしました。 まずはデフォルトのソーシャルボタンが生成出来るリンクを載せておきましょう。作り方は他のサイトさんに譲ります。 Facebook いいね！ボタン：Like Button Twitter ツイートボタン：ツイートボタン で、生成されたコードを見てみるとJavaScriptが含まれていて、その処理でiframeタグを生成して画面に表示しているんですね。どのように処理しているのか詳しくはわかっていないのですが、と
Facebook,Twitter,はてな,mixiのソーシャルボタンをオリジナルにしたいのです
FacebookやらTwitterやらはてなやらmixiやら何やらソーシャルボタン付けたいけれど、 角丸とかフォントとか大きさがまちまちだし幅とるしカウント数いらないし… 記事の下とかにあるならいいけど、 これが記事の上にあったりすると微妙に嬉しくない。 なんとか、 って具合に、アイコンだけ並べておけないだろうか。と思ったわけです。 分けて書こうと思ったけど、あんまりマメ子じゃなくてすぐ忘れるので、一気にダーッとメモします。 ≫Facebookのシェアをスマートに！ ≫ボタンをオリジナル（自作）にする簡単なカスタマイズ ≫FacebookシェアのオリジナルボタンをMovabletypeに入れる。 ≫Facebookに投稿するコンテンツの見せ方にこだわる ≫OGPのmetaタグをMovableTypeに入れてみる ≫テストユーザーで投稿テストしてみる ≫Twitterのボタンをオリジナルにす
Twitter ウィジェットをカスタマイズする。 | dakkie blog
dakkie | Hiroki Onoda 愛知県名古屋市在住のWebデザイナー。雑貨、カメラ、カフェ、旅、空、海、コーヒー、料理が大好き。ボリビアにあるウユニ塩湖に行くこと、写真で個展（2013年7月22日～28日にmonogramで開催予定）を開くこと、独立すること、空とコーヒーと写真と雑貨が楽しめるカフェを開くことを夢見てる。 E-mail：dakkie.com@gmail.com twitter：dakkie_ facebook：hiroki.onoda sumally：dakkie booklog：dakkie Twitterのツイートを自分のブログやサイトに表示させるために便利なTwitter ウィジェットというものが公式から出ています。 その公式のウィジェットは、ある程度カスタマイズができるようになっていますが、できるものはどれも同じような見た目になってしまって、何だか物足り
WordCamp Fukuoka2011 WordPressテーマの作り方発表資料など – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
今年も大盛況のうちにWordCamp Fukuoka 2011が開催されました！ 参加してくださった方350名+スタッフ50名弱の計400名近くが一堂に集まったとか… しかも県外からもたくさんご参加くださって、東京や大阪、名古屋、鹿児島、熊本、兵庫に長崎、沖縄などなど…！ 全国のWordPress好きの方々と交流することができました。 今年も本当に楽しかったです！ 詳細な感想はまた後日書くとして、中教室で担当させていただいたセッションの資料を先に公開します。 予想をはるかに超える方々にお越し頂いて…。 本当にありがとうございました。 当日の音声や動画とかがないのでスライドだけだとなんのことだかわからないページなどに少し補足をいれたり、不要なページは一部削ったりしています。 間違えていた部分も修正しました＞＜ アイキャッチ画像を使いたい時、functions.phpに書かなければいけないのは
使えるギャラリーにする方法
WordPress のギャラリー機能使っていますか？ 使いにくい WordPress のギャラリーをちょっと使えるようにするカスタマイズです。 ものすごく長くなってしまいました ... できるだけ簡単にまとめてみたので興味があるひとはぜひ読んでみてくださいね！ Webサイトで写真を一覧表示したいときに、よく使われているギャラリー。WordPress のテーマにも、Webサイト全体をギャラリーみたくするものも、数多くありますよね！でも普段はブログや一般的な Webサイトとして使っていて、その中の数ページをギャラリーページとして使いたい … ってこともあると思います。 私の場合、ギャラリーを jQuery のプラグインと組み合わせて作成する事が多いので、WordPress のギャラリー系のプラグインは使ってません（おすすめのギャラリー系、画像管理系のプラグインがあったら教えて欲しいです）。 ま
WordPressテンプレートを各カテゴリ等で別々に使い分ける | Travelogue
バージョンが2.7になってますます便利になったWordPress。これまで以上に使う機会が増えています。特に、ページ数が多いサイトを制作するときや、クライアント側で内容を書き換えたいという要望があった場合など、私にとってかなり無くてはならないツールとなっています。 そこで、WordPressをCMSとして利用する時に超！便利な機能についていくつか書いてみたいと思います。 今回は、WordPressのテンプレートファイルを、各カテゴリやページごとに別々に使い分ける方法です。例えば、複数のカテゴリテンプレートを用意し、各カテゴリのコンテンツ内容によって使い分ける方法等について紹介します。 今回の内容は、HTMLはある程度分かるけれどPHPとかの知識は無く、見よう見真似でこれからWordPressを始めてみようという人あたりにちょうど良いと思います。 ※2012年5月25日追記：このエントリーの
WordPressテーマカスタマイズ事始め・基本構造を理解してカスタマイズしてみる - かちびと.net
WordPressを使っているけど、 PHP分からないし、カスタマイズ は未経験・・という方の為の カスタマイズ方法です。PHP を理解せずとも基本構造を ある程度理解すれば可能です。 PHP製のWordPressですので、当然PHPを理解していれば様々なカスタマイズが可能ですが、プログラミング自体まだ敷居はデザインより高いかもしれません。 でも、カスタマイズしてみたい！という方も多いと思いますので今回はカスタマイズ始めの1歩、的な内容です。 はじめに これはPHPの記事ではありません。コピペ（ファイル間でのソースの移動など）が基本になるのでプログラマーさんからすれば酷い記事になると思いますが、デザイナーさんが少しでもプログラミングに興味を抱き、理解する事でチームの作業が円滑になる側面も期待しつつエントリーしてみます。 で、カスタマイズする前に以下にご注意頂きたいと思います。 テーマファイ
Ajax » jQuery plugin » フォーム要素のカスタマイズ | PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説アイコン入りのプルダウンメニューを作成するjQueryプラグイン。 jQueryで、select要素とoption要素をdiv要素に変換し、Option要素内にアイコンを表示しています。 メニューをクリックすると、メニューをアニメーションしながら開閉します。 選択すると、通常のプルダウンメニュー同様、選択した項目のテキストがメニュー部分に表示されます。 メニュー部分に表示するテキストはselect要素のtitle属性に指定します。 アイコン画像のURLはoption要素のtitle属性に指定します。 設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
Movable Type でカテゴリ別にブログ記事の背景画像を切り替える
Movable Type 4 以降のバージョンで、カテゴリ別にブログ記事の背景画像を切り替えるカスタマイズを紹介します。 この記事は、Twitter 上で immovabletype さんのつぶやきに対してお伝えした内容をまとめたものです。 まず、カテゴリ別に背景画像を適用するイメージを図に示します。 図の説明ですが、まずカテゴリ別の背景画像を用意します。ここでは「日記」「旅行」「趣味」の3つのカテゴリの背景画像を想定します。次に各背景画像を、カテゴリ別のセレクタとしてスタイルシートに設定します。そして、各ページのブログ記事の背景画像として適用します。例えば、「日記」カテゴリに属するブログ記事Aには、緑色の背景画像を適用します。 また、カテゴリの増減に対応できるよう、スタイルシートや各テンプレートにはテンプレートタグを利用して、再構築するだけで自動的に背景画像を適用できるようにします。手動
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://urin.take-uma.net/jquery/%E8%A8%AD%E7%BD%AE%E3%81%8C%E8%B6%85%E7%B0%A1%E5%8D%98%E3%81%A7%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E6%80%A7%E3%81%AE%E9%AB%98%E3%81%84%E5%90%B9%E3%81%8D%E5%87%BA%E3%81%97%E3%83%9B%E3%83%90%E3%83%BC%E7%94
HOPELESSLY IN LOVE WITH SPRING – Get this Theme for 🦊 Firefox (en-US)