はてなブックマーク

See the Pen CSS3 Text Animation Effect by Nick Mkrtchyan (@Sonick) on CodePen. http://codepen.io/Sonick/pen/HthaI CSS3 Text Animation Effect を日本で使ってみた See the Pen CSS3 Text Animation Effect 日本語でやってみた by たつや (@tatsuya) on CodePen. http://codepen.io/tatsuya/pen/ahKjt フォントサイズを一箇所変更しました、そのままでも十分使えて迫力のあるアニメーションです。 シンプルにテキストとちょっとフォントの調整、背景の変更でティザーサイトっぽいのが作れますね デモが表示されない場合はRERUNするかURL先で御覧ください BGMにVerdi D

Photoshopには、ファイルの保存形式に SVG形式はなく WEB用に保存でもSVG形式で保存することが出来ません SVGというのはベクトル画像というもので 拡大、縮小しても画質が劣化することが無いものです 点と線をで作られる画像ファイルとなっています その特性を活かして、CSSやjavascriptと組み合わせて アニメーションをつけたり出来ます。 そんなSVG画像なのですが Photoshopで実は出力することが可能です PhotoshopでSVG画像を出力する SVGとして出力できるのは、レイヤーもしくは、グループとなります PSDをそのままSVGとすることは出来ません 方法その1 レイヤー名に ファイル名+拡張子で拡張子の部分にSVGをつけてアセットを生成 複数のレイヤーをまとめたいときはグループ化して、グループ名を ファイル名+拡張子 で拡張子をSVGにします あとはファイル

WordPressでは標準で検索機能が付いていますが、それを応用した使い方で特定のカテゴリなどに絞り込む方法が行えます今回はその方法を紹介致します。 WordPressでURLパラメータを使って絞込 基本的には https://9-bb.com/ といったURLのあとに？と&を使ってパラメータを付け足していきます。そうすることで検索結果をコントロールすることが出来ます。 例えば通常のワード検索では https://9-bb.com/?s=検索ワード といった具合になります。 これに&でパラメータを追加して結果を細かく絞り込むことが可能で、PHPを書いたりプラグインを導入したんくてもURLパラメータでカテゴリ内やタグ内でのOR検索などはリンクボタン化するか、フォームかすることで実装出来てしまいます。 Aカテゴリ内でキーワード検索する場合のパラメータ ?s=検索ワード&cat=1 s= は検索

WordPressでアイキャッチのURLを取得する、利用する方法 WordPressにはテンプレートタグでアイキャッチを表示させることが出来ますが imgタグとして出力されます これを純粋なURLとして出力させることで利用の用途が広がります 例えば リンクだけにする CSSのbackground: url(“”);で背景に指定する テキストとして表示する といったように画像を表示する以外にも色々な用途で使うことが可能になります PHP <?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?> 事例1 私が考えている使い方では アイキャッチを表示して、そのアイキャッチのフルサイズをダウンロード出来るようにするというものです 記事本文で、手作業でやれないことはないのですが アイキャッチが登録で全自動で出来るようになるので、作

SnapWidget の使い方 手軽にインスタグラムのタグ検索やタイムラインをウェブサイトに表示することが出来るWEBサービスの「SnapWidget」の使い方です。最近リニューアルあるして、サイトのイメージがガラッと変わりました。 また、ウィジェットの作り方も変わっています。 SnapWidget https://snapwidget.com/ 無料と有料、広告有り無し SnapWidget には無料のFREEと有料のPROが存在します。有料には2プランあり、月5ドルのと7ドルのがあります、PRO版は広告非掲載であったりいろいろ機能に違いがあります。 無料版では画像をクリックした先のページはインスタグラムでは無くSnapWidgetのページ大きく画像が表示されますが広告が表示されますので、企業サイトやイメージを大切にしているようなサイトには向いていませんね、個人的なブログ等で利用する方に

