ホームページ制作Fの業務を月ごとにご紹介

2015年8月31日(月)
Wordpressのログイン画面のロゴを変更する

Wordpressをたくさん管理していると 疲れているとき、どのサイトのログイン画面だろう?と思うことがあります。 
サイトのURLを見れば一目瞭然なのですが もっと視覚的に。
そう画像でわかったほうが管理ミスも減ると思います。 

そこで Wordpressのログイン画面のロゴを変更する方法をご紹介します。


 1.まずはログイン画面 現在は通常のログインロゴが表示されています。 通常ログイン画面


2.ログインをします 左メニュー [外観]→[テーマの編集]を選択します。
 右メニューの<テンプレート>から 「テーマのための編集 functions.php」を選択します。 
ファイル内容が表示されますので、編集画面の一番下に下記の記述をします。 ロゴ変更の編集画面
---------------
function login_logo_image() {
    echo '<style type="text/css">
            #login h1 a {
			width: 250px;
			height: 42px;
                background: url(' . get_bloginfo('template_directory') . '/wp-login-logo.png) no-repeat !important;
            }
    </style>';
}
add_action('login_head', 'login_logo_image');
--------------- 
ロゴはcssで記載されているため、 このファイルからCSSを上書きすることで、好きなロゴ画像を表示させることができます。


 3.FTPから選択しているテーマのフォルダ直下にCSSで指定したファイルを配置します。 ロゴファイルをアップロード ※テーマを変更したり、CSSで記載したパスが違うと表示されません。


 4.ログアウトをしてログイン画面を開いてみましょう ロゴ反映済


好きなロゴが表示されました!
 ロゴを変更するだけで一工夫されたサイトになりますので 是非お試しください♪

 ※functions.phpにはWordpress共通の設定が入っているので なるべくファイルの一番下に記述したほうが安全ですよ

2015年8月28日(金)
ホームページのデザインにおけるラフの重要性

みなさんデザインをはじめる時は、どういう風に進めていきますか?
まずは、どうレイアウトをしていくか...、ここに見出しをつけよう...など、
どういう風にしていくかを誰でも考えると思います。

弊社でもデザインに入る前には必ずラフを書き、骨組みを作ります。
場合によって、手書きとイラストレーターを使い分けて読みやすい流れを描きます。
実は、この作業が一番大事なのです。

ラフが曖昧なまま進んでしまうと、うまくはまらず結局二度手間を踏んでしまいます。
一度作ったデザインをやり直すには、頭をリセットする必要があり、
とても時間が掛かってしまいます。
私もよくやってしまうのですが、ちゃんと考えたラフで進めるのと、曖昧なままで進めるのとでは、
進み具合が全然違います。

デザインも、もちろん大事ですが、いくら綺麗なデザインをした所で、構成が出来ていないと
見ている人に内容をうまく伝える事はできません。
綺麗なデザイン、カッコイイデザインだなーだけで終わってしまいます。
デザインはあくまでも副産物です。

私も入社してまだ日が浅く、綺麗なデザインなんか全然できません。
あくまで、ページの中で見ている人が次はどうなるんだろう...とワクワクするような
ページを作ることを一番に重視しております。

デザインをするときは、まず一度頭に思い描いたものを手書きでも何でもいいので、
形にすることをオススメします!
イラストレーターで作ったラフ

2015年8月27日(木)
イラストレーターのないフォントを簡単に見つける方法

人からもらったaiなどを開いたときにないフォントを問われるときがあると思います。
でもどの位置が代替えフォントになっているのか分からない!
なんてときに簡単に印をつけられる方法をご紹介します。

まずは普通に開きます。
イラストレーターのないフォントを簡単に見つける方法1.jpg

そして、「ファイル」→「ドキュメント設定」で
【代替えフォントを強調表示】にチェックを入れOKをクリックします。
イラストレーターのないフォントを簡単に見つける方法2.jpg

すると代替えフォントがこのように表示されます!
イラストレーターのないフォントを簡単に見つける方法3.jpg

