ホームページ制作プログラム構築ならソースマリン Source Marine

遅ればせながら

Sat, 30 May 2015 05:29:29 +0900

福岡市議会議員の大森一馬議員が無事二期目当選を果たしましたヾ(＠⌒ー⌒＠)ノしかも一万票を越えるトップ当選でした！今回は運動員の皆さんがとってもとっても頑張っていましたd(￣￣)

Windowsの横暴

Thu, 21 May 2015 00:23:24 +0900

出先での一コマ＿φ(￣ー￣ ) さぁ！帰ろうと思ってPCの電源を切ろうと思ったら(￣◇￣;) 電源を切らないでくださいとかありえない∑(ﾟДﾟ)っというか帰れない((((；ﾟДﾟ))))))) アップデートしないといけないのはわかります！わかるけど、アップデートするタイミングはこっちで選ばせて！この後小一時間動いてました・・・。

なぞが解けた！

Sat, 31 Jan 2015 11:08:42 +0900

水原希子出演『SUZUKIワゴンRスティングレー』のCMは誰が歌っているんだろう？っと思いやたらと前に検索していたのだが、やっと答えが出てきました。松尾レミさんと言う方が歌っているとのこと。だけど、不思議なものでいざちゃんと聞いてみると、CMの時ほどの感動が・・・。ない！

福岡市議会議員大森一馬氏事務所開き

Sat, 24 Jan 2015 03:15:37 +0900

お世話になっている大森議員のお手伝いとして今回も選挙事務所に入らさせていただくことになりました(￣^￣)ゞハードな日々の始まりです(￣◇￣;)

友人との再会

Mon, 12 Jan 2015 05:40:27 +0900

最近ちょいちょい使うようになったLineで中学・高校時代の友人から連絡が入って、飯でも食べようと言う事で10何年ぶりぐらいに会って焼き鳥を食べました。同じサッカー部で高校ではアニメ部に入ってしまった、タッキー君は相変わらずタッキーだけど変わらずいいやつでした（＾ｖ＾）ここ最近の話から、中学の時の話まで大いに盛り上がりました！早く結婚しなさい！タッキー！(笑) 写真一枚ぐらい撮っておこうと思ったらすっかり忘れてました。普段からそういう習慣がないと忘れますね^^; ちなみに僕はアニメ部には入っていないです(V)o￥o(V)

デザインにおける緩急

Wed, 15 Oct 2014 12:32:14 +0900

先日とある会社のキャンペーンで、ポスターを持ってきた方の一言「このポスター全然めだたないんだよなぁ！」見た感じワインレッドとゴールドで、いい感じに仕上がったポスターでした。まあ、確かに色合いは渋めな感じではあったのかもしれないですが、「目立たない」という事はないように思えました。では、このポスターを目立たせるためにはどうしたらいいのでしょう？僕だったらあえて、ギラギラ目立ちまくるポスターの中に並べます。それは「緩急」がポイントなのです。野球で、ものすごくストレートが早いピッチャーがいたとします。165キロは出しそうな勢いです！最初はその剛速球でバッタバッタと三振の山を積み重ねます。しかし、それぞれのバッターが三回目の打席に入る頃には打たれ始めます。なぜでしょう？それは、バッターの目が剛速球に慣れてきたからです。どれだけ速い球が投げられたとしても目が慣れてくればそんなに速くは見えなくなるのです。これを音楽に例えるとこうなります。

最初の5分ぐらいは「すげぇー」っと感動を覚えますが、そこから先はなんだかもぅ・・・。(笑) すごいですけどね！めちゃくちゃすごいです！ほんとに165キロ出てるはずです！人は、相対的に物事を見ています。周りがあるから個が活きるのです。だから、何においても引き立て役っていうのはあるものです。この話を先ほどのポスターの話に置き換えると、周りのギラギラしたポスターが見事なまでの引き立て役をかって出てくれているのです。間違いなく目立ちます！ポスターの話だけで言えば、要は貼る場所ですね。この会社の人はそこに気付けばこのポスターはものすごく活きたポスターになったと思います。ポスターどうしの話になってしまいましたが、これはポスターの中でも言えることで、「強調したい部分」と「目立たなくてもいい部分（引き立て役）」をより明確にすることでリズムが生まれて、伝えたい事がはっきりと伝わるいいデザインになると思います。

