目は口ほどに物を言う?目+αでキャラクターの感情を表現!

ブログやSNSで、ちょいちょい登場しているきりん君。

口が大きな鼻(?)で隠れているので、表情にバリエーションをつけるのが地味に難しい…。
ブログにときどき登場する彼は、無表情なのがほとんどですが、
今回、目と多少の附属物で、どれだけ表情に変化が出るのか挑戦してみました。

こちらが、基準となる平常心のきりん君です。
0630-03

笑う

0630-04
目を細めて頬を赤らめました。うれしそうですね。

企む

0630-05 同じ笑顔でも、こちらは邪悪な笑みです。
何か悪いこと考えてます。

怒る

0630-10 ちょっとムッとした感じ。眉間のシワがポイントです。

怒る2

0630-11 より怒りが強いバージョン。
光のない大きな黒目は、不気味な迫力があります。

0630-12 白目バージョン。

泣く

0630-13 ゆらゆらした黒目にきらめきを入れて、うるうるに。

泣く2

0630-14 涙が止まらない!
同じ涙でも、描き方でいろいろな泣き顔ができそうです。

疲れる

0630-15 けだるい表情。あきれ顔にも見えます。

考える

0630-06 思案中…

眠い

0630-07 半開きの目で眠い顔。
マンガで見るような泡(?)をつけると、よりそれっぽく。

焦る

0630-08 左右で黒目の大きさを変えて、目を白黒している感じに。

驚く

0630-09 某少女マンガのように、白目でハッと。

燃える

0630-16 瞳に炎を宿らせ、眉毛もつけて熱い感じにしてみました。

 

描いてみて

目だけでも、ちょっとした違いでけっこう変化が出るものですね!
いつかLINEスタンプでも作るようなことがあれば、活用していけたらと思います。


ローカル環境からのお引越し(searchreplacedb2.phpを使います)【WordPress】

みなさんのお住まいのところは梅雨入りしましたか?

私は今年の春に2階から1階に引っ越したのですが、2階の時に比べてちょっぴり湿っぽい気がします。とにかく洗濯物が乾きにくくて嫌な季節ですね。

 

150630

さて、今回はローカル(今回はMac×Mampです)から本番環境へWordpressを移行した時のお話です。

カスタムフィールドやら初期登録分の記事やら、固定ページやら、量が多くなければ本番環境でもう一度作っても良いのですが(その程度ならWP使ってないかもしれませんね)、ローカル環境でお腹いっぱいになっているWPを本番環境に引っ越します。

WP標準のインポートツールだけだと、うまく移行できないデータがあったり、データベース上のURLの書き換えがうまいこといかずにリンクが切れたりすることがあるみたいです。(※参考サイト:テストから本番へ!WordPressでURLが変わる場合のデータベース修正マニュアル)

今回は参考サイトを見ながらsearchreplacedb2.phpというスクリプトを使います。

 

作業手順

  1. ローカルからデータベースのエクスポート(sql)
  2. 本番環境にデータをインポート
  3. サイトデータをサーバにアップ
  4. searchreplacedb2.phpを使ってデータベース内のURLを書き換える
  5. searchreplacedb2.phpを削除する
準備段階としてsearchreplacedb2.phpを先にダウンロードしておきます。
(準備を全部してからの方が慌てなくていいですからね)

https://interconnectit.com/products/search-and-replace-for-wordpress-databases/

上記リンク先のページ中程にダウンロードのリンクが有ります。V3.0.0 BETA版も有るようですが、今回は2.1.0の方を使って問題なく引越しできました!

 

ローカルからデータベースのエクスポート

MampからphpMyAdminにアクセスしてデータベースをエクスポートします。

150629_01

150629_02

ポイントは、
  • 必要なテーブルを全て選択すること。
  • SQLで出力すること。
  • 「DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT / TRIGGER コマンドを追加する」にチェックを入れること。
のようです。実行して.sqlで保存します。

