制作事例 塗鈑瓦屋(とばんがや)様



 

塗鈑瓦と書いて「とばんが」と読む『塗装屋』『鈑金屋』『瓦屋』一緒になった新しい業態の店舗です。
今まで「どこに相談・発注」をすれば良いか お客様で考えてご依頼をしていたと思いますが、塗鈑瓦(とばんが)屋では全て一緒になっていますので悩むことなくご相談いただけます。
お問い合わせフォームに写真を添付できますので、実際の写真を送って詳しくそうsダンすることができます。

公開 2017年5月12日
URL http://tobangaya.com/

●制作内容
•3業態が合わさった事での無駄の少ない金額・施工ができることをアピール。
•写真添付機能付きの問い合わせフォーム採用
•キャラクターにより親近感と興味を持っていただける。
•わかりやすい価格ページ。


Macの立ち上げ時、Evernoteアプリを自動起動させないようにする方法


 

ノートアプリとして定番の「Evernote(エバーノート)」。ビジネスではもちろん、プライベートでも活用されている方はたくさんいらっしゃるかと思います。

ブラウザ版の他に、Macにインストールできるアプリ版もあるのですが、このEvernoteアプリの初期設定では、Macのシステム起動時に自動的にアプリが立ち上がるようになっています。

個人的に使用頻度が高いのはブラウザ版の方。アプリ版はネット環境に不具合があったときの予備程度のものだったので、起動のたびに立ち上がってしまうのは結構煩わしい。。
なので自動起動をオフにしようと試みてはみたものの、なかなか長いこと解決策が見当たらなかったのです。

今回その悩んでたものが解消されたので、小ネタではありますが記事にしてみました。

設定箇所は「Evernote」と「システム環境」の2つ。
詳しい手順(とはいっても、簡単な方法なのですが。。)は以下からどうぞ。

※以下は2017/5/10現在の情報です。

1 Evernoteアプリの設定


まずはEvernoteアプリからの設定です。


Evernoteのメニューバーの「Evernote」から「環境設定」を選択します。


「環境設定」の「全般」から「コンピューターにログインした時にEvernoteを起動」のチェックを外します。

これでEvernoteでの設定は完了です。

2 システム環境の設定



デスクトップのメニューバーの「アップルメニュー」から「システム環境」を選択します。


「システム環境」内の「ユーザーとグループ」を選択します。


「ログイン項目」のタブをクリックし、一覧の中から「Evernote」を選択した状態で下の「-」ボタンをクリックして完了です。

終わりに


アプリの自動起動の設定は、通常「システム環境」からだけでできるものがほとんどなのですが、Evernoteはアプリ自体に設定項目があるため2箇所の設定の見直しが必要です。どちらかがオンになっていると、自動起動はオフにはなりません。

設定自体は簡単ですが、私自身それに長らく気づかず、なぜだろう?と首をひねっていました。。

同じようにお悩みの方は、ぜひおためしください。


男性の顔を女性に変えてみる(2/2)


 

どうもKazです。
先回までは「美肌」を中心に加工してきましたが
今回は、もっと女子力を上げるために「メイク」まで行っていきます!!では続きをどうぞ!!
続きを読む 男性の顔を女性に変えてみる(2/2)


男性の顔を女性に変えてみる(1/2)


 

どうもKazです。
イロイロとバタバタしておりまして、しばらくコチラに記事が書けない状態だったのですが
やっと準備が整いましたので久々に書いていこうと思います。私が記事を書けずにいた頃、Twitterでは「Photoshopを使って男性を女性に加工する」と言ったツイートを多く見かけました。
早速、見に行くと確かに女性っぽくなってはいましたが、ベースの男性の顔が若干女顔に感じられました。
そこで…
「そんな事思うんだったらメッチャおじさまの画像から女性の顔にしてみろ!!」
と約1名…ワタクシから言われましたので加工をしてみました。

少し長くなりそうなので、数回に分かれるかと思いますが
お付き合いください。

続きを読む 男性の顔を女性に変えてみる(1/2)


サイトのイメージを上手に盛り上げる!キャラクターが主役のWebデザイン9選


 

固い業種のイメージをやわらげたり
特色や個性をより強調したり
意外な組み合わせでインパクトを出したり…と
イメージの印象付けに効果的なイメージキャラクター。

