HTML5, CSS3, jQuery, WordPress, Bootstrap, SublimeTextなど、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。 PDFや画像をダウンロードしたり、ブックマークしておいて、すぐに確認できるようにしておくと便利ですね。

作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5

WordPressでブログやサイトを運営する前、そして運営している時にしっかり設定しておきたいWordPressのセキュリティやメンテナンスに役立つ.htaccessの設定を紹介します。 .htaccessファイルを守る 最初に行うことは、.htaccessをあなた以外の無許可のアクセスから守ることです。下記のスニペットは第三者があなたの.htaccessファイルにアクセスするのを阻止します。 ルートの「.htaccess」に下記を記述します。 <files ~ "^.*\.(&#91;Hh&#93;&#91;Tt&#93;&#91;Aa&#93;)"> order allow,deny deny from all satisfy all </files> wp-config.phpファイルを守る WordPressでもう一つ重要なファイルがあります、それはwp-config.phpです。

WordPressの制作の準備、制作、公開、SEOやセキュリティやメンテナンスなど運用における、WordPressでサイトやブログを運営する際の大切なポイントをまとめたチェックリストを紹介します。 Killer WordPress Checklist: 101+ easy steps to launch your next website! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 チェックリストはインフォグラフィックにもなっており、元ページでダウンロードできます。 インフォグラフィックの一部 はじめに WordPressの制作準備時のチェックリスト WordPressの制作時のチェックリスト WordPressの公開時のチェックリスト WordPessのSEOのチェックリスト WordPessのセキュリティのチェックリスト W

Habakiri Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。 公式サイトを見る 先日、WordPress の公式テーマディレクトリにテーマ Habakiri が掲載されました。以前掲載された Kotetsu に続き2つ目のテーマ掲載となります。 お使いの WordPress の管理画面にログインし、テーマインストール画面で「Habakiri」と検索すればすぐにインストールできます。このサイトも Habakiri を親テーマとして使っているので、だいたいの雰囲気はわかるかなと思います。 Habakiri の特徴 WordPress テーマ Habakiri には次のような特徴があります。 Boot

WEB制作のポイント 2017年7月16日 初心者が、WordPressでコーポレートサイトを作る全手順-２ 初回の「初心者が、WordPressで企業サイトを作る全手順-１」では、企業サイトの体裁をおおよそ完成させた。 第2回目となる今回は、各セクションの体裁をどうするか、どうやって更新していくかについて紐解いていこうと思う。 数あるCMSツールのなかでも、WordPressは実は初心者にとっても扱いやすいもので、なおかつ極めようと思えば、その意思に応えてくれる奥深さも備えている。 「初心者が」のキモは、あらかじめテンプレートが準備されているCMSツールを活用することによって、HTMLやCSSといった、いわゆるWEB制作の知識がなくても、WEBサイトとしてある程度の体裁を整えられることだ。 少し馴れてきたら、WordPressを使って、試行錯誤しながらでもWEBサイトにあなたのオリジナリ

作者はNobuoさん。Principleというテーマも作成されている方ですね。 とにかくかっこいいので、紹介したいと思います。無料で高機能でSEOにも強いWordPressテーマを探されている方必見ですまじで。初心者でもCSSをいじらずともとても綺麗になるレスポンシブデザインのテーマです。 シンプルでかっこいいレスポンシブデザイン 出典：マテリアル ブログのホームページとなるビューはこんな感じ。シンプルなカード型、タイル型のデザインで、「こんなトップページにしたい！」なんて人も多いのではないかと。 出典：マテリアル さらにスクロールすると、カテゴリごとの記事が出てきます。これは嬉しい機能ですね。普通は最新記事一覧しかホームって設置されていなかったりするんですが、記事が多くなってくると、埋もれてしまうんですよね。これがあれば読者は自分の行きたいカテゴリに行きやすいですね。 さらにサイトバーに

