はてなブックマーク

PhotoshoopでFont Awesomeのアイコンを利用する方法を紹介します。 定番のFont Awesome PSプラグインがPhotoshop CC 2015では使えなくなり、またFont Awesome公式のチートシートからコピペする方法は手間がかかって煩わしいと感じたので、PNGデータを使う方法とSVGを使う方法を探しました。どうぞ参考にしてみてください。 PNG編SVG編それ以外の方法と不採用理由参考サイト １．PNG編 WEBのデザインカンプ作りなどの場合にはこちらがおすすめです。PNGデータなら普通にサムネイル画像を一覧表示して探すことやファイル名検索もでき、Photoshopへの配置もドラッグアンドドロップでよく、とても簡単です。 Font AwesomeのアイコンをPNGファイルでダウンロードできるサイトはいくつかありますが、「一括ですべてのアイコンをダウンロードで

Google FontsやAdobe TypekitのWebフォントを利用すると、IEなどのブラウザはWebフォントのダウンロードが完了するまでは代替フォントでテキストを描画します。 その後Webフォントのダウンロードが完了した際にWebフォントを用いたテキストの再描画を行い表示を切り替えます。 このテキストが切り替わる瞬間に文字幅の変化によるコンテンツの移動やちらつきのような現象が発生します。 特にこのちらつき現象はWebフォント以外の原因で発生する描画のちらつきも含めてFlash Of Unstyled Text (FOUT)と呼ばれているようです。 今回はこのテキストの再描画を防ぐ方法を紹介します。CSSだけで設定できますのでとても簡単です。 テキストの再描画についてデモコード設置方法参考サイト １．テキストの再描画について Google DevelopersのWebフォントの解説に

Dreamweaver CC 2017では構文チェック機能が強化され、Javascriptのコードをリアルタイムでチェックしてくれます。 この機能のおかげで変数や関数名のスペルミスも減り、いままでChromeのコンソールで気づいていたエラーが大分減った気がします(^_^;) この構文チェック機能はオープンソースの「JSHint」と呼ばれる機能なのですが、カスタマイズすることによりエラーの出方を調整することができます。 よく使いそうなカスタマイズ方法を少しだけ紹介します。 「○○ is not defined.」エラーを表示させない「Missing “use strict” statment.」エラーを表示させないES5やES6に対応し「const」や「let」を使う １．「○○ is not defined.」エラーを表示させない このJavascript構文チェック機能では別ファイルで定

2014年のwordpressデフォルトテーマ、twenty-fourteenが公開されています。その子テーマを作成しましたので紹介します。 基本的には一般的な子テーマの作成方法と同じですが、CSSの読み込みはfunctions.phpで行っていますので要注意です。 また、twenty-fourteenはテーマの管理画面で色の変更などに対応しておらず、かなり頑張ってCSSをいじらないと背景黒のままなのですが、「色」や「サイドバーの幅」などをカスタマイズするためのSCSS仕様の子テーマも紹介します。「2．カスタマイズ版 (Sass/SCSS)」を参考にしてください。 今回紹介するファイル群は、GitHubでも公開していますので参考にしてみてください。 ノーマル版 style.css functions.php その他のフォルダ・ファイル カスタマイズ版 (Sass/SCSS) functio

apacheのアクセスログ解析ツールであるAWStatsをインストールし設定します。 さくらのVPSは標準でEPELのリポジトリが効いているので、yum一発でインストールできます。 awstatsのインストール awstatsの初期設定 バーチャルホスト利用時の設定 basic認証の導入 バーチャルホストを使ってアクセス解析結果ページにサブドメインを割り当てる １．awstatsのインストール yumコマンドでawstatsをインストールします。 $ sudo yum install awstats ２．awstatsの初期設定 初期設定を行います。 まずは不要な設定ファイルを削除します。 $ sudo rm -f /etc/awstats/awstats.localhost.localdomain.conf $ sudo rm -f /etc/awstats/awstats.初期ドメイン

サーバー監視ツールのMuminをインストールし設定します。 さくらのVPSは標準でEPELのリポジトリが効いているので、yum一発でインストールできました。 muninのインストール muninの初期設定 バーチャルホストの設定 Apache用pluginの追加 MySQL用pluginの追加 ズーミンググラフの設定 １．muninのインストール yumコマンドでmuninとmunin-nodeをインストールします。 google先生に聞くと、リポジトリの話がでてきますが、さくらのVPSのcentOS6ではデフォルトでEPELのリポジトリが効いているのでyum一発インストールができました。 $ sudo yum install munin munin-node munin-nodeがサーバーを監視し、そのデータをmuninで表示・確認する感じでしょうか。両方インストールする必要があります。

