サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
theorthodoxworks.com
マウスオーバーで波紋を広げるデモ 1波紋 1波紋 2波紋 2波紋 エントリーへ
以前、カラーミーショップでPHPのfor文のような繰り返し処理という記事を書いて、これを使って何か面白いことはできないかなと考えていたんですが、使えるようで使えないようなことを考えついたので、備忘録としてメモ。 やることはタイトルの通り、特定の商品をトップページとかに簡単に表示させるというもので、カラーミーの標準機能を使わずに、ピックアップ商品みたいな感じで掲載したい時に使える方法です。 通常、特定の商品をトップページに(カラーミーの標準機能を利用せず)掲載したい場合は、HTMLへ直書きしないとできませんが、これを利用すると最初にHTMLを編集するだけで、あとは管理画面から商品の変更ができるようになります。 ただ、今はテンプレートプラスという有料のサービス(月額540円!)があって、それを利用すればもっと簡単にできるし、当たり前ですが機能的にもそちらの方が圧倒的に優れています。 しかも中途
【DEMO】非表示にしたメニューをクリックでモーダルウィンドウ風に画面いっぱいに表示する 右上のMENUをクリックするとメニューが表示されます。 このデモのエントリーへ
カラーミーショップのサイドメニューとかでよく使われているカテゴリーやグループ、フリーページのリストを一部非表示にする方法です。表示したくない項目がある時に便利。 あくまでも一部の項目を非表示にする場合で、たくさんの項目を除外したい時は別の方法をとった方がいいと思います。 ↑こういう所のやつ 編集する場所 基本的にサイドメニューの部分は、全て「共通」のHTML内に書かれているので、「共通」のHTMLを編集していくことになります。 カテゴリー名、グループ名、フリーページ名をリスト表示するコード(独自タグ)は、それぞれ少し違った記述となっていますが、ほとんど似たような感じです。 以下の部分がそれぞれの該当箇所になります。 カテゴリーの場合 <{section name=num loop=$category}> //ここに色々なコードが書かれている <{/section}> グループの場合 <{s
文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。 以前に AfterEffects で同じようなことをやっていて、それのSVGバージョン。AfterEffects の場合は、当然ながら動画として出力しvideo要素で動画を埋め込んで表示させるわけだけど、SVGの場合は、(主に)インラインSVGを設置してJavaScriptでアニメーションさせて実現する。 少し前までは、一部のブラウザでうまく表示できなかった(気がした)が、今は全く問題なく表示させることができるようになっていた。古いIE(10以前)ではさすがに無理だけど、もう考慮する必要はないと思われるので、十分に使える表現だと思う。 SVGの作成が意外に面倒だったので作成時のポイントとか、HTMLへ設置する方法、JS実装ではまった点等を覚書として書いておく。 ハンドライティン
2015年一発目のエントリーですが、特に何事もなく普通の記事を書きます。 このサイトでも利用していますが、ページ遷移時に一瞬だけ(暗くなって)文字が表示されるやつのやり方です。HTMLとCSSだけで実装してまして、JSは使いません。 一瞬だけテキストを表示するやつ こういうやつです → DEMO ※読み込みに時間が掛る場合、表示されない可能性があります。何も変化がない場合は再読込みをしてみてください。 CSSの animation を利用しています。特に難しいことはしてなくて、visibility と opacity をうまい具合にしているだけですね。 HTML HTMLは以下の通り。 <div class="flash-title"> <p>表示させたいテキスト</p> </div> 親要素(div)にクラスを付けるだけです。 CSSは以下の通り。 .flash-title { posi
正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。 もしかすると、CSS界隈では有名な事象なのかもしれない。ただ、ググっても出てこないし、そもそも何てググればいいのかもよく分からず、この現象にあうたびにデベロッパーツールを開いてなんだかんだやっていたので、その原因を忘れないように書き残しておく。 どういう現象か visibility: hidden;とopacity: 0;で非表示にした要素を、マウスホバーで表示、マウスアウトで非表示に切り替える(アニメーション付き)際に、マウスアウトして完全に非表示となっているのにも関わらず、その要素が表示されていた部分にマウスをもっていくと消えた要素が再表示されてしまうという現象です! 基本的には問題の
WordPressのテーマカスタマイザー(テーマカスタマイズ画面)にオリジナルの項目を追加して、入力内容をテーマに反映させる方法です。 オリジナルの項目を追加すると、テンプレートファイル側に記載したくないもの(広告や解析タグ等)を管理画面上から簡単に設定でき、プラグインを使うまでもないようなちょっとした表示の設定に大変重宝します。 頑張ればすごいものができそうですけど、ここでは単純に「テーマカスタマイザーへオリジナルの項目を追加」し、「表示するかしないか選択できるチェックボックスを設置」して、実際に「テーマ(サイト)へ反映」させる方法を記載します。 以下、テーマカスタマイザーだったりテーマカスタマイズだったりカスタマイザーだったりと表記揺れがありますが、同じものと捉えていただければと思います。 テーマカスタマイザーとは テーマカスタマイザーは、WordPressの管理画面上からテーマの変更
2017年1月21日(土)に長野県の松本市で行われた「WordBench Nagano vol.6」に参加させていただきました。文章化するのが恐ろしく苦手なので、以下、詳細なレポートではなく、ただの参加報告みたいな感じでラフに書かせていただきます。 はじめに、自分はセッションの後の懇親会まで参加させてもらったんですが、控えめに言ってめちゃくちゃ楽しかったです! WBNagano Special!!! 副題として「WBNagano Special!!!」とあるように、WordPressの第一線で活躍されている超有名な方々がスピーカーとして来られるという、なんとも豪華な WordBench でした。 登壇者の方々 また、参加者の方々も県内外から多く集まり(40人ぐらい?)、中には普段から一方的に存じ上げている方もいらっしゃってて、自分にとってかなりスペシャルな会になりました。 セッションとスラ
VCCW3.0でWordPressのローカル環境を構築したので、何をどうやったのか(すぐ忘れるので)自分用の覚書として記録しておきます。併せて、WordMoveを使って、本番環境(エックスサーバー)とローカル環境を同期するようにしたので、それらも含めすべてまとめて記載しておきます(v2を全て削除して、新しくv3を入れ直しています)。 完全に自分用なので、確実に分かる部分はざっくりとしか記載していません。また、自分特有のやり方をしている部分がありますので、もし参考にされる際は注意してください。さらに、エックスサーバーと同期させることを前提としているため、エックスサーバー特有のことも多いです。 それと、v2との比較記事ではありませんので、v2とv3の違いについては、以下の記事をご参照ください。 VCCW v3での変更点と新機能まとめ VCCW 3.0.0 beta 1 がリリースされました。
カラーミーショップで、商品ごとに表示を切り替えたい時に使える方法をご紹介します。 以前、カテゴリーごとに商品ページを切り替える(正確にはカテゴリーごとで非表示にする)というのをご紹介しましたが、今回はカテゴリーやグループに関係なく、個別の商品ごとに表示を切り替えたい時に使える方法で、例えば特定の商品にだけバナーを貼り付けたいという場合に便利な方法です。 カテゴリーで切り替える場合は、カテゴリーで分岐させることができたので、特に個々の商品に対して何かをする必要はありませんでしたが、商品ごとに表示を切り替えたい時は、初めに個々の商品に対して下準備が必要になります。 対象の商品に対しての下準備 商品に対する下準備は、表示を切り替えたい対象の商品のみに対して行います(数が多い場合は逆でもよい)。 実際に何をするかですが、対象にしたい商品の「商品名」もしくは「型番」のいずれかに、対象商品であることを
前回のエントリーでSVGスプライトを非同期で読み込む方法を紹介しましたが、今回はSVGスプライトをGulpで自動生成する方法を紹介します。 ここで生成するSVGスプライトは、HTMLにuseタグを使ってインラインで表示させるもので、CSSのbackgroundでは表示させることができませんのでご了承ください。 なお、インライン用のSVGスプライトの場合、(色情報等を削除するため)目視で確認することが難しくなってしまうので、SVGスプライトの生成と同時に一覧表示させるためのHTMLも自動で生成できるようにしています。 Githubリポジトリにすべてのコードをあげていますので、以下のリンクからダウンロードすることができます(構成やディレクトリ等、ここで記載しているものとは若干異なります)。 https://github.com/42EG4M1/svg-sprite-generator gulp
SVGスプライトを外部ファイルとして読み込みたくて、色々と調べたり試してみたりしていたのですが、外部SVGをAjaxで非同期読み込みするという方法が一番しっくりきたので、その方法を紹介します。 SVGスプライトといっても、CSSで背景画像として表示させるものではなく、HTMLにインラインで表示させるためのSVGスプライトになります。 何もしなくてもuseタグのxlink属性で外部SVGファイルを参照できることは知っていたのですが、IE9+でサポートされてなく、またEdgeでも怪しいとのことだったので、その方法は利用してきませんでした。ポリフィルを使ったフォールバックもあるようですが、そのためだけのフォールバックも何だか気持ちが悪かったので。。 今までやっていた方法 これまではbodyの開始タグすぐ下にsvgタグを置き、その中へ画像ごとにsymbolタグで囲み直したsvgをずらーっと並べus
よくあるやつですが、カード型デザインみたいな一覧ページのレイアウトをクリック一発で別のレイアウトへ変更するやつです。 JavaScriptだったり、別ページを用意したり、パラメーターつけたりで変更することもできると思いますが、CSSだけで変更できる簡易的なのを作りました。 カード型レイアウトからシングルレイアウト シングルレイアウトという言葉があるのか分かりませんが、こういうのです。 追記:正確には、カード型レイアウトを「グリッドビュー」、シングルレイアウトを「リストビュー」と言うようです。 See the Pen Change the Layout by Tatsuya Azegami (@42EG4M1) on CodePen. 上部中央にある四角いボタンをクリックすると変わります。 HTML <div class="main"> <input type="radio" name="r
東京オリンピックのエンブレムが十二角形を基準としているという話を聞いて、CSSで十二角形を作るにはどうやるんだろと思ってやってみたらあっさりできてしまったので、いっそのこと色々な多角形をCSSで作ってみようということで作ってみました。 エンブレム自体も単純な部品の組み合わせでできているので簡単にできそうだけど、すでに作っている人がいるみたいだったのでやめた。 正多角形をCSSで作る 正確にはSCSSを使ってます。 See the Pen Polygons in CSS by Tatsuya Azegami (@42EG4M1) on CodePen. SCSSの$sizeの値を変更すると、多角形自体の大きさを変えることができます。 ウインドウのサイズやブラウザ等の環境によって、または多角形自体の大きさによって、辺と辺の繋ぎ目が途切れたりする場合があります。たぶん各辺の長さに小数点が入ってく
El CapitanにアップデートしたらMAMPがおかしくなってしまったので、これを機に新しいバージョンのMAMPをインストールして、せっかくなのでデータベースごと本番環境のWordPressサイトをローカルに構築した際の覚書です。 サーバーとかデータベースとかに苦手意識があって、何かちょっとでも環境を変えると不安になるので、何をどうしたのか簡単に書き残しておきたいと思います。 MAMPをインストール MAMPを以下のリンク先からダウンロードしてインストール。現時点での最新バージョンは3.4でした。 https://www.mamp.info/de/ インストールの詳細は、特に難しいこともないので割愛。 インストールされている以前のバージョンのMAMPは、上書きされることなく別名で残るようですが、変に設定等が引き継がれるのが嫌だったので、htdocsフォルダとdbフォルダを退避後、完全に削
いい加減レンタルサーバーの引越しを考えています。さすがにロリポップ(恥)でWordPress複数とかきついし、最近は微妙に怖いので、めんどくさくて逃げ回ってきましたが、とうとう本格的に引越しの準備に取り掛かりたいと思いはじめました。 一番の問題はどこのサーバーを借りるかですが、サーバーとかあまり詳しくないので、とりあえず希望の条件を軽く挙げ、有名どこのホスティングサービス数社で比較検討してみました。ぐだぐだ感は否めませんが、比較検討の結果をご覧くださいw 希望するサーバーの条件 まずは希望するサーバーの条件を挙げてみたいと思います。必須の条件は以下の通り。 ワードプレスが使える 複数のデータベースがある(10個以上) よーく考えたけど、必須の条件はこれだけでした。 さらに、条件というかその他の希望は以下の通り。 価格はなるべく安いこと ロリポップよりも高速であること 大手(安心)であること
あまり複雑なことをしているつもりはないのですが、WordPressでカテゴリーを取り扱う際に、よく土壺にはまって動けなくなってしまうことがあります。カテゴリーの取得って意外と難しい…そう思っているのは自分だけでしょうか。 すぐ忘れてしまう脳みそを持ち合わせてしまったことを嘆きつつ、未来の自分の為にカテゴリーの取得に関してはまってしまったことをシェアしておきたいと思います。 何がしたかったのか 最初にも書きましたが、そんなに複雑なことをしたかったわけではありません。例えば、以下のようなカテゴリー構成で、 果物(親) ├ イチゴ(子) ├ みかん(子) └ リンゴ(子) カラー(親) ├ あか(子) ├ 黄色(子) └ みどり(子) カテゴリーアーカイブや最新記事一覧ページ等の各記事へ、下記のようにその記事が属するカテゴリーを表示させたかっただけです。 果物 : イチゴ カラー : あか, み
アニメーションについて色々と勉強している。jQueryのアニメーションはこま落ちするし、CSSのアニメーションは計量だけど、少し複雑だったり、同時に走らせたりすると、(Macだと特に)カクついてしまうことが多くて困っていた。 Velocity.jsというアニメーションJSライブラリが計量で良いということで、最近結構いじっていて、すごく簡単に導入できるし、色々できそうで光を感じている。 Velocity.js スムーススクロールをVelocity.jsで とりあえず簡単なところからはじめてみた。よくあるページ内リンクの移動時とトップへ戻る際のスクロールをスムースにするやつ。 スムーススクロールをjQueryだけでやったやつ 今まではjQueryだけでやっていた。それが以下。 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/j
先月のことですが、CSS DESIGN AWARDSという国際的なWebデザインのアワードがあるのですが、こちらに、先日制作させていただいた「SHOKI JOETAKI OFFICIAL」のWebサイトを応募しましたところ、「WOTD (Website Of The Day)」という賞をいただくことができました。 CSS DESIGN AWARDS のような国際的なWebデザインのアワードで、自分が制作したサイトが認められるというのは、大変嬉しく、光栄であり、恐縮の極みです。 なかなかこのような機会は得られないので、貴重な経験をさせてもらい感謝しかありません。本当にありがとうございます。 DESIGN AWARDS ASIAではDOTMを受賞していました 同時に、DESIGN AWARDS ASIAという、アジア地域を対象としたデザインのアワードがあり、こちらにも応募していて「DOTD (
文字を書き順通りに塗りつぶしていくアニメーションが必要になったので、After Effectsを使ってアニメーション(動画)を作成しました。After Effectsは、あまり使う機会がなく、たぶんすぐ使い方を忘れてしまうと思うので、今後のために作り方をブログに残しておきたいと思います。 「文字を書き順通りに塗りつぶす」と言っても、単なる(After Effects上の)テキストではなく、Illustrator で作成したレイヤーに、件のアニメーションを施すという作業になります。 After Effectsの基本的な部分も含め、AIデータの配置から動画のレンダリングまで細かく紹介していきます。 追記:これと同じアニメーションをSVGとJavaScriptで実装した場合の記事も書きました。 完成動画 まずは、完成した動画から。以下のようなアニメーションを作成します。再生ボタンをクリックでアニ
CSSでマウスホバーエフェクトといえばtransitionプロパティを使ってアニメーションさせることが多いと思いますが、少し複雑なアニメーションをさせたい時はtransitionでは難しいことがあると思います。 そんな時は、hover疑似クラスと合わせてanimationプロパティを使い、@keyframesでうまいことやるといい感じにすることができるので、個人的にはよく使っているのですが、animationプロパティでは、マウスアウト時にアニメーションが行われず、瞬時に元の位置へ戻ってしまい、少し不格好になってしまうのが悩みの種でした。 これを何とかしたくて色々やってみた結果、すごくシンプルな方法ですが、animationプロパティでもマウスアウト時にアニメーションさせることができたので、簡単にご紹介します。 マウスアウト時の挙動 とりあえず、それぞれのマウスアウト時の挙動を確認します。
Velocity.jsを使ったスムースなページ内スクロールのデモ ① 1 2 3 4 5 ② 1 2 3 4 5 ③ 1 2 3 4 5 ④ 1 2 3 4 5 ⑤ 1 2 3 4 5 PAGE TOP このデモのエントリーへ
菱形を大量に使ったサイトを制作しているんですが、画像を使わずにCSSのみで菱形を作る方法はいくつかあって、それぞれに向き不向きみたいな特徴があるので、作り方も含めて自分用にまとめてみました。 ちなみに「菱形を大量に使ったサイト」は、このサイトのリニューアルでして、今年の9月から作り始めてまだ完成していないという…。 基本となるHTMLとCSSとデモ 以下のHTMLとCSSがベースとなります。たぶん、1つのdivで全てできると思いますが、普通はテキストをのせたり、リンクを貼ったりすると思うので、実用面を考えてこの形としました。 HTML <div class="contents"> <div class="diamond"> <a href="#"> <div class="diamond__inner"> <p>テキスト</p> </div> </a> </div> </div> .con
memo ・一つのブロックを4分割し、斜めの半分をグラデーションで透過している。 ・グラデーションのdeg値は小さくする(シャギーがでる為)。315deg → -45deg ・transitionプロパティはグラデーションに効かない。 ・サイズによるもの(奇数・偶数)の可能性があるが、形がややいびつになる。 ・a要素で囲んだ時、リンク領域は「菱形の部分」をはみ出してしまう。
ポリゴンスタイルが好きなんですよね。ツイッターの背景とかにもポリゴンテクスチャ使ってますし、ひそかにポリゴン画像を集めたりもしています。 「流行りに流された」と言われればそうなんですけど、見てるとなぜか癒されるんですよね。特に動物のポリゴンが好きなんですけど、どうせなら自分で作ってみたい!ということで暇なので作ってみました。最初に言っておきますが、出来はやや微妙です(アイキャッチ見れば分かる)。 ポリゴンを制作するツール Illustratorを使うのが一般的なのかもしれませんが、今回はPhotoshopを使って制作しました。 だいぶ前ですが、有名なWebクリエイターボックスさんの記事で紹介されていたtriangulatorというポリゴンが簡単に作れるツールもありますので、まずはこれでポリゴンに慣れておくのもいいかもしれませんね。 作り方 作り方は意外と単純です。 1.画像を用意する まず
CSSの小ネタ。マウスホバー時の挙動として、ちょっと面白かったのでCSSだけで作ってみました。 ストライプの背景をマウスホバーで動かし、ぐるぐると回っているような感じに見せるエフェクトです。画像を一切使わず、背景のストライプおよびアニメーションを全てCSSで実装しています。 ストライプを動かす どういうものかというと、以下のようなものです。マウスホバーするとストライプが現れて、動き出すと思います。なお、ブラウザはモダンブラウザじゃないと見れません(最新版のChrome、Safari、FirefoxとIE11で確認済み)。スマホでも一応見れます。 ボタン 環境によっては、ストライプがちょっとギザギザするかもしれません。 作り方 至ってシンプル。ストライプはbackground-image:linear-gradientで、つまりCSSのグラデーションで表現し、動きはCSSのanimation
【DEMO】CSSのみで作るドロップダウンメニュー(シングル&多階層&メガ) このデモのエントリーへ
使いどころがよく分からなくて、CSSのブレンドモードは、今まで一度も使ったことがありませんでした。対応ブラウザが少ないというのもありますし。 イメージでは背景色と背景画像をブレンドするものと捉えていましたが、実際には複数設定した背景画像どうしでもブレンドできるとのことで、知識として入れておきたくて、ブレンドモードを使った表現を色々と試してみました。 スマートフォン等の小さい画面ですと見切れてしまうので、大きな画面でご覧ください。対応しているブラウザも限定されますので、最新版のモダンブラウザでご覧ください。ただし、IEは最新の11も含め不可。未確認ですがMicrosoft Edgeではいけるようです。 「3Dのような表現」というのは少し大げさですが、それっぽい感じには見えますよね。上記は、色の違う3種類の画像を微妙にずらし、background-blend-modeのmultiply効果を与
次のページ
このページを最初にブックマークしてみませんか?
『THE ORTHODOX WORKS | Graphic and Web Designer NAGANO JAPAN』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く