そんなキャラクターをうまい具合に取り入れている、9つのWebサイトをチェックしてみました。

※2017/03/31のサイトの情報です。

続きを読む サイトのイメージを上手に盛り上げる!キャラクターが主役のWebデザイン9選


とりあえずfunctions.phpに書いとくと便利かもしれないシリーズ【WordPress】


今年の雪は急にやってきたりいなくなったり、忙しい天気ですね。
WordPressのカスタマイズをしていて、なんだか毎回functions.phpに同じこと書いてることが増えたので備忘録代わりに。
定番のものから小ネタまで。

ソースコード周り


ど定番ですがまぁ。定番ってことは便利ってことです。

固定ページ名をbodyのクラス名として追加


ページ名のクラスがあったほうがCSS書く時便利ですからね。

CSS、Javascriptの読み込み


これは子テーマでテーマを作っていく場合になりますが。

親テーマの不要なCSSを削除


逆に親テーマのCSSで不要なCSSを読み込みたくない時に。

$handle探すのに手間取ったりもしますが。。

ダッシュボード関連


自動で入力されるPタグを入れない。


記事(POST)はお客さんが使うことも考慮して固定ページにしました。

ウィジェットエリアを追加


追加したら利用したい場所に


投稿の画像相対パスを絶対パスに書き換え


ソースをペタッとWordPressに貼り付けて、あれれ、相対パスが切れた。をなくすよう。
自分のテーマディレクトリの直下にimagesフォルダがある場合です。

パスは適宜変更してください。
小ネタですが以外と便利です。

サイト名のショートコード


これも上と似たようなもんですが、WordPressのテキストエディターでリンク貼ったりする時に。

自分ではあんまりショートコードは使わないんですけど。

いろいろな人が使う場合はあると重宝することがあります。

小ネタ


Advanced Custom Fieldsで画像のパスを取得(ID利用)


基本はthe_field()だけで出力できちゃうお手軽さもAdvance Custom Fieldプラグインの魅力の一つ。

画像の時(IDを利用している場合)にパスの出力忘れることが多かったので関数にしてみました。

感想


簡単なものばかりですけど。

最近はset_query_var()で変数をget_template_part()に渡してget_query_var()で受けてごにょごにょっていうのがちょっとお気に入りです。

固定ページの内容なんかもファイル切り分けてページモジュールみたいにしちゃうと結構楽で。

やり方は人それぞれだと思います、何か使えそうなものがあったらどうぞご利用ください。


Illustratorで手描き風【水彩画風の塗り】

170131_06
 

ブラシを使用した線を使った手描き風の表現「不透明マスク」を使用したがさっとしたラフな塗り表現など、Illustratorを使用した手描き風の加工をこれまでご紹介してきました。
今回はIllustratorだけでできる、水彩画風の表現方法です。

170131_13
とある案件のデザインをしていたときのこと。
基本はIllustratorのベクターイラストなのですが、塗り方だけ水彩画のような表現ができないかとの指示をいただきました。

なにかいい方法はないかと探していたところ、3倍早くなるためのDTP講座 様こちらの記事で紹介されていた方法がとても参考になりました。
自分なりに試してみたものを、覚書として今回記事として残しておきます。

続きを読む Illustratorで手描き風【水彩画風の塗り】


WordPressの投稿画面をカスタマイズしよう!!

どうもKazです。
実は、画像加工の記事を準備していましたが
もう少々お待ちいただくとして…

今回は、Wordpressの管理画面にCSSを当てるコツを
自分への備忘録としても書きたいと思います。

一番カスタマイズを必要とするところと言ったらカスタム投稿部分になるかと思います。
そして、だいたいお決まりでAdvanced Custom Fieldsプラグインをインストールしていると思いますので、プラグインを使う前提で説明いたします。

まずは管理画面で専用のCSSを読み込むようにします。

functions.phpへ

※「admin_enqueue_scripts」が管理画面への指定になっていますので、管理画面以外ではこのCSSが読み込まれません。


これで管理画面にCSSファイルを読み込ませることができましたので
マークアップの説明に移ります。

基本的に管理画面全てに読み込まれますので
CSSのリセットから書体の指定まで行うことができます。