売れるデザインと好きなデザイン

Sat, 11 Oct 2014 12:17:32 +0900

先日のデザインについてのお話からちょっと広げて、売れるデザインと好きなデザイン。では、どんなデザインが売れる（商売繁盛な）デザインでしょう？機能的に使いやすいというのは大前提ですが、カッコいい又は可愛いデザイン？それとも、フラットなデザイン？どちらも正解です。ただし、これには条件があります。カッコいいデザインは、コンセプト・ターゲットがはっきりしていて、これが好きな人しかこなくていい！という場合。フラットなデザインは、幅広くたくさんの人（老若男女の意味）にみてもらいたい場合。よく、「好きなデザイン＝売れるサイト」と考える方がいますが、そいう人に限ってターゲットがぼやけてたり、老若男女にみてもらいたいというような事を口にします。これでは全くの本末転倒！支離滅裂！何にもならないです。しかし、自分の好きなデザインというのはその人のカラーを「これでもか！」というぐらいに反映できるのでターゲットを絞って作りこむと実はものすごく最強のデザインと言えます。逆にフラットなデザインはたくさんの人が当たり障りなくみていくので今一つ決定打に欠けます。（記憶に残りにくい）話をまとめると、何をおいても「誰とどんな人に向けてのデザインなのか？」と言う所を明確に決める。ここにつきます。

デザインについて

Tue, 07 Oct 2014 12:51:33 +0900

とんでもなく久方ぶりの更新です。さてさて、今日はデザインのお話！みなさん、デザインというと「かっこいい！」とか「かわいい！」っというのを想像すると思います。それはけして間違いではないです。だけど、正解でもないです。某クラウドソーシングサイトのコンペでこんな依頼が載っていました。「誰が見てもカッコよく、スタイルがいいデザインで！」さぁ、どんなデザインをイメージしますか？黒い背景でシルバーに輝く重厚なデザイン？手書き風に描かれたグランジ系のデザイン？他に？・・・まあ、上げていけば後5,6個は出てくるでしょう！しかし、どれが一番かっこいいですか？多分決められないと思います。なぜなら賛否両論あるからです。これは極端に言えば、「犬が好きか？猫が好きか？」みたいなものです。ひとそれぞれ感性があり個性があります。よって感じ方もひとそれぞれです。つまり誰もがなっとくするカッコいいデザインなんていうのは作ろうと思っても作れるものではありません。「誰が見てもカッコよく、スタイルがいいデザイン」なんていうのは実は到底不可能な話なのです。結局この依頼はどうなったんでしょうね？それはさておき、話を戻しますが、「このデザインものすごく好き！」っというデザインは「このデザインは絶対嫌い！」という両者を確実に生み出します。間違いなく生み出します！では、つまるところどうすれば「みんなが納得するいいデザイン」なのでしょう？実は、フラットなデザイン（感性的に）っというのが、当てはまると思います。どういうデザインかというと、Yahoo！Japanです。みなさん何も考えないで普段使われていると思いますが、デザインという考え方をしたらどうでしょう？「かっこいい！」とも「かっこ悪い！」とも思わないと思います。（多少はあると思いますが）いかがでしょう？少なくとも「このデザインは嫌い！」という人はいないと思います。まあ、これも突き詰めれば賛否両論なのでしょうけど。

jQueryで作るナビゲーション

Wed, 01 Oct 2014 20:04:46 +0900

すごく久方ぶりの更新です。最近、企画だけやたらと盛り上がって自分のやるべきことをしないまま、最終的に無駄なものを作らされて、おもいっきり振り回されたあげく、ちゃんとお金を払わない人間にだまされてる今日この頃です。こういう人間を見分けるにはどうしたらいいんでしょう！そんなことはさておき！最近ナビゲーションのデザインやらレスポンシブルやらで悩んでいるときに見つけた便利なjQueryです。

Slidebars

横からにょきっと出てくるサイドバーです。スマホサイトによさそうですね！ Demo | Source

Pushy