ランディングページ、スモールビジネス、ポートフォリオ、ギャラリーなど、企業や個人サイトを簡単に構築できる多目的用のWordPressのテーマファイルを紹介します。 「Optimizer」の名の通り、あらゆるデザインに最適化できるようカスタマイズ性に優れています。 Optimizer Optimizer -WordPressテーマディレクトリ OptimizerにはFree版とPro版があり、Free版ではいくつかの機能が利用できませんが、CC0ライセンスで個人でも商用でも無料で利用できます。 Optimizerのデモ Optimizerの特徴 Optimizerのデモ Optimizerを使うと、本当にいろいろなタイプのページやサイトが作成できます。

WordPress は4つ運営中、キャリコ（ @calicocatxyz ）です。 やりたいことを叶えるために WordPress を覚えるところから始まり、初めて開設したキャリコ、MT から引っ越しさせた旅ブログ、仕事で扱うブログ、スコにゃん劇場と、気付けば4つのサイトを抱えるまでになっていました。 そうなると WordPress の扱いには慣れたもので、使うプラグインも大体決まってくるのです。基本的なプラグインを決めておいて、あとはそのサイトの特色に合わせて選ぶといった感じですね。それではいってみましょう。 WordPress プラグイン Autoptimize ダウンロードAutoptimize Web サイトのページ表示速度がエライ上がると評判の Autoptimize はインストールするだけで段違いに速くなります。特に JavaScript の縮小によりスマホ・パソコン表示のスコ

WordPressには数多くのテーマファイルがありますが、それらとは少し違ったアプローチのテーマ「Layers」を紹介します。 ページ作成にはHTML/CSSの知識は不要で、レイアウトやウィジェットを組み合わせてかっこいいページを直感的に作成できます。 Layers Layers -GitHub ライセンスはGPL 2.0 Licenseで、商用利用、修正、配布などが無料で行えます。 通常のテーマファイルはデザインが完成していて、画像やテキストを配置しますが、Layersはベースとなるレイアウトが数種類あり、そこにコンポーネントやウィジェットを自由に組み合わせてページを作成します。 ページのデザインを見ながらカスタマイズできるテーマという感じです。 組み合わせるのは簡単で、下記ページで動画で公開されています。

All in One SEO Packは、簡単にWordPressのSEO対策が行えるプラグインです。Titleタグ、meta descriptionタグ、meta keywordタグ、noindexの設定などがページごとに行えるようになります。トップページや投稿ページは勿論のこと、固定ページ、カテゴリページ、著者ページ、404エラーページ、検索結果ページなどを広くSEO対策することが可能です。 All in One SEO Pack WordPress SEO by Yoast WordPress SEO by Yoastは、All in One SEO Packを高機能にしたプラグインです。各ページのタグ設定やnoindex, follow設定の他にも、OGPやTwitter cardの設定や、「category」スラッグ削除、構造化されたパンくずリストの設置など、他のプラグインをいく

Xeory はバズ部の運営ノウハウをもとに完成させたコンテンツマーケティングのためのWordPressテーマです。どなたでもコンテンツマーケティングを行い、WEB上に良質なコンテンツを数多く生み出して頂けるように無料で提供させて頂いております。 どうぞ、ご自由にお使い下さい。

みんな大好きWordPress！プラグインは宝の山やで!! 近年ではブログサイトのみならず、企業サイトやウェブサービスの基幹としても使われて久しいWordPress。 その最大の魅力ともいえるのは、膨大かつ便利なプラグインの数々。 ただ、あまりにプラグインの数が多すぎて、似たような機能を持つプラグインの中からどれを選んだら良いのか、迷うケースも多々あって。 キャッシュ系は「W3 Total Cache」か「wp Super Cache」か、バックアップなら「BackWPup」「WP-DBManager」か、などなど。。。 そんなワケで今回のエントリーでは、素晴らしいWordPressのプラグインの中から、実際にフリーランスのワタクシがクライアントワークでも使わせて頂いている「smkn的スタンダード」なモノだけを、総計21個まとめてみました。 実務においてジャンルを問わず利用できる基本的なモ

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