jQueryを使った、HTML(javascript)からPHPを実行し結果を返す方法です。jQueryでは簡単にPHPへ引数を渡してPHPを実行する事が出来ます。どんな事が出来るようになるかと言うとページ移動をせずに検索結果や絞り込みの表示やコメントの投稿を行うと自動でコメント部分だけ最新の状態に更新したり出来る。 jQueryでPHPへPOSTする jQueryの処理 $.post( //PHPファイルの指定 "ajax-return.php", //POSTで渡す値の配列 { name:"name", email:"email", title:"tile", comment:"comment", }, //返り値を取得しての実行 function( data ) { $( "body" ).html( data ); } ); まず最初にPHPを指定しています 次にPHPへ渡すPOS

WordPressで子カテゴリや孫カテゴリ、子孫カテゴリから遡って親カテゴリまでをテキストリンクとして出力するテーマのカスタマイズです。 WordPressのカテゴライズでは、親子関係を作ることが出来ます。子カテゴリのみを選択したときに、一緒に親カテゴリも表示したいケースがあります。特にパンくずリストなんかを作るときには必要ですね、工程としては以下の様になります 工程 現在の記事に設定されているカテゴリを取得する そのカテゴリのリストから、カテゴリのIDを取得する カテゴリIDから一番上の先祖にあたる親カテゴリまでリンクテキストで出力する 現在の記事に設定されているカテゴリを取得する 今回は前提条件として、1つのカテゴリのみ選択されてい状況です、複数のカテゴリが選択されていた場合は最初に該当するカテゴリが対象になります。 カテゴリのリストを取得する $category_id = get_t

擬似要素(before、after)のborderの一箇所を残してほかを transparent とすることで、ひとつの三角形を創りだして フキダシとかいろいろな場面で使うことは結構有ります、それのちょっと斜め上の発想で、一部のborderの辺をtransparentとすることで切り抜きのような三角形を作り出すアイディアです。 どうなっているのか、少しわかりにくいと思うので borderに色をつけてやれば視覚的にどういう風に配置しているかわかりやすくなるかと思いますので色を付けたのと、少し高さを足してたのが こちら borderのbottomとrightの交わりの部分が三角形を作り出しています、グレーなところがtransparentで透明になる部分。 2つの擬似要素を使うことで、三角形を合成しています 応用でこんな見せ方も出来る その1 擬似要素を一つに減らした その2 擬似要素一つで両端

Bootstrap用に元々は作られていた WEBフォントアイコン の Font Awesome のアイコンを使いたいものだけPNG画像として作成するサービスがあります Font Awesome は便利な半面、サイズがそこそこ大きいので、できるだけ軽量化したい また Font Awesome が利用できない環境でもアイコンを表示させたい という場合は、画像にして必要な分だけ利用するのが良いです そこで便利なのが 画像にしてくれるジェネレーター http://fa2png.io/ 使い方はいたって簡単 icon Name : ウェブフォント名をいれる icon Size : アイコンのサイズを入れる px単位でしてい icon Color : 画像の色を入れる 3つの項目を入れて Generate icon 押すと ダウンロードリンクが現れるのでダウンロードするだけ ウェブフォント名はオートコ

WEB制作向けに特化したテキストエディタのBracketsでSASSを快適に使うための拡張機能とコンパイラの紹介。Bracketsの場合はSCSSでは、入力補完機能がデフォルトで使えたりしますがSASSでは少し不便だったりしますので、それを拡張機能でカバー出来ます。 BracketsでSASSで入力補完が使えるようにする Bracketsはこちらで入手してください http://brackets.io/ BracketsでSASSの入力補完をサポートする拡張機能 https://github.com/sprintr/brackets-sass-code-hints Bracketsに拡張機能をインストールする ファイル > 拡張機能マネージャー > 入手 > 検索 > インストール という流れで拡張機能をインストールする事が出来ます 拡張機能マネージャーの起動 拡張機能のインストール 拡張

jQueryを使って、ページを開いた時に印象的な画像をフェードインで表示し(ロゴ等)、時間経過でフェードアウトし、WEBページのコンテンツを表示させるテクニック。 プラグイン版も作りましたのでこちらもどうぞ ページを開いた時に画像をフェードイン・フェードアウトするプラグイン フェードインとフェードアウトを実装する まず、考え方ですが body以下に、最初に表示させるブロックとその後に表示させるブロックと2つのブロックに分けます。すでにコンテンツがある場合は、それらの2つ目のブロックに収めるようにします。一つ目のブロックは空でもOKで背景で画像を指定することでCSSで表示画面に合ったサイズに自動で合わせるように出来ます。 それぞれ、デフォルトではCSSで非表示にしておき、jQueryを使ってフェード効果での表示、非表示を切り替えて行きます。 DEMO SAMPLE CODE <!DOCTYP

ローカルサーバーの環境つくりに使われることが多い XAMPPを別のPCへ移動する方法 XAMPPを別のパソコンへ引越しさせる XAMPP XAMPPを別のPCへ移動するのは実は簡単です XAMPPのフォルダ(ディレクトリ)をコピーして、別のPCの設置したいフォルダにコピーを貼り付けます その後 setup-xampp.batをダブルクリックで実行します これでXAMPPに設定されているパスが書き換えれます あとは通常どおりXAMPPを利用することが出来ます ただし注意点があります バーチャルドメインを設定している場合は、設置したフォルダによって パスが違ってきますので、httpd-vhosts.confのその部分は手作業で変更しなけらばなりません またwindowsのファイルのhostsの内容も書き換えないと行けません hostsはWindowsのOSによって権限で実行しなければいけない物

パンくずリストと言えば 親カテゴリ > 子カテゴリ > 孫カテゴリ > 子孫 ・・・ という具合に親子関係を築きながらリンクを表示する方式の事を言うのですが、Wordpressでも比較的簡単にパンくずリストを実装することが出来ます。Wordpressの運営上、一つのカテゴリだけを選ぶという方針ではない場合複数の親子関係が入り組んだ場合がありますね。 ネットショップでは、そういったのを全部表示させていることが基本ですね、例えば次のような感じに 例 ) パソコン > Windows > Windows 7 > NEC > 製品名 パソコン > 2015年発売 > NEC > 製品名 NEC > パソコン・タブレット > Windows > Windows 7 > 製品名 それでは、こういった表示をWordpressに実装してみましょう WordPress に複数のパンくずリストを導入する コー