困ったときはぜひお試しください!

2015年8月26日(水)
番号付きのリストで丸数字を使いたい場合

番号付きのリストは通常olタグを使って表現しますが、時にはcssの仕様にないカッコつきの数字や丸で囲まれた数字を使う必要が出てくるときがあります。
解決方法は様々ありますが、比較的簡潔で便利な方法を紹介します。
今回はこのようなイメージで、リストに丸数字を使います。

listnum01.png
htmlの記述は以下の通りです。spanタグで囲んだ丸数字がリスト番号になります。


<ol class="bss">
<li><span>①</span>通常サポート:(中略)行います。</li>
<li><span>②</span>完全サポート:(中略)いただけます。</li>
</ol>

cssはこのようになります。丸数字をリスト番号にするための最低限の記述です。

.bss{margin:15px 0 10px 0; width:600px;}
.bss li{position:relative; list-style:none; margin-bottom:1em;}
.bss li span{position:absolute; top:-1px; left:-1em;}

bssは基本的に位置やサイズを決めています。
li要素にposition:relativeを設定し、なりゆきで基準点にします。list-styleはnoneで基本的なリスト番号は非表示にします。
spanタグで丸数字をマークアップし、親であるli要素に対してposition:absoluteを設定し、絶対位置に配置します。
ブラウザで表示して位置にずれがあるときは、spanのtopの値を調整して揃えます。

この方法の利点はテキストなら1文字以上でも可能なので、<1>や[1]も使えます。
IE8以上対応なのでどのブラウザでも手堅く表示できます。

2015年8月25日(火)
イラストレーターで「ディスクがありません」とエラーが出たときの対処法

ディスクを入れて作業をしていたわけでもないのに「ディスクがありません」というメッセージが出た場合の対処法を紹介します。

aiデータを開こうとするとこのようなエラーメッセージが出てきました。
ディスクが無い.PNG

このメッセージが出た際の原因は環境設定ファイルの破損が原因なので原因のファイルを削除します。
イラストレーターを閉じて『AI prefs』というファイルを削除して下さい。
(Windows 7/Vista の場合:C:\Users\<ユーザ名>\AppData\Roaming\Adobe\Adobe Illustrator CS● Settings\ja_JP)

ディスクが無い2.PNG

『AI prefs』ファイル削除後にイラストレーターを起動するとメッセージは表示されなくなります。
また新しい環境設定ファイルは自動的に作成される為、心配はいりません。

お困りの際にお役立て頂ければ幸いです。

2015年8月24日(月)
イラストレーターで曲線や円周の長さを測る方法

直線などは長さを簡単に知ることが出来ますが、曲線は表示されませんよね。
今回は曲線や円周などの長さを簡単に測ることが出来る方法をご紹介します。

まずは長さの知りたい円を選択します。
そして「ウィンドウ」→「ドキュメント情報」をクリックします。
曲線の長さを測る方法1.jpg

表示されたらメニューから「オブジェクト」を選択すると、長さが分かりました!
曲線の長さを測る方法2.jpg

パスで描いた図形も長さを測ることが出来ます!
曲線の長さを測る方法3.jpg


他にも斜線などの長さを知りたいときにも使うことが出来るので是非使用してみてください!

2015年8月20日(木)
Photoshopで傾いた写真を真っ直ぐにする

傾いた写真.jpg
写真を撮ったけど傾いてる・・・って時は
Photoshopの「ものさしツール」を使えば簡単です!!

まず右にあるツールバーの中のものさしツールを選択します。
ものさしツール.jpg
そして真っ直ぐしたい部分に沿って線を引きます。
ドラッグするだけで簡単に引けます!
定規.jpg
右上の「角度補正」を選択します。
角度補正.JPG
すると、真っ直ぐになります!
角度補正後.JPG
ただ、傾いた分画像で表示されているように空白の部分(この画像ではグレーの部分)ができてしまうので