カスタム投稿部分のみ指定する場合ですが、
Advanced Custom Fieldsプラグインを使うと、入力ページのbodyタグに
■ bodyタグ 「post-type-[ポスト名]」
のタグが付きますので、基本的な設定はこのタグを基本に行うと良いでしょう。

また、各入力項目タイトルと入力項目を1セットとして
■ 入力項目エリア 「field_key-field_[英数字]」
と言うクラスが振られていますので各項目ごとの設定は、このタグを指定してみてください。
一括で指定する場合は「label」にスタイルを設定してもいいです。

入力項目には
■ 入力項目 「acf-field-[フィールド名]」
と言うidが振られますので、CSSを当てやすい感じになります。
もしくは「input」に対して設定をしてもいいです。

背景画像なども使っていくと、初めての方でも入力しやすい登録画面ができますし
レスポンシブなスタイルにも対応できますので
一手間加えて使いやすい画面にしましょう!!


背景画像を下に落とす。昔のサイトをレスポンシブに対応させる時

blog170112
今更ですが新年明けましておめでとうございます。
本年もAGNチームブログをよろしくお願いいたします。

さて、今年1発目は軽い小ネタから。いきなり重いと胃もたれしちゃいますからね。
昔固定幅で作ったWebサイトをHTMLや画像はそのままにレスポンシブ化したいという案件で使った小技です。

【DEMO】


固定幅の頃


昔(おそらくスマートフォンの出たてかそれくらい)固定幅で作られたそのサイトは画像多めのサイトで、フロートを駆使してなおかつちょっとでもレンダリング速度を上げたいのでいける画像は背景にして利用していました。
ボックス全体がサイト幅で、そのうちコンテンツが50%、残り50%は画像に見えるけど実は背景、みたいなことをフロートを駆使しつつ作っていたわけです。
※だからフロートでつまづく人は大概背景が表示途中で切れちゃうことに大きな悩みを持っていたのです。Clearfixの歴史を振り返ればみんながフロートとどのように戦ってきたかわかるかもしれません。

そのサイトは単純な角版の画像がほとんどなくて、複数の画像を斜めに組み合わせてみたり、ちょっと凝った画像が多かったのです。
それでも制作された当時と違って、background-positionがより使いやすくなったり(オフセット記法が可能になった)、bacground-sizeが使えるようになったりしているので、その辺を使ってなんとかレイアウトしていこう、という感じでした。
※全面に背景を引きたくてbacground-size : cover;が使えなかった頃はJavaScriptで実装したりしてたんですよ。そう、角丸を画像で組み立てていた頃に近いですね…

実際にやってみる


考え方はよくあるレスポンシブWebデザインの考え方でいきます。
メディアクエリで振り分けて、左側 (右側)にある背景画像をある幅以下の時はコンテンツの下(上)にレイアウトしましょう、というやり方です。よくあるやつですね。

方法1:背景画像じゃなくて擬似要素で配置する。


background-imageでしていたものを擬似要素(::before、::after)のcontentで配置しようというわけです。
それで擬似要素をdisplay: block;にでもしておけば勝手に下に落とせますからね。
ただこのやり方だとうまくいかない場合があるのです。

contentプロパティで配置された画像はサイズの調整が難しいのです。
というのも、contentプロパティで配置された画像はサイズの指定ができないのです。
擬似要素にサイズ(width、height)を指定してもだめ。どんな時に困るかというと、もともとの画像が画面幅より大きかった時。
これ、画像が見切れます。
さて、困った。

この問題そのものに対する解はネット上でもよく見かけますが、contentプロパティで配置するのではなくて、擬似要素のサイズを指定してその背景が画像として使う、ということかもしれません。

方法2:背景画像でいく


今日触れたいのはこちら。
背景画像として使うけど、コンテンツと重なるのは嫌だ、というお客様のために。
方法としてはpaddingで領域を確保してそこに背景画像を100%で表示させます。

この方法のメリットはデバイス幅が変わっても比率を維持できる点です。

領域を確保する


領域を動的にpaddingを使って確保するためにpaddingを%で指定します。
この方法でわかっておかなくてはいけないのは画像の縦横の比率(サイズではなくて)です。
画像の縦横の比率のパーセンテージ分だけpadding-bottom(padding-top)を指定してあげます。

