php, WEB制作

PHPで時間操作のTipsです。 以前に公開したwordpress pluginで記事を書いた時間を表示する為に必要だったので、覚書しておきます。 ■【記事を書くのにかかった時間】を表示するwordpress pluginを公開しました 結 ...

WEB制作, 素材サイト

サンプル画像
WEBデザインのモックアップや、ブログのアイキャッチ画像等、様々な用途に使える無料の写真素材サイトのまとめです。 サンプル画像はこのブログで圧縮している為、若干画質が落ちています。 注意書き 無料で使用できる写真だからといって、何にでも使え ...

WEB制作, wordpress

wordpressのアイキャッチ画像
ブログをしていると色々と機能をつけすぎて、重くなってしまう。 でも重くなってもどうしても、必要な機能がありますよね。 このブログも色々プラグインを入れすぎて重くなってしまっていました。 ブログ公開時は1秒台だったのが、2秒、3秒と遅くなり、 ...

design, WEB制作

前回の記事無料の日本語フォント【Noto Sans Japanese】があまりにも美しいので、ブログに使ってみたに続いて、フォントの話です。 どうしてもそのままだとページ表示速度が遅くなってしまう為に、どうにか出来ないかと色々調べて、実践し ...

design, WEB制作

Noto Sans Japanese

■2015年1/5日追記 フォントのサブセット化でブログ本文にフォントを適用しても、ページ表示速度低下をかなり軽減できるようにしました。 第一水準漢字を使いサブセット化する事で、12.6MBのファイルサイズをわずか548KBにまで削減出来ま ...

WEB制作, wordpress

wordpressのアイキャッチ画像
記事の執筆時間の記録・表示が出来るwordpress plugin【write-time】を公開したので、そこに至るまでに学んだことの覚書です。 そうそうwordpress pluginを頻繁に作ることも無いかと思うので、次作るときには【多 ...

WEB制作, wordpress

初めてのwordpress pluginを作成してみました。 phpは独学で学習したので初歩的な所が分らなかったり、wordpressの関数にしても知らないものが多く、色々悩んだり躓いたりしましたが、ようやく公式ディレクトリでの公開までたど ...

WEB制作, wordpress

wordpressのアイキャッチ画像
wordpressの標準機能に無いもので、どうしても実装したい機能があり、それを実装する為には【新規記事作成時】に処理を実行する必要があったので、調べてみた。 新規記事作成時にのみ動作させる 新規記事を作成する時、メニューでは【新規追加】と ...

WEB制作, wordpress

wordpressのアイキャッチ画像
wordpressでカスタムフィールドのキーが存在しない場合の条件分岐がしたかったので、調べてみた。 カスタムフィールドの値の有無で条件分岐 よくあるパターンがこれ $hoge = get_post_meta($post->ID, ' ...

wordpress

wordpressのアイキャッチ画像
タイトルがちょっとよく分りにくい感じになってしまいましたが、要点を説明すると。 ・動作するタイミング 記事新規投稿・編集・下書き時 ・動作の条件 アイキャッチ画像が設定していない時のみ動作 function.phpで設定したカテゴリのみで動 ...

css, WEB制作

css3 transitionの解説画像
動的な表現をWEBページで実現させるには、javascriptライブラリのjQuery等を使えば手っ取り早く出来ていいのですが、最近ではcss3でのtransitionやanimateを使って実装するケースが増えてきていますね。 実際触って ...

photoshop, WEB制作

Bubble Brushes by Tazni
水に関するphotoshopのブラシをまとめてみました。 素材集などから合成したり自作でブラシを作ったりするのもいいですが、フリーのブラシを使用すると作業効率も上がるし表現の幅も広がります。 使い方によっては人物合成の際のエフェクトに使った ...

WEB制作

Semalt

google analyticsでアクセス解析情報をチェックしていたら、やたら直帰率が高かったり平均セッション時間が短くなっていたので、参照元をチェックしていたら【semalt.semalt.com】というよく分らない所からのアクセスがあっ ...

photoshop

Griddify紹介記事
photoshopでの作業する際に、ガイドを作成していく作業って何気に時間がかかりますよね。 【全体幅は1280pxで、ここの幅は320pxでmarginがサイドに10pxで・・・】 こんな感じでモックアップデザイン作る時なんかは、正確な数 ...

photoshop

photoshop plugin Ink
デザイン情報をワンクリックで書き出してくれる便利なphotoshop plugin【Ink】(インク)の紹介です。 INK公式サイト画像 要素の名前、フォント、レイヤースタイル、縦幅、横幅、透明度、カラーなどの情報を、書き出して表示してくれ ...

photoshop

photoshopお手軽レタッチテクニック ハイパスとレベル補正で写真を修正する
photoshopといえばレタッチ。 photoshopを使う仕事でも色々な仕様用途がありますが、中でも多いのが写真の修正作業。 レタッチテクニックにも人によって様々な手法があり、お手軽なものから、photoshopの各機能について熟知して ...

WEB制作, wordpress

SNS Count CacheでSNS共有数を高速表示+オリジナルSNSボタンでwordpressを高速化

WEBサイトやブログには今や必須とも言えるほど大きな影響を与えるSNS。 SNS共有ボタンが設置されていないサイトはほぼ無いくらいに普及していますね。 サイト運営者やブログ執筆者には重要なSNS共有ボタンですが、サイトの表示速度の低下に繋が ...

photoshop

photoshopで瞳の色を変える方法
photoshopで瞳の色を変える方法 何気に需要がある瞳の色を変えるテクニック 方法としては前回のphotoshopで髪の色を変える簡単な方法とほぼ同じ手法ですが、瞳の場合は輪郭がくっきりしているので選択範囲の作成が楽です。 STEP1- ...

photoshop

photoshopで髪の色変更
photoshopを使い髪の色を簡単に自由な色に変更する方法です。 この方法では境界線の調整を使用するので、CS5以降対応となります。 STEP1-人物素材の用意~切抜き photoshopで髪の色変更 今回使用する写真素材はこちら。 PA ...

css, WEB制作

css3のtransformを使ってクリスタルチックなメニューを作ってみました。 一番綺麗に表示できるのはwebkit系のブラウザで、firefoxではクリスタルっぽさがなくなってしまいました。 残念ながらIEは非対応です。 2014/10 ...