初めてHTMLとCSSを使い始めた頃は、borderとかpadding、marginによるレイアウト崩れだけで相当ハマりました。だからこそ初心者にはこの方法で線を表現するのが楽かと思います、box-shadowは縦や横の幅には含まれないので気軽に使うことが出来ます box-shadowで線を表現する方法 例 1 ブロックに枠線を付けた 外側に線が付きます 例 2 隣接するブロック2つに枠線を付けた 2つのブロックに隙間がないと、お互いが干渉してしまっています 例 3 ブロックに枠線を内側に付けた 内側に線が入りこんできて内部の領域が狭くなっています 例 4 隣接するブロック2つに枠線を内側に付けた 内側に線が入る混んでくるので、お互いに干渉することがありません box-shadowsって元々はブロックの影を表現するものなのですが、ぼかし具合を0にしてやることで塗りつぶしになって線になります

郵便番号と住所の入力を分割しているケース $(window).ready( function() { $('#postcode1').jpostal({ postcode : [ '#postcode1', '#postcode2' ], address : { '#address1' : '%3', '#address2' : '%4', '#address3' : '%5' } }); }); 入力項目と表示項目が分割している場合には postcodeとaddressの配列にinput要素を追加していけばOKです フォームのHTMLの例 <form action=""> <label for="postcode">郵便番号</label>: <input type="text" name="postcode" id="postcode" placeholder="123-1234">

WindowsXPの期限切れからUbuntuに乗り換えた勢です(メインPCはWin7だったりします) Ubuntuには最初から音楽プレイヤーが入っています MP3の再生とかそれで出来ますが、音質が・・・ WinXPの時は マザーボードのGIGABYTEのイコライザーでパワフルな音質にして聴いていたので、なんか音が軽い ということで、好みの音質・音色にするべく イコライザーの導入ということで pulseaudio-equalizerっていうのがあるようなので導入してみました、そして導入して分かった設置のポイントもご紹介します pulseaudio-equalizer を ubuntuに導入する 使用しているubuntuは12.04 STEP 1 リポジトリを追加

bxSliderを使っていて レスポンシブなサイトに対応させるために、ちょっと表示の方式を変えてやりたかったので ウィンドウ幅によって表示方式を変更する方法です bxSliderでウィンドウ幅によって表示の仕方を変えてやる方法 リニューアル用にテーマを開発中のTENPARA.NETのスクリーンショットです 1367px以上での表示（フルHDとかのモニタ向け） 1366px以下（ノートPC用表示） このような感じで、1367px以上の表示では大きな画像を1枚ずつ表示する形なのですが 1366px以下ではスライドに同時に2つの画像を表示さえてスライドさせる表示に変更させています bxsliderにウィンドウ幅によって表示を変更させるようにコードを追加します <script> //bxslider var w = $(window).width(); var x = 1367; if (w >=