データ量が大きい場合は圧縮した方がいいのかもしれません。

 

本番環境にデータをインポート

こちらは移行先のサーバによるかも知れませんが、サーバのコントロールパネルからphpMyAdminにアクセスして「インポート」してあげます。

コレだけなんですが、コレだけでできてしまいました。

 

サイトデータをサーバにアップ

FTPツールなどで、サイトデータ(テーマファイルなど必要なもの)をアップロードします。参考サイトなどをいろいろ見ているとwp-config.phpをアップロードして書き換えると説明されているものが多かったですが、今回はその作業無くいけました。

あらかじめ本番環境にWPを設置してあったので、その辺りをいじる必要がなかったみたいです。

 

searchreplacedb2.phpを使ってデータベース内のURLを書き換える

最初にダウンロードしておいたsearchreplacedb2.phpをWPのフォルダにアップロードしてアクセスします。

URLはhttp://ドメイン/wordpress/searchreplacedb2.phpみたいなかんじです。

150629_03

「Submit」をクリックして次に進みます。

 
150629_04

書き換えを行うデータベースの情報が表示されます。
内容を確認して間違いなければ「Submit DB Details」をクリック。

 

150629_05

書き換えを行うテーブルを選択します。
※初期状態で全選択されていたので、そのままで良かったです。

確認したら「Continue」をクリック。

 

150629_06

上のテキストボックスに「どの文字列を書き換えるか(旧URL)」を入力。
下のテキストボックスには「書き換え後のURL(新URL)」を入力します。
末尾に / を入れないのがポイントみたいです!

内容を確認したら「Submit Seach string」をクリック。
コレでURLの書き換えが行われます。
本番サイトを確認してみましょう。

 

searchreplacedb2.phpを削除する

書き換えが行われたのを確認して、searchreplacedb2.phpをサーバから削除します。

150629_07

 

何度も表示されてますが「消すの忘れないでね!」出そうです。

このスクリプトにアクセスできると、誰でも書き換えができてしまいますからね。
絶対に削除しましょう。

 

まとめ

今回はテストから本番環境への移行で利用しましたが、サーバが移行したときなどにも使えそうです。(カスタムフィールドを作りすぎて移行がすこぶる大変になってしまった。カスタムフィールドのメンテが今後思いやられます・・・)

データベースをいじくるので、ご利用は自己責任かつ、細心の注意が必要ですね。

今回参考にさせていただいたサイト様
ありがとうございました!


梅雨のじめじめ気分を吹き飛ばす! 虹のようなカラフルデザインのWebサイトまとめ

もうすぐ6月も終わりですね。
新潟ではいまだすっきりしないお天気が続く今日この頃ですが、みなさんがお住まいの空模様はいかがでしょうか?

今回は、梅雨空のじめじめ気分が晴れるようなカラフルなWebデザインをまとめてみました。

01

AYAKA NEW ALBUM レインボーロード
http://room-ayaka.jp/rainbowroad/
レスポンシブデザイン。
ポイントで置いてあるモチーフの色が、じわじわと切り替わります。
宝石が虹色に輝くように見えて素敵。

 

04

 

JAZY GROUP
http://jazygroup.com/
ページ変移のアニメーションが気持ちいい!

 

14

ぷるぷるSPARKLINGゼリー
http://www.hakutsuru.co.jp/purupuru/
ぷるぷるふるえるアイコンや、しゅわしゅわ消える炭酸水のような背景がとてもかわいらしいです。
マウスオーバーの「ぷるんっ!」とした動きが何ともいえない心地よさ。

 

11

color magic
http://www.itokin.com/musee/colormagic/

白ベースの中に突然現れるカラーテープが、鮮やかでとても印象的。
ファッションショーを見ているかのような商品写真の紹介の仕方も面白いです。

 

02

モチイエ女子web
http://www.mochiiejoshi.com/mj/
ビビットな色使いとポップなパターンが、まさに女子向け!

 

13

