CSSだけで任意のテキストにタイピングアニメーション
Result タイプライターのようなエフェクトを任意のテキストに与えます css.line-1{/*対象のテキスト*/ position: relative; top: 50%; width: 24em; margin: 0 auto; border-right: 2px solid rgba(255,255,255,.75); font-size: 180%; text-align: center; white-space: nowrap; overflow: hidden; transform: translateY(-50%); } .anim-typewriter{/*アニメーションセッティング*/ animation: typewriter 4s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) infinit
複数ブックマークサービスに一括対応できるAddThisを導入する前にいろいろ調べたのでメモ - かちびと.net
ブックマークやTwitterへの投稿、Facebook のいいね！をしやすいようにボタンをサイト側 で設置するのはもはや当たり前のようになり つつあります。僕も例外なく、昔から貼ってる んですが、どんどん新しいのが出てきて、結構 面倒なので、よく見かけるAddThisを導入する ことにしました。 AddThisは国内でもよく見かけるので認知度的にいいかなと思ったんですが、ドキュメント見てみたらそこそこカスタマイズ出来るようなのでちょっと導入前に軽く調べてみましたのでついでにメモします。 いろいろな所で見かけてるかと思いますので説明はいらないですよね。世界中のソーシャルサイトをまとめてくれているサービスです。 多少ごちゃ付いてきたので遅ればせながらAddThisを導入してみようかなと思ったんですが、いろいろとカスタマイズ出来るようなので以下に調べた事をメモとして残しておきます。 初めに まず
WordPressのログインURL（wp-login.php）をサクッと変更できるプラグイン・Stealth Loginでプチセキュリティ強化 - かちびと.net
WordPressのログインURLは何もしなければ 知っている方にはバレバレです。個人サイト なら気になりませんが、納品物だと少し不安 ではあるかなと思います。URLを変更するには .htaccessを触る必要がありますが、ハードル が高かったりして手を出せない方もいるかと思 います。 少し前にWordPressを使ってWeb制作をする為の手順リストっていう記事を書いたんですが、この中で紹介したプラグインが便利なのにまだ知名度が低い印象なので改めてご紹介。 WordPressで構築されているサイトのログインURLは基本的にhttp://domain.com/wp-login.phpで共通なので、知ってる人にはバレバレ。これはちょっと気持ち悪いので変更したいところです。 変えるには.htaccessにrewriteコードを追記するんですが、慣れていないと若干ハードルが高い印象です。これを、直
ChromeのデベロッパーツールでCSSの未使用セレクタを調べる方法 - かちびと.net
Google Chromeのデベロッパーツール で現在閲覧中のページでロードされて いるCSSファイルから未使用のセレクタ を調べる、という方法です。こんなの Web制作者にとって常識だろ、みたい な内容だったらごめんなさい。 今更感あふれる内容ですけど、Chromeのデベロッパーツールで閲覧中のページで読み込まれているCSSからそのページで使用されていないCSSルールを調べる、という方法。 と言うかただの標準機能の紹介です。便利かどうかは使わないと分からないと思うのでテストしてご判断下さい。 手順 F12でデベロッパーツール開いてAudit（監査）っていうタブを選択し、Runで調査ツールを実行します。 ↑ 直ぐに解析は終わると思います。赤い枠の「Remove unused CSS rules」という部分が未使用のCSSルールです。 ↑ ファイルごとに調査結果が出ます。三角のマークをクリッ
クリックでアニメーションしながら開閉するアコーディオン
Result jQuery//アクセス時の表示状態の処理 $("p:not(:first)").css("display", "none"); $("h3:first").addClass("select"); //クリックイベント $("div h3").click(function() { var cont = $(this).next(); if ($(cont).css("display") == "none") { //スライドエフェクト付きで表示・非表示 $("p").slideUp("fast"); $(cont).slideDown("fast"); $("h3").removeClass("select"); $(this).addClass("select"); } //ホバー時にclassを与えてスタイリング }).hover( function() { $(this
WordPressで無駄に追加してしまった不要なカスタムフィールドの名前を、簡単に削除するプラグイン | かちびと.net
地味に困ってた事が楽に解決したのでシェア。 WordPressで諸事情で無駄に追加してしまった 不要なカスタムフィールドの名前ってあると 思うんです。誤操作とか、他のプラグインで 自動で追加されたけどいらなくなった、とか。 そういう不要なカスタムフィールドを消す事 が出来るプラグイン。 削除するときはDBで直接消す、という手軽に消せないカスタムフィールド名。消さなくても大きな実害は多分無いけど、選択するときにプルダウンにあるのが凄く邪魔です。でも、それだけの理由でDBをいじるのは、慣れていない方にはちょっと気が引けます。 というわけで、簡単に消せるプラグインをご紹介します。これでストレス無くカスタムフィールドを利用できますね。 Delete Custom Fields 1つしか使わないのに誤作動とかテストで追加したやつが残って邪魔やねん・・・みたいな状況。地味にストレス溜まりますので、簡単
WordPressのカスタムフィールドでショートコードを使う
日曜日なので軽い話題。WordPress のカスタムフィールド内でショート コードを利用する方法です。あまり 使う事も無いかもしれませんが、 ショートコードを多用する方には 利用価値がありそうです。 使えたらいいなぁ、というシーンはたまにあるので覚えておいて損は無いと思います。 通常のカスタムフィールドの場合<?php echo get_post_meta($post->ID, 'foo', true); ?>おさらい。普通にカスタムフィールドを使う場合は上記のようなコードを使います。fooという名前で登録したカスタムフィールドに入れた値が、このコードで出力できます。 ですが、このままここにショートコードを入れてもそのショートコードの文字列が出力されるだけです。 apply filtersを使うカスタムフィールドでショートコードを使うには以下のようなコードをテーマファイルに挿入します。 <
Lightbox内にサムネイルも表示出来るイメージギャラリー系jQueryプラグイン・ppGallery - かちびと.net
ポップアップしたLightbox内にサムネイルも表示可能 なjQueryプラグイン・ppGalleryのご紹介です。Lightbox 系のjQueryプラグインの大半は1つずつ見ていくか、 一旦ポップアップを閉じてからもう一度開く必要があり ましたが、ppGalleryは一回開けばあとはサムネイルで 好きな画像に飛べるのでLightboxスクリプトの中でも イメージギャラリーに向いてそうです。 さて、今日は8月6日「ヒロシマ」の日ですね。1945年の今日の8時15分に原爆が投下されました。不幸にしてお亡くなりになられた方々のご冥福をお祈りすると共に、ご遺族の方々に対して心よりお悔やみを申し上げます。 現在、上記のようにGoogleストリートビューで原爆ドームの外と内を見ることが出来るようになっているようですのでチェックしてみてください。 では本題に戻ります。「Lightbox内にサムネイル
WordPressのカスタムフィールドに住所や地名を登録するだけでGoogleマップが表示されるようにカスタマイズする - かちびと.net
少し前に小規模のローカル地域での 店舗検索サイトのお手伝いをさせて 頂いたんですが、その時に使った Tipsです。WordPressのカスタム フィールドに住所を入れるだけで、 地図が表示されるようにする。 カスタムフィールドに住所を入力すればGoogleマップが自動で表示されるようにする、っていう方法。 住所入力でGoogleマップを表示する APIを使います。これは少し前にjQueryでやる方法を知人に聞かれたので記事を書きました。 APIと少しのjQueryコードでGoogle Mapの地図の色を変更する なので細かい解説は割愛します。 コード ではコードです。 API <script type='text/javascript' charset='utf-8' src='http://maps.googleapis.com/maps/api/js?&sensor=false'></
Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ - かちびと.net
Webフォントに関して調べ物をしたので 個人的なメモ。少し利用頻度があがって 来たので探しやすいようにまとめておき ます。まだちょっと使い慣れてないので もう少し勉強しないとダメですね・・ スマフォ向けのリソースもあります。 というわけでWebフォントに関するメモです。以前触りだけしか書かなかったのでもう少し深く調べておこうと思い記事にしました。ので、過去の記事と結構重複します。 最低限の知識 最低限かどうか分かりませんけどｗ 少し不明瞭な点もありますので間違いがあればご指摘頂けると幸いです。 ライセンス まずライセンスですが、通常、Webフォントとして利用するには当然フォントの著作者次第になります。 Webフォントとして使うにはサーバーにフォントファイルをアップロードしてcssでファイルのパスを指定して利用するので、フォントファイルが誰でも手に入れられてしまう事になります。（アイコンなん
WordPressのカスタム投稿（ポスト）タイプを作成するまでの手順リスト - かちびと.net
捜し物をしている最中に、ちょっと気になったのでテスト的に記事にしてみます。WordPressに新たに追加されたカスタム投稿タイプですが、多少なりにカスタマイズ経験が無いとハードルも低くはない印象なので手っ取り早く作成出来る用にリスト化します。 便利なのにさほど深く浸透していない印象のカスタム投稿タイプ（カスタムポストタイプ）やカスタムタクソノミー（タグに親子関係を持たせる的な機能）とかいろいろと不可解なキーワードで混乱してる方も多いような気がします。 個人的には理解の前にとりあえず触ってみるのもひとつの手だと思いますので、まずは気軽に追加してみてからどういったものか調べればいいかなと。（賛否両論あるでしょうけど僕はとりあえず触って失敗して学びたい人なので カスタム投稿タイプってなんだろう カスタム投稿タイプとは、WordPressにデフォルトである「投稿」という機能とは別の「投稿」機能を加
WordPressテーマカスタマイズ事始め・基本構造を理解してカスタマイズしてみる - かちびと.net
WordPressを使っているけど、 PHP分からないし、カスタマイズ は未経験・・という方の為の カスタマイズ方法です。PHP を理解せずとも基本構造を ある程度理解すれば可能です。 PHP製のWordPressですので、当然PHPを理解していれば様々なカスタマイズが可能ですが、プログラミング自体まだ敷居はデザインより高いかもしれません。 でも、カスタマイズしてみたい！という方も多いと思いますので今回はカスタマイズ始めの1歩、的な内容です。 はじめに これはPHPの記事ではありません。コピペ（ファイル間でのソースの移動など）が基本になるのでプログラマーさんからすれば酷い記事になると思いますが、デザイナーさんが少しでもプログラミングに興味を抱き、理解する事でチームの作業が円滑になる側面も期待しつつエントリーしてみます。 で、カスタマイズする前に以下にご注意頂きたいと思います。 テーマファイ
【日本語ファイル】WordPressで画像のトリミング等を可能にするプラグイン・Scissors - かちびと.net
先週に記事にしたWordPressの管理画面や投稿画面を使いやすくする７つのプラグイン の中で「画像をWordPress内でトリミング、リサイズ、回転加工が出来るScissors」 を ご紹介しましたが、珍しいし、なかなか無いタイプのプラグインなので日本語ファイル作成 しました。英語は中学生並みですので誤訳あったらご自身で変更してみてください。 インストールまでの流れ Scissorsをダウンロードし、解凍 日本語ファイルscissors-ja（poファイルとmoファイルが同梱）をダウンロード 日本語ファイルを解凍し、moファイルをScissorsフォルダの/languagesフォルダ内に入れる /wp-content/plugins/以下にScissorsフォルダをコピーしアップロード プラグインを有効化 メディア→適当に画像を選択して日本語化の確認 ※作者さんが作成したScissors
WordPressをクライアントワークで使用する際に覚えておくと良さそうな管理画面のカスタマイズ用コードいろいろ - かちびと.net
今日もWordPressの記事です。今日は、クライアントワークで、納品物としてWordPressを使うときに覚えておくと便利な管理画面をカスタマイズ出来るコードのまとめです。ほとんど地味な施工ですけど。 今日はクライアントワーク向けの管理画面カスタマイズコードをいろいろご紹介します。こちらも、昨日お知らせしたWordPressスニペットに掲載しますのでそちらでもご確認頂けます。と言うわけで宣伝でした。 WordPressスニペット まだ未完成ですけど暇を見て使いやすく出来たらなぁと思います。 更新をWebに疎いクライアントさん側で行うのであれば、管理画面の利便性の向上は更新モチベーションに繋がりますし、工数分の売り上げ増加にも繋げられます。地味だけど、覚えて置いて損はありません。 では、コードいろいろです。コピペはあまり良く無いですけど、今日はまとめ記事なのでコードの解説は割愛させてくださ
WP GoogleAnalytics Reports でWordPressダッシュボードにアナリティクスを - かちびと.net
いちいちGoogle Analyticsに行くのが 面倒です。かと言って「たいして見ないし」 というのもWebマスターとしてマズイので、 プラグインでダッシュボードにAnalytics を表示させるようにしました。そのプラグインが、 WP Google Analytics Reportsです。 ダッシュボードにGoogle Analyticsのデータを表示！！ いや、かなり楽になりました。細かい設定は無理ですけど、 見たい、調べたい箇所は表示してくれるし、動作も軽いので オススメです。特に、プラグインのファイル数自体が少ないので 負担もかけず、動作が鈍くなる心配も無いと思います。 WP Google Analytics Reportsのインストール WP Google Analytics Reportsをダウンロードして解凍 /wp-content/plugins/内にファイルごとコピーし
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 - かちびと. net
WordPressのカスタム投稿タイプとカスタムタクソノミーを使って新たに別のコンテンツを作ったので、制作プロセスを書きました - かちびと.net
ループ外で固定ページのIDで条件分岐する
WordPressスニペット | かちびと.net
