サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
画力アップ
creatornote.nakweb.com
実装自体ははちゃめちゃに簡単でした。 ワードプレスの管理画面からプラグインを新規追加で「WP-Member」を検索して インストール、有効化を行います。 それでこれで会員機能と呼ばれるものは実装完了(笑)。 それぞれの制御は下記のように事前に用意されているショートコードを固定ページの本文欄に 張ることで実装できます。 【WP-Memberプラグインのショートコード】 [wpmem_form login] //ログインフォームを出力。 [wpmem_form register] //新規登録フォームを出力。 [wpmem_profile] //ユーザープロフィールを出力。 [wpmem_form user_edit] //ユーザープロフィールの編集フォームを出力。 [wpmem_logout] //ログアウトページの出力 [wpmem_form password] //パスワードの変更・リセ
こんにちは! 今回ウェブ制作を行うにあたって複雑な選択チャートみたいなものを作成する必要がありました。 本来は図でSVGなどでお越しもよかったのですが、スマホでの見え方を考えるとどうなんだとうか…というところもありこのブログに記載してあるJSを使用したということです。 本来簡単なチャートや図などはこれだけcssが発達しているのでcssで作成してしまうのですが、今回はスタートから選択肢が複数あって、さらに一つの選択肢から複数に分岐するという内容だったのでなかなかcssでは対処できませんでした。仮にできたとしても、選択肢が一つ増えたらメンテがめちゃくちゃ大変なことになる!というのが今回作成にあたった背景です。 ではさっそくサンプルから! See the Pen 心理テストチャート by sayuri (@giraffeweb) on CodePen.0 コードをそれぞれ分離すると以下のような形
ウェブサイトが公開直前になって、お客様より画像の保存を禁止するようにしてほしい、などの要望をいただいて「え!どうしよう!」って思ったことありませんか? たとえばすぐみのHTMLであれば、最悪のケースimgタグすべてに禁止のコードを貼ることもできますが Wordpressなどでカスタムフィールドやシステムを組みてたてたあとの制御はなかなか難しいものもあるはず。 ということで、表題の通りウェブサイトで画像の保存を禁止する方法をいくつかご紹介 したいと思います。 右クリックを禁止して画像を保存させない 右クリックをさせないことで画像の保存を阻止します。 ■ページ全体を右クリック禁止にする <body oncontextmenu="return false;"> 上記のソースの場合、テキストのコピーなどもできなくなります。 単純に右クリックが不可能になるので、開発側からすると右クリックの『要素の検
ちょこちょこCSSのcounterを使用する機会があるのですが、これまでは割と狭い範囲(基本的な方法)でしか使用してなかったので 応用とそのプロパティをせっかくなのでまとめておこうと思います。 みなさんの参考になれば幸いです! 基本的な方法 See the Pen counter基本的な方法 by sayuri (@giraffeweb) on CodePen.0 カウントする値の親となる要素(上記でいうとul)に「countercounter-reset」を設定します。 countercounter-resetの数字は初期値で、省略すると『0』です。ここでカウントする値を初期化をします。 「counter-increment」カウントの増加数をセットし(つまり、「1」をセットすると「1」ずつ増加)、「content」で表示形式を指定します。 0パディング(数字の前に0をつける)の方法 S
こんにちは! 9月も終わりに近づいて、毎日毎日あっという間に終わっていきますね~ すぐ紅葉の季節が来るんでしょうね…汗 秋が楽しみです! 今回はアニメーション終了後にサイトを表示させる方法をご紹介します。 いろんなやり方がありますので、私のやり方は1つの参考程度に見ていただければと思ってます。 自分でアニメーション画像を作成して、サイトに入れたはいいけどなんかしたいことと違う。 ということで、備忘録として残しておくことにしました。 ちなみに今回私が実装したのは「jQueryでsetTimeoutを使用してfunctionの実行を遅らせる」という方法です。 もっと簡単なやり方もあるんですが、setTimeoutを使うことが最近多いのでそれも含めて書いておこうと思います。 流れとしては ●サイトを開いた瞬間、アニメーションがはじまる ↓ ●アニメーションが終わったら、サイトを表示する と言う流
WP-PageNaviでアーカイブページにページネーションを出すって 今までも何度もしているのになんか毎回つまづいている気がします。 1度やって期間があくと忘れてしまってて 以前やったソースを見てみるんですけどスマートなソースじゃない。 (あっちこっち見てソース書き換えてるからかコメントアウトがいっぱい笑) ということで今回はカスタム投稿タイプの場合でアーカイブページを作成した際に WP-PageNaviというプラグインを使用してページネーションを出す場合のやり方を 備忘録として書いておきます。 いろんな方がいろんな記事でおなじようなところでぶつかって書いてくださってるのですが 少しづつ書き方が違う気がしているので、どれを参考にするかお好きに判断してください。 では早速ソースを… <div class="wrap"> <ul> <?php $args = array( 'paged' =>
7月ももう終わりますね! 毎日暑い暑い…いっていたら、夏もあっという間に終わりそうです。 最近天気の良い日は、時間を見つけて5キロくらいランニングをしていますが、仕事柄デスクワークで汗をかかないので(クーラーの中で涼しく仕事をしている)、汗かいたときすごく気持ちよくて幸せです。 あと、ドラムの練習してるときも汗かくのでいいですね!(最近休日はスタジオ三昧。) 余談はこれくらいにして、今回はCSS3でフェードで画像が切り替わるフルスクリーンスライドショーを実装してみました。 ちなみに今回の効果はCSS animationsをサポートしているブラウザでないと動作しませんのでご注意ください。 公式というか、本家は以下のサイトです。 【URL】CSS3 Fullscreen Slideshowの配布サイト Javascriptではなくcss3で動いているのに、ほんとスムーズです。 動きがとってもき
4月ももう後半に入りましたね。 つい先日まで咲いていた桜があっという間に葉桜になってしまいましたが、 それと同時に気温もあたたかくなり、春物の洋服がどんどんほしくなっている今日この頃。 クリエイターノートは、サイト作成時に使用したcssやJQueryの備忘録にしていこうと考えています。 自分で作成したcss3を使用したアニメーションなども載せていきたいな… 今回は、CSS3で簡単にぼかし効果を行う方法を書いていきます。 もう結構前から使用されている手法ですが、いざ使うとなると「なんだっけ…」となるので備忘録。 サイトを淡くしたいとおきなどにおしゃれに使用できます。 ぼかした背景のうえに文字を載せるとかっこよくなるので好きです。 filterプロパティを利用すると、ぼかしの効果を難しい記述をすることなく簡単に実装することができます。 たった3行で終わってしまうので本当にcss3さまさまです。
このページを最初にブックマークしてみませんか?
『Creator Note – Design & web』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く