ml0021234のブックマーク - はてなブックマーク

html5-memo.com

ml0021234 2014/05/30

Photoshop, Illustrator, ショートカット

リンク

WordPressを導入後、投稿などのページを公開する前に第一にすべきことはパーマリンク設定です。内部SEOに優れているWordpressであってもパーマリンクを最適化していなければユーザビリティ面やSEO面で後悔することになりかねません。今回はWordpressで後悔のないパーマリンク設定をしてユーザーにも検索エンジンにもやさしいページURLにする方法について解説していきます。パーマリンクとは WordPressにおけるパーマリンクとは、ブログの投稿や投稿一覧ページの半永久的なURL文字列のことです。インストールしたばかりのWordpressでは、投稿を作成すると自動で「?p=数字」がURL末尾に付きます。上のパーマリンクはページのURLを気にしなくてもいいというメリットがありますが、サイトを戦略的に運営していきたい人にはおすすめしません。なぜなら、上のURLからはページの内容をユ

ml0021234 2014/05/30

wordpress

リンク

正規表現による文字列置換 String.replace();

サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？コピーしてご自由にご利用ください。 replace メソッド文字列置換。 String.replace(); 文字列.replace(検索文字列,置換文字列); テキスト置換文字列を指定して、置換したい文字列を検索（検索文字列）して置換文字列に置き換えます。検索文字列にマッチしなかった時は、元の文字列をそのまま返します。最初のマッチした文字列のみ置換します。 var str="奈良時代奈良観光"; str= str.replace("奈良","xxx"); 正規表現による置換・検索文字列を /....../で囲みます。最初のマッチした文字列のみ置換します。 var str="奈良時代奈良観光"; str= str.replace(/奈良/,"xxx"); ・一致

ml0021234 2014/05/30

js, 文字列置換, 正規表現

リンク

JavaScriptで日付取得と桁合わせ - Liquidfuncの日記

JavaScriptの日付取得と、先頭0埋めの桁合わせ。new Date()でオブジェクト作ってあげて、あとは出力したい形式へと地道に変換してあげます。 JavaScriptの組込関数には便利なものがない件 Javaだと"YYYY/MM/DD"みたいな文字列を渡すことで、Dateオブジェクトを自在にフォーマットすることができますが、JavaScriptはそういうのないようです。それから、年はともかく、月日や時分秒の桁合わせも自分で実装する必要があります。気にせず出力しちゃうと以下のようになってカッコ悪い。 2010/1/5 13:2 2010/5/23 0:20 2010/10/10 11:55 サンプルコード <html> <head> <title>JavaScriptで日付取得</title> </head> <body> <script type="text/javascript

ml0021234 2014/05/30

js, 日付,　フォーマット

リンク

JavaScript による日付・時刻・時間の計算・演算のまとめ - hoge256ブログ

JavaScript でいろいろな日付の計算関係をまとめてみました。前回の日付関係のまとめエントリの JavaScript版です。日付の単位について基本的なことですが、一応まとめておきます。 1秒は1000ミリ秒 1分は60秒 1時間は60分よって 1時間=60分=3600秒=3600000ミリ秒 1日=24時間=1440分=86400秒=86400000ミリ秒現在時刻の取得まずは、最もよく使う処理です。 //今日の日時を表示 var date = new Date(); document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.get

ml0021234 2014/05/30

js, 日付, 演算

リンク

html5-memo.com

ml0021234 2014/05/27

ユーザーエージェント,振り分け,js

リンク

Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

みなさんどうも〜こんにちはぁ！日々レベルアップを目指してWebを学んでおりますライターの、のび太です。以前「Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個」という記事を書かせていただいたのですが、予想以上に好評で驚きました。お役に立てて光栄です！そのときご紹介したブログの他にも、まだまだ有益で素晴らしい国内ブログはたくさんあります。そこで今回は、「やばい！　マジで有益すぎる！　ありがてぇ！」と感じたブログを、制作系とSEO系とに分けて、計10個ほどご紹介したいと思います。今まで知らなかったという人は、ぜひこの機会にRSS購読を！制作系以下7ブログが、デザイン、コーディング、CMSなど制作系の内容になります。 NxWorld http://www.nxworld.net/ どの記事もシンプルかつ丁寧な説明で非常にわかりやすいです。特にWordPressカスタマイズ系の

