サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
tetra-themes.com
ランサーズなどでもたくさん発注されているロゴデザインコンペのお仕事。仕事はたくさんあっても参加者が多いためなかなか当選しないこともあります。 少しでも当選するために複数のデザインをアップすることもあると思いますが、ロゴデザインと言っても結構時間がかかるもの。そんなときに使いたいのがロゴテンプレートです。 ロゴテンプレートはあらかじめよくあるデザインパターンが用意されているので、これを土台にして制作作業を効率化しましょう！ ロゴデザインに使えるテンプレート素材 Colorful geometric logos Abstract logos in raibow colors Colorful abstract logos Free Vector Retro photography badges Hipster badges collection Ocean and sea nautical b
SEOの中でもとくに重要な要素の１つにWebページの読み込み速度があります。ページの読み込み速度をアップすることでSEO効果を期待できるわけですが、自分でやるにはかなりの知識が必要に．．．。でも安心して下さい。Wordpressならこの作業も完全自動化することができます。 このページではWordpressを簡単に超高速化してくれる、絶対入れておきたいプラグインを紹介します。それぞれ異なる分野の最適化・高速化をしてくれるのでとりあえず全部入れておけば効果抜群！ WordPressを高速化してくれるプラグイン W3 Total Cache まずはこちら。キャッシュを活用することでWebサイトの表示速度を高速化してくれるプラグイン。Wordpress使うならまず入れておきたいプラグインの一つです。 Better WordPress Minify こちらはCSSファイルとJavascriptファイ
Web制作会社のヘッダーや背景画像などでよく見るポリゴン模様のテクスチャ。グラデーションやカラーを使ってシンプルながら、先進的なイメージを作り出すのに使われます。 綺麗なポリゴン模様を自作するのは結構めんどくさいと思うのですが、そんなときは素材を使ってしまいましょう。このページでは非常にハイクオリティなポリゴンのフリー素材を集めてみました。 ポリゴン模様のフリー素材まとめ Polygon free vector backgrounds Blue polygonal background Abstract summer background Blue geometric background Polygonal abstract background design Free polygon background Autumn polygonal background Polygonal ba
Webサイトのコーディングでレイアウトを作るのにすごく便利なBootstrap。実際の案件でも使用可能ならほぼ必ずといっていいほど使っています。 ただ、Bootstrapを使っていてコンポーネントの動きやレイアウトをちょっとだけカスタマイズしたい、ということはよくある話。ここで紹介するマウスオーバーもそんなちょっとした要望の１つです。 この記事ではBootstrapのドロップダウンをマウスオーバーで使うためのCSSカスタマイズ方法を紹介します。 ドロップダウンを多階層化する方法はこちら -> Bootstrap3のドロップダウンを多階層にする方法 通常はクリックで開くようになっていますが、CSSを１行加えるだけで簡単にマウスオーバーで開くようにすることが可能です。方法は以下の通り。 HTML <div class="dropdown"> <a href="#" class="dropdow
LESSとはCSSプリプロセッサーの１つで、似たようなものにSASSがあります。CSSプリプロセッサを一言で説明すると、CSSをもっと便利に使えるようになるもの。 例えば変数を使ったり、よく書くコードをテンプレート化（Mixin）しておいたり、ネストを使ってセレクタを何度も書く手間を省いたりなどなど。簡単な使い方を以下の記事にまとめているので詳細はそちらをご覧ください。 SASSの簡単な使い方・書き方 LESSの書き方・使い方 そんなCSSプリプロセッサですが、BootstrapではLESSが使われています（SASS版もあります）。Bootstrapの主な使い方としては、フレームワークとして読み込んで、HTMLタグにclass名をつける方法だと思いますが、LESSで使うことも可能。 以下にBootstrapをLESSで記述する方法を紹介します。 Bootstrapのソースファイルをダウンロ
Webデザインのトレンドや技術は年々変化していき、それらをすべて身につけるためにたくさん本を買って、勉強会や海外のブログのチェック・・・結構たいへんですね。 そんなときに役立つのがSlideshare。各地で開催されている勉強会で使われたスライドが無料で公開されてます。最先端の技術や、デザインのトレンド。仕様書の書き方やWeb制作のワークフローまでさまざまなコンテンツをいつでも見ることができます。 ここではそのなかでもWebデザイナー向けの絶対見ておきたいおすすめスライドを紹介します。 新米WebデザイナーのためのSlideshareまとめ ノンデザイナーのための配色理論 色彩センスのいらない配色講座 Webデザインのセオリーを学ぼう Webデザインのウソ・ホント ～ Web らしくデザインするためのヒント 流行に乗っていいの？フラットデザインの落とし穴 デザインをするときにデザイナーが考
BootstrapでWebサイトを作りたい！と思っても慣れないうちは結構大変。レスポンシブ化やグリッドレイアウトは大変便利ですが、たくさんあるclass名を覚えないとなかなかうまく使えない．．． そんなときにおすすめなのがテンプレート。テンプレートを使えばあらかじめレイアウトが組まれた状態で使用できるため、画像やテキストなど必要な部分を変更するだけでWebサイトを効率よく作ることができます。 無料公開されているBootstrapテンプレートの中から最近公開された、ハイクオリティなものを集めてみました。 Bootstrapの無料で使えるテンプレート 50 Free Bootstrap 3 Templates and UI Kits 70+ Free Bootstrap HTML5 Website Templates 35 Free Bootstrap HTML5 Website Templa
最近はBootstrapを使ってWebサイトを作成したり、既存サイトのレスポンシブ化を行うことが多いです。レスポンシブ化を行うときに注意しているのが、UI/UXについて。単に１列表示すればよいというものでもなく、スマートフォンで閲覧したときに見やすい表示にする必要があります。 そんなときに便利なのが、このページで紹介するような参考サイト。どのWebサイトもデザインのクオリティが非常に高く、レスポンシブ化の参考にもなります。 Bootstrapの公式サイトでたくさん公開されているので、デザインの参考に、レスポンシブ化の参考にしてみてはいかがでしょうか？ Bootstrapで作られたWebサイト CachetHQ Latitude Supply Co Tsaa Tea Shop Johan Holmberg George & Harrison BARE Atomico Stupid Studi
Bootstrapの便利さに気付くと、もうこれなしでWebサイトのレスポンシブ化をしたくなくなるほど。グリッドやよく使われるコンポーネントなどがあらかじめ用意されているので、class名をつけるだけで簡単にモダンなサイトを構築することができます。 ただでさえ便利なBootstrapですが、jQueryなどで作られたプラグインを使えばさらに機能を強化することも可能！デフォルトにはない機能を追加したり、今あるものをもっと便利に使えたりするプラグインがたくさん公開されていますが、ここではその中でもとくにおすすめのプラグインを紹介します。 Bootstrapを強化する！おすすめプラグイン Bootstrap Multiselect Bootstrap Tag Input Bootstrap File Input Bootstrap WYSIWYG Bootstrap Lightbox Plugin
LightboxはECサイトの商品画像やブログ・ポータルサイトの画像ポップアップなどでよく使われています。Lightboxプラグインを使うことで画像を拡大して詳細画像を見たり、ギャラリーのように画像だけを閲覧することも可能。 ここで紹介するものはどのプラグインも完成度が高く、Javascriptの勉強になるものばかり。中には画像をスライド表示したり、タッチスクリーンに対応したライトボックスなどもあり実用的なものが多いですね。 このページではJavascriptやjQueryで作られたLightboxプラグインを紹介します。 Javascript,jQueryのライトボックスプラグイン Lightbox 2 asPopup Magnific Popup Swipebox iLightBox Venobox Nivo Lightbox Colorbox Tosrus Image Lightbo
Tumblrはブログを簡単に投稿できるサービスですが、Wordpressよりも簡単に始めることができ、しかもカスタマイズも自由に行えます。 公式サイトでも数多くのテーマが公開されおり、選ぶのにこまってしまうほどです。ただ、全体的にポートフォリオタイプが多いのが現状。オリジナルサイトを作ったり、企業のブログとして本格的に使いたい場合などは自分でカスタマイズする必要性がでてきます。 このページではTumblrをカスタマイズするための便利なリソースや、カスタマイズの大まかな方法について紹介します。 Tumblrカスタマイズの便利なリソース Tumblrの公式ドキュメント Tumblrをカスタマイズする際にもっともお世話になるのが公式ドキュメントです。 このページのGetStartedから初めるとTumblrの基本的なカスタマイズができるようになっています。 このサイトでも各ポストタイプについてカ
Webで使うスクリプト言語と言えば、一昔前ならとりあえず生中な感覚でとりあえずPerlと言われてましたが、最近はHTML5フレームワークなどをはじめ、ものすごい早さで進化してます。 ここで紹介するAngularJSもそれらのうちの１つ。単にモバイルアプリ向けだけでなく、Webサービスの管理画面やインタラクティブなWebサイトを制作する際にもかなり役立つツール。時代に乗り遅れないためにも、是非使えるようになっておきたいところです。 このページではAngularJS初心者のための簡単な使い方を紹介します。 AngularJSとは？ AngularJSはGoogle製のJavascriptフレームワーク。JavascriptのライブラリでjQueryというのがありますが、こちらは主にDOM操作（HTMLタグの操作）をするものです。AngularJSはDOM操作だけでなく、Wordpressのよう
せっかくクールなアプリを作っても、アプリのサポートページが無料のブログのデフォルトテンプレートのままではちょっと残念な印象になります。 アプリのランディングページやサポートページをもっとかっこよくしたい！という人におすすめなのがアプリ向けテンプレート。HTMLの知識がなくてもテンプレートを使うことで簡単にかっこいいアプリのページを作ることができます。 ここではアプリのランディングページに最適なWordpress、HTMLテンプレートをまとめてみました。 アプリ向けランディングページテンプレート WordPressのランディングページテンプレート EOS ４タイプのレイアウト ライト＆ダークバージョン ８種類のカラーパターンを用意 Bootstrap3.2で作成 パララックスエフェクトとビデオバックグラウンド Lotek WordPress4.0+ Visual Composer対応 Con
CSSフレームワークとして最も人気の高いBootstrap。すでに多くの方が使っていると思います。Bootstrapを使っていて、ちょっとだけレイアウトや動きを変えたいということはよくあるんですが、ここで紹介するドロップダウンもその１つ。 通常はリンク（dropdown-toggle）をクリックするとメニューが開くという仕組み。 ドロップダウンでよくある要望が、マウスオーバーで開きたい場合やメニューの多階層化です。Bootstrapのドロップダウンをマウスオーバーで開く方法でマウスオーバーの方法を解説しましたが、ここでは多階層化する方法をまとめてみます。 Bootstrapのドロップダウンを多階層化する デフォルトでは上記の画像のように１階層だけ表示されます。これを多階層化するには以下のようなコードを追加します。 HTML <div class="dropdown"> <a href="#
CSSの記述量を減らし、簡単にレスポンシブサイトを実装できるBootstrap。BootstrapのコンポーネントでFormパーツも簡単に作ることができますが、PHPなどは用意されていないので実際に機能するメールフォーム（お問い合わせフォーム）にはなりません。 そこで、この記事ではBootstrap3と無料のPHPプラグインを使って実際に動作するメールフォームを作ってみます。 Botstrap3とPHPで動作するメールフォームを作る Bootstrap3でお問い合わせフォームを作る まずはBootstrapを使ってフォームを作ります。Bootstrapの使い方やフォームに関しては以下のページを参考にしてみて下さい。 Bootstrap公式ドキュメント 初心者のための簡単なBootstrap3のはじめ方 BootstrapでFormを作る方法 Bootstrapを使えば通常のHTMLフォーム
javascriptとjQueryの基本的な使い方についてまとめてきたので、実際に実用的なものを作ってみます。 まずはWebでもよく使うアコーディオンパネル。ECサイトのカテゴリーリストの開閉なんかでも使われることが多いです。ただ、プラグインを導入するほどでもないようなちょっとしたことが多いのでさくっと自作してみることにします。 jQuery自作するシンプルなアコーディオンパネル ここでは以下のような要件を満たす機能を実装します。 要素をクリックするとリストを表示 表示中の要素をクリックすると閉じる 表示中は−ボタン、閉じてるときは＋ボタンを表示 今回ボタンにはFontAwesomeを使用します。HTMLの方はあまり深く考えず構造だけ作っていけばOK。リストは通常時に閉じてるのでcssでdisplay: noneを指定しておきます。 HTML <!DOCTYPE html> <html l
通常Wordpressの投稿画面で入力したものは、すべてthe_content()内出力されます。イベントの日時や場所を入れたい場合には毎回投稿画面にテーブルを記述する必要があります。 こんなときに役立つのがカスタムフィールド。カスタムフィールドを使えば投稿ごとに個別の値を設定でき、テーブルなどはテンプレート側に記述することで、投稿作業を効率良く行うことが可能になります。 やり方はすごく簡単なのでさくっとやってしまいましょう。 カスタムフィールドの設定とデータ出力方法 カスタムフィールドの設定、入力方法 カスタムフィールドを設定するには、投稿エリアの下にあるカスタムフィールドのエリアに値を入れていきます。表示されていない場合は表示オプションでチェックしておきましょう。 値を設定するには、新規追加をクリックしてラベル（名前）を作成します。 次は値を入れます。イベントの日付なら１５日のように入
Bootstrap3を使ったフォームの作り方をまとめて紹介します。 フォームはWebにとって欠かせない要素の１つ。ブラウザ標準のスタイルがかかっているため、扱いづらい感じがしますが、Bootstrap3を使うことで簡単にレイアウトやバリデーションスタイルを当てることができます。 使えるスタイルがたくさんあるので、覚えるのも大変ですが、まずは基本的なところから始めていきましょう。 関連記事： Bootstrap3とPHPでメールフォームを作る方法 Bootstrap3 Formコンポーネントの使い方 基本的なFormタグの書き方 input、select、textareaはブラウザの標準スタイルが適用されますが、.form-controを追加することでBootstrap3のスタイルをつけることができます。 また、フォームパーツは.form-groupで囲むことで自動的に最適な間隔で表示される
以前はzencodingという名前だったEmmetですが、HTMLに限らずCSSでも威力を発揮します。例えばmargin: 10px;と１３文字打っていたものが、m10のようにたった３文字で記述できてしまうのです。 この記事ではEmmetをCSSで使う方法を紹介します。 HTML編はこちら: HTMLを効率よく書く！Emmetの書き方・使い方まとめ Emmetの書き方・使い方 CSS編 Emmetのインストール Emmetは各コードエディターにインストールする必要があります。インストール方法や基本的な使い方については、HTMLを効率よく書く！Emmetの書き方・使い方まとめをご覧ください。 EmmetでCSSを書く方法 基本編 Emmetを使ったCSSの記述方法を確認していきます。まずは簡単なところから。 基本的には各プロパティごとに展開していきます。プロパティの短縮系はチートシートのCS
Web制作やアプリ開発では、本格的なデザインに入る前にワイヤーフレーム作ることがよくあります。制作会社によってはPower pointやExcelなどが使われることもありますが、それらはワイヤーフレームに最適化されておらず、やや不便。 以下で紹介するようなツールを使えば、もっと便利で豊富な機能を使うことができます。Excel方眼紙から卒業したい！という方は要チェック。 無料で使えるワイヤーフレームツールまとめ JUSTINMIND こちらはワイヤーフレームからデザインまで可能なプロトタイピングツール。PCサイトはもちろん、モバイル向けのサイトやアプリのワイヤーフレームも作れます。Photoshopのような洗練されたUIで、ドラッグ＆ドロップでコンテンツを追加することができます。 Wireframe CC こちらは完全フリーで使えるワイヤーフレームツール。Webアプリなのでブラウザ上で編集す
コードエディターにはHTML・CSSを効率良く編集する方法でも書いたように、コードの自動補完などの機能が備わっています。これらの機能を使うことで効率良くコードを記述することができるのですが、ここではさらに効率アップできるEmmetを使ってみます。 Emmetを使うとHTMLタグを記述する際に必要な< >などを省略したり、長いHTMK構造をたった数行で書くことができるようになります。慣れるとこれ以外で書くのがめんどくさくなるというデメリットがありますが、とにかく効率良く記述できるのでまだ使ってない人は是非使ってみて下さい。 EmmetにはHTMLとCSSがありますが、ここではHTMLの記述方法を紹介します。 CSS編はこちら -> CSSを効率良く書く！Emmetの書き方・使い方まとめ Emmetのインストール方法 コードエディターにEmmetをインストールする Emmetはコードエディター
offcanvasとは、主にスマートフォンなどのモバイルデバイスでwebサイトにアクセスした際に使えるメニュー機能のこと。Bootstrapのコンポーネントではドロップダウンナビが用意されてますが、実はoffcanvasを使うこともできます。 Bootstrapを使ったoffcanvasの作り方 Bootstrapのソースコードをダウンロード Bootstrapのダウンロードは必要なものだけがまとめられたファイルと、開発用ファイルも含まれるソースコードダウンロードがあります。offcanvasのコードはそちらに用意されているので、ここではソースコードをダウンロードします。 Bootstrapのソースコード offcanvasのサンプルコードをチェック Bootstrapのソースコードをダウンロードして解凍したら、docs -> examples を開いてみます。その中にあるoffcanva
転職や就職市場でも人気の高いIT系の職業。ごく一部のブラック企業が取り上げられ、なんとも言えない空気が漂っていますが、Googleのような綺麗なオフィスがあったり、超ホワイトなベンチャー企業があることも事実。そんな会社に就職・転職するためにもしっかりした技術を習得しておきたいところです。 でも、勉強するにしても高額な本を買うのは少し勇気がいりますよね。買っても全部やらずに終わってしまっては高額な出費が無駄に終わってしまいます。 そこでおすすめなのが、無料の学習サイト。HTMLやCSSのような簡単なコーディングから、PHPやJAVA、Rubyのような人気のプログラミング言語まで、全部タダで勉強することができるのです！ コーディング・プログラミングの無料学習サイトまとめ Progate まずはこちら。無料の学サイトと言えば英語のみだったのですが、こちらはバッチリ日本語対応。HTML/CSS,P
無料で使えてECサイトとしての機能も充実しているEC-CUBE。管理画面の使い方は公式本に掲載されていますが、ページの追加やブロックの作成方法などの情報が少ないのが難点。 初心者には少し敷居が高く感じるのですが、せっかく無料で誰でも使えるのでカスタマイズにもチャレンジしてみましょう。 ここではカスタマイズの入門編ということで、EC-CUBEカスタマイズの全体像をさくっと紹介します。 初心者のためのカスタマイズ入門 EC-CUBEのテンプレート構造 EC-CUBEにはPC用、スマホ用、ケータイ用の３つのテンプレートがあります。デフォルトではそれぞれのデバイスでアクセスすると自動的に表示されるテンプレートが決められますが、設定を変更することでPCのみ表示することも可能。 PC用テンプレート スマホ用テンプレート EC-CUBEのテンプレートを変更する方法 テンプレートを変更するには、管理画面メ
最近1.0にアップデートされたBrackets。AdobeのツールでDreamweaverというのがありますが、こちらは無料のコードエディターとなっています。 無料と言っても様々な便利機能が搭載されており、日本語にも対応しているので初心者にもおすすめ！WindowsでもMacでも使えて、動作も軽量なのでさくっとHTMLコーディングしたい場合は使えます。 使ってみた感想と合わせて、簡単な使用方法を紹介します。 無料エディター Bracketsの使い方 Bracketsのダウンロードとインストール まずは公式サイトから本体をダウンロードしましょう。 ダウンロードはこちら：Brackets インストールは通常のソフトと同じなのでとくに問題ないと思います。 Bracketsでファイルを開いてみる BracketsでHTMLやCSSファイルを開くにはメニューからファイル->開くを選択するか、 開きた
Web制作の仕事をしていると必ずと言って良いほど発生するのが、バージョン管理の問題。サーバーにアップする形で納品する場合に、別の人が変更した箇所を変更前のファイルで上書きしてしまったり、新しく追加した機能を以前のバージョンに戻したいときに古いバージョンがどこにもない、といったことが発生します。 そんなときに役に立つのがバージョン管理ツール。このツールは古いバージョンを管理できるだけでなく、誰かが変更した部分を上書きするといった事故も防げてしまいます。 ツールにはいくつか種類があり、GitやSubversionが有名。この記事ではSubversionの使い方についてまとめていきます。僕自身も最近Gitを使い始めたばかりなので、勉強も兼ねてバージョン管理ツールの使い方を書いておきたいと思います。 バージョン管理って何？ Webの仕事をしていると先ほども書いたような事故がたびたび起こります。たま
EC-CUBEのURLアドレスはデフォルトで以下のようになっています。 http://sample.com/html/... ドメインの後ろにhtmlが付いてしまうのでこれをsample.comだけにしたいという場合は以下のようにすれば解決します。 インストール前の場合 EC-CUBEをインストールする前の場合はEC-CUBEのデータをサーバーにアップロードする際以下のような手順で行います。 htmlフォルダの中身を全てルート直下にアップロード dataフォルダをフォルダごとサーバーにアップロード define.phpの３行目を以下のように書き換え define('HTML2DATA_DIR', '../data/'); //書き換え後 define('HTML2DATA_DIR', 'data/'); この状態でsample.comにアクセスするとインストール画面が起動するので、そのまま
Welcartのカスタマイズまとめの第４回目は、カートページのカスタマイズについて。WebマーケティングやECセミナーなどでも、カートページの画面遷移の最適化を！と言われるくらい重要なページ。 デフォルトでは４つのページが用意されていますが、表示内容や入力項目をもう少し最適かしたい場合もあると思います。ここではWelcartのカートページをカスタマイズするための基本的なことをまとめていきます。 カートページのファイルは、テーマフォルダ->wc_templates->cartフォルダの中。お客様情報や配送設定など各ページごとにテンプレートファイルが用意されています。 なので修正したいページがあればそのテンプレートのみ修正すればOK。ここからは各ページの簡単なカスタマイズ方法についてチェックしていきます。 カートトップページのカスタマイズ まずはカートトップページ。wc_cart_page.p
WordPressでスマホやモバイルサイト用にテーマを作るには、WPTouchなどのプラグインを導入するか、レスポンシブ化などを行って自分で用意する必要があります。 プラグインを導入するのが一番簡単なのですが、その場合デザイン変更できないのでちょっとかっこ悪くなってしまうことも・・・。自分でつくるにしても、レスポンシブ化はCSSのかなり高度な知識が必要になってきます。 そこでおすすめなのが、スマートフォンやモバイル向けのテンプレートを導入する方法。制作会社に依頼するよりもかなり低価格で、しかもクオリティの高いデザインを簡単に導入できます。 このページでは今すぐWordpressにスマートフォン・モバイル向けのページが欲しい！という人のためのテンプレートを紹介します。 WordPressのスマホ・モバイル向けテンプレート HUNTER – A clean & classy WordPress
次のページ
このページを最初にブックマークしてみませんか？
『TetraThemesブログ - Web制作、サイトの作り方やWordpress、カラーミーショップの...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
