個人・商用で無料で利用できる、日本語のフリーフォント219種類を紹介します。前回は164種類だったので、大幅に増えています！ 記事公開後も増えています（201→207→211→219）。 年賀状の宛名にも使える縦書き対応のフォント、かわいい手書きフォント、読みやすいゴシックなどが揃っています。 毎年まとめていますが、初紹介のものから既存のものまで改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。 ライセンスはサイトだけでなく、同人誌や印刷物などでの利用も明記。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ フォント紹介の前に各フォント制作者からのお願いごと。 フォントを利用の際には、利用条件やライセンスを必ず確認して守ってください。 Kazesawa フォント 個人・商用サイトで無料利用可。同人誌や各種

これまでに数多くの一部上場企業様のWebサイトのリニューアル・サイト制作にコアメンバーとして参加し、その中で表記ルールもかなりの数を策定してきました。策定時のベースに使用する「ひらく漢字」「ひらかない漢字」の一部を紹介します。 ※以前、公開した記事を再編集したものです。 表記ルール: ひらくことが多い漢字 表記ルール: ひらくことを検討する漢字 表記ルールの策定にあたり 表記ルール: ひらくことが多い漢字 ひら（がなで書）くことが多い漢字。 ※「正・誤」は使用する際の基準であり、日本語としての「正・誤」ではありません。 読み 正 誤

WordPressで作成するWebサイトのトップページを固定ページにする場合は、作成した固定ページのタイトルを「トップページ」とすることも少なくありません。 「トップページ」という固定ページを作成する このサイトのトップページを表示すると、固定ページのタイトルが「トップページ」と表示されるので、あまり見た目が良くないかもしれません。 トップページに「トップページ」と表示される この部分をカスタマイズしたい場合、固定ページのコンテンツテンプレートを編集します。Twenty Twelveでは、content-page.phpです。 固定ページのタイトルは次の部分で出力されています。 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <h1 class="entr

画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。

いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。 最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。 はじめに 最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,

'直接シートをいじるのでコピーをしてから試してみてください。 Sub Macro1() COUNTER = 0 For INP = 1 To Cells(Rows.Count, 1).End(xlUp).Row Step 5 COUNTER = COUNTER + 1 Range("A" & INP & ":A" & INP + 4).Copy Range("B" & COUNTER).PasteSpecial Paste:=xlPasteValues, Transpose:=True Application.CutCopyMode = False Next INP Range("A1").EntireColumn.Delete End Sub

Photoshopで、Flickrにある画像をライセンスごとに検索でき、1クリックで画像を簡単に利用できる無料の機能拡張を紹介します。 Photoshop CC 2014、Win/Macの両方に対応しています。 Pictura Picturaは、CSS HatやPNG HatやAvocodeなどの便利ツールをリリースしているMadeBySourceの新しい機能拡張で、無料で利用できます。 Photoshopにいれるとこんな感じに。 メニューバーの「ウィンドウ」内「エクステンション」から起動します。

郵便番号から住所を自動補完してくれるライブラリのご紹介。他にもいくつかありますけど使いやすかったので備忘録として。 よくあるやつ。メンテも不要との事なので助かります。 <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script> <script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>ライブラリはgooglecode.comにホストされているものを直接読み込みます。 $('#postcode1').jpostal({ postcode : [ '#postcode1', '#postcode2' ], address : { '#ad

img要素ではなく背景画像（background-image）を切り替えるjQueryプラグインです。 2013年7月29日にバージョン0.4.0をリリースしました。一から書きなおして、切り替え方法など色々改善しているので、良ければ使ってみてください。 ダウンロード jquery.bgswitcher.js 開発リポジトリはrewish/jquery-bgswitcher · GitHub 依存ライブラリ jQuery 1.7.x以上が必要です。 ライセンス MIT License 主な機能 エフェクト付きの背景切り替え 切り替えの制御（開始/停止/リセット） ファイル名の連番自動読み込み 画像のプリロード デモ Demo - jQuery.BgSwitcher 使用方法 <div class="box"> <p>Lorem ipsum dolor sit amet.</p> </div>

PhotoshopとGIMPを使って写真をイラスト調に加工します。（GIMP編はこちら） フリー素材の写真を使ってイラスト調に加工してみましょう。 慣れれば10分もかかりません。 自作イラストとの合成の他、コラージュ調の表紙のパーツとしても活用できます。 今回はタルトケーキの写真をサンプルにしましたが、風景や動物の写真にも応用できます。

iHoverはCSS3によるユニークなアニメーションホバーエフェクトをまとめて、パックにして配布するWebサイト。サークルタイプで20種類、スクエアタイプで15種類のエフェクトとソースが紹介されています。CSS3なので使いどころは限定的になりそうですが、うまく使えば訴求力の向上に繋がるかもしれませんね。 iHover