WordPressを利用してブログを運営している方に役立つ情報を更新しています。初心者向けのワードプレス使い方ガイド・便利なプラグインを紹介しています。
ねたわん – WordPress推しブログ
WordPressを利用してブログを運営している方に役立つ情報を更新しています。初心者向けのワードプレス使い方ガイド・便利なプラグインを紹介しています。
インタラクティブなクレジットカード入力フォームを実装するjQueryプラグイン・Card
インタラクティブなクレカ情報入力フォームを実装するスクリプトのご紹介。以前も似たようなものを紹介しましたが、こちらの方が良さそうだったので備忘録。 以前、Skeuocardというスクリプトをご紹介しましたが、こちらも同じ目的で作られたものです。 カード番号を入力すると、頭4桁を解析してカードの種類が表示されます。このスタイルもCSSのみで作っているようです。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'></script> <script src="card.js"></script>本体とプラグインを読み込みます。 $('form').card({ container: $('.foobar')})で、セッティングするだけ。 Webで
「ぁぃぅぇぉっゃゅょゎヵヶ」という小さい文字を出す方法のまとめ
「ぁぃぅぇぉゃゅょゎ」などの、拗音や促音に使われる小さい文字（小書き文字・捨て仮名と呼ぶようです）を出す方法のまとめです。 １．はじめに 促音の「っ」を出したい場合に一文字だけ出す方法がわからなかったので、これまで「っと」などを出してから「と」を削除していました。 で、一文字だけ出す方法がないか調べてみたところ、色々あることが判明しました。 ということで、小さい文字を出す方法をまとめてみました。 Windows IMEのローマ字入力で確認しています。日本語入力システムによって入力方法が異なるかもしれません。 ２．ひらがな小文字 ひらがなの小文字だけを出す方法です。アルファベットは入力キーを指します。 ぁ：LA、XA ぃ：LI、XI、XYI ぅ：LU、XU ぇ：LE、XE、XYE ぉ：LO、XO っ：LTU、LTSU、XTU ゃ：LYA、XYA ゅ：LYU、XYU ょ：LYO、XYO ゎ：L
Google Chrome拡張の作り方（その1：マニフェストファイル作成とパッケージ化）
Google Chrome拡張の作り方を紹介します。 １．はじめに 6月11日に「Data API & Chrome 勉強会」、6月28日に「MT Hackathon @ Six Apart New Office」が開催されるようです。 MT Hackathon @ Six Apart New Office ～Data API で Chromeアプリを作ろう～ がどちらも参加できそうにないので、乗り遅れないようChrome拡張について調べてみることにしました。 Chrome拡張は、HTML/CSS/JavaScript（jQuery）の知識があれば作成することができます（実際にはChrome Extensions APIを利用することになります）。 それぞれについて1つのエントリーで解説するとかなり長くなるので、ここでは次の手順に絞って解説します。 マニフェストファイルを作る 拡張機能をパ
見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI
当ブログでも最近、SVGの素材を紹介することが多くなりました。そんなSVGファイルから不要なデータを取り除いて軽量化するアプリを紹介します。 ↓は、今日紹介したアイコンのSVGを軽量化したものです。 ほとんどのファイルが50%以上軽量化されました。 SVGO GUI SVGO GUIは、Node.jsベースのSVG軽量化ツール「SVGO」をGUIで操作できるようにしたもので、Windows用とMac用が揃っています。 使い方は非常に簡単で、Mac用で説明します。 ダウンロードしたSVGO GUIをダブルクリックして、起動します。 SVGO GUIの起動画面 あとは、このパネルにSVGファイルをドラッグするだけでOK！ ※軽量化は元ファイルに上書きするため、元ファイルが必要な時はファイルをコピーしてから利用してください。 SVGファイルの軽量化、完了！ 軽量化しても、グラフィックのクオリティ
[JS]これ、いい！サイトのデザインを損なわずにフォームの進捗を美しく表示するスクリプト -Fort.js
デモページ：Sections デモでは他にもグラデーションを使ったGradient、進む時に光るFlashなどが用意されています。 デモページ：Default デモページ：Gradient デモページ：Sections デモページ：Flash Fort.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <script src="fort.min.js"></script> <link rel="stylesheet" href="fort.min.css"> </head> Step 2: HTML バーを表示するdivをセットします。 <body> <div class="top"> <div class="colors"></div> </div> Step 3: JavaScript 適用するエフェクトを指
クリック一つで類義語を検索できて語彙力アップが可能なブックマークレット
ブログやSNSが普及して誰でも気軽に文章を書いて発信できるようになりましたが、そんな中でも特に文章の質にこだわりのある人ならば1度や2度は自分の語彙力に直面した経験があると思います。ひとつの物事を文字にするときに、ついつい同じ表現を何回も繰り返してしまうこともありますが、ブラウザのお気に入りに登録しておくだけでカンタンに類義語を検索して違った言い回しを確認できる便利なブックマークレットを@yossenseさんが自作しています。 [ ブックマークレット ] コレ抜きではブログ書けねェ!! ブロガーにオススメの厳選ブックマークレット5個(＋1)!! | yossense http://yossense.com/bookmarklet_recommend_blogger/ さまざまなブックマークレットが列挙される中で、ページの中段に類義語を検索できるブックマークレットを発見。 このブックマークレ
Photoshopの最近の気になるテクニックを身につけるチュートリアルのまとめ
ポリゴン、シェイプアート、ブラー、等高線、ジオメトリック、ラインアート、シネマグラフなど、最近の気になるデザインのテクニックを身につけるPhotoshopのチュートリアルを紹介します。 時間をつくって、一つずつじっくりと攻めていきたいですね。
プラグインを使わずにWordPressにFacebookコメントを設置
WordPressで運用している本Blogに、プラグインを使わずにFacebookコメント欄を設置してみたので、コメント欄設置方法のメモ。 Facebbok開発者ページでFacebbokアプリを登録する Facebookにログインした状態で、Facebookアプリを新規登録する。 Facebookアプリを新規登録する ■Facebookアプリの新規登録 アプリ名：アプリケーションを識別する名称 アプリの名前空間：Facebook上で識別されるアプリの名称 アプリのカテゴリ：カテゴリ FacebookアプリのApp IDは、最後に設定する管理用のコードを設置する際に必要になるのでメモしておくとベター。 Facebookコメントの設定ページにアクセスしてコードを取得する Facebookコメントの設定ページにアクセスしてコードを取得する。 Facebookコメントの設定ページは以下より。 Co
無料でJPG、PNG、GIF、SVG画像を圧縮して小さくしてくれる「Compressor」
アカウント登録不要・無料で利用でき、手元にある画像ファイルをブラウザでアップロードするだけで瞬時にファイルサイズを小さくしてくれるサービスが「Compressor.io」です。 Compressor.io - optimize and compress your images and photos http://compressor.io/ ページを表示させるとまず目に飛び込んでくるのがこのカメレオンの画像。画像の上には白いバーが表示されており、マウスで左右に動かすことで圧縮前と後での画質変化を確認することができます。 画像の下には、圧縮前後のデータ容量の変化と圧縮率が表示されています。 このサイトで対応しているのはJPEG、PNG、GIF、SVGの4形式。圧縮時には、元の画質をキープできる可逆圧縮と、圧縮率重視の非可逆圧縮を選択することが可能となっています。 使い方の説明はこれだけ。あと
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
SNSボタンをオリジナルデザインにする方法
普通に設置する場合 普通のテキストリンクとして設置する場合には以下のコードを使用します。CSSは適宜調整して下さい。 ※FacebookやGoogle+はogp設定をしていないと正しくシェアできません。opg設定については下記参考サイトが分かりやすいです。 facebook いいねボタン設置時のOGP設定方法♪ ｜ フリーランスWebデザイナーの仕事 Twitter ツイートボタン <a href="http://twitter.com/share?url=共有したいＵＲＬ&text=ツイート内に含める文字&via=ツイート内に含まれるユーザー名&related=関連アカウント">ツイート</a> Facebook シェアボタン <a href="http://www.facebook.com/share.php?u=共有したいＵＲＬ" onclick="window.open(this.
ブログのソーシャルボタンをオリジナル画像にしてみた！ - みずかるちゃー
ブログのソーシャルボタンをオリジナル画像にしてみた！どうも！記事を書くよりブログ整備のほうが楽しい瑞佳(@mizuka123)ですｗ いったいなんのためのブログなのやら･･･ｗ そんなことよりソーシャルボタンのオリジナル化ですよ！ ありきたりなソーシャルボタンから変えてみるとブログの印象が変わって見えますよね． ソーシャルボタン？ まずはソーシャルボタンとはなんぞや？ ソーシャルボタンとは、ブログやニュースサイトなどのウェブサイトからSNSやソーシャルブックマークなどのソーシャルメディアに情報を入出力するために設置される、ボタン型のインターフェースのことである(Wikipedia) はいそこっ！「うわっ，少ねっ！」とか言わないｗ ソーシャルメディアを使う人が増え，影響力が増したことから最近のブログやニュースサイトには当然のようについていますね． このブログは見る人がまだ少ないのでこんなもん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
27 Tutorials for Creating Realistic Textures & Objects in Photoshop - DzineBlog.com
homobel.org
Responsive Tables, for Bootstrap 5
クリッカブルな日本地図を実装するjQueryプラグイン・「Japan Map」
ShortcutMapper - Keyboard Shortcuts for Popular Apps
octopusnotes.info
applian.jp
