権太郎工房様のWEBサイトを作成させていただきました

佐賀県藤津郡太良町で多良木覆工業有限会社という木工工房を経営していらっしゃる野副様からご依頼をいただき、権太郎工房ブランドロゴからWEBサイトまで一式デザインのお仕事をさせていただきました。

権太郎工房様は、一般のお客様への小売から企業様向けの大量生産、1品ものの製作まで木工製造・販売をされています。

野副様は何年か前に友人を通じてFacebookで友達になっていただき、その頃に一度直接お会いしとても信頼していただいて、その場でWEBサイトを作ってほしいと言われていました。

まずはロゴデザインから始めさせていただいています。
木工工房ということで木をイメージしたマーク、ブランド名はアルファベットでとのことでした。
丸いマークに関しては木をイメージした言葉をノートに書き出し、最終的に『切り株と葉、G』をイメージしたマークとさせていただいています。

このマークは今後権太郎工房様で作られるGontaroブランドの製品全てに使用されるとお聞きしています。
権太郎工房ロゴ 続きを読む

WordPressのビジュアルエディターの文字化け

2014年5月27日時点での構築中のWordpressを使用したWEBサイトでのトラブル。

いつからかChromeのみで投稿画面のエディターが下記のように化けてしまう。

エディターの文字化け

FirefoxやSafariではこの症状は起きない。

この部分はWEBフォントを使っているんだってね。今更ながら知りましたですよ。

Googleさんに頼ってみたものの、これといった解決策が見つからない。

この症状はダッシュボードの上部の鍵や家のマークにも出ていて(下記の画像は直したもの)化けてしまっていた。

続きを読む

R&S FOODS様のWEBサイトを作成しました

食品商社である有限会社アールアンドエスフーズ様のWEBサイトを作らせていただきしまた。

有限会社アールアンドエスフーズ様は食品企画・製造・販売・輸出・輸入をされており、世界中の食品を取り扱っていらっしゃるやり手の商社様です。

またカニのシーズンになると、岐阜県関市という海のない土地にもかかわらず、カニをかなり販売していらっしゃるやり手の商社様です。

今回アールアンドエスフーズ様からの要望は、Facebookと連動ということでしたので、通常のWEBサイトのニュース・トピックはFacebookページと連動させ、新たにブログを作成し、代表取締役社長の池村様のFacebookに連動させるという方法を取らせていただきました。

デザインは当方におまかせいただけるということで、原稿をいただき、好きなようにやらせていただきました。

おまかせではありますが、食品を扱っているということで、『清潔な感じ、会社のイメージカラーである黄色を使って欲しい』とのことでしたので、できるだけシンプルに、清潔感を出すようにデザインしました。

ニュースをご自分で書くということでWebサイトはWordpressで作成しています。

ブログもWrdpressのマルチサイト機能を使用し、新規でWordpressで作成しています。

Webサイトのトップページはニュースとブログのタイトルが入るようにしています。

R&S FOODSトップページ

続きを読む

Simple Facebook ConnectでFBと連携

以前このブログはWordbookerというプラグインでFacebookと連携していました。

またサムネイルはOpen Graph Proというプラグインで表示させていましたが、facebookの仕様変更が頻繁なためか、いろいろと不具合があったので、思い切ってSimple Facebook Connectというプラグインに変更してみました。

先日発表されたFacebook公式のWordpress用プラグインを使ってみました。相当高機能なのですが、タイムラインの表示が何か変であること、サムネイルの表示設定がないということ、現状ではそこまで高機能なものは必要ないということで見送りました。

Simple Facebook Connectに関してはプラグインをダウンロードしてインストールしてやるだけなので難なく出来るのですが、Facebook側の設定が必要になるのでそのあたりがWordbookerと比べて面倒です。

Simple Facebook Connectを使用するためにはFacebookのアプリケーションIDが必要となります。
Facebook側でアプリケーションの作成をしますが、そのあたりは詳しく書かれている方がみえますのでそちらを参考にしてみてください。

続きを読む

WordPressでjQueryを使用した時のコンフリクト対策

現在ある会社のサイトを作っている。

スタティックなHTMLで書いていたときには問題なかったjQueryのライブラリの一つであるspritmenuがwordpressへ持ってきた途端に動かなくなった。

元のHTMLで動いていたので、何かとコンフリクトしたと思われたので、とりあえずコンフリクト対策したのだが、

なぜか下記の方法では動いてくれない。

<script type="text/javascript">
jQuery.noConflict()(function($){
var j$ = jQuery;
</script>

以前MODxのサイト(MODxに元々mootoolsが使われている)を作っていたときは、上記の方法で回避したような気がするのだが、今回はなぜか回避できない。

続きを読む

FunalogueのWebサイトを準備中

http://funalogue.com/に準備中のお知らせをやっとアップしました。

たった1ページながら、Firefoxで確認しながらやっていました。でも、どうにもIE6、IE7でうまくいかず、2〜3日IE6、IE7は未対応状態になっていましたが、なんとか対応しました。

もうE6は対応しなくていいかな?

Google Analyticsを見ている限りでは、IE6もまだそれなりにありそうですね。

ああ、IE6ってやつは・・・。

メインMacにWordPressを持って来た

G4サーバーにインストールしたMacPortsに、OpenSSLがどうしてもビルドできない。

OpenSSLのビルドでこけるので、Apache2も入らない。もちろんMySQLもPHPも。

PowerPCのXcodeのバージョンアップも望めないので、とりあえずメインのMacにMAMPをインストールしてWordpressをインストールした。

ただ、インポートしても画像が入らない。どうしたらいいのかわからない。

とりあえずもう一度アップロード?

点線消し

CSSでtext-indent:-9999px等を指定してテキストを画像置換えのときに、
Firefoxでリンクをクリックすると左の端から点線が出る時の消し方。

a {
 /*¥*/
 overflow: hidden;
 /**/
 }

【ポイント】

  • outline: noneで点線を消すとタブでフォーカスを移動させても
  • どこにいるか分からなくなるのでアクセシビリティが低下するためoverfow: hiddenを利用する。
  • MacIEでoverflow: hiddenを使うとリンクが消失するためハックでMacIEには適用させない。
  • 点線そのものを消す方法もあり。
    ここを参考にさせてもらいました。

    CSS TIPS
    http://css.webcreativepark.net/tips5

    a:focus{
     outline:none;
     }

    忘れないようにしとこ。

    li aでのIE6の位置ずれ

    写真を敷き詰めた時に、li aで組むとIE6で見るとちゃんと横並びにならない。

    自分の子供の少年野球チームなので、対応しなくてもいいかなとも思いましたが、

    IE6に対応してみました。

    続きを読む

    Movable Type4.2 インストールの続き

    とりあえずウィザードに従ってやることにする。

    http://localhost/mt_test/mt-wizard.cgiにアクセス。
    すると下記のperlモジュールもあるといいとか出てきた。

    IPC::Run – MTのイメージドライバとしてNetPBMを利用する場合に必要となります。
    GD – アップロードした画像のサムネイルを作成する場合に必要となります。
    Mail::Sendmail – SMTPサーバーを経由してメールを送信する場合に必要になります。
    DBD::SQLite – SQLiteデータベースを使うにはDBD::SQLiteのデータベースドライバが必要です。
    DBD::Pg – PostgreSQLデータベースを使うにはDBD::Pgのデータベースドライバが必要です。
    必須バージョン:
    DBD::SQLite2 – SQLite (v2) データベースを使うにはDBD::SQLite2のデータベースドライバが必要です

    続きを読む