今まで書いた記事のTwitterでのTweet数 や、Facebookのいいね！他、Google+1 などを管理画面で一覧表示してくれる WordPressプラグイン・Social Metricsの ご紹介。もしかしたら需要あるかなと思った ので日本向けにしました。 日本向けといっても、ソーシャルサイトを入れ替えて日本語に変えただけで、ソースは殆どいじってません。オープンソースはこういうのが気軽にできていいですね。とはいえ、GPLはいろいろ制約はありますけども・・・ これが元々のプラグインです。このように管理画面で記事ごとについたTweet数やLike数を一覧表示出来ます。LinkedInがなんだかおかしい気が・・まぁいいｋ 多少重いのは仕方無いとして、これはなかなかいいなと思いましたので日本向けに、少しだけ変えました。 Social Metrics for Japanese Stumbl

WordPressで構築したサイトの対人用 サイトマップをプラグイン無しで作るTips。 手作業は面倒だけど、プラグイン使うほど じゃない、という気もするので、簡単に作 れる方法をご紹介します。もちろん、良い プラグインも存在しますので、プラグインで 問題ないならその方がいいと思います。 プラグインでしたら@jim0912さん作のPS Auto Sitemapというのが一番便利そうです。 ここでは、諸事情でプラグイン使えないんだという方用に。そんな場合あるのかよって言われそうですけど僕はあったのです・・・そう、あれは去年の夏のある日のこｔ 以下のコードをfunctions.phpに貼り付けます。 function simple_sitemap(){ global $wpdb; $args = array('depth' => 0, 'show_date' => NULL, 'date_fo

CSSスプライト用の画像とCSSを 自動で生成してくれる、という Webツールのご紹介。作るのは 結構面倒なのでこうして自動化 してくれると楽で助かりますね。 CSSスプライトで使いたい画像を1つのフォルダにしてZIPにしてアップロードすると即座に1枚の画像にし、CSSも発行してくれます。 ZIPをドラッグ&ドロップすれば即座にCSSスプライト用の画像とCSSが入ったファイルをDLします。数によるかもしれませんけど一瞬で出来るのは凄いです。 img.spritemachine_foo { width: 450px; height: 72px; background: url(sprite.png) 0px 0px no-repeat; } img.spritemachine_bar { width: 16px; height: 16px; background: url(sprite.pn

table要素をレスポンシブに対応させる、というスクリプトです。他にも同じようなスクリプトは存在しますが実用的ではなかったので紹介してなかったですけどこれはアリな気がします。 table要素をレスポンシブに対応させるjQueryプラグインです。他にもMediaTableやzurbのスクリプトもあります。 ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替える、というもの。 上記のようにタップすると非表示部分のカラムの内容が表示されます。ユーザーにとっても分かりやすい気がしました。 公式の動作サンプルです Sample コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <scri

画面のサイズを指定して、その サイズに応じて任意のCSSファイル をロードするスクリプトのご紹介。 Media Queries等によってCSSが 肥大化してしまった場合は使って あげると軽量化できるかもですね。 指定したブレークポイントに合わせて、ロードするCSSファイルを指定出来る、というスクリプト。非依存型なので単体で利用可能、サイズも圧縮版で1.7kbほどと軽量です。 Sample Media Queriesの場合、不要なCSSもロードしますが、sizeit.jsはブレークポイントに応じたCSSファイルのみを読み込むのでうまく使えば軽量化が可能です。 さて、サンプルですが、JQMを利用し、ブレークポイントを以下のように設定しました。 幅が600px以下ならJQMのCSSをロード 幅が1024px以下なら何も読み込まない それ以外はJQMのCSSをロード こう設定すれば、601px～1

よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify.js" type="text/javascript"></script> jQuery本体とプラグインを読み込みます。 $(

たまに使うので自分用にメモします。 css3のtext-shadow等を使用した テキスト装飾のサンプルコードの 備忘録です。工夫すればいろいろ と作れるんでしょうけど、とりあえず よく使うものをピックアップします。 自分用のコピペ用サンプルです。用途は限られますけど、iPhone用サイトなどでも使えるので覚えておいて損は無いかなと思います。テキストだけだと管理が楽でいいですよね。 CSS3 text-shadow sample いろいろ。フォントはGoogle font APIを使用しています。付けてるネーミングは無いと不自然だから付けた的なものですので気にしないで下さい。 Default

思いのほか見やすくなったので 備忘録も兼ねてシェアします。 WordPressの管理画面のデザイン をFacebookライクにしてくれる プラグインです。これは結構 いいかもしれない。 失礼な話ですけどテストするまでさほど期待していませんでした。実際に試したら結構見やすかったので管理画面のデザインの参考にもなりましたよ。プラグイン自体はFacebookを意識したとは書いていないんですけどかなり似ています。 プラグインを使用した際のWordPressの管理画面です。実際に見たほうがピンと来るかもですけど、かなり見やすい気がしました。このまま納品物に使う事はありませんけど、テキストや余白具合がいい感じなので上手く利用すれば結構工数減らせそうです。 ↑ 比較です。ウィンドウサイズとキャプチャしたページは統一してあります。 ↑ デフォルトの管理画面はサイドメニューとメインエリア、アイコンのカラース

クライアントワーク向けのWordPressの プラグインです。管理画面のメニュー はWebに疎いクライアントさんには世辞 にも使いやすいものではありません。 そんな管理メニューを使いやすくする、 という目的で作られたプラグインです。 同じような物は作ってあるんですけどこちらの方が作りが良かったので利用させて頂く事にしました。 こういうやつです。こういう配慮があるのと無いのとでは大きく管理モチベーションが変わってきます。僕も未だに使いにくい管理画面のサイトは使う気になりません。初心忘れるべからず。思いやりとは相手の身になる事ではなく、自分の物差しを相手に押し付けない事ですよね。相手の身になる、って結局自分の考えの押し付けでしょうし。 表示するメニューも選択する事が出来るので、一度作れば使い回しが利くのでは。 英語ですけど、ソース見れば簡単に変更できるのが分かりますので全く問題ないと思います。

WordPress週間の最終日です。今日は、 地味で、あまり知られていないけど、 知っておくと割と便利なカスタマイズ Tips集。CMSとして使う際は結構頻度 が高くなります。覚えておいて損は しないと思います。 当サイトのWordPress週間、今日は最終日です。先日WordPressのカスタマイズに便利なスニペット集をリリースしました。その宣伝も兼ねて。 WordPressスニペット 今日は、地味だけど覚えておくと割と便利なWordPressカスタマイズTipsいろいろです。動作テストはWordPress Ver.3.3.1で行いました。順不同です。 1つのカスタムフィールドで複数の値を登録→実装 カスタムフィールドは沢山あると使いにくくなります。シンプルなものなら1つにまとめてしまいましょう。 一つの「名前」で複数の値を登録するには、値の中でコンマで区切って(犬,猫,鳥という感じで書

覚えておきたいTipsだったのでメモ。WordPressでのJPGの画質を少しでも改善させよう、という方法です。手軽に出来るので覚えて置いて損は無いかと思います。設定されている圧縮比を変更する、という方法。 今まで知らなかったんですけど、覚えておくといいかも。 リサイズ機能 WordPressにはリサイズ機能があります。例えば横幅500pxの画像をアップロードした際、300pxの幅で使いたければ上記のようにサムネイルを選択出来ます。 foo.jpgという名のファイル名なら「foo-300×225.jpg」という、リサイズされた画像を生成してくれます。 デフォルトは90％ この際の圧縮比がデフォルト値では90％になっています。wp-includes/media.phpの410行目あたりには image_resize( $file, $max_w, $max_h, $crop = false,

既出なんですが良かったので。空いた時間に、気になっていたスライドがあったので拝見しましたが、内容が素敵だったのでご紹介します。ノンデザイナーさん向けのデザインセオリーのスライドです。 Webデザイナーが読んでおきたい、最近公開されたWeb系のスライドっていうので知ったんですが、どちらかというとWebデザイナーさんなら知ってて当たり前じゃないかという内容かもしれません。 スライドの作成者さんのブログでもノンデザイナー向けの講義向けのスライド、とありました。→福井高専でノンデザイナー向けの講義しました デザインとアートの違い、なぜデザインが必要なのか、Webデザインとは、などなどが解説されています。Webデザイン論では必須の導線、レイアウト、情報のグルーピングにもしっかり触れてくれています。Webデザインには理由がある、というのが分かるかと思います。（「意味」って言っちゃうと語弊がありますよ）

少し気になってたテーマにようやく触れて みたのでついでにご紹介。WordPressテーマ デベロッパー向けに作られたフレームワーク WordPress Bootstrapです。様々な用途に 応用しやすいように作られていますよ。 ベースにBonesが使われています。 テーマ開発者と言ってもかなり幅が広いんですが、こちらはそれなりに触りなれてる方でないと使うのは少し難しいかもしれません。プログラマーさん向けかもですね。 例えばテーマ独自のオプションや、カスタム投稿タイプを応用したシステムなど、割と高性能なテーマのスタートラインとして作ったみたいです。HTML5製でレスポンシブWebデザインにも対応しています。 高性能なテーマ開発にも柔軟に対応できるフレームワークです。今までのWordPressフレームワークの大半は普通のテーマが目的でしたが、こちらは少しシステムよりなイメージです。 レスポンシ