ドットインストール代表のライフハックブログ
![IDEA * IDEA](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4443ccb00e68e1c3ac94a15f25123bc054de825/height=288;version=1;width=512/http%3A%2F%2Fwww.ideaxidea.com%2Fwp-content%2Fuploads%2F2012%2F10%2FOnline-Courses-from-the-World_s-Experts-Udemy.png)
Webサイトのトップページで表示するお知らせ情報など、レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして、末尾に「…」などの追記情報(これも任意の文字列)を追加するやり方をシンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】 jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 まずは実装するHTMLソースが下記のような構成だったとします。 ◆HTML <ul> <li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です
メールフォームは簡単ではない! 大抵一番最初に作るPHPのプログラムチックなモノと言えばメールフォームですが、はっきり言ってめちゃめちゃ難しいです。 PHP●年やっている私も、たまに頭を抱えるメールフォームの事例もありますから決して侮ってはいけません。 この2つの戦いですが、これが難しいです。 ですから、今回なら$_Postと$_Sessioこの2つの使い方が分かればよいと思います。 後はコピペで メールフォームの項目を自分で増やせたら それでOKなのです。 使う関数 色々ありますが、今回のケースならsession_start()と、mb_send_mail()の2つを覚えて、残りの文字コードに関する設定のあたりは決まり文句のように コピペして 『テクマクマヤコン・テクマクマヤコン』と覚えて下さい。 session_start()…Sessionをスタートさせる関数 mb_send_mai
ロゴの受け渡しについて、何度かふれてきましたが、改めて。 Illustratorで作成したデータをPDFに変換して渡す(Illustratorで開いてください、と伝えること) プリントメディア用のCMYKデータ、Webで使用するRGBデータを、それぞれ別途用意する 念のため、カラー指定を記入しておくとよい PDFデータは、それ自身が圧縮されているようなものなので、さらに圧縮する必要はない(受取側で解凍する1アクション増える) 白バック/黒バック、正方形/横長など、想定される使われ方に応じて用意しておく リンク先のURL、テキストで表記するときのレギュレーション(決まりごと)を添える また、細かいことですが、 同じカラーのオブジェクトはパスファインダーで合体しておきましょう。 線のみのオブジェクトは、塗りに変換しておくこと。 「logo.pdf」とかで送ってしまうと、受取側は困ります。「dt
iPhoneで有線LANを利用する方法を紹介します。 1.接続イメージ 本題に入る前に、iPhoneで自宅のLANを利用したい場合、無線LANルータがあれば、そちらへ接続することが妥当です(下:モデムは省略しています)。 ただ、自宅に無線LANルータがない環境でiPhoneからLANに接続したい場合、あるいはホテルの部屋にあるLANに接続したい場合、上記の方法は使えません。 しかし本エントリーで解説する設定を行えば、インターネットへの接続が可能になります。 接続イメージは下図のようになります。 まず、有線LANでインターネット接続しているノートPC(Windows)があります。そしてノートPCの無線LANをアクセスポイントとして利用し、iPhoneからWiFi経由でノートPCの無線LANに接続します。 光回線などを契約している場合は、LTE並かそれよりも高速でインターネットにアクセスするこ
Posted: 2011.04.04 / Category: javascript / Tag: Ajax, jQuery Ajaxとは画面遷移なしで、データを取得したり表示したりできるあれです。最近のWebアプリケーションでは必須な技術らしいです。 知識としては知っていたものの実際使ったことがなかったので、かなり今更感が高いですが挑戦してみます。 Ajaxはサーバー側のプログラムの方が重要な気がしますが、ここでは静的なhtmlファイルを使用します。 まずは読み込まれる側のhtmlファイルを作成します。 load.html <li>読み込めたかな?</li> 読み込まれる側は「li」だけです。「load.html」という名前で保存します。 次は読み込む側です。 index.html <ul id="sample01"></ul> <p><a href="#" id="button01">ボ
About Creatorish.com Edit Creatorish.com is a captivating domain name that sparks thoughts of innovation and originality. The name is a clever combination of "creator" and "ish," suggesting a creative and imaginative mindset. It's perfect for startups that focus on creativity, design, technology, and anything that involves inventiveness. The name is short, catchy, and easy to remember, making it a
最近のWebページにはある程度データを表示させた後、さらにデータを見たい場合に「もっと見る」のようなボタンがあり、それを押すとページ遷移なしで次のデータを取ってきてくれるようなシステムが実装されています。(Googleの画像検索などがその例) デモページを用意したので、こちらも参考にして下さい。 ・デモページ ※このブログのタイトルを最初10件表示し、moreボタンを押すたびに続きを5件ずつ表示します。 このようなシステムを実際に実装して見たので、その備忘録です。尚、ベースとなるコードは以下のサイトを参考にさせて頂きました。 ・http://www.9lessons.info/2009/12/twitter-style-load-more-results-with.html 必要となるファイルは次の6つです。参考記事ではスタイルシートとjavascriptを外部化していませんが、ここ
この投稿は 12年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 Never Let Me Go 先ほど拙作WordPressプラグインのNever Let Me Goをアップデートしたので、その際の作業ログです。基本的にはWordPressを知っていて、PHPとかJavascriptとかはまあわかるかなという人を対象にしています。それでは、レッツスタディ。かなり長いですよ。 成果物 Ajaxでユーザーを検索して、IDと名前の一覧を取得して表示、選択すると該当するユーザーIDをinputタグにセットします。 管理画面でのインクリメンタル検索 Ajaxを導入した経緯 Never Let Me Go(以下NLMG)はユーザーが自分で退会できるようにするプラグインなのですが(参考)、そのユーザーがコンテンツを作成していた場合、そのコンテンツは消え
How To Create A Better Meta Box In WordPress Post Editing Page Update: The script was turned into Meta Box WordPress plugin and is being developed. Visit plugin page to see more info and download latest version. WordPress is one of the most powerful blog platforms out there. One of its strength is the ability to allow post authors to assign custom fields to a post. This arbitrary extra information
説明 動作検証用のサーバーと本番サーバーで投稿データの同期作業(コピー&ペースト)を支援するプラグインです。動作検証用のサーバーで投稿記事をJSONテキストに変換してクリップボードにコピー。本番サーバーの新規投稿ページでクリップボードにコピーしたJSONテキストをペーストして、投稿記事のコピー&ペーストを実現します。複数サーバー間で投稿記事の同期を行っている方は、お試しあれ。 インストールおよび使用方法 1. Paste JSON textアーカイブファイルを解凍し、フォルダごと /wp-content/plugins/ の中に入れてください。 最新のPaste JSON textアーカイブファイルは、「こちら(199KB)(最新版は2.0.0)」からダウンロードしてください。 2. 管理ページのプラグインページで「Paste JSON text」を有効にしてください。 管理者権限のアカウ
WordPressの管理画面カスタマイズ時に見るチートシート目的のメモ第2弾です。 紹介している内容は、基本的にWordPress Ver 3.3で実装・確認したものになります。 February 20, 2014 追記 WordPress Ver 3.8になって管理画面がいろいろ変更されたことにより、紹介しているカスタマイズの一部が使用できなくなっている可能性がありますのでご注意ください。 ログイン画面のロゴを変更 デフォルトのログイン画面はWordPressのロゴが表示されていますが、これを任意のものに変更する方法です。 下記をfunctions.phpに記述して、ロゴ部分のCSSを上書くことで変更します。 イメージの置き場所やファイル名が違う場合は、echoの部分を変更してください。 デフォルトで表示されているWordPressロゴの大きさは274×63ですので、これを基準に作成すれ
今日もWordPressの記事です。今日は、クライアントワークで、納品物としてWordPressを使うときに覚えておくと便利な管理画面をカスタマイズ出来るコードのまとめです。ほとんど地味な施工ですけど。 今日はクライアントワーク向けの管理画面カスタマイズコードをいろいろご紹介します。こちらも、昨日お知らせしたWordPressスニペットに掲載しますのでそちらでもご確認頂けます。と言うわけで宣伝でした。 WordPressスニペット まだ未完成ですけど暇を見て使いやすく出来たらなぁと思います。 更新をWebに疎いクライアントさん側で行うのであれば、管理画面の利便性の向上は更新モチベーションに繋がりますし、工数分の売り上げ増加にも繋げられます。地味だけど、覚えて置いて損はありません。 では、コードいろいろです。コピペはあまり良く無いですけど、今日はまとめ記事なのでコードの解説は割愛させてくださ
テキストにかっこいいスタイルを与えたり、レスポンシブに対応した配置や複雑な形状の回り込み、タイプライターや案内板のようなアニメーションで一文字ずつ表示するなど、テキスト関連のjQueryのプラグインを紹介します。
カスタム投稿タイプとカスタムフィールドを組み合わせて、新しいカスタム投稿タイプ「新-東京風景」を作成した。その際におこなったことは以下の4つでした。 (1) カスタム投稿タイプの定義 編集フォームのメタボックスを呼び出すコールバック関数を「register_meta_box_cb」で設定 (2) 上記定義をアクションフックで init に定義 (参考)http://wpdocs.sourceforge.jp/関数リファレンス/register_post_type (3) コールバック関数で編集フォームの設定 add_meta_box 関数を定義 (4) カスタムフィールドの値を保存 データが入力された際 save_post アクションフックを使って保存する (出典)http://wpdocs.sourceforge.jp/関数リファレンス/add_meta_box このコードを
履歴 愛知高等学校 東海大学文学部北欧文学科 東北大学大学院経済学研究科(中途退学) 個人サイト »Hiroshi Sawai »Info Town ご質問などありましたら下記アドレス宛へメールをお送りください。 info@findxfine.com テーマ、プラグインを公式テーマディレクトリ、公式プラグインディレクトリで公開しています。 テーマ WordPress › Theme Directory › kanagata プラグイン Category Archives « WordPress Plugins List Calendar « WordPress Plugins Min Calendar « WordPress Plugins Resize Editor « WordPress Plugins concrete5 Infotown Table 簡単な操作でテーブルを作成するア
CSS3を使うにあたっていつも問題になるのが Internet Explorer(IE)です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか? ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何?」「CSS3セレクタってどういうもの
先日、某大学のマーケティングのゼミに呼ばれてお話ししました。 まあ、話は例のごとくあっちこっちに飛び回ったわけですが、基本は「真の情報強者にならないと就職で失敗するよ」みたいな感じでしゃべくりました。 情報弱者というと、一般的には 様々な理由から、パソコンやインターネットをはじめとする情報・通信技術の利用に困難を抱える人。情報技術を活用できる層と情報弱者の間に社会的・経済的格差が生じ、あるいは格差が拡大していく現象を「デジタルデバイド」という。情報弱者は、典型的には、低所得者や高齢者、視聴覚障害者などがこれにあたる。文脈によっては、通信インフラの整備が遅れがちな離島や山間部の住民、発展途上国の国民などを指すこともある。 IT用語辞典より みたいな感じでいわれるのですが、ここのレベルの方は情報弱者というより社会的弱者なわけで、実際にはスマホやパソコンを持っていても「情報弱者」という層は存在す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く