ログイン画面のロゴ変更 まずはおなじみのカスタマイズから。 WordPressロゴをサイトのロゴに変更します。複数のメディアを運営している時などに判別しやすいです。 functions.php内 //ログイン画面のロゴ変更 function login_logo() { echo '<style type="text/css"> #login h1 a { background: url('.get_template_directory_uri().'/images/login_logo.png) no-repeat; width: 320px; height: 70px; background-size:100% auto; } </style>'; } add_action('login_head', 'login_logo');

WordPressには世界中の開発者が制作した機能を自由に組み込むことができる「プラグイン」が存在します。プラグインを上手く活用することが、WordPressの魅力を最大限に引き出すポイントです。 そこで今回は、私がWordPressで様々な種類のWebサイトを制作してきた経験から、役立つプラグインを厳選してご紹介します。いずれも無料でも使用できるので、ぜひ活用してみてください。 WordPressプラグインとは WordPressプラグインとは、WordPressの機能を拡張させるための仕組み（ツール、モジュール、パーツのようなもの）です。 WordPressの本体は、ユーザーの様々なニーズに柔軟に対応できるように基本的でコアな部分のみで設計されています。WordPressプラグインを使うことで、ニーズに合わせた様々な機能を持ったサイトを構築することができます。 参考：WordPress

Web制作を仕事にしようと決めて、勉強を始めたのが今から約8年ほど前だったと思います。その当時から現在まで、大変お世話になっていたり、気になっているWebサイトが多くあります。 今回は、その1部をご紹介します。（サイト名は順不同、敬称略です） buzzword(バズワード) http://www.buzzword.jp/ Web業界に入りたての方がつまずきやすい技術に焦点を当て、解説されている記事が多いです。 例題を交えながら平易な文章で解説されていて、とても親切。ずーっとお世話になっているサイトの1つです。 Attrip http://attrip.jp/ 仕事の休憩時間によく見るサイト。笑うつもりがなくても思わず吹いてしまうネタ記事が多くて、なごみ要素がとても強いです。 という面もあれば、国内外のWebサービスをすぐに試したり、ネット上で話題になっているものをいち早く見つけて記事にした

サーバーの扱いに慣れていない初心者の方を対象に、VPS(Virtual Private Server)を使ってWebサーバーを構築し、WordPressサイトを運用できるようになるまでの連載を始めます。 サーバーの構築方法については、中・上級者向けの情報は多く見つかりますが、 「初めてVPSに触れる方が、Webサイトを構築して運用できるようになるまでのノウハウ」 を体系的に解説しているサイトはあまり多くありません。 ネット上に存在している情報では断片的だったり、分からない専門用語が出てきたりして、途中であきらめてしまった方も多いのではないでしょうか？ 本連載では、初心者の方でも「これさえ読めばVPSを構築できる！」ように、初歩から丁寧に解説します。 「今までレンタルサーバーを使っていたけど、一歩進んでVPSに挑戦してみたい」という方のお役に立てれば幸いです。 本連載は以下の構成で5回に分け

WordPressには、いくつかのプログラム言語が利用されています。 主に使うものといえば、以下のような言語です。 WordPress関数（PHP）PHPHTMLCSSJavaScript（jQuery）ただ、これだけの言語があると、初めてWordpressに触れる人には、覚えるのが大変なのではないかと思います。 というか、ある程度プログラム経験がある僕でも、揮発性の高い脳を利用しているため、全く覚えられません。 ということで今回は、Wordpressで「これどうすればいいんだったっけ？」「あれなんて関数だったっけ？」なんて時に見ると便利なカンニングペーパー（チートシート）の紹介です。 WordPressチートシートWordPressで重要な部分の覚え書きというか、これだけ覚えておけばある程度Wordpressを使えるようになるチートシートです。 日本語版 WordPress チートシート