wordpressでサイトを構築中、jQueryを使ったコードを書き込むことがよくあるかと思います。 でも、動かない・・・。 ネットで「このコードをコピペしたら動くよ」っていうのを参考にきちんとやっているはずなのに。 でも、動かない・・・。 そんな時に役立つ「Google Chrome」を利用した原因の特定方法と、一般的な「$の別名定義」エラーに起因するトラブルの解決方法を紹介します。 １．エラー原因の特定 何はともあれコードが実行されない原因の特定を行います。Javascriptのエラーは「Google Chrome」のデベロッパーツール Developer Toolsを利用すると簡単に調べることができます。 以下の手順でエラーをチェックしてみてください。 (1) Developer Toolsを表示する jQueryのコードが実行されないページを表示した状態で、「F12」キーを押します

WordPressのTinyMCE Advanceは必ずインストールするプラグインのひとつですが、「テーブルタグの追加ボタン」と「プルダウン形式のスタイル追加ボタン」がとても便利です。 自分用のブログやサイトだと、単に「ビジュアル」エディターから「HTML」エディターに切り替え、手打ちでクラスを入れてしまえば終わりなのですが、クライアントさんに納品する場合には、このスタイル追加ボタンによく使うCSSのクラスを登録しておくと、HTMLやCSSに精通していなくても事前に用意したデザインを記事の中で利用することができます。 このスタイル追加ボタンにオリジナルのスタイルを追加する方法を紹介します。 content.cssにクラスを追加する function.phpにフィルターを追加する １．content.cssにクラスを追加する もっとも簡単な方法は「wp-includes/js/tinymce

webベースのlinuxシステム管理ツールですが、パッケージのアップデートやバーチャルホストの設定などをwebベースで行えなす。 コマンド打ち込みに慣れている人は特に必要ないのかもしれませんが、駆け出しのWEBデザイナーにとっては取っつきやすくて便利です。ぜひインストールしましょう。 webminのインストール ファイヤーウォール（iptables）の設定 SSL対応 １．webminのインストール yumでは入らないのでwgetで取得してrpmでインストールします。 2012年5月現在の最新版1.580をダウンロードしていますが、もしかしたらバージョンが新しくなっているかもしれないので、webminのサイトで確認してください。 $ wget http://prdownloads.sourceforge.net/webadmin/webmin-1.580-1.noarch.rpm $ su

「さくらのVPS」ではじめてサーバー管理に触れるWEBデザイナーのメモです。 とりあえず、これだけやっておけばwordpressが動く状態にまでセットアップできるのではないかと思います。 手っ取り早くサーバーを立ち上げるときの参考になればと思います。 目次 「VPSコントロールパネル」にログイン rootパスワードの変更 ユーザーの作成 sshの設定 Tera Termのインストール パッケージ（centOS）のアップデート iptables(ファイアーウォール)の設定 root宛てメールの転送 Apache(WEBサーバー)のインストール＆設定 phpのインストール＆設定 MySQL(データベース)のインストール＆設定 phpMyAdminのインストール＆設定 vsftpd(FTPサーバー)のインストール＆設定 webmin(システム管理ツール)のインストール＆設定 Apacheによるバ

2012年5月現在、Wordpressには「twentyeleven」というデフォルトテーマが入っていますが、オリジナルのテーマを作ろうと思ったら、このテーマの子テーマとして作ると便利です。 確かに「twentyeleven」のテーマは複雑すぎて、HTMLやCSS、テンプレートタグなどをある程度理解していないと難しく感じるのですが、function.phpにいろいろ追加しなくても、とりあえず「twentyeleven」が提供してくれる機能をフルサポートしながらデザインを変えられるという大きな利点があります。 子テーマ用のフォルダを作成 最低限必要なのはstyle.css その他のファイル イメージフォルダのパス スクリーンショット １．子テーマ用のフォルダを作成 まずは子テーマ用のフォルダを作成します。フォルダ名は任意の名前でＯＫです。 「wp-content/themes/子テーマのフォ

WEBベースのデータベース接続クライアントツールであるphpMyAdminをインストールします。さくらのVPS（centOS 6.2）ではEPELのレポジトリがはじめから効いているので、普通にyumでインストールすれば結構新しいバージョンが入ります。感動。 yumでインストール phpMyAdmin.confの設定 クッキー認証の導入 １．yumでインストール yumで一発インストールします。 phpMyAdminは単なるwebツールなので、yumを使わなくても、ダウンロードしてwebアクセスできるフォルダに展開するだけでいいのですが、yumを使うとバーチャルホストの設定なども記述してくれるので楽です。 $ sudo yum install phpmyadmin ２．phpMyAdmin.confの設定 ブラウザからアクセスできるように初期設定をします。 $ sudo vi /etc/ht