WPのWYSIWYGをCKEditorに変更するプラグイン・CKEditor For WordPress - かちびと.net
WPを使ったWeb制作の納品時の 選択肢の一つとして覚えておいて 損は無さそうなのでメモ。記事投稿 のWYSIWYGを使いやすいCKEditor に変更するプラグイン。スタイルも カスタマイズできます。 CKEditorに入れ替えるのでCKEditorでも出来るスタイルの変更も管理画面で行なえます。 上記のようにWordPressの標準装備のWYSIWYGをCKediterに変えます。標準は標準でいいところがあるのであくまで選択肢の一つですかね。以下にちょっとだけ紹介します。 画像 画像にidやclass、heightなどなど色々加えられます。URLを指定するのでアップロードしてから使う感じですね。 テーブル 簡単にテーブルを作成することが出来ます。 テキスト装飾 テキストの装飾も色々出来ます。背景色を付けたり、n乗の表現もワンクリック。 ぜひCKediterのデモを触ってみてください。C
CSS3やHTML5などのコードを書く様子を再現し、徐々に 出来上がっていく様を見ながら学べる チュートリアルサイト・TheCodePlayer - かちびと.net
一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。 こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。 ブログ形式でチュートリアルを公開しています。 説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど
Webベースのダイナミックでクールなプレゼンテーションを実装する為のJavaScriptフレームワーク・Mosho
Web上でプレゼンする為のJavaScript フレームワーク、Moshoのご紹介です。 impress.jsライクなダイナミックな 動きのプレゼンテーションをHTMLで 実装する事が可能です。シンプルで 良かったのでお勧め。 この手のは色々出ていますので探せばいくらでも見つかると思いますが、MoshoはjQueryやmootoolsなどのライブラリに依存しないスクリプトですので覚えておいて損は無いかも。 よくあるプレゼンのやつ。HTML5/CSS3/JavaScriptで作ります。サイズは非圧縮版で15KBほど。 以下にサンプル用意しました。矢印キーで操作します。 Sample data属性で指定するスライドごとの動きはimpress.js同様、カスタムデータ属性で操作します。 <div class="mosho-slide" id="3d-transform" data-x=1120
地味だけど割と便利なWordPressカスタマイズTips集 - かちびと.net
WordPress週間の最終日です。今日は、 地味で、あまり知られていないけど、 知っておくと割と便利なカスタマイズ Tips集。CMSとして使う際は結構頻度 が高くなります。覚えておいて損は しないと思います。 当サイトのWordPress週間、今日は最終日です。先日WordPressのカスタマイズに便利なスニペット集をリリースしました。その宣伝も兼ねて。 WordPressスニペット 今日は、地味だけど覚えておくと割と便利なWordPressカスタマイズTipsいろいろです。動作テストはWordPress Ver.3.3.1で行いました。順不同です。 1つのカスタムフィールドで複数の値を登録→実装 カスタムフィールドは沢山あると使いにくくなります。シンプルなものなら1つにまとめてしまいましょう。 一つの「名前」で複数の値を登録するには、値の中でコンマで区切って(犬,猫,鳥という感じで書
スクロールすると左右から画像が集まってくるWebデザインのNizoっぽいやつをjQueryで作る - かちびと.net
以前少し話題になった、Nizoというサイト がああります。このサイトで導入している、 スクロールに応じて要素をアニメーション させるエフェクトがちょっと素敵なんです が、これと同じような効果をjQueryで作る、 というのが今日の記事内容です。 どんなエフェクト？って思われた方はNizoでスクロールしてみてください。このエフェクトをjQueryで作る方法が公開されていたので一応メモです。 Intriguing animate-on-scroll effect スクロールすると左右からいろいろ集まってきます。まぁそれだけなんですが、インパクトはありますね。 IE7でも問題なく動作しました。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquer
WordPress管理画面の左メニューのキーとスラッグのメモ - かちびと.net
個人的なメモ。たまにしか使わないけど、 その時に毎回面倒な思いをしてるので、 いっそメモにしておこう、と思ったので 記事に残します。WordPressの管理画面 のそれぞれのメニューに該当するキー 番号と使用ファイルの一覧。 admin_menuフック使って項目削除したりするときにも使うやつです。 <?php add_action( 'admin_menu', 'remove_admin_menu_links' ); function remove_admin_menu_links() { remove_menu_page('link-manager.php'); // リンクの項目 } ?> こんな感じで書けばメニュー項目を非表示にしたり出来るので納品する際にクライアントさんの誤操作の心配が減りますね。 一覧 ただのカンペです。 項目名 メニュー名 キー スラッグ ダッシュボード
WordPressの「ページ」をツリー形式で表示・管理出来るプラグイン・CMS Tree Page View - かちびと.net
WordPressをCMSとして利用する場合は 「ページ」で作成するコンテンツが多くなる かと思います。その管理をしやすくしよう、 というプラグインがCMS Tree Page View です。ツリー形式にしてくれるので、Web に不慣れなクライアントさんでも視覚的に 管理しやすいのでは無いかと思います。 WPもかなり高機能ですが、基本的にはブログエンジンの為か、「ページ」の管理がしやすいインターフェースとは言えません。そこを補うプラグインです。 こんな感じでページを管理できます。CMSとしての利用となるとどうしても「ページ」の数が増えてしまいます。こうして表示してくれると俄然分かりやすいですね。 使い方 マウスを乗せるとメニューが表示。Viewで確認、Editで編集です。 下書き状態のページも分かりやすく。 普段使わない時もスッキリさせておけます。 クライアントさんが管理するなら入れてお
WordPressの管理画面内のデザインをcssで手軽に変更できるようにするプラグイン・Add Admin CSS - かちびと.net
ちょっと今更な話題なんですけど、始めて 使ってみたら便利だったのでご紹介です。 管理画面内のcssを手軽に変更できる、と いうプラグイン。よくあるブログサービス でも管理画面は簡単にデザインを変更でき るようになっていますが、それを実現する プラグインです。 手軽に、というのはプログラミングの知識が不要って意味です。このプラグインを有効化すると、cssを追記できるようになりますので、カスタマイズの知識が無くても管理画面内のデザインを変更できます。 css書くだけで管理画面のデザインを変更できます。この手のは沢山あるんですが、結局シンプルにcssで出来るのが制作者向けかなぁとは思いました。 抜粋が狭すぎるので広げてみた。あと、テーマやプラグインはいじられると困るので非表示に、みたいな感じ。 こういったカスタマイズの目的はWebに疎いクライアントさんはアクセス出来ないようにしたい、邪魔なものを
jQueryのカルーセル系プラグイン・Caroufredselだけで「こんな事も出来るよ！」をまとめたサイト・Cool Carousels - かちびと.net
Caroufredselという、結構人気なプラグイン があるんですが、このプラグインの開発者が 応用例をサンプルソース付きでまとめてくれ ていましたのでご紹介。1つのプラグインで ここまで出来るってちょっと凄いですね。 もう少し軽量になってくれると嬉しいんです けど・・ カルーセル系プラグインの定番的なライブラリ、Caroufredselの応用例を開発者さん本人がまとめてくれていました。もともと沢山例があったんですが、更に一歩進んだ使い方を紹介してくれています。サンプルはダウンロードできます。
jQuery+CSSで実装するナビゲーションメニュー総集編 - かちびと.net
jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー。css3を使っています。 Fly-out Menu with jQuery and CSS3 Rocking and Rol
2011年に配信したjQueryやWordPressなどのWeb制作向け情報・総まとめ - かちびと.net
早いもので今年も残すところあとわずか となりました。今年は年をまたいで仕事 しないとならないので早めに総まとめ的 な記事を書いておきます。と言っても 完全に自分用のまとめですのでご覧に なっても役に立たないと思いますがｗ というわけで、後で復習するのに、探さなくていいようにしただけの自分用リンク集です。 jQueryとWordPressにやたら偏ってます。過去記事のまとめですので目新しいものは一切ありません。 ネタは省いてます。あと、種類で細かく分ける気力が残ってないので順不同です。 スマフォ向けが多いのでスマフォ関連は※印を振っておきました。 復習用なのでリンクは全て当サイトの記事にしてます。他の方には二度手間ですがご了承下さい マウスを乗せるとキャプチャが表示されます。 130個くらいです。普段から小ネタばっかりなのでそんな感じのまとめです。 【追記】（僕が）リンク見にくいので色を変え
WordPressのオリジナルテーマ作成フロー・基本マニュアル
初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次 目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに 作成するWebサイトの目的と構造 テーマ作成前に用意するものと環境 テーマの構造を（触り程度だけでも）理解する HTM
ユーザーIDでも登録したメールアドレスでもログイン出来るようにするWordPressプラグイン・WP Email Login（と、日本語ファイル） - かちびと.net
地味に需要があるかな、と思って記事に。 通常WordPressはユーザーIDとパスワード でログインしますが、このユーザーIDの 他に、登録したメールアドレスでもログイン 出来るようにする、というプラグイン です。Webサービスでは良く見かけるの で探してる方もいるかもですね。 土曜日ですし、軽めのネタ。WPでメールアドレスでもログイン出来るようにするプラグインです。 まぁそれだけなんですけども。 せっかくなので日本語ファイルも作りました。翻訳2箇所だけでしたｗ このプラグインを有効化すればこのようにメールアドレスでもログイン出来るようになります。 まぁそれだけなんですけども。 インストール WP Email Loginをダウンロードして解凍 日本語ファイルをダウンロードして解凍し、翻訳ファイルをWP Email Loginのフォルダにコピー サーバーにアップロード 管理画面で有効化 ログ
無料・商用OK・リンク不要の、やわらかい印象の日本語フォント・はんなり明朝 - かちびと.net
以前ご連絡を頂いたフォントポ日本語の 作者さんから新作のお問い合わせを頂 いたのでご紹介。やわらかい印象の明朝 系フォント、「はんなり明朝」です。こちら も商用で利用できるとのことです。なんとも 太っ腹ですね・・ フォントポ日本語の作成者さんからまたまたご連絡いただきました。いつもありがとうございます:D 商用で利用できる日本語フォントに新しく仲間入りです。 かわいいですねーｗきりっとした印象の明朝ですが、こちらは少しふんわりとした印象を与えられそう。明治時代の築地体を参考に作られたそうですよ。 利用規約 利用規約は 当サイトのフォントはすべて無料です。個人・商業用途での利用について特に制限はございませんので、どうぞお気軽にご使用ください。ただし、フォントデータの改変はおやめください。また、フォントの使用によって生じたいかなる結果や損害につきまして、一切の責を負いませんのでご了承ください。
有料でもおかしくないようなクオリティの高いWordPressテーマを無料で配布しているサイトいろいろ - かちびと.net
ご質問頂いたので記事にします。クオリティ の高いWordPressのテーマで無料のものは 無いか、または無料で手に入る方法は無い か、とのことでしたのでなかなかクオリティの 高いテーマを無料で配布してくれているサイト をいくつかご紹介します。 というわけで無料で手に入る、有料ライクなWordPressテーマを配布しているサイトのまとめ。ハイクオリティかどうかは個人差があるかなとは思います。 デザインはもちろん、テーマの機能をどういったコードで実装しているか、というのも参考になりますので開発目的に見ておいても損は無いかなと。 dessign swiss-missやonextrapixelでも評価されたデザイナー、クリエイター向けのテーマ。ホワイトベース中心です。有料版もありますが、無料版も見劣りしません。 example dessign Templatic TemplaticはCMSやポート
HTML5のCanvasを使ったパターン背景を簡単に作成出来るWebサービス・Patternizer - かちびと.net
珍しいなぁと思ったのでメモがてらご紹介です。 HTML5のCanvasを使用してパターン背景を 生成出来る、というWebサービス。線を描いて 数枚重ね、パターンのような背景を作成する ことが出来ます。まだ実用段階とは行きません けど。 簡単にHTML5製の背景を作成出来るジェネレーターです。Canvasは非プログラマーにとっては若干ハードルが高い印象ですので、この手のジェネレーターで使い方を覚えていくのもいいかもしれません。 こんな感じ。線の太さ、角度などを調整し、複数の線の連続を重ねてパターンを生成します。 使い方はこんな感じ。直感で分かるんじゃないですかね。 使い方 まず、patternizer.jsというスクリプトを読み込みます。 <script src="js/patternizer.js"></script> で、マークアップ <canvas id="bgCanvas"></ca
CSS3のtransformやbox-shadowを主要ブラウザ全てに対応させるjsライブラリ・cssSandpaper - かちびと.net
これ系はいくつかありますので 1つの選択肢として、という感じ ですね。css3のtransformや box-shadowをクロスブラウザ 対応させるjsライブラリですが、 特徴はプロパティを1行で統一 させる事が出来る点です。 css3のtransform（変形）、box-shadow（影）、gradient（グラデーション）ですが、gradientは不完全でした。しかしながらこのスクリプトを応用してアニメーションさせることも出来るようです。 各ブラウザで実装したものを比較していました。IEに限らず、主要ブラウザ全てをサポートしています。また、何より独自のプロパティを使うのですが、これが1行で済むので場合によってはなかなか楽では無いかと。 左がChrome、右がIE6です。テキストのドラッグも普通に出来ますね。 例・transform cssSandpaperを使用した際のtransfo
HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか - かちびと.net
あまりに情報量が多くて混乱してきたので 自分用にまとめ。リファレンスとか、ちゃんと 実践で使えるツールを自分なりに厳選して まとめておきます。どうも、あっちこっちで あれが便利とかこれが便利だとか言われる と訳が分からなくなるのでそろそろ絞らない とですね。 というわけでお遊びではなく実践に役立ってる基本的なリファレンスとか助けてくれるツールのメモなので目新しいものはありません。完全に自分用のまとめです。個人的には基礎用のサイトと、実践向けのツールやライブラリだけあればいいという感じです。 尚、css3/html5に関する情報だけを求めている&特に情報取得に急いでないならdotHTML5というサイト1つで事足りるかと思います。 ※W3Cは割愛でいいですよね チートシートとかリファレンスだけで基本的にはいい感じですかね・・ HTML5 タグリファレンス マークアップもままならないほど慣れてな
無料で手に入るECサイト向けのWordPressテーマいろいろ - かちびと.net
ご質問頂いたので記事にしてみます。ECサイト をWordPressで構築したいけど良いテーマや、 参考になるテーマはないだろうか、との事でした ので、無料で手に入るECサイト向けのWordPress テーマをいくつかご紹介します。ソースコードや デザイン、レイアウトなどを参考にしてみては いかがでしょうか。 というわけで無料で手に入るECサイト向けのWPテーマです。さほど数は無いですけど・・ECサイト構築用のプラグイン（WP e-Commerceなど）に依存したテーマなどもあります。 でもまぁ大半はtokokoo.comで配布されているテーマです。多くのテーマは有料ですが、一部の機能を削ってフリー配布してくれています。ダウンロードにはユーザー登録（無料）が必要です。 BuySell Theme 綺麗でシンプルですね。個人的には一番好きでした。キャプチャは商品ページです。要WP e-comm
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressのギャラリー機能で追加した画像一覧からアイキャッチを除外して、画像に任意のリンク先を指定する - かちびと.net