サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
blog.shuffleee.com
BootstrapのPopoverをhoverで使って簡単に項目説明しちゃおう! どうもpei(@pei_babo)です。 今日はBootstrapのPopoverの使い方を書いていきたいと思います。 最終的なイメージはこんな感じね。 ちょっと分かりづらいかなという用語をPopoverを使って説明するという使い方は結構あるのではないでしょうか。 ちなみにスマートフォンだとタップすると出てきます。
テーマとカラースキーマのインストール方法 最初はPackage Controlのインストール方法とかテーマとカラースキーマの変更方法とかも自分で書こうかと思ったのですが、既に素晴らしい方々がまとめられておりますので、ここは本投稿では割愛します(/・ω・)/ 前提知識はここを読んで! まずはこの2つの記事を読んでお好みのテーマをインストールしてください。私はカワイイ色合いが素敵な「ITG.FLAT」にしました。 カラースキーマファイルの場所を探す 上記のみんな大好きLIGさんのページを見て頂ければわかるかと思うのですが、各テーマには設定コードがありますね。その設定コードを「Preference -> Settings – User」に書くのですが、ここに書く”color_scheme”のパスにカラースキーマファイルはあります。 ここのパスなんですが、環境やインストール方法によって変わるようで
Home › プログラミング › 画像hoverでフワッと動くjQueryプラグイン!CaptionHoverEffectsの使い方 画像hoverでフワッと動くjQueryプラグイン!CaptionHoverEffectsの使い方 最近のWEBサイトは画像やボタンをマウスオーバーすると、決まって何かしらのエフェクトというか動きがあって面白いですよね。 ついつい関係ない画像でも何が起きるのか期待してマウスオーバーしちゃうっていう人も多いのではないでしょうか。 ご多分に漏れず、私pei(@pei_babo)もその一人でございます。 本日はそんな画像hoverで「おっ!」っとさせるjQueryプラグインのCaptionHoverEffectsのデモと紹介をやっていきます。 プログラミングやWordPressを習得するのに一番近道な方法とは?
セレクトボックスってブラウザそのままのデザインってちょっと味気ないというか、ダサいと感じませんか? サイトのデザインを細部までこだわって作ったのにフォームのセレクトボックスがそのままだと…サイト全体のデザインを崩してしまうかもしれませんよね。 今回はそんなデフォルトのセレクトボックスじゃ我慢できないという方のためにCSSだけで簡単に変更できるオリジナルのデザインを紹介しているサイトを紹介していきます。 ライセンス等をしっかり確認して、ありがたく使わせて頂きましょう(/・ω・)/ プログラミングやWordPressを習得するのに一番近道な方法とは?
Offsetクラスは左側に空のカラムを入れてくれる お恥ずかしい話、理解力の乏しい私は最初Bootstrapのドキュメントページを見た時にOffsetクラスの意味があまり良くわからなかったのです。 でもまあ簡単に言うと左側に指定カラム分の空白を作れるということですね。 「左側」というのが重要です。 画像で説明すると下記のようなイメージ。 「col-xs-4」のカラムの左側に「col-xs-offset-4」分の空白が出来ることが分かるかと思います。 中央寄せするグリッドカラムパターンは5種類 Bootstrapでは一つのrow(行)のカラム数が「12」と決まっていますので、中央寄せするのには下記の5パターンになっています。 ① .col-xs-10 .col-xs-offset-1 ② .col-xs-8 .col-xs-offset-2 ③ .col-xs-6 .col-xs-offse
GoogleサジェストAPIを使って、お恥ずかしながらちょっとハマった時のことを書きたいと思います。 需要ありますかね? プログラミングやWordPressを習得するのに一番近道な方法とは?
WordPressの記事中でPCとスマホのAdSense表示を簡単に切り替える方法! どうもpei(@pei_babo)です。 もはやWebサイトは完全にスマホを意識しなくてはならない時代ですね。 モバイルファーストと言われて久しいです。 そんなモバイル先行な時代に当ドドドのフリーランスエンジニアは9割方デスクトップからの閲覧、というまさに時代に逆行しているアマノジャクメディアと言えると思います。 「時代に取り残されたくない…」 ドドドのフリーランスエンジニアはエンジニアやノンデザイナーの仕事上の困った…をちょっぴり解決するtips系が多いのでデスクトップが多くなるのは必然かと思います。 そんなデスクトップ特化方ブログなわけですが、実は当サイトはレスポンシブデザインだったりします。 レスポンシブデザインはいわゆるワンソースマルチユースとか言われるアイツです。 ご存知だとは思いますが、一つの
Chosenの日本語入力の問題点とは? ①日本語入力後のEnterで勝手に要素が決定してしまう 例えば、下記のように日本語で「ジョ」と入力した時、「ジョ」が入っている要素が検索されるまでは良いのですが、この状態で入力を確定しようとEnterを押すと、 英語だと入力中にEnterを押すというのはまさに確定ですからね。 「日本語入力の確定の為のEnter」という判定はChosenプラグインにはデフォルトでは入っていないです。 これが問題の一つです。 一番良いのはGoogle検索のサジェクトのように日本語入力確定した後に下矢印などで要素を選択出来れば最高ですよね。 ②途中の文言にはヒットしない 前回、紹介したchosenのデモページを触ってみてもらえれば分かるかと思いますが、要素の途中の文字列にはヒットしません。 要するに「ジョナサン・ジョースター」であれば「ナサン」と打ってもヒットしてもらいた
Home › プログラミング › 【WordPress】スマホとPCでウィジェットの表示を分けるプラグインWidget Logicの使い方! 【WordPress】スマホとPCでウィジェットの表示を分けるプラグインWidget Logicの使い方! モバイルやスマホの通信速度が早くなったと言っても、まだまだノンストレスでブラウジング出来るレベルではありませんよね。 ユーザーも少しでも表示速度が遅いと感じると、すぐ離脱してしまい「ページ読み込み時間が1秒増えると、PVが11%減少!?」などとも言われています。 SEOとしてGoogleは読み込みスピードを順位変動の要素にはしないと言っておりますが、必然的に離脱率が上がるので無視出来るものではもちろんないでしょう。 「スピードを上げるぞ〜!」 そんなこんなで今日はWordPressで少しでもスマホでの読み込み速度を上げるために、スマホでは不必要
【まとめ】本当に使える商用無料の写真素材サイト6選 どうもpei(@pei_babo)です。 ブログを書き始めてから結構困ったのが写真素材です。 「写真ってどこから手に入れるの?」 「写真素材にお金はかけたくないな、、、でもそれなりに見える写真が良い!」 「勝手に使って良いのかな?」 「自分で撮るのはちょっと自信ないな。」 などなどブログを始めた方はいずれかに当てはまるものがあるのではないでしょうか。 今回はブログを始めて約1年のpeiがオススメする、本当に使えるクオリティの高い無料写真素材サイトを紹介したいと思います! プログラミングやWordPressを習得するのに一番近道な方法とは? 本当に使える写真素材サイト ぱくたそ/PAKUTASO 言わずと知れた超人気写真素材サイト。 「これ使えるのか??」といったギャグ系の写真が注目されがちだが、その他の写真も全て超ハイクオリティ! サイト
Home › プログラミング › jQueryでテーブルソートを簡単かつオシャレに作るならAnimated Table Sorterプラグインにおまかせ! jQueryでテーブルソートを簡単かつオシャレに作るならAnimated Table Sorterプラグインにおまかせ! テーブルソートってサーバ側で実装すると地味に面倒な作業ですよね。 クライアント側でチャチャッと出来ちゃえば作る側も嬉しい、ユーザーも嬉しいと一石二鳥。 そんな時にオススメなのが、簡単にクライアント側でテーブルソートが実装出来ちゃうAmimated Table Sortを紹介したいと思います。 プログラミングやWordPressを習得するのに一番近道な方法とは?
どうもpei(@pei_babo)です。 見せ方って重要ですよね。 ノンデザイナーな私も少しでも見せ方を上手くしたいわけです。 あとYouTubeの動画タグを何個も同じページに配置すると読み込みに時間がかかってしまってあまり良い感じではありません。 出来ればYouTubeのサムネイルだけ取ってきて、ここ押すとどう見ても動画が再生します、みたいにしたいわけです。 そういうわけで今日は動画のサムネイル画像の上に再生アイコンをCSSで上乗せしてちょっとそれっぽくする方法を紹介します。 こういうやつね。 プログラミングやWordPressを習得するのに一番近道な方法とは?
WordPressで投稿記事をSNSに共有するならJetpackプラグイン一択! 「被リンクの時代は終わりだ!」 「今はコンテンツ・マーケティングらしいよ!」 「コンテンツ・イズ・キング」 というような話題があってから久しいですが、被リンクが全く無効になるというのは行き過ぎな話というのは置いておいて、良質なコンテンツを定期的に長期間投稿し続けるのがSEO的にも良いということはどうやら周知の事実になってきているのは間違いないようです。 そうなるとますます需要が高まっているのが「WordPress」や「MovableType」といったCMSですね。 当ブログもご多分に漏れずWordPressを使用させていただいております。 企業などにおいて担当者がHTMLの知識が無くても簡単に記事を投稿できるのが魅力の一つですよね。 話は逸れましたが、そもそもコンテンツ・マーケティングとはGoogleのSEO
だいぶご無沙汰しました。 プライベートや仕事で少し忙しくしておりました。 反省! 今日はみんな大好きAWSのEC2(AMAZON Linux)でのタイムゾーンをUTCからJSTに変更する時の注意点を紹介していきたいと思います。 ただ単純に変更しただけだと、いつの間にか元のUTCに戻っちゃう? プログラミングやWordPressを習得するのに一番近道な方法とは? EC2のタイムゾーン変更で設定すべき2つのこと EC2のAMAZON LinuxのデフォルトはタイムゾーンがUTCになっていることはご存じの方が多いかと思います。 日本でサービスをする場合は忘れずに初期設定でJSTに変更しなくてはいけませんね。 出来ればインスタンスを作る時に画面上でタイムゾーンの選択など出来れば助かるのですが…まあ欲を言ってもしょうがないですね^^ Amazonさん、暇な時に頼んます! さて、そのタイムゾーンなので
どうもpei(@pei_babo)です。 ご存知の通りBootstrapは「レスポンシブ・デザイン」を簡単に導入できるCSSフレームワークですね。 画面サイズの違うPC・タブレット・スマートフォンなど、どのデバイスでも見やすく・且つ操作しやすいイケてるWebページを簡単に実装出来てしまうという画期的なものです。 各コンポーネントがしっかりレスポンシブ化されているので、本家Bootstrapサイトの使い方を真似すれば特に気にせず勝手にレスポンシブ化されてて嬉しいのですが、「ちょっとだけ動き変えたいな。」という時もあると思います。 今回はその「ちょっとだけ動き変えたいな。」の部分から、Navbarのメニューがスマホなど画面サイズが小さい時に勝手にボタン化されて見やすくされてしまうのを防ぐ方法を紹介します。 プログラミングやWordPressを習得するのに一番近道な方法とは? Navbarの動き
ECサイトであったり、何かの問い合わせフォームを入力していて、不意な動作で戻ってしまったり、タブを閉じてしまい、 「なんてこった」 ということはありませんか? その後、もう一度入力する気が失せてしまいそのまま離脱してしまう。 もしあなたがECサイトや何かの商売をWEB上でやっているとしたら、このように意図せずに離脱してしまうユーザーさんをしっかり繋ぎ止めておきたいところですよね。 要は画面遷移する時に「本当に閉じて良いですか?」的なやつです。 もちろん本当に離脱したいと考えているユーザーさんはアラートが表示されたとしても離脱すると思います。 問題なのは意図せず離脱しかけてしまったユーザーさんに対する配慮ですね。 プログラミングやWordPressを習得するのに一番近道な方法とは? 意図せぬ画面遷移にはアラートを表示させよう JavaScriptの次のページに移動する時(リロードも含む)に発
【まとめ】WordPressレスポンシブ無料テーマ29選 どうもpei(@pei_babo)です。 本日はみんな大好きWordPressのおすすめレスポンシブ無料テーマを紹介します。 今や無料と言っても金を払ってでも使いたい!というくらいのクオリティです。 しかもレスポンシブ。 なかには無限スクロールもついてくるというスグレモノもあります。 これを使わない手はありませんね。 【ブログ&メディア系】【企業系】【EC&オールマイティー系】の3パターンで紹介していきます。 プログラミングやWordPressを習得するのに一番近道な方法とは? ブログ&メディア系 ① INTERSTELLAR ダウンロードページ アーティストや個人ブログに最適なテーマ。 テーマのオプションで配色変更はもちろんのこと、グリッドデザインやボタン、GoogleMapを簡単なショートコードで実現できる。 ② Fictive
【まとめ】ページングCSSおすすめデザインコピペサイト 4選 ノンデザイナーの為のおすすめCSSコピペサイトまとめシリーズいきます。 今回はページングとかページャーとかページネーションとか呼ばれ方が色々あるアイツのことをまとめていきますぜ。 プログラミングやWordPressを習得するのに一番近道な方法とは? ページングCSSおすすめ無料コピペサイト6選 ① Design Shack 計5個のページングデザインが紹介されています。 ページリンク部分が丸になってて可愛い感じ。 色はちょっと自分で変えたほうが良いかもね。 そのままだとちと渋すぎる感がある。 ② CSS Flow シンプル・イズ・ベスト!を地でいってるページング。 Dark Paginationと言っている通り、ダークっす。 ③ CSS HappyLife シンプルなページングデザインを様々なパターンで紹介してくれています。 ち
前回はGoogleタグマネージャでGoogleアナリティクスタグを入れる方法を紹介しましたが、今回はイベントトラッキングを取る方法を紹介出来ればと思います。 ちなみに前回の投稿にGoogleタグマネージャの登録や基本的な内容が書かれているので、初めてGoogleタグマネージャを使う方は下記のページを参考にしてくださいね。 特定のリンクのクリックイベントを取ってみよう 今回はイベントトラッキングの中である特定のリンクがクリックされた回数を取るという簡単なところからいきましょう。 サンプルとして私のshuffleee blogの「Feedly登録ボタン」のリンククリックイベントを取ってみたいと思います。 手順① リンククリックリスナータグを作成する GoogleタグマネージャでGoogleアナリティクスのリンククリック系イベントを取る際は、必ずこのリンククリックリスナータグを作成する必要があり
PHPのZIPアーカイブが使えるか確認 まずはPHPのZIPアーカイブが利用できるかphpinfo()などを見て確認しましょう。 このようにenabledになっていればOKです。 ZIPの項目が無いという方はインストールしなければいけません。 下記のページを参考にZIPアーカイブをインストールしましょう。
Home › プログラミング › 【jQuery】サイズの違う画像をキレイに並べるならwookmarkプラグインがシンプルでめちゃ簡単! 今更ながら写真などの縦横サイズが決まっていない画像をPinterest風に隙間なく埋めたいってやつです。 ちょっと流行りは過ぎた感は否めないですが、写真を並べる時はどっちにしろこの形式が今のところかっこ良いですし、シンプルでオシャレなのは間違いないと思います。 プログラミングやWordPressを習得するのに一番近道な方法とは? Pinterest風 しかしこれを真似ようとして普通にリストなどで画像を並べると、間が空いてしまったりで残念な感じになってしまいます… 残念な例 「う〜ん、残念!カッコ悪いよ!」 ダメな例DEMO 今日はそんなPinterest風に画像をキレイに並べたい場合に、一番簡単で且つシンプルなプラグインのwookmarkの使い方を紹介し
Bootstrap2から3に変わった時に今度こそファイル選択フォームもちゃんとイケてるデザインになっているだろうなーと思っていたら、、、Bootstrap3でも変わらずダサいままでした。。。 こうなったら自作するしか無い!ということでちょっとイケてるファイル選択フォームを自作しました。 プログラミングやWordPressを習得するのに一番近道な方法とは? Bootstrap3でイケてるファイル選択フォームサンプル
あるURLに実寸サイズの画像URLとリサイズしたい幅をGETパラメータで渡すだけでサムネイル的画像が返ってくる!みたいなことをやりたくて作ってみましたので、今日はその方法を紹介出来ればと思います。 プログラミングやWordPressを習得するのに一番近道な方法とは? まずはGDが使えるか確認 GDとはPHPでpng,jpeg,gifなどの画像を色々と操作出来るPHP5.2以上からデフォルトの拡張機能になっているライブラリです。 今回はこのGDを使うのでまずは自分の環境でGDが使えるか確認しましょう。 確認方法はecho phpinfo();などでPHPの設定情報を画面に表示させちゃうと楽です。 gd項目のGD Supportがenableになっていれば大丈夫です。 もしdisableになっている場合は、「php.ini」を開いて「extension=php_gd2.dll」を検索してくださ
Bootstrap3を使ってて、フォームの横幅を変えたいなって時ありませんか?? Bootstrap3のフォームの横幅のデフォルトはwidth:100%で設定されています。 ですので、普通にフォームを使用すると画面横いっぱいに広がってしまいます。 ↓こんな感じ
Home › プログラミング › WordPressのパーマリンクカテゴリ変更を.htaccessで301リダイレクトさせる方法! WordPressのパーマリンクを途中で変更したくなってウズウズしている方はいませんか? でもURLが変わるとせっかくもらった「いいね!」などのソーシャル系の値も0になっちゃうし、前のURLからのリダイレクト処理も大変そうだな…などと思っていませんか? 気持ちは大いに分かります。 私もこのブログのパーマリンクを変更しようかどうか悩みに悩み、ロシア女子フィギュアのリプニツカヤ選手のメディア嫌いは逆に清々しいな、私もあれくらい周りを気にせず世の中を歩んでいきたいなと思ったほどです。 そもそもなぜ今回私がこのブログのパーマリンクを変更しようと思ったかというと、理由はたった一つ。 「パーマリンクにカテゴリ入れてたら気軽にカテゴリ変更できないじゃん!」 まさにこれでした
Bootstrap3はページ全体を中央寄せにする際は基本的に<div>のcontainerクラスを使うかと思いますが、これを使うと画面の横の余白が大きすぎて気になる。 まさに 「余白あり過ぎない?」 状態である。 プログラミングやWordPressを習得するのに一番近道な方法とは? containerクラスの中身 Bootstrap3のcontainerクラスはCSS3のMediaQueriesで画面サイズに応じてmax-widthを細かく設定しています。 ↓みたいになっています。
引用(blockquote)のCSSデザインおすすめコピペサイト13選をまとめました。ブログやまとめサイト系などでは引用(blockquote)の部分がダブルコーテーションなどでかっこ良くオシャレにデザインされていますよね。 私も引用のデザインを変更したいなと思いましたが、ノンデザイナーな私はちょっと自分で作るのは…ダサくなりそう… と思いましたので、今回はそんな私やあなたの為にイケてる引用(blockquote)デザインコピペサイトを探してまとめてみました。 制作者には本当に頭が下がる思いです。 いつもありがとうございます。
Home › プログラミング › 【jQuery】フォームのリアルタイムエラーチェックはjQuery Validation Engineプラグインが簡単 フォームのエラーチェックでいちいち読み込みが走るのはサーバ側もユーザーさんもストレスかかりますよね? クライアント側でリアルタイムにエラーを表示させることでフォームのコンバージョン率も上がるみたいですし、ユーザーさんのイライラも軽減できる。 これは導入しておいて損はないですね。 フォームエラーチェックのjQueryプラグインをいくつか調べましたが、その中でもポップアップでエラーを表示してくれる「jQuery Validation Engine」が気に入りましたので、その使い方を紹介したいと思います。 プログラミングやWordPressを習得するのに一番近道な方法とは?
Bootstrapのオススメ無料デザインテンプレートを紹介します。Bootstrapで作られているサイトも多くなりましたね。 そういうサイトを見ると、 Dell Women’s Entrepreneur Network 2013 – Istanbul / Dell’s Official Flickr Page 「これって絶対Bootstrapだよね??」 って言われちゃいますね。 今日はそんなちょっと自分味を出したいあなたにおすすめしたい【無料】Bootstrapデザインテーマ特集です。 Bootstrap無料デザインテンプレート10選 ① Bootswatch 11種類のイケてるテーマが無料で手に入る!!これでフツウのBootstrapからはおさらば!? ② Flat UI 時代はフラットデザイン!Bootstrap3もフラットですが、よりイケてるフラット感のデザインでオシャレ! ③
次のページ
このページを最初にブックマークしてみませんか?
『Peiのフリーランスエンジニアブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く