こちらも横からにょきっと出るタイプ。注目すべきはコンテンツ部分にブラックのオーバレイをかけてナビゲーションを目立たせる優れ物！ Demo | Source

Slinky.js

THE なぞ！(笑) スクロールすると見出し部分が付いてきます。だ・け・ど！肝心のリンクがないのはなぜだ！っというか、こんな感じでスクロールするごとにこんだけ積み重なったら見える部分がなくなって余計使いにくいし！(笑) まあ、リンクは入れればいいと思うけど、もっとも使えないブラウザIEで使えないという(笑) いよいよダメです！まあ、たまにはこんなのもね！ Demo

jQuery pop menu

これは素晴らしい！こういうポップアップナビをやりたかったんですよ！ Demo | Source

jQuery Square Menu

すごい！けど！何か足りない！そんな感じの一品。 Demo | Source

Perspective page view navigation

どこかWindows8を彷彿とさせるように感じるのは僕だけでしょうか？だけど、なかなかかっこいいです。使いようによってはいい仕事しそう！元に戻りたい時に表示されているスクリーンをクリックすると戻れるというのが分かりにくいかなぁっというのはありますが、こういうの好きです！ Deomo | Source

Naver

一見なんの変哲もないただのナビゲーションですが、実はレスポンシブ対応で縮小すると自動的にナビゲーションがスマホサイズ仕様になります。これはコーディングが楽ですね！ Demo | Source

SlickNav

スマホ用のナビゲーションです。びよんびよんっとなるギミックが楽しいスクリプトですね。 Demo | Source

SlimMenu

階層メニューが横に広がるタイプのナビゲーション。確かに縦に長くなると少々うっとうしい感じになるので、スリムに見えますね。しかし、階層が深くなりすぎて横にはいりきらなくなったらどうなるのでしょう！ Demo | Source

Horizontal Nav

横幅いっぱいに伸びて適度に各横幅を調整してくれるスクリプトレスポンシブまで対応してたらよかったのかも・・・。 Demo | Source

Mmenu

こちらもスマホで使えそうな横からにょきっと出てくるナビゲーションスクリプト。スワイプ対応でスマホサイトにはなかなかよさそう。カスタマイズも簡単と書いているが、どうでしょう？ Source

Sidr

これは過去に使ったことがあるスクリプトですね。なかなか良いんだけど、古いアンドロイドは未対応でした。

Menu Aim

こちらは、カーソルを合わせるとサムネイルが出てくるスクリプト。すごいけど、多分使えない！スマホにも対応みたいになっているけど、タップした時の挙動を確認していないので不明。っというか、スマホはタップした時点でページ飛んじゃうからね。 Demo | Source

まとめ

スマホサイトで使うならjQuery pop menuやSlidebarsがよさげですね。個人的にはPerspective page view navigationも使いようによってはいい感じがしそうな気がします。

CSS で3D BOX

Wed, 04 Sep 2013 20:15:05 +0900

どうタイトルをつけたものか迷いましたが、読んで字のごとくCSSで3Dつくるやつです。少し前まではこういったことはFlashの十八番だったんですが、もはやCSSとHTMLで出来る時代になってしまいました。まあ、やる人がやればゲームまで作ってしまうみたいです。デモダウンロードかなりお手軽ですごくて、こういったものは大好きですが、これはこれで少々使い処が難しそうですね。いつか使う日がくるかもということで。

IE10だけに効かせたい！

Sun, 11 Aug 2013 21:33:52 +0900

はい！またまたやってきました！僕の大っきらいなIE！普段あまり使わないでいたらいつの間にかOSのマイナーバージョンアップと一緒にIEがバージョン10に上がっていました。まあ、そのあたりはほっといてもいいんです。ついでにVideoタグも使えるようになっていたのでやっと普通のブラウザに追いついてきたかな？っと思いきや！やっぱりでました！自分勝手なIEの挙動！バージョンアップするたびに、挙動を変える方がめんどくさいと思うんですけどね。そんなこんなで、IE10対策です。今回からなんと！

<!--[if IE ]>
ＩＥだけのスタイル
<![endif]-->

っというのが使えなくなっているのです！もぉー、あほというかなんというか。まあ、嘆いていてもしょうがないので先へ進みましょう。色々調べてみましたが、ちゃんと効いたのがこれ！まず、javascriptを追加。

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