いる部分だけ切り取りましょう!
まっすぐ.jpg
とっても簡単で便利なので是非使ってみてください!

2015年8月19日(水)
写真の配置でリズムを付ける!読みやすいデザインのレイアウトとは

写真の配置でリズムを付けることで、
簡単に読みやすいデザインにすることができます。

写真のレイアウトを変えるだけですが、
文章量が多い時などに有効で、読んでいる方が飽きないような
デザインになります。

まずは、工夫せずにレイアウトをしてみたいと思います。
右側に写真を配置していきます。

デザインのレイアウトを考える1デザインのレイアウトを考える2デザインのレイアウトを考える3デザインのレイアウトを考える4
いかがでしょうか。
右側に写真が並んでいることで、
右側が重くなりリズムが悪くなっていると思います。

次に、写真を左右に振り分けてレイアウトをしてみたいと思います。

デザインのレイアウトを考える1デザインのレイアウトを考える5デザインのレイアウトを考える3デザインのレイアウトを考える6
いかがでしょうか。
左右に写真をレイアウトすることで、
格段に読みやすくなったと思います。

写真の配置を変えるだけなので、
ぜひお試しください。

2015年8月18日(火)
スマホでヘッダーを上部に固定する

スマートフォン用のページにて、メニューに飛びやすいように
ヘッダーを上部に固定する方法をご紹介します。難しそうですが、とても簡単です。

htmlのソースコード
コード.png

CSSのコード
下記のように、固定させたい要素をpositionでfixedで固定することができます。
CSS.png
fixedを指定することでtopで位置を決められるので0を指定して左上に固定します。