どういうことかと言いますと、
例えば画像サイズが800 × 600だったとします。
これをコンテンツの下に背景用の領域を確保するためにはpadding-bottomに
(600/800)*100%を指定してあげるのです。

これでなんでうまいこと領域が計算できているかというと、これはpaddingの特性を利用しているのです。

The percentage is calculated with respect to the width of the generated box’s containing block, even for ‘padding-top’ and ‘padding-bottom’. If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.
Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box’s containing block.

パーセンテージは、 ‘padding-top’と ‘padding-bottom’の場合でも、生成されたボックスの包含ブロックの幅に対して計算されます。包含ブロックの幅がこの要素に依存する場合、結果のレイアウトはCSS 2.1で定義されていません。
マージンプロパティとは異なり、パディング値の値は負であってはなりません。マージンプロパティと同様に、パディングプロパティのパーセンテージ値は、生成されたボックスの包含ブロックの幅を参照します。

https://www.w3.org/TR/CSS2/box.html#propdef-paddingより引用


大事なところは、
生成されたボックスの包含ブロックの幅に対して計算されます。
ここです。
計算は包含ブロック(ざっくりと親の要素)の高さから計算しているわけではないのです。
包含ブロックの幅を元に計算するので上の式でいけるんですね。
画像がもし親要素に対し幅100%だったとした時に、幅に対する高さの割合を求め、その分だけ親要素に余白(padding)を持たせることで、背景画像の領域が確保されたわけです。
これはマップや動画を100%で埋め込みたい、という時と同じ考え方ですね。

そんなに多様するわけではないけれど、まぁちょっとCSSのお勉強の小ネタ、ということで。

【DEMO】


蛇足ですが…


ちょっとハマったのが、iOSでbackground-size: cover;がうまくいかなかったことです。
これはbackground-attachment: fixed;と一緒に使っているとダメみたいです。
背景固定して全面画像みたいなことができないじゃないか…

ちなみにこれはbackground-sizeを100vhにすることでやりたかったことに近くなったので今回はOKにしました。
background-attachment: fixed;で背景固定して、background-size: auto 100vh;で。


【たくさんのタブをすっきり整理整頓!】Webブラウザ Vivaldiを使ってみてる

161227vivaldi00
 

常時立ち上げていたいチャットツールやメモツール。
進めている案件の関連サイト。
勉強用のWeb系ブログ。。。。

いろいろなWebサイトをみていると、いつのまにかブラウザのウィンドウやタブがデスクトップに散乱してしまう、sakaiです。。

複数立ち上げていると、探す手間がかかったり、他のタブに気を取られて作業が中断してしまったりとあまりいいことはありませんよね。

今回は、タブの整頓にとおすすめしてもらった「Vivaldi(ヴィヴァルディ)」というWebブラウザをご紹介します。

Vivaldi(ヴィヴァルディ)とは


 

161227vivaldi01

https://vivaldi.com

Vivaldi(ヴィヴァルディ)は、Vivaldi Technologiesによって開発されているウェブブラウザである。

Vivaldi Technologiesは、オペラ・ソフトウェアの創設者の一人でありCEOであったヨン・スティーブンソン・フォン・テッツナーによって設立された。”A new browser for our friends”(私たちの友人のための新しいブラウザ)をスローガンとしており、技術者、インターネットのヘビーユーザ、OperaのレンダリングエンジンがPrestoからBlinkへと変更されたことに伴い多くの機能が削除されてしまったことに不満を抱いているかつてのOperaユーザを主な対象としている。

(引用:Wikipedia)


以前のOperaの機能を世襲したブラウザなんですね〜。

Operaを一時期使用し使用レビューを書いたこともありましたが、残念ながらメインで使用することなく、結局Chromeに落ち着いてしまった経緯があるのですが、
また縁あってOpera由来のブラウザにお世話になる日がくるとは。。

ということで、期間にして2ヶ月ほど。Vivaldiをメインブラウザとして使ってみて、ぜひおすすめしたいところ、逆に残念に思ってしまったところをあげてみました。
少し長くなってしまったので、ご興味のあるところからどうぞ。

続きを読む 【たくさんのタブをすっきり整理整頓!】Webブラウザ Vivaldiを使ってみてる