FELISSIMO 500色の色えんぴつ
http://www.felissimo.co.jp/500/
「500色」がずらりと並ぶ様は壮観!
色えんぴつで描かれたようなボタンやタイトル背景など、色えんぴつのイメージで統一されたデザインになっています。

 

08

avion
http://avionavion.jp/
レスポンシブデザイン。
こども服のブランドサイトなのですが、やわらかめの色使いがイメージにぴったり。

 

 

15

CHITAZEN
http://www.chitazen.co.jp/
彩度の低いちょっと渋めのレインボーカラー。
スクロールに連動して描かれるラインの動きが楽しいです。
ヘッダーの町の風景が時間に合わせて変わるのも、心憎い演出。

 

いかがでしたでしょうか?
「カラフル」と一口にいっても、彩度や色の面積によって様々なバリエーションがあるんですね〜。


『openWYSIWYG』使ってみた

お客さまのホームページをリニューアルする際に、『お知らせ』部分をWYSIWYGエディタで書き込めるようにしました。
その時に使ったのが『openWYSIWYG』というWYSIWYGエディタ。
JavaScriptで開発されているエディタです。
この使い方とカスタマイズ、画像使用不可ですがChromeで使う際の修正を書いて行きます。

まずは、基本プログラムのダウンロード。
openWYSIWYG (ライセンス:LGPL)
http://www.openwebware.com/

非公式で日本向けカスタム版もあるようですが、使用前にご確認ください。

設置は簡単。ヘッダー内で「wysiwyg.js」と「wysiwyg-settings.js」を読み込み
使用するIDの定義はWYSIWYG.attachとして (‘要素ID’,’ツールバー設定’) で完了。

<script type=”text/javascript” src=”scripts/wysiwyg.js”></script>
<script type=”text/javascript” src=”scripts/wysiwyg-settings.js”></script>
<script type=”text/javascript”> WYSIWYG.attach(“txw1”, full);</script>

ツールバーの設定は『wysiwyg-settings.js』に書き込みます。

基本的な設定として

要素の幅  [セット名].Width = “100%”;
要素の高さ [セット名].Height = “250px”;
要素内の基本スタイル [セット名].DefaultStyle = “font-family: sans-serif; font-size: 14px;”

ツールバーのカスタマイズ。
デフォルトのツールバーは上から[0]、[1]の2段になっています。
それぞれの段に入るツールは『wysiwyg.js』内に『this.Toolbar = new Array();』として書いてあります。
区切り線も入れられるようで、”seperator”と入れれば縦線が入ります。

そして、これを踏まえて「wysiwyg-settings.js」に書き込めば専用のツールセットが出来上がります。