ml0021234 2014/05/27

web,Blog,ブックマーク

リンク

シンボルフォント — それは、新しい画像形式

もはや、フォントは「画像形式」のひとつです。アイコンやロゴをWebで表示するならば、シンボルフォント(アイコンフォント)を自作するのが一番。前半で、シンボルフォントを取り巻く現状を、後半で実際の制作方法を紹介します。 ※このスライドは、2014年5月15日のCSS Niteで話した内容です。 http://cssnite.jp/afterdark/cpi/vol10/Read less

ml0021234 2014/05/27

シンボルフォント, web, font

リンク

Caret - Google Chrome上で動作するプログラミングエディタ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しましたあなたはWebブラウザ上でプログラミングをしたり、画像編集を行ったりしていますか？恐らくそのような方は稀で、殆どの方はローカルのプログラミングエディタやPhotoshop、IDEなどを使っているのではないでしょうか。しかしGoogle Chromeであればその夢も叶うかも知れません。それがCaret、Google Chrome/Chrome OS上で動作するプログラミングエディタです。 Caretの使い方 CaretはChromeのパッケージアプリになるのでよりネイティブに近い動作ができるようになっています。 Caretはプログラミングエディタとして十分な機能を備えており、Google ChromeにGmailアカウントでログインしていれば一台にインストールするだけで他のコンピュ

ml0021234 2014/05/26

Chrome エディタ

リンク

WebフォントのCSS指定2014年度版とこれまでの歩み

比べる。 WEBCRE8.jpとその仲間達で、web制作における「選択」において最良だと思われるものを考察していくカテゴリです。最近Webフォントについて色々調べたので、これまでの経緯やメジャーどころの記法を踏まえつつ良い書き方を探った結果を共有しておきます！私自身はまだ実務で積極的に使っているわけじゃないんですが…(でもぼちぼち使ってます)。足りない部分もあると思うんで何か指摘があったらがんがんツッコんでくださいw @font-faceルール @font-faceルールは、Webフォントの名称と読み込むフォントファイルを関連づける@ルールの一つです。その他、どのウェイトやスタイルに対応するかも指定できます。しかしWebフォントの扱いはブラウザ側のフォントファイルの対応状況、フォントファイル自体の進化によって変遷してきました。 Bulletproof Syntax これまでWebフォ

ml0021234 2014/05/22

Webフォント css

リンク

https://qiita.com/shinnn/items/5be7e8106189311559c1

ml0021234 2014/05/09

css, font-family, 游書体

リンク

ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタントヒガシナオヤ

OS X MavericksとWindows 8.1の游ゴシック体・游明朝体のfont-family名が違うという衝撃的な事実がわかったのでメモします。【2013/10/28 10:00追記】フォント情報も調べました。「OS X MavericksとWindows 8.1の游ゴシック体・游明朝体のフォント情報について」という記事にしています。

ml0021234 2014/05/09

css, font-family, 游書体

リンク

スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

display:table-cell; を活用するリキッドレイアウトのコーディングにすごく便利。親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。均等に横並びにしたいときに。タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。フォ

ml0021234 2014/05/07

スマホ　コーディング　html css

リンク

-webkit-text-size-adjust: none を絶対に設定してはいけない理由

PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。以上。で終わってしまうと記事にならないので、ちゃんと説明しておく。そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。これを制御するのが CSS の -webkit-text-size-adjust である。文字サイズ自動調整の具体例次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-

ml0021234 2014/05/07

css　スマホ

リンク

SyntaxHighlighter Evolvedで記事中にソースコードを表示！使い方も簡単 | WordPressのアフィリエイトで稼ぐ人生を始める-サトシ

ブログの記事中にプログラムのソースコードを書きたいことがあります。しかし、HTMLタグなどは当然プログラムが実行されてしまい、ソースコードそのものを表示することはできません。そんな時にプラグインSyntaxHighlighter Evolvedを導入しておけば、表示したいソースコードをタグで囲うだけでそのまま表示することができます。ちなみに「シンタックスハイライターエボルブ」と読みます。 SyntaxHighlighter Evolvedの使い方メニュー → プラグイン → 新規追加と移動し、「SyntaxHighlighter Evolved」で検索、インストールして有効化しておきます。例えばこんなソースコードを、そのまま普通にブログ上で表示してみます。何も表示されません。ソースコードはプログラムが実行されてしまうので、真っ白になってしまうんですね。ｄ先ほどのソースを［