WordPressには通常の投稿、固定ページ、カスタム投稿タ、attachmet(メディア)が存在するのですが それらを複数指定でメインループを作ってしまう方法 通常のループでは投稿が指定されていますのでquery_postsを使ってループの仕様変更で、複数のタイプを指定出来るようにします メインループ前にquery_postsを置くことで複数の投稿タイプをひとつのメインループに表示する方法 一般的なquery_postsでのメインループの条件指定 <?php $paged = get_query_var('paged'); ?> <?php query_posts( array( 'post_type' => 'post', 'posts_per_page' => 100, 'paged' => $paged )); ?> <!-- 以下メインループ --> <?php if (have

WordPressは画像等のメディアをアップロードすると自動的にそれようのページが生成されます これってかなり不要だったりします うまく使いこなすことも可能なんですが 多くの人にとっては不要の代物でしょう そこで、そのattachmentのページが無かったことにする方法です 下準備 メディアページへのリンクつかないようにWordPressをカスタマイズしておきます そうすることでメディアページの存在は気づかれなくなります こちらの記事が参考になります WordPress 3.5 でメディアのリンク先から添付ファイルのページの選択肢を消去する | Simple Colors http://www.warna.info/archives/2536/ 方法その1 attachment.phpの中身を空にして404表示にしてしまう テーマにあるattachment.php、なければ作成して404に

jQueryでスクロールするとついてくるようになるナビゲーションを実装する サイトのナビゲーションがヘッダーの下とかにある場合に、ある程度スクロールすると途中からついてくるようにするナビゲーションを実装する方法。ナビゲーションがウィンドウの上部に達したらそこからは、画面上部に張り付いてつくてくるようなやつです。 あれを、今回はプラグインを使わずにjQueryだけで実装します。 まず jQuery で、ナビゲーションのある位置を取得します。ナビゲーションのある位置は、offset().top で取得することが出来ます。そのナビゲーションの初期の位置と、現在のウィンドウのスクロールされた位置を照らしあわせて、ウィンドウがスクロールされた位置がナビゲーションの位置よりも進んでいる場合は。ナビゲーションのpositionを position: fixed; にしてやることで、画面上に常に表示させる

WordPressでサイトを作った時、最初はサーバーに付いてたサブドメインで運用してたけど。独自にドメインを取得して、そちらのドメインで使いたいとなった時は実はWordpressには簡単に別のドメインに変更する機能がありません。方法は、データベースの内容をで ドメイン部分をSQLクエリを使って置換してやるか。データベースをエクスポートして、テキストエディタで開いてドメイン部分を置換するする等して変更する必要があります データベースをエクスポートしてテキストエディタで開いて置換したものをインポートするのが初心者には簡単かと思います、それでも手間とハードルが高いです。 そこで、簡単にWordpressのデータベースにあるドメイン情報を書き換えるツールを使うと。データベース側をいじらずとも、そのツールだけで完結します。 WordPressでドメインを変更の手順 まずは、兎にも角にもバックアップの

Google Fonts と言えば 無料で使うことが出来る ウェブフォントですが、そのフォントの種類は1000近くあります、Google Fonts から好きなフォントを探すのも良いですが、画像編集ソフトで使いたい場合はPCにフォントをダウンロード＆インストールしておく必要があります SkyFont というGoogle Fonts からフォントのダウンロードをサポートするソフトがあります、使い方はこちで紹介しています SkyFont の使い方 いちいちダウンロードするのも、Google Fonts から選ぶのも面倒、全ダウンロードして NexusFont というフォント管理ソフトを使ってPCで管理したい、NexusFont を使うとフォントをインストールしなくても、各ソフトで使えるようにしたり グループ分けができるので 何で何のフォント使ったとかもわかり居やすく管理できる NexusFon

絵本をクリックしていくと、ページが次々にめくっていけるようになっています。また、逆方向にもめくることが可能です。さらに画面幅に合わせて大きさも変わるリキッドデザインです。 とにかく、ページのめくれ具合 ページのめくれた後のちょっとした動きがとても良く出来ていてクオリティーが高いです こうった形のギミックをWEBサイトに導入するときにはぜひ参考にしたいコードです – CODE – HTML <div class="book bound"> <div class="pages"> <div class="page"> <h1>Boyhood</h1> <h2>by Jason Hibbs</h2> </div> <div class="page"><!--endpaper--></div> <div class="page"><!--endpaper--></div> <div class="

スクリプトを使わずにCSSのみで変化するグラデーションを取り入れたフラットデザインのボタン CSSでグラデーションを作り、そのグラデーションをアニメーションで変化させることでスクリプトを使わずに変化のあるグラデーションを実現したフラットデザインのボタンです。縁部分がグラデーションとなっています code HTML <a href="http://codepen.io/ARS" target="_blank"><span>button</span></a> CSS（SCSS） $width: 220px; $height: 70px; $border: 4px; $violet: #6559ae; $orange: #ff7159; $deg: 120deg; $size: 400%; $dur: 3s; @mixin clip-frame($width, $height, $border)

CSSのアニメーションを使って、シームレスなパターンで背景を無限スクロールさせる 背景画像がシームレスパターンの時に使えるテクニックです。シームレスパターンなパターンをbackgroundで背景画像に利用し、background position で背景画像を動かすアニメーションを繰り返すものです。背景画像は自動でrepeatで敷き詰められるのを利用しています。 ー CODE ー HTML <section> <h1>BACK GROUND SCROLL</h1> </section> CSS body { margin: 0; padding: 0; } section { height: 300px; margin: 100px 10px; background-image: url(bg.png); -webkit-background-size: 500px; background