これを入れると、IE10だけに

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

というのが追加されます。後はcssで

html[data-useragent*='MSIE 10.0'] #promotion {
  backgroudn: none;
}

ってしてしまえば解決！

Jazz up a Static Webpageの使い方

Sat, 16 Feb 2013 19:59:13 +0900

以前、オシャレなヘッダ画像の演出ができるJazz up a Static Webpageでご紹介したJazz up a Static Webpageの使い方。正式名称はどうなのかわかりません！実は！(笑) そんなことはさておき、中身に入って行きましょう。このスクリプトはｊQuery等の外部ライブラリは使わないです。スクリプトの読み込みは本体のプログラムとプログラムを走らせる関数を書くだけ。

<script type="text/javascript" src="js/skrollr.js"></script>	
<script type="text/javascript">
skrollr.init({
	forceHeight: false
});
</script>

意外と簡単！そして、HTMLこちら

<header class="band" data-0="background-position:0px 0px;" data-500="background-position:0px -250px;">
	
<div class="container">
	
<div class="columns sixteen" data-0="opacity: 1" data-180="opacity: 0">
						
<h1>Meaningless Pap</h1>
				
<a class="button" href="http://webdesign.tutsplus.com/author/ian-yates/">by Ian Yates</a>
			
</div><!--/ columns-->	
		
</div><!--/ container-->		
	
</header><!--/ band-->

このサンプルの構造上スクリプトが働く部分がヘッダになるので<header>で書いていますが、別にこの部分は<div>でも問題ないです。そして、この<header>に書いてある物が重要なのです。「data-0="background-position:0px 0px;"」が背景の基準点。「data-500="background-position:0px -250px;">」がdata-500でbackground-position:0px -250px;にしますということ。これと同じく、<div class="columns sixteen" data-0="opacity: 1" data-180="opacity: 0">の中でやっていることが以下。「data-0="opacity: 1"」で透過の度合いを設定（これは1）「" data-180="opacity: 0">」がdata-180でopacity: 0にしますということ。この辺が扱えれば自由にあつかえると思います。この場合背景が下がって、文字がフェードアウトしていきますけど、その逆で上がってきてフェードインしたり使い方しだいではいろんなところに仕掛けを作ることができそうです。そして、CSS！サンプルのCSSはやたらと色々書いていますが、肝心なのは以下。

header.band {
	background-image:url(../img/background.jpg);
	background-size:100%
}

ここで背景を指定して枠ぎりぎりに画像を拡大しているんです。ここの背景がdata-500="background-position:0px -250px;">で動いているということです。これでちょっと変わったヘッダの演出が自由自在にできるはず！が、しかーし！予測はしていたけど、iPadやらスマホやらで見ると動きがカクカクする上にサイズが変化するので見栄えが非常に悪い！（まあ、サイズに関してはFuid Glid Layoutにすればなんとかなりそう）この人たちには適用されないように工夫。

if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') != -1 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	 jQuery('div.band').css( 'background-position','0px 0');
	}else {
		skrollr.init({forceHeight: false});
}

これは何をやっているかというと、iPhone・iPad・iPod・Android端末だったらdiv.bandの背景位置を別途指定して、それ以外だったら（PCのみ）通常営業しますっということをやっています。 iPadでは検証済みですが、その他はわかりません！まあ、この中の値をゴニョゴニョすればなんとかなると思います。ちなみに、Androidのタブレットとスマホを見分けるには「mobile」と指定するとできるとな！あっ！これはjQuery使ってやってるからこの技を使うならjQueryの読み込みを忘れずに！

WordPressでAdobe Edge Animateを取り入れる

Fri, 08 Feb 2013 12:36:26 +0900

これはなかなか使えそうな感じがしますね。

心機一転リニューアル

Sat, 12 Sep 2009 15:55:06 +0900

