カスタムフィールドの内容を設定 次にカスタムフィールドの内容を設定していきます。 『Custom Field Template』は「テンプレートコンテンツ」のフィールドにコードを入力することで フィールドの内容を設定することが出来ます。 コードの書き方は「デフォルトテンプレート」を参考にすると分かりやすいですが基本は下のような形式です。 [KoToRifield] type = text size = 35 label = テキストフィールドだよ 「[KoToRifield]」はファイル名です。ここは半角英数で入力してください!日本語だと出力するときにコケる可能性がありますので。 「type」でフィールドのタイプを指定できます。ラジオボタンとかチェックボックスとかテキストエリアとか。。。 「label」はフィールドに説明をつけることが出来ます! 各タイプ色々オプションが用意されていますので
Blynkは、iOSまたはAndroidデバイスでハードウェアをコントロールしたりモニターしたりが簡単にできるという新しいプラットフォームだ。Blynkアプリをダウンロードしたら、画面にプロジェクトのダッシュボードを作り、ボタン、スライダー、グラフなどのウィジェットを並べる。このウィジェットを使って、ピンのオンオフやセンサーのデータの表示などができる。 どんなプロジェクトでも、何百というハードウェアのチュートリアルが用意されているので簡単に作れるが、ソフトウェアのインターフェイスとなると、まだちょっと難しい。しかし、Blynkを使えば、ソフトウェアの側もハードウェア以上に簡単にできてしまうのだ。Blynkは、金魚鉢の水温のモニターや、家の照明を外からオンオフするといったプロジェクトに最適だ。私も個人的に、リビングルームのRGB LEDのコントロールに使っている。 BlynkはKicksta
Webデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を解説する本連載。第3回と第4回では、カフェのサイトを想定したTumblrテーマを完成させました。今回は応用編として、テーマの完成度をさらに高めるためのテクニックを紹介します。 トップページとパーマリンクで異なる構造にする 前回制作した「Cafe」テーマは、トップページとパーマリンクページ(個別の記事ページ)がほとんど同じレイアウトでした。実際には、Webサイトによって、トップページとパーマリンクページをまったく別のレイアウトにしたい場合もあるでしょう。 このような場合は、{block:IndexPage}と{block:PermalinkPage}という2種類のブロックを使います。トップページ用のコンテンツは{block:IndexPage}...{/block:IndexPage}、パーマリンクページ用のコンテンツは{blo
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは? ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します! ↑私が10年以上利用している会計ソフト! CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。
WordPressでブログやサイトを運営する前、そして運営している時にしっかり設定しておきたいWordPressのセキュリティやメンテナンスに役立つ.htaccessの設定を紹介します。 .htaccessファイルを守る 最初に行うことは、.htaccessをあなた以外の無許可のアクセスから守ることです。下記のスニペットは第三者があなたの.htaccessファイルにアクセスするのを阻止します。 ルートの「.htaccess」に下記を記述します。 <files ~ "^.*\.([Hh][Tt][Aa])"> order allow,deny deny from all satisfy all </files> wp-config.phpファイルを守る WordPressでもう一つ重要なファイルがあります、それはwp-config.phpです。
/** BLEで用いるサービス用のUUID */ let BLEServiceUUID = CBUUID(string:"71DA3FD1-7E10-41C1-B16F-4430B506CDE7") /** BLEで用いるキャラクタリスティック用のUUID */ let BLECharacteristicUUID = CBUUID(string:"E977DFF0-36D0-4B3B-89D5-575AAE17B6B3") extension CBCentralManagerState { var name : NSString { get{ var enumName = "CBCentralManagerState" var valueName = "" switch self { case .PoweredOff: valueName = enumName + "PoweredOff"
by Patricio Gonzalez Vivo and Jen Lowe This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. Contents About this book Getting started What is a shader? “Hello world!” Uniforms Running your shader Algorithmic drawing Shaping functions Colors Shapes Matrices Patterns Generative designs Random Noise Cellular noise Fractional brownian motion Fractals Image
クオンの水野です。 スタートアップあるあるの1つに、トイレ問題があります。 今回解決した問題は、 男子トイレが1個しかないので、 トイレに入ろうとしたら、結構な確率で 誰かが入っててマジで困る。(デスクからは使用中かわからない) ってやつです。 うちの若手エンジニアが男子トイレが今使用中かどうかが分かる仕組みを作りました! (男子のみ!) センサ&ハードウェアはこちら。むき出しの状態だと結構怪しいですが、トイレ内の照度を見ていて、トイレの電気が付いたら使用中、消されたら未使用と判定するようにプログラミングしています。 で、社内からアクセス可能なURLをたたくと、 今、使用中かどうか分かる、と。 スペックと開発環境はこんな感じ。 ☆ ハードウェア - Raspberry Pi Type B - http://www.amazon.co.jp/Raspberry-Pi-Type-B-512MB
javascriptでマウスクリック、ドラッグでお絵かきできるものをつくっていた時のこと、 マウスの位置に線画かけない!ぜんぜん違うところに描いてしまう!? デバッグしながらなんでか全くわからない状況。マウスイベントでは正しいポジションを返しているにもかかわらず。 ぶっちゃけびっくりしたんだけど、 canvasはCSSでサイズを指定してはいけない! じつはcanvasの要素でwidth、heightを指定していないとデフォルトで300px - 150pxになると。 それを単にCSSで引き伸ばした(縮小した)状況になるのだ。 canvasが画像だと思えばこの状況が理解できたかもしれない。 ハマったハマった。 参考http://mitublog.blog.eonet.jp/default/2010/08/html5-15b1.html
GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.
こんにちは、フロントエンドエンジニアの店長です。 先日記事が出てましたが改めて自己紹介します。 大学卒業後はカフェで仕事をしていたのですが、退職して1年半ほどWebデザイナーをしていました。そして、LIGにはフロントエンドエンジニアとしてジョインすることに。 お察しのとおり、店長というアダ名はカフェで働いていたためです。 今後ともよろしくお願いします。 さて、今回はHTML5のHistory APIについてお話したいと思います。 History APIについて History APIには以前からブラウザの履歴(スタック)を行き来する機能があったのですが、HTML5でさらに以下のような機能が追加されました。 画面を遷移せず、履歴に新たなURLを追加する。 現在のページの履歴を変更する。 ブラウザの戻る・進むボタンをクリックしたときにイベントを検知する。 このような機能がどんな場面で使われてい
おはうぃーす! しょごです。 先日ノートPCを購入しました、これでスタジオでドラム録音とか動画作成とか気兼ねなくできます。 久しぶりに演奏動画でもアップしよう、、ゲーム実況もいいな。。。ふふふ。。 さて、今回はInstagramAPIを使ってWebサイトと連携したときの話です。 Instagramとは iPhoneやAndroid端末で写真を撮影し、共有するスマートフォンアプリのことです。Webからも閲覧でき、固有アカウントを設けて投稿管理ができる写真特化型のSNSです(もちろん無料)。 Twitterのようにフォローした人の写真がタイムラインに流れてきて、アップロードした写真には「いいね!」やコメントを付けることができます。アプリ内のカメラで撮影した写真や、カメラロールの写真を選択して手軽にアップロードができます。 プライベートモードで非公開設定も可能。Twitterとの最も大きな違いは
Codenvyを使って、Ruby on Rails環境を構築してきたけど、コマンドラインの使い勝手が悪いので、Cloud9で開発環境を構築中。 Codenvyと違ってCloud9は、実際の画面とヘルプの操作が違うので、操作に戸惑う。日本語で書かれたblogも操作方法が古いものが多い。 以下の環境を構築した。今回は、bitbucketのアカウントとレポジトリだけあれば大丈夫です。 Cloud9(WebIDE)+ BitBucket(git) Cloud9との連携 https://c9.io/ にアクセスして、画面右上のSign Inにマウスカーソルを合わせると、Bitbucketのアイコンが出てくるので、これを選択します。 いろいろ手続きする画面が出てくるので進めます(昔アカウントを連携させたため割愛)。Dashboard画面が表示されたら、左のメニューバーから、CREATE NEW WOR
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く