はてなブックマーク

テーマとカラースキーマのインストール方法 最初は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を習得するのに一番近道な方法とは？

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で少しでもスマホでの読み込み速度を上げるために、スマホでは不必要

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のタイムゾーン変更で設定すべき２つのこと EC2のAMAZON LinuxのデフォルトはタイムゾーンがUTCになっていることはご存じの方が多いかと思います。 日本でサービスをする場合は忘れずに初期設定でJSTに変更しなくてはいけませんね。 出来ればインスタンスを作る時に画面上でタイムゾーンの選択など出来れば助かるのですが…まあ欲を言ってもしょうがないですね^^ Amazonさん、暇な時に頼んます！ さて、そのタイムゾーンなので

どうもpei(@pei_babo)です。 ご存知の通りBootstrapは「レスポンシブ・デザイン」を簡単に導入できるCSSフレームワークですね。 画面サイズの違うPC・タブレット・スマートフォンなど、どのデバイスでも見やすく・且つ操作しやすいイケてるWebページを簡単に実装出来てしまうという画期的なものです。 各コンポーネントがしっかりレスポンシブ化されているので、本家Bootstrapサイトの使い方を真似すれば特に気にせず勝手にレスポンシブ化されてて嬉しいのですが、「ちょっとだけ動き変えたいな。」という時もあると思います。 今回はその「ちょっとだけ動き変えたいな。」の部分から、Navbarのメニューがスマホなど画面サイズが小さい時に勝手にボタン化されて見やすくされてしまうのを防ぐ方法を紹介します。 プログラミングやWordPressを習得するのに一番近道な方法とは？ Navbarの動き

【まとめ】WordPressレスポンシブ無料テーマ29選 どうもpei(@pei_babo)です。 本日はみんな大好きWordPressのおすすめレスポンシブ無料テーマを紹介します。 今や無料と言っても金を払ってでも使いたい！というくらいのクオリティです。 しかもレスポンシブ。 なかには無限スクロールもついてくるというスグレモノもあります。 これを使わない手はありませんね。 【ブログ＆メディア系】【企業系】【EC＆オールマイティー系】の３パターンで紹介していきます。 プログラミングやWordPressを習得するのに一番近道な方法とは？ ブログ＆メディア系 ① INTERSTELLAR ダウンロードページ アーティストや個人ブログに最適なテーマ。 テーマのオプションで配色変更はもちろんのこと、グリッドデザインやボタン、GoogleMapを簡単なショートコードで実現できる。 ② Fictive

【まとめ】ページングCSSおすすめデザインコピペサイト 4選 ノンデザイナーの為のおすすめCSSコピペサイトまとめシリーズいきます。 今回はページングとかページャーとかページネーションとか呼ばれ方が色々あるアイツのことをまとめていきますぜ。 プログラミングやWordPressを習得するのに一番近道な方法とは？ ページングCSSおすすめ無料コピペサイト６選 ① Design Shack 計５個のページングデザインが紹介されています。 ページリンク部分が丸になってて可愛い感じ。 色はちょっと自分で変えたほうが良いかもね。 そのままだとちと渋すぎる感がある。 ② 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の使い方を紹介し

ある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が変わるとせっかくもらった「いいね！」などのソーシャル系の値も０になっちゃうし、前のURLからのリダイレクト処理も大変そうだな…などと思っていませんか？ 気持ちは大いに分かります。 私もこのブログのパーマリンクを変更しようかどうか悩みに悩み、ロシア女子フィギュアのリプニツカヤ選手のメディア嫌いは逆に清々しいな、私もあれくらい周りを気にせず世の中を歩んでいきたいなと思ったほどです。 そもそもなぜ今回私がこのブログのパーマリンクを変更しようと思ったかというと、理由はたった一つ。 「パーマリンクにカテゴリ入れてたら気軽にカテゴリ変更できないじゃん！」 まさにこれでした

Bootstrap3はページ全体を中央寄せにする際は基本的に<div>のcontainerクラスを使うかと思いますが、これを使うと画面の横の余白が大きすぎて気になる。 まさに 「余白あり過ぎない？」 状態である。 プログラミングやWordPressを習得するのに一番近道な方法とは？ containerクラスの中身 Bootstrap3のcontainerクラスはCSS3のMediaQueriesで画面サイズに応じてmax-widthを細かく設定しています。 ↓みたいになっています。

引用(blockquote)のCSSデザインおすすめコピペサイト１３選をまとめました。ブログやまとめサイト系などでは引用(blockquote)の部分がダブルコーテーションなどでかっこ良くオシャレにデザインされていますよね。 私も引用のデザインを変更したいなと思いましたが、ノンデザイナーな私はちょっと自分で作るのは…ダサくなりそう… と思いましたので、今回はそんな私やあなたの為にイケてる引用(blockquote)デザインコピペサイトを探してまとめてみました。 制作者には本当に頭が下がる思いです。 いつもありがとうございます。

Home › プログラミング › 【jQuery】フォームのリアルタイムエラーチェックはjQuery Validation Engineプラグインが簡単 フォームのエラーチェックでいちいち読み込みが走るのはサーバ側もユーザーさんもストレスかかりますよね？ クライアント側でリアルタイムにエラーを表示させることでフォームのコンバージョン率も上がるみたいですし、ユーザーさんのイライラも軽減できる。 これは導入しておいて損はないですね。 フォームエラーチェックのjQueryプラグインをいくつか調べましたが、その中でもポップアップでエラーを表示してくれる「jQuery Validation Engine」が気に入りましたので、その使い方を紹介したいと思います。 プログラミングやWordPressを習得するのに一番近道な方法とは？