サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
www.wp-benricho.com
flexbox内のテキストを一行表示にして、横幅を縮めたときに余った文字を省略表示する方法を紹介します。 通常は簡単に実装できるのですが、テキストが子要素の中に入っていると上手く動作しません。 デモページの横幅を縮めると、サンプルの動作を確認できます。 サンプル1(簡単なパターン) テキストを一行表示にして、横幅を縮めたときに余った文字を省略表示するのは簡単です。 一行表示したい要素に以下のCSSを適用するだけです。 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; HTML <div class="flexbox"> <div class="flexitem">横幅を縮めると、余った文字が省略表示されます。</div> </div> CSS .flexbox { display: flex; } .flexit
Macのプレゼンテーション、企画書作成に欠かせないKeynote。 そんなKeynoteのすごい無料テンプレート、7個を紹介します。 いずれも無料でダウンロードできます。有料のものに比べても遜色なく、クオリティが高いテンプレートです。 プレゼンテーションの資料や企画書、提案書のテンプレートとして活用してくだいさ。 Azusa Azusa 日本語フォントにも対応したKeynoteのテンプレートです。日本語フォントはヒラギノ角ゴを使っています。全てのMacにインストールされているので、安心して使用できます。 Organizational Chart Free Keynote template Organizational Chart Free Keynote template チームや組織の紹介に使えるKeynoteのテンプレートです。楽しいカラフルなデザインで、顔写真を入れると、親しみがわき
同人誌に使えるフリーフォント、21個を紹介します。 漫画でよく使われる、ゴシック体の漢字に太めの明朝体のかなを組み合わせたアンチゴシック体、通称、アンチゴチのフォントや、楽しい雰囲気を演出できるポップ体のフォント、小説などに使いやすい明朝体のフォント、魔法陣や呪文っぽいフォントまで、同人誌でよく見かけるフォントを厳選しました。 新コミック体 新コミック体は、アンチック書体の漫画セリフ用フォントです。フォントサイズが小さくても読みやすい仕上がりで、漫画のセリフ内での使用におすすめです。文字にクセが無く、バランスのいいフォントです。無料でダウンロードできて、商用、同人誌での利用が可能です。 新コミック体 ※無料フォント、商用利用可能、同人誌利用可能 やさしさアンチック やさしさアンチックは、漫画などで使われるアンチック書体のフォントです。アンチック書体は、アンチゴチとも呼ばれ、ゴシック体の漢字
写真: Gratisography 動きのあるUIデザインを紹介している、インタラクションデザインのギャラリーサイトを紹介します。デザインアイディアに困ったとき、新しいUIデザインに挑戦したいときに眺めると、インスピレーションが浮かんできます。 いずれのサイトもGIFアニメや動画でインタラクションを紹介しているので、サイトを開いたり、自分でアプリをインストールする必要がありません。デザインの参考にどうぞ。 UI Interactions https://uiinteractions.com/ UIインタラクションのギャラリーサイトの中では、最も見やすく、掲載されているデザインのセンスもいいです。タッチカーソルが見えるように工夫されているので、操作とデザインの動きが連動している様子が分かります。モバイルアプリを中心に紹介されています。オススメです。 Appealing http://app-
WordPressで記事を50音順に一覧表示する方法を紹介します。 「あ行」、「か行」、「さ行」のように行ごとの見出しを設けて、さらにその中に「ア」、「イ」、「ウ」と50音見出しを用意して、それぞれに記事を表示します。 最終的にはこのようなコードで表示されます。 <h2>あ行<h2> <h3>ア<h3> <ul> <li><a href="https://www.wp-benricho.com/post1/">アーサー王物語</a></li> <li><a href="https://www.wp-benricho.com/post2/">愛読癖</a></li> <li><a href="https://www.wp-benricho.com/post3/">「愛と死」</a></li> <li><a href="https://www.wp-benricho.com/post4/">ア
WordPressは素晴らしい無料テーマがたくさん公開されています。しかし、多くのテーマは英語ベースのため、日本語サイトで使うとどうしてもフォントが合わずに、英語で見たときと比べてデザインのバランスが崩れてしまうことがあります。 今回は、日本語での使用を考慮して作成された、日本語対応のおすすめWordPressテーマ10個を紹介したいと思います。 1. Simplicity ダウンロード | デモ Simplicityは内部SEO対策済みのシンプルな無料WordPressテーマです。日本製テーマのため、日本語対応もバッチリです。テーマのカスタマイズ機能が豊富で、様々なレイアウトを実装することができます。アップデートが頻繁に行われており、最新のWeb技術やデザインのトレンドを取り入れた人気のテーマです。 2. STINGER ダウンロード | デモ STINGER PLUS+はGoogleア
ユニークなタイムピッカーや画面遷移アニメーション、WebGLを使った陽炎エフェクトからプッシュ通知の実装まで、最近のWebサイトでよく見かける表現を実装できる注目のJavaScriptライブラリ、チュートリアルを紹介します。 紹介するJSライブラリ、チュートリアル一覧ユニークで楽しい時間指定JSライブラリCSSアニメーションを使った画面遷移を実装できるjQueryプラグインWebGLを使ってサイト上に陽炎を表現するチュートリアルWebサイトからプッシュ通知を送ろう! JavaScriptでのプッシュ通知の実装方法グリッドレイアウトのシンプルなJSライブラリブロックレイアウトを実装できるJSライブラリツリー構造を実装できるJSプラグインもうjQueryは必要ないVisual Studio Codeを使いこなせ! Chromeと接続してJSをデバッグする方法スムーズなページ遷移を実装するjQu
CSSを使って実装するローディングアニメーションを紹介します。以前はGIFアニメーションを使うことが多かったのですが、最近はCSSアニメーションで実装することが増えてきました。CSSでローディングアニメーションを実装する事で、細かな調整が簡単にできるようになりました。また、SVGを組み合わせることで、表現の幅も広がります。 1. SVG Loaders SVG Loaders | デモ | 紹介 SVGを使ったローディングアニメーションです。12種類のローディングエフェクトが用意されています。SVGを使った美しい表現が特徴です。 2. CSS Spinners CSS Spinners CSSライブラリを使って実装するローディングアニメーションです。全19種類のアニメーションが用意されています。どれもオリジナリティのある表現で、デザインアクセントとして使えます。 3. Loaders.cs
写真素材、アイコン・イラスト、デザイン素材(背景・パターン、テクスチャ)、動画、音楽素材など、商用利用可能なフリー素材を配布しているサイトをまとめて紹介します。 基本的に、クレジット表記不要、リンク不要が不要な無料素材です。クレジット表記やリンクが必要なものを含む場合は、できるだけ明記するようにしています。 ざっくりとですが、ジャンルごとにおすすめ順に並んでいます。 ※2016/11/14 一部更新しました。現在の紹介サイト数は67サイトです。 写真素材(無料、商用可) 国内総合系 ぱくたそ(8,000枚以上) 使って楽しい、見て楽しい写真素材。国内おすすめナンバー1 tadapic(30サイト以上) 複数サイトの写真を横断検索 フォトマテリアル(500枚以上) サイト制作やブログに使える写真素材 足成(70,000枚以上) 老舗の写真素材サイト フォトスク(6,000枚以上) 毎月数万人
WordPressをバックアップする優良プラグイン8個を紹介します。 「WordPressのバックアッププラグインは種類が豊富なので、どれを使えばいいの分からない!」という方は参考にしてみてください。 実際にこのサイトでも利用しているものから、プロジェクトで利用したものまで、おすすめのバックアッププラグインを紹介します。 Dropboxと連携して、バックアップデータをDropboxに保存できる便利なプラグインもあります。 手動でのバックアップは忘れがちなので、必ずプラグインを入れて、自動でバックアップを取ることがおすすめです。 関連記事 目次 1 BackWPup(おすすめ!) 最強の統合バックアッププラグイン 2 UpdraftPlus Backup and Restoration BackWPupが使えない時の代替 3 BackUpWordPress シンプルで初心者でも簡単 4 WP
この記事では、無料でダウンロードできるiPhoneのモックアップ素材を紹介します。 モックアップを使うことで、作成したデザインをより魅力的に仕上げることができます。クライアントへのプレゼンテーションや、サイトやアプリを紹介する際に使うと効果的です。 多くの素材が、スクリーン部分の画像を作成したデザインに差し替えるだけで、利用することができます。ボタンのデザインやフレームのデザインを忠実に再現しているモックアップもあります。 iPhone 7、iPhone 6、iPhone 6 Plus、iPhone 5が揃っています。ファイル形式はPhotoshopで使えるpsdファイルが多いですが、Illustratorで使えるaiファイルや、Sketch用の素材もあります。 iPhone X、iPhone 8のモックアップ PhotoshopとSketchで使えるiPhone Xのモックアップ素材 プ
写真素材: Unsplash Lightroomで使えるおすすめの無料プリセットを紹介します。クオリティの高いものを厳選しました。プロのような素敵な写真に仕上げることができます。 実際に作成したサンプル画像を掲載しているので、仕上がりを確認してみてください。サンプルには素材サイトのJPG画像を使用しましたが、カメラ撮影のRAW画像を使うと、より綺麗に仕上げることができます。 写真素材は、ぱくたそ、Unsplash、Magdeleine、足成から使わせていただきました。 1. 写真をエレガントに加工 Free Elegant Fade Lightroom Presetは写真をエレガントに加工できるLightroomプリセットです。加工した写真は、そのまま文字を重ねても読みやすいので、Photoshopでデザインする際に写真の前処理として使えます。ページ内にある「Download the fr
デザインやテストページの作成時に役立つ、人気のダミー画像の生成ツールを紹介します。 デザインやサイトを制作している途中で、それっぽいダミー画像を入れて確認をしたいとき、いちいち写真を探すのは時間も手間もかかります。ダミー画像を使えば、サクッと画像や写真を当てはめることができ、制作スピードも上がります。 背景色のみのシンプルなダミー画像を生成できるものから、ジャンルを指定して写真を生成できるツール、顔写真専門の生成ツールなどがあり、目的に応じて使い分けることができます。 中には、「ビールを飲んでいる女性」など特定のテーマのダミー写真生成ツールもあります。 PlaceIMG ジャンルを指定してランダムに写真を生成できるツール PlaceIMGはサイズとジャンルを指定してランダムなダミー写真を生成することができます。これまでに1億回以上利用されている、超人気ツールです。人気がありすぎて少し写真の
スタイリッシュで高機能、しかもシンプルで使いやすいHTML5メディアプレイヤーを紹介します。 Plyrは、シンプルで高機能なHTML5メディアプレイヤーです。 まずは、デモをご覧ください。デザインが美しく、機能的です。 video、audio、Youtube、Vimeo対応 mp4、webpなどの動画ファイル以外に、Youtube、Vimoeを埋め込むことができます。 さらに、<video>以外に<audio>をサポートしているので、mp3、oggなどの音声ファイルを埋め込むことが可能です。 字幕対応 vtt(字幕用テキストファイル)の読み込みが可能です。スクリーンリーダー(音声読み上げソフト)にも対応しています。 VTT(Video Text Tracks) では、字幕用テキストと字幕を表示する時間を指定するだけで、動画に字幕を表示することができます。 対応ブラウザ 対応ブラウザは以下の
Photo: Gratisography デザインをしていると、面倒な作業にばかり時間を取られてしまい、本来のデザイン作業が進まないことがあります。Photoshopプラグインを使って作業を自動化すれば、もっとクリエイティブなことに集中することができます。 Photoshopでの作業を高速化できる、おすすめのプラグイン45個を紹介します。 対応バージョンは、各プラグインの配布ページに掲載されている情報を記載しています。Photoshop CS6対応とだけ書いてあっても、Photoshop CC 2015で動作するものもあるので、気になるプラグインは試してみてください。 「Swatchy」で色をプロジェクトごとに管理 色をフォルダ分けして管理することができるPhotoshopプラグインです。プロジェクトごとに色を作成しておくと便利です。 Swatchy(無料) ※Photoshop CC、C
シンプルで機能的な日付入力(日付ピッカー)、時刻入力を実装できるJavaScriptライブラリ、14個を紹介します。jQueryプラグインの他に、AngularJSで使えるモジュールもあります。 Timedropper オリジナリティのあるおしゃれなデザインの時刻入力を実装できます。jQueryプラグインです。 ダウンロード & デモ mdPickers 美しいモーダルの日時ピッカーです。日付ピッカー、時刻ピッカー、両方とも実装できます。AngularJSのモジュールです。 ダウンロード | デモ Material Datetime Picker マテリアルデザインの日時ピッカーです。時刻も選択できます。デモは「OPEN PICKER」のボタンを押すと、入力UIが展開します。 ダウンロード | デモ Air Datepicker シンプルでおしゃれなUIのデートピッカーです。日付の範囲指定
Illustratorなどのベクターファイル編集ソフトを持っていなくても、SVGファイルを自由に編集することができる便利なツールを紹介します。 Boxy SVG Editor 最近では、アイコンやイラストなどにSVGを使用することが標準になりつつあります。フリー素材なども、SVGファイルのみで配布されているケースをよく見かけるようになりました。 SVGは拡大・縮小が自由なベクターファイルであること、表現の幅の広さ、Webとの相性の良さなどメリットがたくさんあります。 SVGの特徴はこちらのスライドの解説が分かりやすいです。 そんな便利なSVGですが、ちょっとSVG画像を編集したい!というときに、IllustratorなどのSVGを編集できるソフトを持っていないと困ってしまいます。 今回は、非デザイナーの方や、普段Illustratorなどのベクターファイル編集ソフトを使わずにデザインをして
WordPressでカテゴリやタグ、カスタムフィールドを検索対象に追加したり、Ajaxによるリアルタイム検索機能を実装するなど、検索機能を強化できるおすすめの検索プラグインを紹介します。 1. カテゴリー、タグ、カスタムフィールドなどあら項目を検索できる「Search Everything」 Search Everythingはカテゴリー、タグ、カスタムフィールドなど、WordPressのあらゆる項目を検索できるプラグインです。 通常の検索対象のタイトル、本文に加えて、抜粋、カスタムフィールド、カテゴリー、タグ、カスタムタクソノミー、コメントなどの項目を検索することができます。 使い方 2. 管理画面で画像を代替テキスト(alt)で検索することができるプラグイン「Enhanced Media Library」 Enhanced Media Libraryは管理画面で画像を代替テキスト(al
AMPはGoogleの検索結果でモバイルサイトを高速表示する仕組みです。 今回は、WordPressをAMPに対応する方法を紹介します。プラグインの「AMP」と「Facebook Instant Articles & Google AMP Pages by PageFrog」を組み合わせて利用することで、簡単にAMP対応ができます。Google Analyticsや、Adsenseにも対応しています。 目次 プラグイン「AMP」をインストール 簡単なAMP対応ができます。 プラグイン「Facebook Instant Articles & Google AMP Pages by PageFrog」をインストール ほぼ完璧なAMP対応ができます。 AMPの見た目をカスタマイズする AMP対応ページの見た目を調整します。 AMPにGoogle Analyticsを設定する(他の解析ツールもOK
Sketch、かなり普及してきましたね。特にアプリ開発ではSketchでのデザインがスタンダードになりつつあります。 今回は、Sketch用のテンプレート・UIキットとして、無料でダウンロードできる素材を紹介します。 クオリティの高い、美しいデザインを集めました。 SketchのUIキット Minimal UI Kit ミニマルなAndroidのUIキットです。 ダウンロード Wild_ Full Website Template for Sketch PCサイトのSketchテンプレートです。 ダウンロード Phoenix UI: Vol 1 – for iPhone 6 / Free PSD & Sketch iOS用の12画面がセットになった美しいテンプレートです。 ダウンロード Shop iOS App Freebie – UI & Prototype ショップアプリに最適なiOS
最近のWebサイトでよく見かけるアニメーションやインターフェースを簡単に実装できる、便利なHTML/CSSスニペット、JavaScriptライブラリを紹介します。 背景にインクが広がるエフェクト(CSS) CSSのstepsを使って、背景にインクを広げるアニメーションを実装します。 Ink Transition Effect | デモ かわいいボタンデザイン(CSS) 手書き風ボーダーのボタンなど、普段見かけないオリジナリティあるボタンをCSSで実装します。 CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10+ CSS3を使ったホバーエフェクト(CSS) シームレスな動作で、クオリティの高いホバーエフェクトをCSS3を使って実装できます。 Ultimate image hover effects using css3 | デモ ハンバーガーメニューのCSSア
ブログやポートフォリ、写真ギャラリーでの使用に最適な無料WordPressテーマを紹介します。2016年の最新版です。 写真を綺麗に見せるエレガントなデザインのテーマが揃っています。個人ブログ、企業のビジネスブログ、Google Adsenseなどの広告運用にもおすすめです。 クオリティの高いものを厳選しました。もちろん、すべてレスポンシブ対応のテーマです。 1. Senses Lite 流行のデザインを取り入れた人気のあるテーマです。個人や企業ブログにおすすめで、カスタマイズ機能も豊富です。シンプルで、使いやすいデザインです。 デモ | WordPress公式サイト 2. PALMAS エレガントにデザインされたブログ用テーマです。写真付きの記事を書くのが好きな人におすすめです。 ダウンロード | デモ 3. TANx とても美しくデザインされた、シングルカラムのテーマです。「タンク」と
無料で使える日本語フォント100個を紹介します。商用利用可能なものを厳選しました。 正統派フォントからオリジナルフォント、おもしろフォントまで、デザインワークに使えるフォントが揃っています。ひらがな、カタカナ、漢字、英数字がセットになっているものもあります。 ※すべてのフォントが商用利用可能ですが、利用の際には必ずライセンスを確認してください。利用前に報告が必要など、フォントによって条件がある場合があります。 目次 ゴシック体(19個) 本文にも見出しにも使える 明朝体(8個) 本文にも見出しにも使える M+ FONTS(5個) 高品質なゴシック体フォント 源ノ角ゴシック(3個) 和文フリーフォントの最上位 ポップなフォント(16個) ロゴ・見出し・バナーに使える アンチック系フォント(5個) 漫画にも使える オリジナルフォント(44個) 手書き・オリジナル・変わり種 1. ゴシック体(本
Photoshopを使えば、インパクトのあるオシャレなテキストエフェクトを実現できます。 Photoshopを使ったおしゃれなロゴデザイン、テキストエフェクトのチュートリアルを紹介します。チュートリアルはデザインをワンランクアップするための練習にもおすすめです。 光の粒子を散りばめた文字 光の粒子が溢れだしているようなかっこいい文字のチュートリアルです。 Create a Dynamic Particle Explosion in Photoshop 神秘的な宇宙空間のテキストエフェクト 宇宙を想起させる、神秘的な雰囲気のテキストエフェクトです。 Create 3D Star Light Text Effect in Photoshop レトロなヴィンテージのタイポグラフィ 最近トレンドのヴィンテージテイストのタイポグラフィです。写真の使い方がポイントです。 Create a Trendy
WebプロジェクトやWebデザイナー、アーティスト、写真家、建築家、プロジェクトチームの作品を紹介するポートフォリオサイトに最適なワードプレステーマ15個を紹介します。 作品を引き立たせるためにシンプルでありながら、モダンでおしゃれなデザインが特徴です。 自分のポートフォリオサイトを作る際、デザイナー以外の方はこういったテーマを利用するのもありですね。 1. Fukasawa Free WordPress Theme 白を貴重としたデザインのテーマです。太い白のボーダーが特徴的です。家具や小物の作品を紹介するのに良さそうです。 ダウンロード | デモ 2. Virtue Web制作の実績を紹介するのに最適なテーマです。プロジェクトに対して、属性情報を設定することができます。例えば、プロジェクトの種類、使用しスキル・技術、クライアント名、実績年、サイトのURLなどをプロジェクトごとに記入でき
無料で商用利用可能なフリーイラスト素材を配布しているサイトを紹介します。 おすすめのフリーイラスト素材サイト いらすとや いらすとや いらすとやはかわいいフリー...
次のページ
このページを最初にブックマークしてみませんか?
『WordPressのための便利帳』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く