また、ヘッダーの下に設定してある要素が下に隠れて重なってしまうので、
固定したヘッダー分の高さをmargin-topで確保する必要があります。(div#mainの部分)

これで完了です。スマホページ作成の際に役立つと思いますのでぜひご活用ください!

2015年8月17日(月)
画像のExif情報を簡単に削除する方法(Windows7)

デジカメやスマホなどで撮影した写真データには、
Exif(イグジフ)情報と言う カメラの設定や撮影日時、位置情報などの 付加情報がついています。

Windowsで写真を選択し右クリック→プロパティの「詳細」タブで表示されます。

写真のプロパティExif情報


Exifは、カメラの機種名やISO感度などのカメラの設定、編集に使ったソフトフェアなど、
いろんな情報を含んだデータ(メタデータ)の集まりで、デジカメで写真を撮るとデータに自動的に付与されます。

このデータを活用して
写真を日付ごとに並び変えたり、撮影した場所ごとにまとめたりできるようになっています。

ただ、この情報がいらないときもあるので
そのときはパソコンに取り込んだあと、編集を行います。
例えば、位置情報。
緯度経度が記録されるとこの写真がどこで撮影されたがわかります。

セキュリティの関係上「どうしても消したい」場合、ソフトを使わずに簡単に削除できます!

このまま、
Windowsで写真を選択し右クリック→プロパティの「詳細」タブから

写真のプロパティExif情報のリンク

写真のプロパティExif情報削除画面

上記手順で[OK]ボタンを押すと....

写真のプロパティExif情報削除完了

削除したい項目が消えました!

Exif情報は大切な情報なので壊れる場合もあります。バックアップ(写真データをコピー)を取ってから行ってくださいね。
余談ですが、最近のSNS(Facebookやtwitterなど)は画像をアップロードした時点で自動削除されているらしいです。
各SNSの規約を参考にしてくださいね。

2015年8月14日(金)
今更聞けないウェブと印刷によるイラストレーターの設定の違い

デザインをする場合、web用にしろ印刷用にしろイラストレーターなどで作業を進めることが多いですが、
基本的な設定が違っていたり、それぞれ決まり事があったりします。
いつもweb用のデータを作っていて、印刷用のデータを作らなければいけなくなった場合、
いつも通りの設定で入稿して、後からあれこれと修正しないといけなくなった......
なんてことも多々あります。

そこで今回はwebと印刷による設定の違いを説明いたします。

web用の設定

カラーモード:RGB  ラスタライズ解像度:72ppi  ピクセルグリッドに整列:オン 基本的な設定は上記のような感じです。 決まり事としては、 ・ピクセルプレビューで作業する。 ・単位はピクセルを使う。 ・小数点以下のつく数値は使用しない。 といったところです。

印刷用の設定

カラーモード:CMYK  ラスタライズ解像度:300ppi  ピクセルグリッドに整列:オフ 基本設定はこのような感じです。 ラスタライズ解像度に関しては紙によって実際の解像度が変わってきますが、 基本的に300ppiで問題ありません。 決まり事は ・ブラックオーバープリントをする。 ・RGBの画像を使わない。 ・透明効果(ぼかしやドロップシャドー)を使う場合は、  画像は埋め込みにする。 など上げるとキリがありません。また印刷所によって細かな設定が変わってくるので、 データの作り方は入稿先に確認するのがよいでしょう。

簡単に基本設定を使い分ける方法

基本的な設定を変えないといけないことはわかっていても 設定をメニューから選んで変えるのは面倒です。 そこで便利なのが、新規ドキュメントをつくる時に出てくるウィンドウです。

新規ドキュメント作成の時のウィンドウ

ここでプリントかwebを選ぶだけで、簡単にそれぞれに適した設定を選ぶことができます。
もちろん後からも変更が可能ですが、最初に設定を決められるので、
とても便利ですよ。

web用の設定
web用の設定ウィンドウ

印刷用の設定
web用の設定ウィンドウ

2015年8月13日(木)
Illustratorで作る簡単リボン

今回は意外と簡単に作れるリボンをご紹介します。



まず、ペンツールで好きな形の線を書きます。

この時、線幅は1px。グレースケール:20%で、塗りはなしです。

08121.jpg

効果>3D>押し出し・ベベル で幅をつけます。立方体をぐるんと回して、好きな角度を選んでください。

押し出しの奥行きがリボンの幅になります。

一番下の 表面:陰影なしにしたらOKです

08122.png

08123.png

オブジェクトメニューから アピアランスの分割を選択して、3Dの効果をパスに変更します。

グループ解除繰り返して、それぞれのパーツをばらします。

08124.png

不要な部分は消して、ズレた部分を拡大して合わせていきます。

08125.png

次に、リボンに色をつけていきます。

お好きな色のグラデーションを濃い色と薄い色の交互で作成。

08126.png

色が決まれば、それぞれの角度に合わせて微調整をしていきます。

グラデーションツールを選択し、始点から終点へドラッグして変更します。

08127.png

そして、影になる部分は、グラアデーションの塗りに、アピアランスパレットで新規塗りを追加し、

20%のグレースケールを描画モード:乗算で重ねます。 色を変更するときに楽です。

08128.png

後は、リボンの端っこをアンカーポイントを追加して加工したら出来上がりです。

08129.jpg

2015年8月12日(水)
IE9 テーブルの背景にグラデーションを使うときの注意点

まずこのテーブルをごらんください。
ie9setumei01.png
左側がth、右側がtdで、thの背景にグラデーションを適用しています。

IE9では、テーブルの背景にグラデーションを使うと、境界線が表示されないという現象が起こります。
これを回避するには、ひと手間かける必要があります。

1.テーブルは境界線を書くだけにしておく。
2.テーブルの中にdivを配置する。ただし、1ピクセルの隙間もできないよう、ぴったりの大きさで配置する。
3.div背景にグラデーションを設定し、文字などのコンテンツを流し込む

ポイントは、テーブルの中にdivを配置する際、1ピクセルの隙間もないぴったりのサイズにすることです。

イメージはこのような感じです。
ie9setumei02.png
スタイルシートでの指定
※グラデーションを適用するthの、サイズ関係にしぼって記述しています。pxの値は参考数値です。

table width:730px;(最大幅を指定)
th width:250px; height:auto; 幅は正確に指定するが、高さはなりゆきまかせ。
div width;100%; height:50px; 幅は100%、高さは正確に指定。

※今回は余白がかなりできることを前提にしています。
文字の量が多い場合divの高さは、paddingなどで確保してもよいです。
tdのほうはthに合わせて数値を決めておけばOK。

これでIE9でも境界線が表示されます。

2015年8月11日(火)
イラストレーターでかすれたような文字を簡単に表現する

イラストレーターで文字にかすれたような表現を加えてみます。

かすれ.PNG

文字と、かすれの表現として使用したいオブジェクトを用意して両方を選択します。

かすれ2.PNG

透明パネルから「不透明マスクを作成」を選択して不透明マスクをかけます。
その際にクリップのチェックは外して下さい。

かすれ3.PNG

かすれたような文字の表現が出来ました。
かすれ4.PNG

短時間でとても簡単に出来るので是非お試し下さい!

2015年8月10日(月)
食べ物を際立たせる加工

白黒の写真から食べ物のみをカラーにして目立たせる画像の加工をご紹介します。

こちらの画像をつかいます!
食べ物を際立たせる加工4jpg

まずは画像を白黒にします。
食べ物を際立たせる加工1.jpg

そして、メニューのヒストリーブラシを選択して食べ物の部分をなぞっていくだけです
食べ物を際立たせる加工2.jpg

すると食べ物の存在感がより増しました!
食べ物を際立たせる加工3.jpg

とても簡単にできるのでみなさんもぜひおためしください!

2015年8月 7日(金)
Illustratorでアウトライン化せずに文字の変形

フォトショップなら簡単ですが、Illustratorで文字を変形しようと思うと
アウトライン化が真っ先に浮かびます。
しかし、アウトライン化をしてしまうとそれから文字の変更が必要になった場合
また一から文字を作りなおさなければなりません。

しかし、シアーツールを使うことで文字の編集機能を保持したままの文字の変形が可能です。

未変形文字

なんの変哲もない文字ですが、シアーツールで躍動感が出ます。

シアーツールで変更後

普通の文字より表現の幅が広がります。
是非ご活用ください。

2015年8月 6日(木)
Illustratorのグラフィックスタイルを使ってみる

Illustratorで悩んだ時に使える便利な機能をご紹介します。

見出しについてですが、このままでもいいとは思いますが何か物足りません。
でもどうしようか悩む、そんなときはグラフィックスタイルを使ってみましょう。
編集前.jpg
メニューバーの「ウィンドウ」から「グラフィックスタイル」を表示します。
(チェックがついていれば大丈夫です)

出てきたグラフィックスタイルバーの右上にある▼をクリックして
「グラフィックスタイルライブラリを開く」を選択します。
グラフィックスタイルバー .jpg
するとこのようにたくさんのグラフィックスタイルが出てきます。
グラフィックスタイル.jpg
あとは気になったものを選択するだけであっという間にデザインしてくれます。
色だけではなく線やグラデーションも一緒にしてくれるので困ったときは非常に便利です!
編集後.jpg
下の「◀ ▶」をクリックすれば他のスタイルも出てくるので是非お試し下さい。
メニューバー2.jpg

2015年8月 5日(水)
フェイスブック広告の出し方!料金も安く誰でも始められます

フェイスブック広告の出し方1

フェイスブック広告の出し方についてまとめました。
フェイスブック広告を出したいけど、どうしたらいいのかわからないという方必見です。


1.個人のフェイスブックアカウントにログインする


まず、フェイスブック広告を出すためには、
個人のフェイスブックアカウントにログインする必要があります。
フェイスブックアカウントがない場合は、登録を行いましょう。


詳しい登録方法は、こちらを参照してください。
⇒今さら聞けないFacebook(フェイスブック)の登録とログインの方法、使い方


2.ビジネスマネージャーに登録


ビジネスマネージャーは、広告を何個も管理したり
フェイスブックページを複数運営している方などは登録しておきましょう。
広告を一括して管理できるのでとても便利です。
フェイスブックページを持っていない場合は、ここで作る必要があります。


ビジネスマネージャーの登録方法は、こちらを参照してください。
⇒Facebook広告出稿にはビジネスマネージャが必須に!導入手順詳細まとめ【保存版】


広告アカウントの作成、支払い方法の設定方法も記述されておりました。


3.広告キャンペーンの作成


いよいよ広告を作成していきます。
広告マネージャーかパワーエディタにて作成ができます。
個人的には、広告マネージャーが作成しやすいと思っていますので、おすすめです。
ステップ毎に進めていけば簡単に広告を作成することができます。


また、広告で成功するために、こちらもチェックしてみてください。
⇒成功するFacebook広告クリエイティブの作り方 9の秘訣


広告の内容、ターゲット層、予算とスケジュールを決めましょう。
フェイスブック広告の素晴らしい点は、このターゲティングにあります。
あなたの出す広告にあったターゲットを設定しましょう。
料金も1日100円から出すことができるのもフェイスブック広告の利点です。
単価が安いので気軽に広告を出すことができます。


4.フェイスブックによる審査


フェイスブック広告のガイドラインにそって審査が行われます。
薬事法など微妙な広告に関しては、審査が通るかどうか判断がわかれると思います。
何通りか案を作り審査依頼してみましょう。


以上がフェイスブック広告の出し方の流れになります。
フェイスブック広告は、見出しや写真など何通りか準備しておき
ABテストを繰り返すことで良い広告ができてきます。


ぜひフェイスブック広告を集客に役立ててください。

2015年8月 4日(火)
ヘッダー固定時のページ内リンクのずれを解消する方法

position:fixedでヘッダーを固定した場合、ページ内リンクの位置が
ヘッダーの高さ分ずれてしまいます。これをCSSで簡単に解消する方法をご紹介します。

ヘッダーの高さを120pxとします。

■HTML

<div id="header">ヘッダー</div>
<div id="honbun">
<a href="#link01">ページ内リンクの場所</a>
<div name="link01" id="link01">ここに内容が入ります</div>
</div>

■CSS

#header {
       width:100%;
       min-width:960px;
       height:120px;
       position:fixed;
       left:0;
       top:0;
}