ml0021234 2014/03/31

WP plugin

リンク

各種SNS・サービスの2段階認証を有効にする方法！安全のためにできるだけ設定しよう | カミアプ

どうもハンサムクロジです。 TwitterやFacebookなどのSNS、GoogleやEvernoteなどの便利なサービスを使っているかたは多いと思いますが、やっぱり気になるのはその安全性ですよね。ということで、各種SNS・サービスの2段階認証機能を有効にする方法をまとめてご紹介したいと思います。これでセーフティーにサービスを利用しましょう！ 2段階認証とは 2段階認証は、パスワードとアカウントIDと一緒に登録した携帯端末を使ってサービスにアクセスするという2段構えのセキュリティ対策のことを言います。通常はパスワードとIDを盗まれてしまうとアカウントを乗っ取られてしまいますが、2段階認証を有効にすると、上記に加えて使っているiPhoneを盗まれない限り不正にアクセスされることはなくなるというわけです！ 1.Twitter Twitterのセキュリティ設定は公式アプリから行うことができ

ml0021234 2014/03/17

SNS セキュリティ Apple Google Evernote

リンク

[JS] タップイベントが実装されているのかを調べる方法（2つ） - YoheiM .NET

こんにちは、@yoheiMuneです。今日は、スマホ向けサービスの開発で必要になる、タップイベントが実装されているかを調べる方法をブログに書きたいと思います。 Special Thanks to http://flic.kr/p/dP1Fjh タップイベントの実装有無を調べる理由主にスマホ向けのサービスを作っている時に、以下のようなことをしたい場合がよくあります。 var EVENT = {}; if (/*タップイベントが使える場合*/) { EVENT.TOUCH_START = 'touchstart'; EVENT.TOUCH_MOVE = 'touchmove'; EVENT.TOUCH_END = 'touchend'; } else { /*タップイベントが使えない場合*/ EVENT.TOUCH_START = 'mousedown'; EVENT.TOUCH_MOVE

ml0021234 2014/02/21

js Tips

リンク

モバイルサイトのナビゲーションメニューは画面下に置くべき

2014年2月19日スマートフォン, ユーザビリティスマートフォンを使ってWebサイトを閲覧する人、どんどん増えてきています。モバイルブラウザーのシェアを見ても、そのユーザー数は無視できないものとなっています。サイトによってはデスクトップで閲覧する層より多いところもあるかもしれませんね。私がWebサイトの制作依頼を受けた際、モバイル対応は必須としてきましたが、モバイルユーザビリティについて再考してみたので、今回はナビゲーションメニューについて簡単に記事にしてみます。 ↑私が10年以上利用している会計ソフト！よく見かけるWebサイトのナビゲーションメニュー人気Webサイトギャラリー「The Best Designs」に掲載されている多くのWebサイトはメニューアイコンをロゴとともに画面上部に掲載しているのをよく見かけます。よく見かけるからと言ってこの場所に設置するのが本当に使いやすい

ml0021234 2014/02/21

UI　モバイルサイト

リンク

Evernoteの魅力を再発見しよう。ザクとは違うのだよ。 - それマグで！

Evernoteの魅力について語ってみましょう。何より初めにわかってほしい。他との比較は不可能。 EvernoteはEvernoteであって唯一無二、比類無き存在。もし、比較するなら、GmailやWordpressが対象になると思う。 Evernote は Evernoteなんです。他にこういうものはない。一番近いのはMicrosoftのOnenoteかExcelです。オンラインストレージとして見たら？Evernoteは上限なし。(実質 Evernoteは「月間転送量」制限です。昔のFlickr方式です。毎月決められた上限までのアップロードが可能です。 GoogleDriveやDropboxのような容量上限が有りません。なので、オンラインストレージとしても使えるがオンラインストレージより遥かに大量のファイルを保存することが出来る。プレミアムなら毎月１GBまで新規ファイルを作