ウェブデザインに関する記事一覧

ホーム
ウェブデザイン

ウェブデザイン

2020.03.1

写真を「モノクロ＋一部カラー」にして画像にメッセージ性をもたせる方法

モノクロ写真の一部だけに色付けされていると、どことなくメッセージ性を強く感じると思います。例えば、次の2枚の写真はもともと同じ写真ですが、僕の場合、左の写真…
2019.02.16

inkscapeで「フチ文字」を作る方法２つ＋ちょっとした応用

以前、問い合わせがあったinkscapeで「フチ文字」を作る方法を紹介します。文字の周りを縁取るので「フチ文字」と言われています。「囲み文字」とは意味が違う…
2017.10.6

Inkscapeのシェイプとパス編集でいろんな「吹き出し」を作ってみた

多角形や星型をノードツールで変形させることでいろいろな吹き出しを作ることができます。ちょっとしたデザインのアクセントとしても使える吹き出しを自作してみましょ…
2017.10.3

Inkscapeで配色用のカラーパレットを簡単に作る方法

配色用のカラーパレットをInkscapeの内部機能で作る方法を紹介します。基本的にはカラーホイールの考え方で、明度や彩度をコントロールする方法なのですが、知…
2017.05.7

inkscapeで立体的な文字の作り方（テキストと押し出しの組み合わせ技）

飛び出てくるようなテキストのロゴを作る方法をまとめてみました。今回紹介するのは単にベベルで浮き上がらせるだけではなく、すどーん！とインパクトのあるテキストロ…
2017.04.16

Inkscapeを使ったわかりやすいフローチャートの作り方

プログラミングの分野でよく使われているフローチャートですが、最近は業務フローなどの手順書やマニュアル作成にも利用されてきていますね。というわけで、今回は見や…
2017.02.28

WordPressでも簡単に使えるってほんと？会話風吹き出しのCSSテンプレート

会話風吹き出しのテンプレートとして使えるCSSを作ってみました。会話風吹き出しのデザインは一見難しそうに見えるのですが、要点さえ抑えてしまえば誰でも簡単に作…
2017.01.8

簡単にテキストレイアウトができるinkscapeの「テキストの流し込み」機能の使い方

写真付きのパンフレットでよくあるテキストレイアウトには被写体を邪魔しないようなテキストの配置がされていますね。テキスト部分の輪郭がカーブしてることが特徴的で…
2016.12.31

自作？外注？その前にコレ！ブログのロゴデザインをするなら「Logaster」を使ってみて

ブログやサイトのロゴを作るときって時間的・金銭的に結構なコストがかかりますよね。見栄えが良いロゴを作るにはある程度のデザインスキルを必要としますし、プロに依…
2016.12.31

混乱してない？CSSレイアウト【position: absolute】を最短で理解するための2つのポ…

positionを使うとfloatやmarginを駆使してレイアウトを設定するより簡単に設定できてしまうのですが、1つ難しいところがありますね。そう。…
2016.12.3

プラグイン不要！2ステップで完了！「FontAwesome」をWordPressに導入してアイコンを…

ブログのカスタマイズをするとき、必要なアイコンをいちいち画像化して、フォルダにアップロードするのは手間ですね。そんなときは「Font Awesome」という…
2016.11.11

AdSenseのモバイル向けページ単位の広告をWordPressに設置する方法

AdSenseにモバイル用のページ単位の広告という機能が追加されてしばらく経ちましたが、導入しているブログをあまり見かけないですね。↓こういうやつです。…
2016.11.11

子テーマを使ってWordPressを自由にカスタマイズしちゃいましょう

WordPressをカスタマイズするときに使うと便利なのが「子テーマ」です。子テーマとはベースとなるテーマのCSSやPHPファイルを引き継いで、部分的にカス…
2016.10.30

inkscapeで取り込んだJPGやPNG画像をトリミングをする方法

inkscapeでフライヤーや店舗のメニューを作りたいと思ったらトリミング機能は欠かせない機能ですね。ただ四角形に切り取ったりすることもトリミングですが、メ…
2016.10.26

inkscapeの基本機能だけで矢印を描く方法

今回はよく検索されている、inkscapeで矢印を作るための基本チュートリアルを紹介します。GIMPのようにエクステンションを使わなくても基本機能だけで矢印…