今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

古いやり方や面倒な作業を一気に変えてくれそうな最新のWordPressプラグインを厳選して紹介。WordPressユーザーなら要チェックです！ プラグインが好きな人もそうでない人も、たくさんの魅力的なプラグインがWordPressにたくさんあることを認めざるを得ないでしょう。豊富な機能を備えたEコマースWebサイトの構築からWebサイトへの小さな変更の追加に至るまで、Webサイト作成者にとってWordPressのプラグインは非常に役立つものです。 WordPressの人気は堅調なので、毎日のように新しいプラグインが開発・ローンチされています。しかし、常にこれらのプラグインを最新の状態に保つのは大変です。この記事ではWebサイトのトラフィックや売上を急増できる新しいプラグインを紹介します。 1. Duplicate Page 似たようなページや投稿を作成する時間を短縮する方法を探していません

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの

プロジェクトのメンバーでないとなかなか目にすることができないワイヤーフレームやプロトタイプ、他の人がどのように作っているか気になります。 最近のWebサイトやスマホアプリの制作で参考になりそうなワイヤーフレーム、フローチャート、プロトタイプを紹介します。 UXデザインのツールも、Adobe XDが先日ベータ版としてリリースされ、SketchもメジャーアップデートとなるSketch4がリリースされ、充実してきましたね。 Adobe XD Wireframe Kit for UX Designer for Adobe XD まずは年内にWindows版のリリースが予定されているAdobe XDで作成されたワイヤーフレーム用のキット。最近のWebサイトで使用されているコンポーネントが数多く収録されています。

その昔アンディ・ウォーホルという巨匠が描いたマリリン・モンローのポップアートのレプリカが4年くらい前にマンションに飾ってあったのを思い出すけれど、最近Webデザイン界では海外を中心に「Duotoneデュオトーン」と呼ばれるデザインが流行りだしている。 シンプルでありながら、ポップでビビッドで非常に印象に残るデザインなので、「Duotone」を極めれば超イケてるサイトになりそうな予感。 最近流行っている「Duotone」って何ぞ？ 「Duotoneデュオトーン」は「Duo(2つの)」＋「tone(色)」をあわせた言葉で、ベースとなるミドルトーンとハイライトカラーの2色を中心に描き出されるハーフトーン作品のこと。Duotone作品自体は昔から存在するのだけれど、昔のアーティストが一生懸命に写真をつなぎあわせていた時代から時が経ち、Photoshopのアップデートで簡単に写真を加工してDuoto

ウェブサイトを作成してみたいけど、なにから始めたらよいか分からない。また、時間と予算をかけずウェブページをつくりたい。そんなときは、無料ダウンロードできるHTML/CSSテンプレートを利用してみましょう。 人気フレームワーク Bootstrap を利用しているテンプレートも多く、カスタマイズの自由度も高いアイテムを中心に、最新ウェブテクニックを盛り込んだフリー素材をまとめています。無料テンプレートを利用することで、製作時間の短縮につながり、他のデザイナーが作成したコードを確認することで、どのようにデザインされているのか参考にすることもできるます。 詳細は以下から。 ウェブ初心者も安心！すごい無料HTMLテンプレート素材まとめ AKAD 鮮やかな配色カラーパレットに、余白スペースをたっぷり確保したミニマルスタイルのHTMLテンプレート。今年を代表するスタイルのひとつと言えるでしょう。 デモペ

ウェブサイトにレコードプレーヤーを置こう。 Codrops’s Record Player ディストリビューション 先日、 Codrops にて Interactive Record Player が公開されました。 このレコードプレーヤーは、mp3音源を読み込み、レコードプレーヤー型のUIを使って再生をするのですが、独特のノイズ、トーンアームの動きや再生位置の変更など、本物をリアルに再現しています。 この記事では、Codropsのライセンスのもとで、ソースコードをカスタマイズし、 簡単に曲やレコード情報を変更できるようにした、 ・ WEB用のテンプレート ・ WordPress用のテンプレート を作成・再配布しています。 目次 1. レコードプレーヤーを置いてみよう。 2. 動作環境 3. WEB用テンプレートの使い方 4. WordPress用テンプレートの使い方 5. 最後に