#honbun {
       padding-top:120px;
}

#link01 {
       padding-top:120px;
       margin-top:-120px;
}

padding-topでヘッダーの高さ分ずらし、margin-topでマイナスの値を記述するとうまくいきます。
ヘッダーを固定しページ内リンクを設置する際、役に立つと思いますのでぜひご活用ください!

2015年8月 3日(月)
forの処理を早くする方法

どのプログラミング言語でも共通です!
(今回は、JavaScriptで例を書きます)

例A

for( idx = 0 ; idx < array.length ; idx++ ){
// なんかの処理
}

例B

var idx = 0;
var len = array.length;
for(idx = 0 ; idx < len ; idx++ ){
// なんかの処理
}

コレ、例Bのほうが早く動きます。

たとえるならば
例Aは、「毎回お札の枚数を数えて!教えて!」
例Bは、「メモに書いたお札の枚数を教えて!」
なのです。

ポイントは「配列の数を変数に入れる」ことです!
配列の数を取得する「length」(※他言語ではcount等もありますね)を使った時点で
プログラム側は、その配列の数を数えます。

なので、あらかじめ数を確定させることで動きを早くできるのです。
ちょっとホームページの動きが遅いな。と思ったとき、是非見直してみてください。

※変数名はよく「i」を使いますが、これは「index」の略です。
(教科書や参考サイトにもよくでてきます)
プログラムになれてきたら「idx」と名前を付けてみてください。
見やすいしミスも減ります。

簡単無料お見積もり

お問合せ内容
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • 無理なく持続する経営がしたい
  • 現状を維持しながら息の長い経営をしたい
  • リスクを回避するための線引きをしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
  • 5~10万で自分でテンプレート形式で作る方法に興味がある
内容