書き方は
[セット名].full.Toolbar[[段数]] = new Array([ここに””と”,”区切りでツール名を書く]

たとえば、fullと言うセット名の場合
full.Toolbar[0] = new Array(“font”,”fantasize”,”headings”, … );

デフォルトのツールバーに対して、任意の段・任意の並びに表示したい場合
[セット名].addToolbarElement(“[ツール名]”, [段], [並び(右から何番目)]);

たとえば、fullと言うセット名で3段目の一番右に『フォントサイズ』を置く場合
full.addToolbarElement(“fontsize”, 3, 1);
とすればOKです。

さて、このエディタ、1つ大きな欠点があります。
Chromeに非対応です。

画像の挿入など画像に関わる部分を使用しないのであれば
2020行目付近にある

if ((navigator.userAgent.indexOf(‘Safari’) != -1 ) || !document.getElementById || !document.designMode){

をコメントアウトして

if (!document.getElementById || !document.designMode) {

を新しく追加すると”エラーは出なくなります”


撮影事例(ネコ編)

先日、梅雨の合間をぬって、カメラマンとサイトの制作で利用する写真の撮影に行ってきました。

以前も記事を載せましたが、弊社ではWEBサイト制作の際、専属カメラマンによる写真撮影を行なっております。

http://agn.jp/blog/?cat=26

WEB用には低解像度でも十分と言われていた時代もありましたが、近年は回線が速くなり、PCの画面は大型・高解像度化、携帯サイトもガラケーからスマホへと、よりリッチに見せる写真が求められています。サイト制作において写真にこだわりのある方は、ぜひ弊社までご相談ください。さらに一眼レフによる撮影以外にも、特殊撮影として、ドローンを使った空撮や、360°記録する全天球写真などにも対応しております。

今後当ブログでは、定期的に撮影事例を掲載していきたいと思います。

今月は撮影の合間に撮られたネコ達の写真をおたのしみ下さい。

neko1

某浴場の看板ネコ

neko3


制作事例 クリスタル倶楽部様

新潟市エステティックサロン クリスタル倶楽部

新潟市のエステティックサロン クリスタル倶楽部様
開業20周年を迎えられた新潟駅前の美容サロンです

公開 2015年6月1日
URL http://crystal-club.co.jp/

●リニューアル目的
・デザインの刷新
・レスポンシブ対応
・コンテンツの全面見直し


ブラウザ初心者がOperaを使ってみた

150617

みなさんはメインブラウザ、何を使っていますか?

私はというと、使い始めたきっかけを忘れるくらい昔からFirefoxを使ってきました。
他のブラウザはサイトの動作や表示チェックくらいで、これまで本格的に使用したことがありませんでした。

先日職場でMacの入れ替えがあり、それを機に他のブラウザもなんとなく試してみることに。
そんなとき、お隣の先輩から「Operaいいよ。マイナーだけど」というおすすめを思い出したのです。

Operaとは?

Opera(オペラ)は、ノルウェーソフトウェア開発会社、オペラ・ソフトウェア (Opera Software ASA) によって製作されているウェブブラウザである。 (引用:Wikipediaより)

Wikiによると、普及率は0.6-1.0%ということで…やはりあまり身近とはいえないブラウザのようですね。

人が使ってないものをどうせなら使ってみたい。
そんなあまのじゃく心から、Operaをメインブラウザとして使ってみることにしたのです。

という訳で、以下Operaを3ヶ月ほど使用してみた感想です。
なにぶんブラウザに関しては初心者ですので、いつもの記事よりゆる〜い気持ちで読んでいただけたら幸いです…。

※macで使用した際の感想です。
※Opera 30.0

続きを読む ブラウザ初心者がOperaを使ってみた


theta360.comの埋込み画像をwordpressでlightbox風に表示する方法

前回、ワードプレスにプラグインを導入することで、直接全天球写真をアップできるようにしましたが、安定した閲覧環境を考えると、リコーのサービス、theta360.comも外せません。今回は、theta360.comの画像を記事に埋め込みつつ、更にlightbox風表示にも対応してみたいと思います。 続きを読む theta360.comの埋込み画像をwordpressでlightbox風に表示する方法


WordPressの無料テーマAttitudeの使い方

18

1.WordPressの無料テーマAttitudeの使い方
2.WordPressの無料テーマAttitudeの使い方(固定ページ活用方法)
3.WordPressの無料テーマAttitudeの使い方(フッターエリア使用方法)

以前、「WordPressで無料テーマAttitudeを使ってのサイト制作」を書いたところ、
思いのほかアクセスがあったので、WordPressの無料テーマAttitudeの使い方を
3回に分けて詳しく説明していきたいと思います。
再度、無料テーマAttitudeの説明しますので以前の内容と重複する箇所がありますので、ご了承ください。今回も、初心者の方もできるように、CSSの変更は行いません。
サイト内容は前回と同様の内容で行いたいと思います。

制作サイト

業種:歯科医院
ページ数:10ページ程度

グローバルメニュー
・トップページ
・院長のあいさつ
・診療科目
—一般歯科
—小児歯科
—口臭歯科
—予防歯科
—歯周病
—ホワイトニング
・初めての患者様
・アクセス
・お問い合わせ

 

完成サイトのトップページを元に説明していきます。

28

ちなみに無料テーマAttitudeはレスポンシブ対応なので
スマートフォンだとこんな感じに見えます。

2

 

はじめに
無料テーマAttitudeはブログ用のテーマですので、
コーポレートサイト用のテンプレート切り替える必要があります。

テンプレートの設定

固定ページの作成

新規にページを作成します。記事タイトルを記入、テンプレート欄で「Business Template」を選択、【公開】ボタンを押します。
本文は空白のままでOKです。

7

作った固定ページをフロントページとして使用
ダッシュボード / 設定 / 表示設定

今作った固定ページをトップページに設定します。
フロントページの右側にあるリスト内から指定し設定を保存します。

8

そうすると、コーポレートサイト用のテンプレート切り替わります。

 

ページレイアウト設定

ダッシュボード / 外観 / Theme Options / Design Options

9

サイト全体の幅の設定 (Site Layout Options)
Narrow Layout → 狭いレイアウト
Wide Layout → 広いレイアウト
基本のページレイアウト設定 (Default Layout Options)
No Sidebar → サイドバーなし
No Sidebar, Full Width → サイドバーなし全幅
No Sidebar, One Column → サイドバーなし1カラム
Left Sidebar → 左サイドバー
Right Sidebar → 右サイドバー

※ページごとにレイアウトを変更することはできます。

背景の設定

ダッシュボード / 外観 / Theme Options / Design Options / Custom Back Ground

全幅のレイアウトを選択していると意味がないですが、
背景に画像設置や背景色変更ができます。

10 11

 
ヘッダー、メニュー、スライダー
3

 

1.タイトル部分

タイトル形式
ダッシュボード / 外観 / Theme Options / Design Options / Custom Header

12

・Header Logo
ロゴ画像を設定できます。

・Show
Header Logo Only → ロゴ画像のみ表示
Header Text Only → テキストのみ表示
Disable  → 非表示

・Need to replace Header Image?
ヘッダー画像変更

・Hide Searchform from Header
検索窓の有無

※ロゴの部分をテキストのみにする場合
ダッシュボード / 外観 / カスタマイズ / サイトタイトルとキャッチフレーズ

5

サイトタイトルとキャッチフレーズを入力します。

 

2.ソーシャル
ダッシュボード / 外観 / Theme Options / Social Links

6

使用しているソーシャルサービスのURLを入力します。

Facebook
Twitter
Google Plus
Pinterest
Youtube
Vimeo
LinkedIn
Flickr
Tumblr
Myspace
RSS

 

3.メニュー
ダッシュボード / 外観 / メニュー

13

必要なメニューを設定して
テーマの位置 Primary Menu にチェックを入れます。

 

4.スライダー
無料テーマAttitudeで使用しているスライダーは、
固定ページもしくは投稿ページのIDを設定して表示します。
画像はアイキャッチ画像を使用し、
タイトルと本文の一部を表示します。

15 16

 

スライダーの基本設定
ダッシュボード / 外観 / Theme Options / Featured Post / Page Slider / Slider Options

14

・Disable Slider
表示、非表示

・Number of Slides
スライド枚数

・Transition Effect
画像切替の効果

・Transition Delay
スライド時間

・Transition Length
切替時間

スライダーの内容設定
ダッシュボード / 外観 / Theme Options / Featured Post / Page Slider / Featured Post/Page Slider Options

17

IDを設定することによりトップページにスライダーが表示されます
以上でヘッダー~スライダーまでの使い方になります。

次回は固定ページなどの扱いを説明します。


制作事例 (株)しゅんあぐり様

しゅんあぐり

農家が潤い、生活者も喜ぶ。そんな農業スタイルを仲間たちと作り上げたい。

公開 2015年6月5日
URL http://www.syun-agri.com/
TYPE コーポレートサイトリニューアル

●リニューアル目的
・デザインのリニューアル。
・ページ構成を見直し、ユーザビリティの向上。
LINEスタンプと合わせて制作