つい先日、サーバ移転を機にSource Marineとの外観の統一を行うべくサイト内をリニューアルしました（一部まだ途中）更新は毎日したほうがいいとお客さんには言いながら、自分は忙しいものでこのサイトも約一年近く放置してしまっていて(^^;いやはや・・・。しかし、努力の甲斐あってかGoogleで「福岡ホームページ制作」「ホームページ制作福岡」「福岡ホームページ制作会社」「ホームページ制作会社福岡」は一ページ目にランクされるようになりました。提携会社のwise:worksさんもGoogleで「福岡デザイン事務所」「デザイン事務所福岡」で一ページ目にランクされています。その他、お客様サイトも狙ったキーワードで順調に上位表示を獲得しつつあります。ここで、改めて実感したのがサイト内の最適化と外からのリンクの質です。この中でも特に、サイト外からのリンクは「大いに順位に影響してくる」を実感しました。

WordPressとMovableType

Thu, 30 Oct 2008 18:14:59 +0900

言わずと知れたコンテンツマネージメントシステムのブログツールです。世界的シェアでは、WordPressが群を抜いているようですが、日本では五分五分といったところでしょうか？最近では、オープンソース（無料）ということもあって、WordPressのシェアが伸びつつあるようです。機能という側面からみた場合、どちらも大差がないような印象を受けます。唯一の違いが動的なページ生成と静的なページ生成です。この「動的」「静的」とは、ページへのアクセスが発生するたびにページのデータとそれに合わせたレイアウトを呼び出してページを生成するのが「動的ページ生成」逆に、あらかじめそのページ用のデータが出来上がっていて、そのページへアクセスするのが「静的ページ生成」ということです。どちらも表側に見えている部分は同じなのですが、検索ロボットからみた場合は違うようです。それというのもアクセスが発生して初めてページが生成される動的ページのデータをたどれない、またはたどりにくいといった状況がまだあるようです。僕は、以前MovableTypeでブログを運営していましたが、とある事情からWordPressに変更したのです。当然MovableTypeと同じようなアクセス状況が発生するであろうと思っていたのですが、これが全然違っていました。内容は全く同じものを載せていたにも関わらず、Yahoo!経由のアクセスが全くないのです。サイト自体の最適化は、以前と同じかそれ以上の対策を施していましたが、Yahoo!は全く来ません。そこで、Yahoo!の情報を調べてみるとやはり、

"クローラーはウェブページを巡回する際、おもに静的なリンクをたどるため、動的に生成されるリンクは利用しないことをおすすめします。"

ということが原因だったようです。こうやってみるとWordPressはSEOに若干不向きという印象を受けます。しかし、WordPressで運営しているサイトが上位に表示されることも間々あるので一概にWordPress＝SEOはNGとも言えません。それというのも、「おもに静的なリンクをたどるため」とありますが、これは、裏返せば「あまりたどらないけどそのうちたどります。」ともいえるでしょう。事実最近になって少しずつYahoo!経由のアクセスも増えつつあります。要はYahoo!においては時間がかかるということのようです。

文字装飾

Mon, 20 Oct 2008 14:32:22 +0900

ワードプレスでは様々な文字の装飾ができる便利なシステムがついています。
左から順番にご紹介。

テキストを太字表示させるボールド(B) テキストを斜体表示させるイタリック(I) テキストを打ち消し表示させるStrike-through (ABC) リストで表示させる

リストで表示
リストで表示

番号付きリストで表示させる

番号付きリスト
番号付きリスト

引用で表示させる

引用表示

テキストの行揃え左揃え

中央揃え

右揃え

フォーマット（段落の設定）

アドレス

pre

見出し

アンダーラインを引くなどなど、いろいろなものが用意されていますので、試してみましょう。

メディアを追加（ビデオ）

Tue, 02 Sep 2008 22:41:10 +0900

ワードプレスは記事の中にムービーを取り入れることもできます。直接ムービーをサーバにアップロードしてムービーを流すこともできますが、サーバの負荷が大きいためあまりおすすめできません。そこでYou Tubeと連携してムービーを取り入れていきます。まずはYou Tubeへアクセス、好きな動画を検索します。今回は「TOTO」のロザ－ナを使ってみます。お好みの動画にアクセスすると下記画像のような画面が出てきますので、赤で囲っている部分のソースをコピーします。コピーしたソースを今度は記事に貼り付けます。しかし、コピーしたソースを通常のビジュアル領域に貼り付けても動作しないので、HTML編集画面に切り替えてソースを貼り付けます。これで完成です。動画は記事の中で動作しますが、実際にムービーが稼動するのはYou Tubeが動かすのでサーバの負荷は気にしなくても大丈夫でしょう。オリジナルのムービーを配信したい場合は、You Tubeのアカウントを取って動画をアップロードしてから使えば、配信できると思います。

メディアを追加（画像）

Fri, 22 Aug 2008 14:50:42 +0900

ブログ記事の中に画像を使うといろんなことがより伝わりやすくなります。まず、画像をサーバにアップロードします。投稿画面からメディアを追加という部分の画像を追加（一番左）をクリックします。すると上の画像のような画面が出てきます。ここからアップロードするファイルを選択で自分のPCの中に保存してある画像を選択します。次に画像のタイトルやキャプション、説明などの入力画面が出てきますがタイトル以外は任意なので、適当に入力します。次に、リンクURLという部分がありますが、これは画像をクリックした場合違う画面で写真だけを見せたり、新しいタブを立ち上げて写真だけを見せるためのURLになります。このあたりは不具合が多いので、html知識が無い人はそのままにしておいた方が無難です。次に、配置という部分がありますが、左を選択すると左寄せ中央を選択すると中央よせ右を選択すると右寄せになります。なしの場合はそのまま画像が貼り付けられます。次に、サイズという部分がありますが、これは先ほど選択した記事の中で表示する画像のサイズを指定します。この画像をクリックすると先ほど指定したリンクの部分へ飛んでいってフルサイズの画像を表示させることができます。画像が大きすぎて記事の邪魔になる時などは、便利です。そして、投稿に挿入をクリックすれば記事の中に画像が入ります。

記事の投稿

Sun, 03 Aug 2008 17:42:04 +0900

ブログ記事の投稿はワードプレスのもっとも基本と言える作業です。まず、管理画面にログインします。すると下記画像のような画面が出てきますので、新規投稿作成をクリックします。すると下記のような画面へ移動します。ここのタイトルと言う部分に記事のタイトルを入力します。次に投稿と書いてある下の空白領域に記事の内容を入れていきます。記事を入力する領域の上に文字を装飾したり、画像を入れたりする部分があります。この部分の細かな使い方は後ほど紹介します。記事の内容が書き終わったら記事の内容を入力する領域の横にある保存というボタンを押して記事の内容を保存します。（自動で数秒おきに保存していますが、いきなり公開ボタンを押すと時々不具合を起こします）そして、公開ボタンを押すと記事が投稿されてブログの中に表示されるようになります。ちなみに、記事の内容を入力する部分の右側にある記事の「すぐに公開する編集」という部分をクリックすると記事の公開日をしていできたり、記事の投稿日を改定したりできます。

いよいよインストール

Wed, 30 Jul 2008 15:54:07 +0900

wp-config.phpの設定が終わったら、wordpressフォルダの中身を全部公開するサーバのフォルダへFTPソフトを使ってアップロードします。例えば、http://source-marin.net/サーバの中でcmsというフォルダ内ワードプレスを動かそうと思った場合は、cmsというフォルダをサーバの中に作成してその中へアップロードします。もちろん、トップページで稼動させる場合は各サーバの指定するトップページのフォルダへアップロードします。次にファイルをアップロードしたフォルダへアクセスします。すると、上の画像のような画面が出てきますので、ブログタイトルにあなたのホームページタイトル（ブログとして使う場合はブログタイトル）を入れます。ちなみにこれは後で変更することもできますので思いつかない場合は適当に入れておいてください。後、メールアドレスにいつも使用するメールアドレスを入力ます。「このブログを Google や Technorat などの検索エンジンに表示されるようにする。」というところのチェックは早く検索サイトで検索したときに表示させたい時は、チェックを入れましょう。必要項目に入力したらWordPressをインストールをクリックします。さあ！終わりです！ユーザー名とパスワードが表示されるので忘れないようにメモ帳などにコピーして保存しておきましょう。ちなみに、先ほど入力したメールアドレスにもパスワードは送信されてきますので、保存しておきましょう。後は、ログイン画面からログインするとワードプレの管理画面へ入ることができます。これでインストールは終わりです。