ブログ

ブログボタンを作る時に考えた事

さて、今回はブログボタンを作った時に考えたことをつらつらと書いていこうと思います。
ブログボタン?そうこのブログへリンクするボタンの事です!

まあ、外部のサイトに貼るようなバナーってものではないので、
いってみればナビゲーションボタンって感じでしょうか。

ナビゲーションボタンといえば、上部に黒のバーにある個所ですよね。
その個所に本来は追加するべきなのかな?
とも思いましたが、今回は右のサイドメニューに追加することにしました。
何故かというと、スペース的にちょっと厳しいかなという事、
サイドメニューの上部も目立つ箇所なので、
クリックしてもらうという目的をじゅうぶん達成できるかなと思ったからです。

さて、それでボタンのデザインについてですが、
サイトのデザイン的にもあまりごちゃごちゃしたデザインではなくシンプルに
つくりたいというのがありました。

バナーなんかでも、文字を詰め込みすぎて何を伝えたいのかが
わからなくなっているバナーをよく見かけます。
にぎやかな感じが出てそれはそれでいいという場合もあるのですが、
今回はシンプルで(^^

結局は「無料お見積もり」のボタンと同じデザインにしました。

ただ、色も同じだとどちらのバナーも逆に目立たなくなり、
サイト的にも単調になりすぎてしまいます。

そこでどうのような色にするかです!
実際に試してみました。

まずはサイトの基本的な色がなんだったのか?
このサイトは白のバックに緑と黒の3色で構成しています。
基本の色は緑で、黒でサイト全体のイメージを〆る感じです。

さて、そういった事を踏まえてバナーの色を考えます。
まず赤です、緑の補色系ということでとても目立ちますね。
只、ちょっと目立ちすぎます。
そこまでブログボタンに目立ってほしいと思っていません。
何故なら他のコンテンツが目立たなくなるからです。

目立たせるというのは、相対的に他のコンテンツが目立たなくなるという事です。
ついつい忘れてしまいがちですね(^^;

次に黒系です。
ナビという事で、黒もいいのかな?
と思って試してみましたが、んーー。
どうしても唐突感が否めません。

ということで、「無料お見積もり」ボタンの色相を
少し変えてボタンを作りました。

少しだけ変えるというところがポイントです。
えっ本当か?w

サイト全体として、使っている色数が多くなると
どうしてもまとまりに欠けるサイトになってしまいます。
極力色数は同系色でまとめるという事が大切になります。

今回はバナーを作るという事を分解して解説してみました。
デザインをする時、瞬間的にこういった事を考えながらデザインをしています。

感覚的にこの色が良いかな?っていうあいまいなデザインはおこなっていません。
デザインにはひとつひとつ意味があります。
もちろんその考え方が正しいのかどうかは、目的によって変わります。
そのような目的を常に意識することが重要と考えています。

おっと、話がそれてしまったかもしれませんねw
今回はブログボタンを作った過程をご紹介しました。

だからなに?
という突っ込みはご勘弁ください(^^;

ソーシャルブックマークボタンを追加してみた

はてなやfacebookやTwitterや他にもいろんなソーシャルブックマークがありますよね。
やっぱりこういったボタンを付けるっていうのは大切な事ですよね!

何故?
それはブックマーク登録されると、
有益な情報としてブックマークしているのでリピーターとしてのアクセス数が増えますよね。
あと、ソーシャルブックマークはWEB上に共有されるので、そのWEBページからのリンクを得ることができます。
それは、SEO的にもとても大切な事ですよね。
リンクが多い=みんながそのサイトを支持している!
SEO的にこういう事はとっても重要なのですよね。

ソーシャルブックマークに登録して貰うって事ははそういった点からも
とても重要であることがうかがえます。

だからこそ、ソーシャルブックマークのボタンを付けるのは重要という事になるのです。
おっと、話がそれましたwww

ソーシャルブックマークボタンを追加するのに何かいい方法ないかな?
そんな感じで調べてみると、案の定というかもちろんありました!
プラグイン!!

「WP Social Bookmarking Light」ってやつです!
これかなり便利です!
早速インストールして適用してみました。

こんな感じです!

これ、プラグインをインストールして適用して
ちょこっと設定をしただけでこんな感じになります!

場所の設定、上・下・右・左
あと何をブックマークとして表示するか?
などなど簡単に設定できて簡単にボタンを追加できます!!

直接コードを書く必要がないんですよね。
本プラグインって便利ですねw

あっ、でもブックマークされるような記事を書かないと。。。
いい記事書けるようにがんばります!(^^;

プラグイン「Twitter Widget Pro」を入れてみた

Twitter のツイートを表示するのに「Twitter Widget Pro」を入れてみました。

プラグインを新規追加で「Twitter Widget Pro」で検索すると
そのプラグインが出てくるので早速インストール!
ついでに適用!

外観からウィジェットを選択してサイドバーに「Twitter Widget Pro」をはめ込みます!

その際に設定画面が出てくるので、適切に設定しましょう。

これは私のブログに設定したものです。
かなり適当に説明してますけど、
正直そんなに説明するほどでもないかw

こんな感じで設定して、
あとはCSSをいじって見た目をよくすればばっちりです。
HTML自体、他のウィジェットと同じ感じなので
CSSも比較的調整しやすいのではないでしょうか。

簡単だなー。
あとは素敵なつぶやきをできるかですね(^^;

冷やし中華始めました。

冷やし中華始めました。。。

おっと、違ったww
ブログ始めました!

WordPressで構築してみました。
Movable Typeはそれなりに構築経験があるのですが、
WordPressはこれまでテストサイトを作るなど少しさわった程度でした。

これからはやっぱりWordPressだろうという事で
本格的にやっていこうと思います。

今回WordPressに入れたプラグインです。

Akismet
スパム対策プラグイン。

WP Multibyte Patch
日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグイン。

Breadcrumb NavXT
パンくず生成のプラグイン。

My Category Order
カテゴリを並べ替えるプラグイン。

WP-PageNavi
ページングナビゲーション用のプラグイン。

Quick Cache
表示を早くするプラグイン。

3 / 3123
私がホームページを制作します
制作者写真 石田久人(イシダヒサト)
東京都足立区在住
1974年4月生まれ
インターネット業界に今年で9年目になります。大手制作会社などで勤務後、現在はSOHO(個人事業)として、ホームページ制作をさせて頂いております。