サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
sole-color-blog.com
デザインをしていると「このフォントあと少しだけ太かったら・・・」「どのフォントもしっくりこない」なんてことがありますよね。それならばいっそオリジナルフォントを作ってみるのもいいかもしれません。 「でもフォント制作って職人の世界だし、ファイル形式なども難しそうだな・・・」と思うかもしれませんが、最近では無料、有料を問わずさまざまなフォント制作ソフトが発表されています。あなたの制作スタイルや作りたいフォントにぴったりなソフトを見つけてみましょう! TTEdit 日本製のフォント制作ソフト。 和文フォントおよび欧文フォントのTrueTypeフォントを制作することができ、和文フォントはJIS補助漢字を含む14,963文字の制作が可能です。Windows版とMac版があります。Adobe Illustrator からデータを取り込んで作成することができます。 対応文字形式:日本語(JIS補助漢字を含
WordPressでブログ投稿を一覧ページに表示する際、○月○日から○月○日までといった具合に、日付の範囲指定して表示させたいことなどありませんか? 例えば、○月○日から○月○日までのイベントに関する記事を表示させたいなどが考えられると思います。 そのような場合、「date_query」を上手に使うと、日付の範囲指定をして記事を表示することができるので、とても便利です。 今回は、「date_query」の使い方やパラメーターの種類について、幾通りかの日付の範囲指定を例に、少しご紹介をさせていただきたいと思います。 WP_Queryクラスで「date_query」を利用する 投稿日を指定する場合(例 2015/7/21 ) year、month、dayに取得したい日付をそれぞれセットします。 $args = array( 'date_query' => array( array( 'year
HTMLの知識がなくてもサイト更新などが簡単にできるため、今や制作規模を問わず引っ張りだこなWordpress。Wordpressでは「テーマ」と呼ばれるものを変更するだけでデザインや機能を差し替えることができるようになっています。無料のWordpressテーマでも十分使えるものが出回っていますが、少しお金を出すとデザインクオリティが格段によく、カスタマイズ性も高いテーマが数多くあります。今回はそんな有料Wordpressをデザイナー目線で幾つかのジャンルに分けてご紹介したいと思います。それでは早速いってみましょう! オーソドックス まずはコーポレートサイトからECサイトまで幅広く使えそうなオーソドックスなレイアウト感のテンプレートをご紹介します。企業向けに特化したテーマが多く、サービス紹介やFAQなどのフォーマットがあるテーマもあります。 ANGLE DEMO DOWNLOAD TOWE
ウェブサイトにほぼ必ずある「ページトップ」「ページの先頭へ戻る」ボタン。最近ではデザイン要素のひとつとして個性的なデザインのものをいろいろ見かけるようになりました。ちょっとしたキャンペーンページやイラストをふんだんに使っているようなサイトなら遊び心のあるユニークなページトップボタンもありですが、コーポレートサイトのような堅めのデザインをする場合は凝り過ぎると浮いてしまう場合があるのでシンプルなものを使用することが多いのでないでしょうか。 今回はそんなコーポレートサイトなど、ちょっと堅めのサイトでも使える堅すぎず、ラフすぎない、絶妙なテイストの「先頭へ戻る」「ページトップ」ボタンのアイデアを集めてみました。 それでは早速いってみましょう。 画面端にFIXしている系 VtoHeim 少し堅い印象の住宅系のサイト。ウィンドウ端にFIXEDでくっついてくるタイプのページトップボタン。オーソドックス
WordPressでテーマをカスタマイズしていると、WP_Queryを用いて少し複雑な条件で投稿記事のリクエストをしたいことがあります。 例えば、物件の検索サイトなどでよくみられる「最寄駅」「間取り」「価格」といった複数の条件が一致した記事を絞り込む機能なども、WP_Queryに条件となるパラメーターを送ることで、わざわざ複雑なプログラムを自前で書かなくても、WP_Queryが一括して処理をしてくれるのでとても便利です。 呼び出したい記事の抽出条件がよほどイレギュラーでなければ、WP_Queryで大抵の条件にマッチした記事を呼び出せるのではないでしょうか? WP_Queryは、多くの抽出条件をカバーしているだけあってパラメーターの組み合わせが豊富です。 新しい仲間とチームでWordPressのカスタマイズをすることが多くなってきたので、今回は、このWP_Queryのパラメーターをスニペット
こんにちは。Webデザイナーの斧山です。 突然ですが、Photoshopでスライスをする際の画像フォーマットは何を選択していますか?もしも、気にしたことがない方や全部JPGでスライスしている方がいるなら、ちょっと待ってください。Webサイトにはロゴやアイコン、写真、テキスト文字など、様々な画像が使われています。これらの要素を画像フォーマットの特徴を把握せず適当にスライスすると、画像が荒くなったり、ファイルサイズが肥大したりというトラブルが起きてしまいます。細かいことですが、このあたりをしっかり把握して適切なスライスを行うのがプロ!スライスの仕方ひとつでサイト全体のクオリティが変わってきます。 今回はJPG/GIF/PNGなど、画像フォーマットごとにフォーマットの特徴や向いている画像の種類などをご案内します。それでは早速いってみましょう! ざっくりと章立て・・・ JPG(JPEG) GIF
「英語がかっこいい」と思うのは僕が日本人だからなんでしょうか?実際日本語だけでデザインしていて「なんかしっくりこない…」という時などに英語を入れるとなんとなく垢抜けてスマートなデザインになることがあります。英語の醸し出す、あのなんとも言えないかっこいい雰囲気は日本語から出せないものなのか…今回は長年の大きな疑問である「なんで英語はかっこよく見えるのか?」について少し考えてみました。 ・形の違い 「ひらがな」「カタカナ」「漢字」それぞれフォルムや字幅、画数などそれぞれが持つイメージが全然違います。 例えば「ひらがな」は曲線を主体とした丸っこい形なのに対して、漢字は画数が多くなるほど四角に近く角ばった印象になります。そのため文字詰めを行わずにただ並べるとひらがなは余白が多く、漢字は詰まって見えてしまいます。 また、ひとつの言葉に対して「ひらがな」「カタカナ」「漢字」それぞれで表現することができ
見出しはデザインの印象を大きく左右する要素のひとつ。デザインをしている人ならこの箇所で行き詰まったのは一度や二度ではないでしょう。試行錯誤してるんだけどなんかしっくりこない。。と悩んでいる人も多いはず。今回はそんな行き詰まりがちな見出しのデザインを作るためのアイデアや考え方をご紹介したいと思います。 見出しデザインの基本的な考え方 見出しの役割は「本文を読んでもらうためのきっかけ」です。 Webサイトや紙面を見ようとしたとき、見出しがなく本文だけだったらと想像してみましょう。どこに何が書いているのかが一見してわからず、思わず本を閉じてしまう(または別のWebサイトを見に行く)のではないでしょうか。見出しには「目に飛び込んでくる情報を整理して効果的に伝える」という役割があります。 ここに「見出し」と「本文」という関係が見えてきます。見出しで見る人の興味を惹き、本文を読ませる。サッカーのパス回
Web基礎知識2023.06.13 ホームページの作り方 ─中小企業・個人事業主・これから起業される方へ 私は、2004年にWebデザイナーとして独立し、2007年に株式会社それからデザインを設立、これまで20年近く、中小企業〜小規模事業(個人事業主も含む)のホームページ制作に関わる仕事を続けてきました。 そのあいだに「ホー… イベントレポート2019.03.27 ことばでブランディングする ─言葉の力で企業の意思を浸透させるコピーライターの思考 ≪後編≫ ビジネスとデザインの関わりを学ぶトークイベント「“besign” talk meeting(ビザイントークミーティング)」。2018年12月11日に開催された第6回のゲストは、広瀬さとし事務所株式会社 代表 広瀬さとし氏…
ページが増えてくると、サイト内で共通している部分の変更があったときの書き換えが大変ですよね。 サイトを、CMSのように共通している部分を別々に管理出来たら便利だと思いませんか? 例えば、グローバルナビゲーションを共通ファイルとして読み込むと、 その共通ファイルを変更すれば、すべてのページに変更を反映させることができたりします。 そこで、PHPを使ってグローバルナビゲーションを共通ファイルにする方法をご紹介したいと思います。 今回のご説明に使わせていただく、基本的なサンプルコード。 <div id="header">ヘッダー部分になります <!--▼共通化するグローバルナビゲーション部分--> <div id="menu"> <ul> <li><a href="index.php">TOP</a></li> <li><a href="about.php">ABOUT</a></li> <li
例えば、WordPressをお使いで、お知らせ一覧ページでは10件表示させたいけど、商品一覧ページでは1ページに多くの情報を表示させたいので30件表示させたい・・・など思ったことはありませんか? コンテンツごとに表示件数を設定する方法は幾つかありますが、その中でも「これはいいな!」と思った方法を今回ご紹介させていただきたいと思います。 WordPressで、すべてのアーカイブページ共通の最大件数を設定する場合は、管理画面<設定>→<表示設定>の「1ページに表示する最大投稿数」で変更を行うことができます。 しかし、管理画面で設定をした1ページ内の最大表示件数は、すべてのアーカイブページ共通の最大表示件数の設定になるので、コンテンツによって表示される最大件数を異なる件数に設定する場合は少し工夫が必要になってきます。 よく使われる方法としては、テーマファイルのループ前に以下のような「query_
CSSのフォントの種類を指定する際に使用する「Font−family」の正しい記述方法は、デバイスに標準搭載されているフォントやWebフォントなどの技術の変化などで日々変わっています。 今回は最新のトレンドも踏まえた上で基本的なFont−familyの指定方法を再定義してみたいと思います。
投稿記事に貼り付けられえた画像をクリックすると、ふわっと画像がポップアップ表示するjQuery LightBox。 WEBを見ている人であれば、名前は知らなくても1度はみたことのある程有名なJSなのではないでしょうか? 画像をクリックすると、上図のようにページがグレーアウトして画像がポップアップ表示されるあれです! 投稿記事内の画像を手軽にポップアップ表示できるプラグインを探していたところ、 Lightbox Plus ColorBox というプラグインがとても使いやすかったので、動作に必要な最低限の設定を踏まえてご紹介したいと思います。 プラグインのインストールと有効化 プラグインの検索画面より、「Lightbox Plus ColorBox」を検索してインストールと有効化を行います。 ↓プラグインのURL https://wordpress.org/plugins/lightbox-p
XAMPP・MAMPをインストールして、PHPを動かす環境をつくろう [Mac OS X のMAMP 設定] 前回は、 Mac OS X に MAMP (マンプ)をインストールしました。 MAMPインストール直後の初期設定は、http://localhost:8888/ にアクセスをすることで ドキュメントルート を参照できますが、 このURLの :8888 という部分(接続ポート)が若干わずらわしいので、http://localhost/ でドキュメントルートを参照できるように、MAMPの設定を変更します。 MAMPの設定を確認する MAMPのコントロールパネルを開いて、WEBサーバー(Apache)を起動しておきます。 MAMPのコントロールパネルより、 「環境設定」 をクリックします。 メニューから、 「ポート」 を選択します。 「Apacheのポート」に注目をすると、初期設定での接
WordPressにはアイキャッチ画像という投稿記事の印象付けをサムネイル画像で表示させる機能があります。 この機能を使うと、簡単に投稿記事へサムネイル画像を出力することができますが、テンプレートのコーディングを進めていて、よくアイキャッチ画像のURLだけを取得したい時があります。 例えば、WordPressでアイキャッチ画像を簡単に表示させる場合には、ループ内で the_post_thumbnail() を使いますが、この関数を使うとイメージタグを上図のように出力してしまうので、HTML5のカスタムデータ属性「data-*」や、任意のIDを持たせたい時など、思うようにカスタマイズできなくて困る時があります。 そこで今回は、アイキャッチ画像のURLだけを取得して、イメージタグに属性を追加する方法をご紹介したいと思います。 ポイントは wp_get_attachment_image_src(
WordPressでサイト構築をする場合、カスタムメニュー機能を使ってグローバルナビゲーションを作られる方が多いのではないでしょうか? カスタムメニューを使うと、サイト構成の変更などがあった場合でも、わざわざファイルを開いてタグの書き直しをしなくても管理画面上から動的に変更ができるのでとっても便利ですよね。 動的に書き出されたHTMLは、下図のようなリストタグで構成されますが、このリストタグに管理画面から素早く任意のclass名を追加する方法をご紹介したいと思います。 CSSスプライトなどを使って、テキストリンクを画像化する場合など、リストごとに異なるスタイルを素早く適用したい時に役立つのではないかと思います。 カスタムメニュー作成ページで、表示するメニューの項目を増やす まずは、管理画面のカスタムメニュー作成ページより、オプションメニューを表示させてみましょう。 ■管理画面 => 外観
地図などを表示するページを作る際に、GoogleMapを読み込むといった事はよくやると思います。 サイトの雰囲気と違っていても、「仕方がない・・・」と妥協した、といった経験も少なからずあるはず。 実はGoogleMapはスタイル(装飾)を定義する事ができるのでデモとして、 今回はデフォルトの色合いを変更して、灰色をベースにしたシックな感じのマップを作ってみました。 まずは、完成形のデモをご覧ください。 色合いを変更した完成形デモ では、今回用意したデモの内容で説明をいたします。 まずは全体のJSのソースが下記となります。 それでは、順を追ってみてみましょう。 <script> var map; function initialize() { var latlng = new google.maps.LatLng(35.65858,139.745433); //① var mapOption
こんにちは、Webデザイナーの斧山です!Photoshopで文字組みを行う際には「トラッキング」や「行送り」など様々な設定を行います。しかし、いくらPSD上で完璧に仕上げていても、いざコーディングをするときに正しくCSSが組めていないと、せっかくの“こだわり”が無駄になってしまいます。 今回は意外と曖昧になりがちなPhotoshopの文字設定とCSSプロパティの相互関係をまとめてみました。それでは早速いってみましょう! Photoshop文字設定とCSSプロパティの関係表 Photoshopの文字設定とCSSプロパティの関係をまとめてみました。 文字設定 PhotoshopCSS
レスポンシブの一つの落とし穴として、「画像の問題」があります。 今回はその「画像の問題」とその解決方法をご紹介致します。 画像の問題とは? 「画像の問題」といきなり言い出した分けですが、さて画像の問題というと、ここは実際の画面をみると分かりやすいと思います。 demo:https://sole-color-blog.com/demos/responsive/ ※スマートフォンでご覧頂くか、モダンブラウザの場合は画面を小さくしてご覧ください。 デモを見ると画面から画像が飛び抜けてしまっているのがお分かり頂けると思います。 なぜこれが起こるというと、簡潔に説明すると「画像自体のサイズ(縦/横)が優先しそのサイズで表示する」為に起こるのですが、さすがにこれは誰がみてもありえません。 解決する方法として、大きさに合わせた画像を作るという方法などがありますが、その場合スマホの数だけ画像を作る必要がで
WordPressでは、投稿記事の前後に「次の投稿」「前の投稿」といったページリンクを付ける機能が用意されていますが、この前後のリンクを、同じカテゴリ内の記事のみ絞り込んでリンクさせたいことってありませんか? 通常ですと、せっかく投稿記事をコンテンツごとにカテゴリ振り分けをしても、前後のリンクはカテゴリにまたがった時系列順でリンクされてしまうので、「次の記事へ」をクリックすると全く別のカテゴリの記事へ飛んでしまいます。 せっかく興味関心のある記事を閲覧してくれているのですから、同じカテゴリ内の記事へリンクを付けるほうが親切なのではないかと思ったりします。 そこで、今回は、投稿記事の前後のリンクを同じカテゴリに絞ってリンクする方法をご紹介したいと思います。 WordPressで「次の投稿」「前の投稿」のページリンクを付けるには、通常以下のコードを使います。この関数はWordPressで元から
今回はレスポンシブに対応している画像ギャラリー系のjQueryプラグインをいくつか紹介したいと思います。 Image Lightbox Responsive and Touch‑friendly デモ:公式(英語) まずひとつ目は、画像をモーダルウィンドウで表示するプラグインです。 モーダル関係は、星の数ほどあるのですがこちらのプラグインはレスポンシブやタッチデバイスにも対応しており、またモーダルが開く等のエフェクトは、CSS3を使っており、対応ブラウザでみると、よりリッチにみえる感じが良いと思います。設置もとても簡単なので、画像をモーダルで表示したい時にいかがでしょうか。 ダウンロード:http://osvaldas.info/image-lightbox-responsive-touch-friendly 使い方 CSSの設定が必要です。下記のCSSを追記してください。
WordPressでは記事文章の表示方法を自由にカスタマイズ出来ますが、なかでもトップページに記事の抜粋を並べたり、長い文章を適当な文字数でカットして「続きを読む」を表示させたいとこなど結構あるのではないでしょうか? 最も簡単な方法は、Moreタグ(<!–more–>)を投稿記事の任意の場所に挿入するやり方ですが、毎回記事投稿するたびにMoreタグを挿入するは案外面倒だったりするのではないかと思います。 そこで、Moreタグを挿入しなくても指定した文字数をオーバーした場合には「続きを読む」リンクが自動で挿入される簡単な方法をご紹介したいと思います。 前提条件として、WordPressをインストールすると標準で入っている『WP Multibyte Patch』というプラグインを有効化しておく必要があります。 WordPressをマルチバイト環境(日本語)でお使いの方ならば大抵このプラグインを
XAMPP・MAMPをインストールして、PHPを動かす環境をつくろう [Mac OS X にMAMPをインストールする] Mac OS XにMAMP(マンプ)をインストールして、PHPを動かす環境を作ります。 Mac OS Xには、元々OSに Apache と PHP が入っていて、購入時の設定では機能が OFF になっています。 わざわざ MAMP をインストールしなくてもその機能を ON にすればいいだけ(?)の話ではありますが、動作させる道のりが少し複雑なため、素早く MAMP をインストールしてしまった方が楽ちんです。 MAMP と同じようなソフトに XAMPP がありますが、 両者の違いは クロスプラットフォーム(複数のOS対応) であるかないかの違いとなります。 また XAMPP は、Linux と Windows がメインですので Mac OS X用はベータ版とされていますが
さて今回は、HTML5で追加されたタグ、section/article/header/footerの使い方を改めて復習しようとおもいます。 Web制作の現場でも、HTML5がだいぶ普及してきたことによって、使う機会が多くなっている実感があります。 さて、HTML5とこれまでのXHTMLの違いを簡単に説明すると、『HTML構造がより明確に区別され簡略化された』ということでしょう。 HTML4やXHTMLのタグ要素だけでは対応しにくいことを再定義したものが、HTML5です。 つまり、「HTML5とは、現在のWeb制作者の悩みを解決してくれるもの」といってもよいでしょう! なので、みんなで使いましょう…ってことですね。 さて、HTML5の目玉の一つである。新規タグですが、「これどういう場面で使ったらいいの!!!」とか「sectionとかarticleとか、意味わかんねーよ!」とか、そういう心の叫
今までデザインを優先する場合はテキストを画像化するのが一般的でしたが、iPhone6やiPad、最新のPCなど、高解像度のディスプレイではにじんでしまい残念なことになるので、見出しなどの文字もデバイスフォントを使用しはじめた人も多いのではないでしょうか?しかし「日本語WebFontは有料ばかり・・・」とか「結局Windowsはメイリオでしょ!」とか残念な現実もあります。今回はそんなデバイスフォントを少しでもきれいに見せる小技(主にCSS)をまとめてみました。 それでは早速行ってみましょう! その1 font-familyの指定をする font-familyの指定をしていない場合、OSやブラウザごとに異なったフォントになってしまいます。もちろんどのブラウザでも同じフォントを表示させるにはWebfontの使用が一番ですが、それができない場合は、font-familyの指定を行います。Font-
WordPressで記事を投稿するとき、入れ子になったカテゴリにチェックをして保存をすると、 選択されているカテゴリが一番上に表示され、カテゴリ選択ボックスの階層が崩れて表示されてしまいます。 この現象に違和感を感じてる方もおられるのではないでしょうか? 例えば、下のような入れ子になったカテゴリ構造だとして 中間的な親カテゴリ「海外」にチェックを入れて記事を保存すると・・・ 選択したカテゴリーが一番上に表示されカテゴリ階層が崩れてしまいます・・・ WordPressをCMSとして利用している者としては、やはりカテゴリは隣接するカテゴリが常に同じカテゴリでないと操作に迷ってしまったり、視覚的にメニュー位置でカテゴリ全体の構造を把握したほうが操作しやすいのではないでしょうか? そこで、入れ子になったカテゴリにチェックをして保存をしても、カテゴリ選択ボックスのカテゴリ階層を保つ方法をご紹介したい
アーカイブページなどの記事一覧リストで、一定期間だけ新着記事にNEWアイコンをつけたい!というケースは多いのではないでしょうか? NEWアイコンを付ける方法はJavaScriptやPHPなどいくつかの方法がありますが、PHPを使ってWordPressの記事一覧リストにNEWアイコンを付ける方法をご紹介したいと思います。 WordPressの記事一覧リストでNEWアイコンを付ける場合、以下のコードをアーカイブテンプレートに埋め込むことで一定期間NEWアイコンを表示させることができます。 <?php $days = 7 ; // ← NEWを表示させる期間の日数を入力 $today = date_i18n('U'); $entry = get_the_time('U'); $total = date('U',($today - $entry)) / 86400 ; if( $days > $t
こんにちは。Webデザイナーの斧山です。 今回はWeb配色のお話です。当たり前ですが、配色はサイトの雰囲気を決定づける重要な要素です。ほんのちょっとの色味の違いや露出度でガラッと変わってしまいますので、Webページをデザインするときには、まず最初にカラー設定を行うのが非常に重要です。 このブログでも以前、「最低限覚えておきたいWEB配色の基礎」として色の選び方をご紹介しましたが、ただ闇雲にカラーパレットと向き合っていても、なかなかしっくりくる配色ができない…という人もいるのではないでしょうか? 実は世の中には、組み合わせのいい色というのがあります。今回は、そういう組み合わせのいい色をうまく使っているサイトを集めてみました。カラー設計の参考に、デザインのインスピレーションに、是非ご活用ください。それでは早速行ってみましょう! ■ 青 × 黄 色相環ので補色関係にある青と黄色は相性抜群です。く
WordPressでサイトを作っていて、特定のカテゴリにだけ違うデザインにしたいときってありませんか? 個人ブログだとあまりないかもしれませんが、コーポレートサイトをWordPressで運用する場合、お知らせページや制作実績ページなど、カテゴリ別にデザインを替えたいことがあるのではないでしょうか。 そこで今回は、WordPressでカテゴリごとにデザインを替える方法をご紹介したいと思います。 STEP1 カテゴリースラッグとIDを調べる 管理画面のカテゴリーページより、カテゴリースラッグとIDの確認をします。 カテゴリースラッグの確認方法: 「管理画面」 < 「投稿」 < 「カテゴリー」 カテゴリーIDの確認方法: 各カテゴリーの編集ページを開いた時のURLや、カテゴリー名をマウスオーバーしたときのアドレスにてご確認いただけます。 例)/wp-admin/edit-tags.php?act
次のページ
このページを最初にブックマークしてみませんか?
『それからデザイン スタッフブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く