旅館・飲食店向けの無料HTMLテンプレート「white base」 ローカルビジネスに使えるHTMLテンプレートを作りました。 レスポンシブシングルカラムのHTMLテンプレートです。 旅館や飲食店向けに、縦書きのナビゲーション、日本語がきれいに表示されるデザインにしました。 ※このテンプレートはWordPressテーマではありません。WordPressにそのままインストールしては使えません。 テンプレートファイルのダウンロードはこちら→HTMLテンプレートファイル（zip） [追記]デモページがレスポンシブになってませんでした。修正しました。 わかりやすくするためにサンプルのタイトルロゴを日本語にしました。 [訂正] メールフォームプログラムを一緒に同梱してました。メールフォームプログラムはご自分で導入してください。theme2.0.zipが最新です。 base.syofuso.com 海

WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン

TL;DR レンタルサーバでの運用を止め、VPS に移行し、Apache の制約から開放されるため軽量・高速な Nginx に変更し、テーマをカスタマイズし軽めのリニューアルをしました。随分と早く使いやすくなったので、会社 HP とコムテブログに行った高速化への手順を全公開します。 今回のリニューアルに伴い、今回行った高速化処理。ちなみに会社 HPはこちら。 PC は 96 点、アナリティクスとメインの CSS を外せば 100 点が出そうでしたが断念。 Pingdomでは 97。ブログの方は、アドセンスや外部読み込み（こちらで調整できないため）で、どうしても遅くなってますが、これに近づけるようにしていきたいです。 なにはともあれ、サーバのスペックそのものを変えないと駄目だということでさくらの VPS 4G（SSD 4G）をチョイス。コーポレートサイトなら 2G くらいでもよいですが、ブロ

おかげ様で2016年5月の月間アクセス数は180万を突破。 下記記事にも書いた3月のアクセス数からすると、それほど急成長している感じはありませんが、着実に月5%ずつくらいはアクセス数を増やすことが出来ている状況ですね。ほんといつも読んでくれているみなさん、有難うございます。 クレジットカードの読みもの 月間170万PVを突破（2016年3月）！ソーシャルメディアからのアクセス数が少ないのが課題です。 そこで今回は、いつもの様に当サイトへのアクセス内容を公開するのではなく、今後、どうやって月間300万PVを目指していくのかという計画について記事を書いてみたいと思います。ブログのアクセスアップを考えている方は是非、参考にしてみてくださいね。 月間300万PVを狙うための戦略＆アイデア： １．他サイトで検索数が多い記事を狙う キーワードのアイデアを貰う： ２．ヤフー知恵袋を狙う： ３．過去記事を

2015年の春頃にChromeが「プッシュ通知」に対応したことで、WEBサイトから「プッシュ通知」を送れるWEBサービスも増えてきましたね。 「プッシュ通知」といえば、スマホアプリをイメージしますが、これからはもっと広く「プッシュ通知」が使われるかもしれません。 プッシュ通知とは スマートフォンを使っている方なら、アプリから最新ニュースの通知が届いていることと思います。Facebookでもメッセージが届いたりすると通知が来ますよね。 Macを使っている方ならカレンダーアプリやメールアプリなどからの「通知」が表示されているかと思います。 このような「プッシュ通知」は、基本的にそのデバイス（スマホやPCなど）にインストールしたアプリを経由して届きます。ですので、FacebookアプリがインストールされていないスマホにはFacebookからの通知は当然届きません。 これまでECサイトやWEBメデ

デフォルトのスクロールバーも表示 ブラウザのデフォルトのスクロールバーを併用することも可能です。 ScrollMenuの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="scrollmenu.css"> </head> <body> ... コンテンツ ... <script src="jquery.js"></script> <script src="scrollmenu.js"></script> </body> Step 2: HTML 各コンテンツは、section要素で実装します。 <section class="section" id="section1"> <div class="content"

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

テキストや画像や動画などをタイル状に配置する、レスポンシブ対応のカード型リストを実装できるCSSのグリッドを紹介します。 「chewing」の名の通り、表示サイズに合わせてチューイングガムのようにカードとグリッドが伸び縮みします。 デモはサイズの可変可能 chewing-grid.cssの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="build/chewing-grid-atomic.css"/> </head> Step 2: HTML 各カードはリストで実装します。 <ul class="chew-row chew-row--col-4 chew-row--card-min-300 chew-row--card-min-500"> <

2015年7月14日の記事を再編集しています。 CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。 しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。 今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。 CSS3で実装できるオシャレなサンプルコードまとめ 1. HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点｜株式会社LIG https://liginc.co.jp/web/h