Illustratorでふっくらした描き文字をつくる | 鈴木メモ
パンのようにふっくらした線で作る漫画風の描き文字。 ベースは１本のパスなので、曲げたり伸ばしたりの調整が楽です。 ふんわり、ゆるい感じのものに。 9/26 もくもくした文字にアレンジする方法も追記しました。 ふっくらさせる仕組み 今回のふくらみの仕組み↓。パスは一本でOK。 イメージ的には皮（先端を丸くした直線）の中にあん（ブラシ）を入れてあんパンにした感じ。 ブラシとグループアピアランスを使います。 ポイントは（たとえ1個のオブジェクトでも）グループ化を挟むことで、後で付け足した線がブラシを取り囲むようにかかること。これで自然な感じにふっくらします。 ブラシを使うメリットは ・パスの長さがまちまちだったりパスを自由にカーブさせたりさせても大丈夫。 ・中身のブラシのふっくら加減・外の取り囲み分の線幅、どちらも数値で後から調整できます。 ふっくらした描き文字を作る ●ペンツールで文字を書きま
おしゃれ！明朝体フリーフォントのおすすめ16選【商用利用可】
明朝体フォントは手書きの雰囲気を残した日本語の情緒を感じさせてくれるフォントで、和文によく合います。また種類も豊富で、非常に個性が豊かなのも魅力です。 そこで本記事では、明朝体フリーフォントから、商用利用可能なものを16個をご紹介します。気に入ったフォントがあればデザインに取り入れてみてはいかがでしょうか。 ※フォントを利用する際は、各サイトの利用規約をご確認ください。 目次 明朝体フォントの魅力 はれのそら明朝 Oradano明朝GSRRフォント さわらび明朝 はんなり明朝 こころ明朝体 やさしさアンチック 刻明朝フォント 刻丸明朝かな ほのか明朝 あおぞら明朝フォント うつくし明朝体 ふぉんとうは怖い明朝体 戸越明朝 XANO明朝 梅明朝 イマジン・ヨコハマフォント 明朝体フォントの魅力 明朝体は横線に対して縦線が太いのが特徴。ウエイトが重くなっても、横線の太さはそれほど変わりません。
【CSSテク】ブロック要素の比率を維持しながら可変させる方法 | 株式会社リースエンタープライズ
皆さんこんにちは、リースブログ編集部です。 本日は、レスポンシブ対応でかなり使えるCSSテクニックをご紹介します。 高さ不明のブロック要素の比率を維持させる方法 レスポンシブで組んでいると、どうしてもブロック要素をそのままの比率を維持しながら可変させたいという要望が生まれます。 画像の可変は、width=”100%”を指定すれば画像の比率を維持しながら勝手にウィンドウサイズに合わせてサイズが変更されるので楽ですが、ブロック要素では高さ方向でつまづきがちですね。 【NG例】通常のレスポンシブ対応方法例 通常であれば、heightを指定しない限り、親ブロック要素は子ブロック要素のコンテンツによって高さが依存します。 具体的な例がこちら。 ブラウザのウィンドウサイズをグイングイン動かしてみてください。 サンプルへ 一応コードはこちらから確認頂けます。 <div class="adjust-box
freshreaderユーザに朗報。coreserverでioncube_loaderを利用する方法。
チョー快適なＲＳＳリーダ、Freshreaderですが、サーバ移転したところ、動作しなくなっちゃいました。 まあ、coreserverではphpがセーフモードで稼動してるんで、ioncubeでエンコードかましてると、うまく動作しないんですわーとのこと。 Freshreaderでのioncube利用状況の解説http://manual.freshreader.com/archives/2006/01/ioncube_php_enc.html で、CoreServerでは回避手段として.htaccessやphp.iniの設置でcgiとして動作させるちゅうのがあるんすが、 参考：http://www.coreserver.jp/help/index.php/phpcgi/ なんやらどうやらうまく動きませんでした。 と、いろいろためすとこのセッティングでいけましたわ。 php.iniに zend_
a-blog cmsをXAMPP1.7.7にインストールしてみる
この前ニュークリアスをXAMPPにインストールしました 今回は… 名古屋市のWeb制作会社applepleさんがリリースしているCMS 「a-blog cms(エーブログ・シーエムエス)」をXAMPPで使ってみようと思います パッケージのダウンロード XAMPPへのインストール 管理画面へログイン まで作業してみたいと思います 初心者向けのオンラインセミナーもやっていたり 勉強会も開催されていたりと サポートも充実しているようなので困ったときでも頼りになりそうな予感です 「a-blog cms」最新パッケージのダウンロード a-blog cms公式サイトから 最新版のパッケージをダウンロードします(2012年4月11日現在 1.5.0が最新バージョンです) パッケージ内のファイルを確認 「新規インストールマニュアル.pdf」を見てみると インストール手順が詳しく書いてあります ご親切にあり
X SERVER X10 に a-blog cms をインストールしてみた | kazumich.log
エックスサーバーでa-blog cms をインストールする時のPHPのバージョン | ブロックスＣＭＳ開発者が、movabletypeやWordPress、FacebookやTwitterなどのソーシャルメディアについて語るブログ で 水野さん（ healing_s ）がインストールに悩んでいたので、10日間のお試し利用を登録して、a-blog cms のインストールを試してみる事にしました。 1. データベースの設定を行う X SERVER パネルの MySQL5設定 からデータベースの作成を行います。 1-1. MySQLの追加 まずはデータベースを作成します。文字コードは UTF-8 にしましょう。 1-2. MySQLユーザーの追加 ユーザーの名前とパスワードを設定します。ホスト名は気にしないでも大丈夫です。 1-3. MySQL一覧 一覧ページから所有権の設定を行います。最初はア
サーバーを構築してa-blog cmsをインストールした ③
上から順に確認していきましょう。ターミナルにphp -vを打ち込みEnterを押します。 # php -v PHP 5.1.6 (cli) (built: Dec 10 2013 22:08:48) Copyright (c) 1997-2006 The PHP Group Zend Engine v2.1.0, Copyright (c) 1998-2006 Zend Technologies 5.1.6ですので大丈夫です。次はMySQLです。 # mysql --version mysql Ver 14.12 Distrib 5.0.95, for redhat-linux-gnu (x86_64) using readline 5.1 5.0.95ですのでMySQLもOKです。Webサーバーは、 # httpd -v Server version: Apache/2.2.3 Serv
[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋
次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。 まずはアニメーションが楽しいデモから。 ※上から10個くらいはアニメーションgifです。
![[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68594e0182d8d63cfb96eda05e4f18be75583c9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091401-04.gif)
デザインのガイドラインや指示書の作成が驚くほど捗るPhotoshopの機能拡張 -Ink
PSDのレイヤーに配置した要素のサイズやエフェクトやフォントなどの情報を1クリックでドキュメント化するPhotoshopのプラグインを紹介します。 機能拡張は無料で利用でき、Photoshop CC/CS6に対応しています。 サイズやフォントの情報など、1クリックで作成してくれます。 Inkの特長 Inkのインストール Inkの使い方 Inkの特長 ウェブページなどのレイアウトやさまざまな要素のサイズ、形、カラー、エフェクト、フォントの種類・サイズなど、指定したレイヤー上にある情報を1クリックでPSD上にドキュメント化します。 Ink スタイルガイドなどでルールをしっかり決めておくと、デザインのアウトプットにぶれがなくなり、最終のプロダクトも想定通りに仕上がります。 Inkのインストール まずは、インストーラーをサイトからダウンロードします。 Ink CS 6にインストールしたので、その手
[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック
天地左右の中央に配置したい要素のサイズが幅も高さもピクセルで指定されていれば、marginやpaddingで簡単に配置できますが、サイズ指定にパーセントを使用した要素だと表示サイズに依存されてサイズが分かりません。 そんなパーセントで指定されたピクセルでの正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニックを紹介します。 デモページ：幅780pxで表示 HTML HTMLはシンプルで、中央に配置するdiv要素だけです。 <body> <div>Percentage sized and still centered.</div> </body> CSS ぱっと思いつく方法としてはパーセントをネガティブマージンで使えばいいのでは、となるところですが、ネガティブマージンを使用すると左右の中央はできますが、天地の中央がうまくいきません。 ここではネガティブマージンではなく、
[JS]実装も超シンプル、高さや幅が異なるエレメントを揃えるシンプルなスクリプト -equalize.js
エレメントの高さ（height）、幅（width）だけでなく、outerHeight, innerHeight, outerWidth, innerWidthのサイズを揃えるjQueryのプラグインを紹介します。 デモ：幅 equalize.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="js/equalize.js" type="text/javascript"></script> Step 2: HTML HTMLは適用する要素を内包するラッパーを用意します。 下記はデモの高さを揃える方のHTMLです。 <div id="heigh
CSS3 IE対策まとめ
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
PhotoshopでのWeb制作効率を向上させる「JSX」とは
ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。 しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。 しかし、最
ツイートいいねブックマーク+1チェックボタン、各種デザインカンプ用画像をまとめて置いておく
サイトのデザイン作成のとき、近頃は必須の配置物として、ソーシャル系のボタンがリクエストされます。 コーディングの時にボタンを入れ込むわけですが、デザインカンプにももちろん必要。でもほとんどがカウントとともにJavascriptで用意されているので、画像ベースの素材がありません。その都度、縦型、横型、数字入り、数字なしなどキャプチャしてバックグラウンドと四隅を1ピクセルづつ切って…とやってるわけですが、面倒なので、誠に勝手ながら、ここに置いておくことにしました。もちろん、実物大です。 つまり、ドラッグ、または右クリックでコピーしてFireworksに貼り付ける用のボタンサンプルです。だれが必要？私が必要♪ Twitter ツイートボタン サンプル カウント数ありの、縦、横、カウントなしボタン、そして英語ver.。 サイズ(px)：左より、「80*62」「横可変*縦20」「80*20」「横可変
Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
タグ一覧 タイトルロゴ(159) プライマリナビゲーション(72) グローバルナビゲーション(246) メインビジュアル(95) 見出し(326) 文字装飾(10) アクセント(29) サイドメニュー(142) ログインフォーム(68) タブ(55) テーブル・表(23) 地図(12) 特集バナー・内部リンク(525) Twitterアイコン・バナー(64) RSSアイコン・バナー(41) フォーム(9) アイコン(195) ＜前へ 次へ＞(12) 検索窓(149) パンくずリスト(12) このページのトップへ戻る(52) フォントサイズ変更ボタン(34) 問合せ・送信・購入ボタン(72) 電話番号(41) フッター・コピーライト(99) ニュース・ポータル・検索(207) ファッション(200) 音楽・ゲーム・コンテンツ配信(58) ネット関連サービス(86) オンラインショップ(308
WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）
とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね！今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー（カスタム分類）を使って作っています。 ページを表示する為に使っているテンプレート
WordPressテーマ制作チュートリアル
この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。 なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。 おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。 このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。 実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。 WordPressのインストール まだレンタルサーバを借りていない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
coreserverでionCube_loaderを動かすには - 福井のホームページ制作・携帯サイト制作・SNS/ビジネスブログ構築 からくり屋のブログ
CSS3で影をつける際に役立つ、ドロップシャドウバリエーションいろいろ
Webサイトの横幅まとめ - ULTRAZONE