<!-- Twitter Card --> <meta name="twitter:card" content="summary"> <?php if (is_singular()){//投稿・固定ページの場合 if(have_posts()): while(have_posts()): the_post(); echo '<meta name="twitter:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";//抜粋を表示 endwhile; endif; echo '<meta name="twitter:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示 echo '<meta name="twitte

Source Han Code JPとは Source Han Code JP（源ノ角ゴシック Code JP）は、無料で使えるプログラミング向け OpenType フォントです。 Adobe社がオープンソースで開発しており「Source Code Pro」と「Source Han Sans JP（源ノ角ゴシック JP）」を組み合わせて作成されています。 Source Han Code JPの特徴 Source Han Code JPの特徴として以下のものが挙げられます。 ASCII文字は「Source Code Pro」が適用されている。 それ以外の文字には「源ノ角ゴシック」が適用されている。 半角文字と全角文字の横幅の比が 2:3 に調整されている。 文字の太さは7種類の中から選べる。 Adobe社がオープンソースで開発している。 実際に、「SourceHanCodeJP-Normal

//本文中のURLをはてなブログカードタグに変更する function url_to_hatena_blog_card($the_content) { if ( is_singular() ) {//投稿ページもしくは固定ページのとき //1行にURLのみが期待されている行（URL）を全て$mに取得 $res = preg_match_all('/^(<p>)?(<a.+?>)?https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+(<\/a>)?(<\/p>)?(<br ? \/>)?$/im', $the_content,$m); //マッチしたURL一つ一つをループしてカードを作成 foreach ($m[0] as $match) { $url = strip_tags($match);//URL // //サイトの内部リンクは処理しない場

僕は、Wordpressテーマなどのファイルを編集するには、Sublime Textなどを使用したりしてきました。 Sublime Textは、「恋に落ちるエディター」といわれるほどとても使い勝手の良いエディターです。 ただ最近、ネットなどを見ていると、AtomというWEB開発用エディターにも、ものすごいポテンシャルを感じました。なんといっても、こちらは無料です。 ということで、僕は今、Wordpressテーマを編集するくらいしかコード編集をすることはないので、Wordpress用にAtomを初期設定してみました。 今回は、僕がやってみた初期設定をメモがてら紹介です。 Atomとは Atomとは、GitHub社が開発したWEBプログラマ向けのエディターです。 オープンソースで開発され、Windows、Mac、Linux環境で利用可能。しかも無料で利用することができます。 拡張性が高いのも大

NoxPlayerとは NoxPlayerは、Windows上で動作する無料のAndroidエミュレータです。 中国製のソフトではありますが、デフォルトで日本語に対応しておりインストールと同時に日本語環境で利用できます。 僕が使ってみて、このソフトの素晴らしかったところは以下の点。 インストールがとにかく簡単 初期設定もほぼ不要 Googleストアがデフォルトで利用できる 動作がとにかく軽快 画面サイズを自由に設定できる 結構いろいろなアプリが動作する 複数環境を作成してマルチで起動できる 僕はゲームをやらないので、あまり詳しくはないのですが、ゲーム向けの機能も充実しています。 僕は、主にAndroidアプリを利用したり、ブラウザなどからWEBサイトの動作チェックなどに利用しています。 ある程度、パソコンのスペックがあれば、素早く起動して、軽快な動作でAndroid上からサイトチェックなど

Emmet sergeche/emmet-sublime 少ないコード記述でHTMLやCSSをサクサク記入できるパッケージです。使い方がわからなくてもチートシートを見ながら使っているうちに、手放せなくなります。 All Autocomplete alienhard/SublimeAllAutocomplete ただでさえ便利なSublime Textのコード補完機能を、さらに強化するパッケージです。自分で記入した関数や変数なども補完してくれます。 AutoFileName AutoFileName – Packages – Package Control こちらは、プロジェクトフォルダ内のファイル名などを補完してくれるパッケージです。images/のようにサブフォルダを指定しても補完してくれ、画像の場合は幅と高さまで表示＆補完してくれます。 wpseek.com WordPress Dev

サイトのモックアップ作成時にダミー画像があると何かと便利です。 画像は、適当な画像をCC0ライセンスサイトなどからダウンロードしてきても良いのですが、集めて大きさを加工するのが結構めんどくさかったり。1から作成するのもなおさら面倒くさいですし。 そんな時に、URLを指定するだけで好みの大きさのダミー画像を生成できる、「Placehold.it」が手軽で便利です。

Awesome Product shotsとは Awesome Product shotsは、パソコン・スマホ・タブレット写真の画面内に、画像を手軽に嵌め込んで合成写真を作成できる無料ツールです。 数えてみたら現在、以下の7つのカテゴリ、36種類の合成写真を作成することができます。 モバイル（iOS）×11 モバイル（Android）×1 デスクトップ（Apple）×13 デスクトップ（その他）×1 タブレット（iOS）×3 タブレット（Android）×1 タブレット（その他）×2 Frame: Awesome Product Shots フレームを選択して、はめ込み画像をアップロードするだけで、数クリックで合成写真を作成することができます。 使い方 Awesome Product Shotsは、以下の手順で簡単に利用することができます。 はめ込み用の画像を用意する フレームを選ぶ アッ

WEBデザイン利用に適した動画が多数公開されている「Coverr」というサイトが良かったので紹介です。 CC0（パブリックドメイン）ライセンスなので、動画制作者の許可なく自由に利用することができます。 Coverrとは Coverrは、美しいフリー動画配布サイトです。 毎週月曜日に7つの新しい動画がアップされます。 動画の利用は、CC0 1.0になっています。CC0とは、著作物に対し、「できる限りの権利を世界的に放棄する」という意思表示をするための法的ツール（表記）となっており、作品は完全にパブリックドメイン（知的財産権が発生していない状態又は消滅した状態）に置かれます。 簡単に言うと、営利目的で使おうとも、許可を得ることなく勝手に利用、複製、改変、配布、上演などをすることができる動画ばかりのサイトです。 利用コードも載っている 動画ファイルをダウンロードすると、WEB利用に必要な以下のフ

主な手順 animatedModal.jsをWordpressのグローバルメニュー表示ウィンドウとして利用するには、以下の手順が必要です。 animatedModal.jsのダウンロードと設置 ヘッダーでCSSファイルの呼び出し フッター部分にJSファイル呼び出し、ウィンドウとなるHTML、jQueryコードの記入 スタイルシートで見た目を整える モーダルウィンドウの呼び出しボタンを書く モーダルウィンドウとなるHTMLを書かなくてはいけないので、コードは多少長くなりますが、やることはそう多くはありません。 ダウンロードと設置 まずはanimatedModal.jsからファイルをダウンロードします。 「animatedModal.js-master.zip」というファイルがダウンロードされるので、中にある「demo」フォルダの中から、「css」フォルダと、「js」フォルダを、テーマ内にコピ

Sublime Text3のダウンロード まずは、Sublime Text 3からソフトをダウンロードします。 僕は、環境移行のしやすさから、Windows64bit版のSublime Text3ポータブル版を利用しています。 ダウンロードしたら、任意の場所において解凍してください。 解凍したら、フォルダの中の「sublime_text.exe」ファイルを実行してください。 Package Controlのインストール 解凍したら、実行ファイル「sublime_text.exe」を起動します。 メニューの「View」→「Show Console」から、コンソールを開きます。 コンソールを開いたら、Package Controlをインストールするために、Installation – Package ControlからPythonのインストールコードを入手します。 ページ上の「Sublime

FTPとSFTP エックスサーバーを利用している多くの人が、サーバーにファイルをアップロードするのに、FTPなどを使用しているかと思います。 ただ今回は、そのFTPではなく、もっとセキュリティーの高いSFTPというプロトコルを利用したファイル転送の方法です。 FTPとSFTPの違いは、簡単に説明すると以下のようになります。 FTP：データ自体（接続ID、パスワード含む）暗号化されず、そのまま通信している SFTP：FTPで送受信するデータを、暗号化して通信している 簡単に例えるとFTPの場合は、ただの糸電話みたいなものかと思います。 糸電話の場合は、双方、生の声（データ）をやりとりするので、間に枝をつければ、盗聴できる状態にあります。 photo by Paul Downey 反面、SFTPの場合だと、声（データ）を暗号化してから糸を震わせる事になるので、間に盗聴が入っても、声（データ）自

Android版Chromeの不具合 その不具合というのは、テーマや文章内に&nbsp;を用いた半角スペース（実際は半角スペースではない）を挿入すると、普段はこう表示されているものが、 Android版Chromeを使用してみると、以下のように表示されるようです。 原因について調べてみると、どうやらAndroid版Chromeによるバグが原因ではないかということになりました。 Googleのプロダクトフォーラムには、以下のように書かれていました。 Android 版 Chrome 40 において，&nbsp; が”・”として表示される不具合が報告されています。 自分の Android 端末でも”・”と表示される問題を確認しました。 Issue 451933: &nbsp rendered as center dot “・” in some localization もし何かしらの関連があれ

これらの作業によりPageSpeed Insightsのスコアが、61→77とかなり改善してきました。 毎回、一つ一つ成果を確かめながら高速化させたいので、今回は「画像最適化してブログの高速化」を行いたいと思います。 photo by Rami ™ 画像の最適化って？ 簡単に言うと、ブログで使っている画像の画質は保ったまま圧縮して転送サイズを減らし、ブログの表示スピードを速くすることです。 PageSpeed Insightsの提案には以下のように出ています。 画像を最適化する 画像を適切にフォーマット化して圧縮すると、データ サイズを大きく削減できます。 次の画像を最適化すると、サイズを 41.6 KB（15%）削減できます。 画像を適切に圧縮することで、41.6KB全体の画像サイズを削減できるようです。ちょうど上にあるPNG画像が22KBなので、トップページだけでその約2倍削減できるこ