WordPressのfunctions.phpに書いておくと捗ること - コムテブログ
TL;DR WordPress の functions.php に書いておくと捗ることをまとめておきます。 固定ページ判別。body に固定ページのスラッグ名を追加 body に固定ページのスラッグ名を追加。トップページは home のクラス名がつく。固定ページなどは guide about などのスラッグ名を取得しクラス名が付与される。 function pagename_class($classes = ''){ if (is_page()) { $page = get_post();//get_page()は廃止されたので使わない $classes[] = $page->post_name;//スラッグ名取得 } return $classes; } add_filter('body_class', 'pagename_class');
404エラーページをデザインする時に取り入れたい洗練されたエフェクトとギャラリー集
作成：2016/12/26 更新：2016/12/26 Webデザイン > ページを消した時やリンク切れなんかで、味気ない404ページが表示されると悲しくなりませんか。というよりもユーザーは確実に離脱してしまうでしょう。あまり目立たないページだからこそ、手が込んだレイアウトになっていると感動します。 デザインが普通でも、検索窓や内部リンクがあると好印象。今回は404ページを作る時に参考になりそうなギャラリーやエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 404ページとは 404ページとは、ページが存在しない旨を伝えるエラーページのことです。ステータスコード200 OKは「リソースが正常」という意味で、ページが正常に表示されていることを示し、300番台はリダイレクト、400~500番台はエラーであり、404は「リソースが存在しない、探したけ
CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール - コムテブログ
TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション１２の基本原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS
object-fit・currentColor・will-change・image-renderingなどマイナーだけど便利過ぎるCSSプロパティの使い方
object-fit・currentColor・will-change・image-renderingなどマイナーだけど便利過ぎるCSSプロパティの使い方 作成：2016/11/14 更新：2016/11/15 Web制作 > object-fit・currentColor・will-change・image-renderingなど、結構マイナーだけど、実用的なCSSプロパティをピックアップしました。 エンジニア速報は Twitter の@commteで配信しています。 object-fitプロパティはボックスに合わせて、アスペクト比を維持したまま画像サイズを調整できます。 例えば600×300の画像をCSSで400×400で指定したとすると正方形に引き伸ばされます。この時アスペクト比は崩れてしまいます。 しかし、imgにobject-fit: contain;を追加すると、imgに指定し
聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
作成：2016/10/3 Web制作 > 効率よくレイアウトを作成できるように、あまり聞き慣れないけど、今後増えていくであろうプロパティや単位、仕様策定中の新しいプロパティなどについて非常に参考になる記事をチョイスさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 srcset属性 HTML5で策定されたsrcset属性をimageタグに使うと複数の画像をカンマ区切りで指定することができます。「ウィンドウサイズに応じて画像を切り替える」とのこと。必要な画像だけ読み込まれるのでパフォーマンスが向上しそうです。 <img src="foo.jpg" srcset="2.jpg 2x, 3.jpg 3x" alt=""> srcは未対応ブラウザのフォールバック、「x」はデバイスピクセル比（画素密度記述子）、「w」は横幅（幅記述子。○○px以下なら○○w）
こういうの欲しかった、デザイン・コーディングが捗るツールまとめ
作成：2016/09/26 Tool > 使用頻度は高くないけれど「こういうの欲しかった」と思えた、役立つWeb制作で使うツールやサービスをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 アニメーション12の基本原則デモ ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモ。イラストやキャラクターなどを動かすときにインスピレーションを得たいときに。モーション作成やアニメーションの参考にした12種パターンのgif動画を見ることができます。 [tool] THE ILLUSION OF LIFE [参考] ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation CSSで写真にフィルタ加工してコード出
アイデアがガンガン降り注ぐ、Webデザインの参考になるギャラリー集
作成：2016/08/16 Webデザイン > ありきたりのWebデザインギャラリーではなく、グリッド線が入っているもの、料金表専門、インフォグラフィックスやグリッド・404・サイドバーなど、少し掘り下げたようなWebデザインギャラリーをまとめました。暇な時に見ているとインスピレーションが湧くはずです。パーツごとに分類。 エンジニア速報は Twitter の@commteで配信しています。 料金ページ 今月話題となった料金ページのみをまとめてあるTumblr製のプライスページギャラリー集。ブログなどに埋め込み可能。 Pricing Pages グリッド参考 スクリーンショットにグリッドを入れてある、グラフィック(紙)やWebのデザインルールがひと目で分かるWebデザインギャラリー集。手間がかかってます。 Grids 404ページ 404ページのみ集めてあります。背景にどんな写真を使ってある
JavaScript無し！CSSで簡単に動きを実装するテクニックまとめ
作成：2016/07/19 Web制作 > JavaScript無しで実装するCSS小技まとめです。細部にちょっとした動きを取り入れたいときなど、知っておくと便利なエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 メタ言語でなく、CSSで見たい方は「View Compiled CSS」でコンパイルして見てください。 ※CodepenのURLの末尾に「?editors=1100」を付与するとhtml/cssのみの編集画面で閲覧できるので、今回は全てのURL末尾に付与してます。 モーダルウィンドウ チェックボックスを使わないタイプ。擬似クラスである:targetを使い、アンカーリンク（#シャープ）にスタイルを適用しモーダルウィンドウを表示しています。 .foo:target { color: red; } :target擬似クラスを利用すれば、J
最高にわかるChromeデベロッパーツールの使い方(チートシート付き)
作成：2016/07/11 更新：2017/04/16 Web制作 > 使い方 初めてデベロッパーツールを触る人でも分かるように、簡潔・シンプルに書きました。画像付きのチートシートのようなものですね。今回は初心者の方向けということでChromeデベロッパーツールの入門編。Chromeは最新版です。 エンジニア速報は Twitter の@commteで配信しています。 設定 背景色を黒にする タブの幅を変える エディタ エディタとして使う ローカルファイルのコードを整形する コンソール ログの閲覧・JavaScriptの入力や練習 エレメント 編集 CSS内の画像サイズと大きさを知る カラーフォーマットの変更 Breakpoints / クリックされた時のコードを見つける モバイル 回線速度のエミュレート 通信環境を選択 Androidデバッグ モバイルデバックの実機を増やす ネットワーク
意外と盲点だったCSS3の役立つ小技まとめ - コムテブログ
TL;DR リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフィルの背景色を解除 chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。 無事消えました。 Coderwall | Change background color for autocompleted inputs in Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも backface-visibility で Chrome のチラつきを解決 fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイ
確実に速くなる、リニューアルで行ったサイト高速化への手順を全公開 - コムテブログ
TL;DR レンタルサーバでの運用を止め、VPS に移行し、Apache の制約から開放されるため軽量・高速な Nginx に変更し、テーマをカスタマイズし軽めのリニューアルをしました。随分と早く使いやすくなったので、会社 HP とコムテブログに行った高速化への手順を全公開します。 今回のリニューアルに伴い、今回行った高速化処理。ちなみに会社 HPはこちら。 PC は 96 点、アナリティクスとメインの CSS を外せば 100 点が出そうでしたが断念。 Pingdomでは 97。ブログの方は、アドセンスや外部読み込み（こちらで調整できないため）で、どうしても遅くなってますが、これに近づけるようにしていきたいです。 なにはともあれ、サーバのスペックそのものを変えないと駄目だということでさくらの VPS 4G（SSD 4G）をチョイス。コーポレートサイトなら 2G くらいでもよいですが、ブロ
Web制作時に助かる、意外と役立つ便利ツール
作成：2016/05/9 更新：2016/06/29 Tool > Web制作する時にあると役に立つオンラインサービス。もっと効率的にするために、今のところ一番使いやすいと思うツールや埋め込み型のサービスをご紹介します。 エンジニア速報は Twitter の@commteで配信しています。 チャイムとクロック スクールや会社でウェストミンスターの鐘を鳴らしたいならこれ。Chromeタブを開いて時間を設定しておくと、学校の「キーンコーンカーンコーン」というチャイムを鳴らせます。 Web制作教室で50分・10分ごと実際にタイマーを鳴らしてますが、学校の気分が出て気が引き締まります。この歳に聴くと切なくなりますね。 timer tab タブで表示できる天気予報付きクロックならこちら。アニメーションが美しい。フォントの色と種類を指定可能。 Floaty Color Clock WordPress
これは凄い！Web制作が捗るモーフィング系の最新スニペットまとめ
作成：2016/04/25 更新：2016/06/29 Web制作 > ある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 背景色に合わせて、テキスト色をリバースさせる DOM要素の重なりを指定するCSS3のブレンドモードmix-blend-mode: differenceを使って、背景色と同時にテキストカラーを反転させていく方法。CSSだけでこれができるのは驚き。 進捗を示すプログレスバーなどで使うと、コントラストがはっきりするので見やすくなりそうです。 mix-blend-modeの「 difference」についてはCSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこな
長文系のブログに便利なWordPressプラグインや小技
作成：2016/03/28 更新：2016/06/29 WordPress > 必須というわけではないけれど、長文になりがちなブログや記事中心のサイト構築を行うときに使える小技やプラグインを少しピップアップしました。 エンジニア速報は Twitter の@commteで配信しています。 記事を分割する 長い文章を分割する時はページを分割したい箇所でnextpageを編集画面で入力します。 後はsingle.phpのthe_content();の後にwp_link_pages();を以下のように追記すれば各ページへのページネーションが出力されます。 <?php the_content(); ?> <?php wp_link_pages(); ?> WordPressで記事を分割表示するnextpage : にわタコのblog さらにページ分割の際に懸念される重複コンテンツ対策はこちら。 投稿
Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート - コムテブログ
TL;DR 遠方のお客様からのサイト制作依頼、メール問い合わせがあった時に、どんな内容を返信すればよくて、どんなことを聞いておけば概算見積もり（初期費用・ランニング費用）を作りやすくなるのか。ヒアリング時も、ある程度聞き出したい。 ネットや本でも意外と「具体的な例」がないなぁと思い、今回はコーポレートサイトや EC サイト制作依頼があった時に、メール返信や、最低限クライアントに聞いておきたいことや尋ね方をまとめました。ヒアリングシートにも応用できます。会社によって違うと思いますが、ざっくりとメモしておきますので、後は自分流にアレンジしながらご活用ください。 メール用テンプレート ここからはメール返信用です。 コーポレートサイト コーポレートサイトの制作依頼があった時に、具体的にどんな内容をヒアリング、または聞いておけばよいのか項目をまとめました。聞き出した内容をもとに社内スタッフと共有し概
Webデザインに必要な知識が一通り学べるベスト記事8選
作成：2016/02/29 更新：2016/06/29 Webデザイン > 今年の頭にWeb制作に必要な知識が一通り学べるベスト記事9選をまとめましたが、今回はWebデザイン版をコムテブログの中から厳選してピックアップしました。総集編的な感じです。Webデザインに必要な基本知識をサラッと知りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 演出を学びたい レイアウトはユーザーが目的を達成させるために必要な設計。情報・環境に応じてレイアウトを組み立てていきます。上質さ・静寂さ・親しみやすさなど雰囲気や演出を学ぶならこの記事。 オシャレなレイアウトやユーザーが使いやすい配置を実現するために知っておきたい知識を、国産サイトを例にあげながら解説。クライアントの要望に合わせてアイデアを出したいとき、レイアウトで困った時に読んでおきたい記事。 実務で役立つ逆引きレイア
意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
作成：2016/02/8 更新：2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti
それなりに使える、Web制作者がお世話になる便利ツール
作成：2016/01/4 更新：2018/05/01 Web制作 > 毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 エンジニア速報は Twitter の@commteで配信しています。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいですね。 検索の他、実用新案、意匠、商標の簡易検索ができます。意外と紹介している人が少ないのと、たまに使うことがあるのでメモしておきます。 J-PlatPat 特許事務所は検索で沢山出てきますので、ここでは割愛します。商標登録とロゴマーク作成を一括で頼めるサービ
Web制作に必要な知識が一通り学べるベスト記事9選
作成：2016/01/18 更新：2016/06/29 Web制作 > 年末にやるべきだったと思いつつも、今更ながらWeb制作前に知っておくと助かる記事を、コムテブログの中から厳選しました。結構自分でもよく見返す記事です。Web制作に必要な基本知識をざっと知りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 バージョン管理 ファイル等の変更箇所の履歴を管理。複数人が関わるプロジェクトで必須となるGit（ギット）のコマンドやGUIなどの初歩的な知識を順を追って解説してあります。最初は何を準備すればよいのか、Gitのインストールからクライアントツールとリモートまで。 これからGit を始めてみようという人のための使い方と入門フロー パッケージマネージャー/タスクランナー ライブラリを管理しやすくするパッケージマネージャーと、テスト実行などの処理を簡単なコマンド
スマートフォンサイト構築時に気をつけたいポイント集
作成：2015/10/5 更新：2017/04/16 Web制作 > 開発環境 スマートフォンサイト構築時のコーディングで気を付けたいポイントを次回コーディングの時のためにメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 全般 viewport デバイスを横向きにした時の処理一例です。 一般（ページ拡大表示）ピンチアウト/ピンチインOK。通常はこれを使うことが多い。 <meta name="viewport" content="width=device-width"> サイズを変更せず、ピンチアウト/ピンチインOK <meta name="viewport" content="width=device-width,initial-scale=1.0"> 2倍に拡大した状態でページ表示 <meta name="viewport" content="wi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
