1500記事に到達しました。

12月 26th, 2011

昨日の記事で1500投稿になっていることに気が付きました。

前ブログ「バカ」の時からの累計数値なので結構な数にはなっています。

 

「ページを増やすと強いサイトが出来る」という話

ページを増やすと強いサイトができますよ・・・という話を聞くことがありますが、このサイトを見ているとどうもそんなことはないのではないかと思ったりもしますw

1500記事ということは少なくともこのサイトは1500ページ以上あるわけです。

でもそんなに強いかというとそういうわけでもない。

もちろん「強さ」の基準はわかりませんが、一般的に話に挙がるところで言うと

・ページランク:1
・検索結果順位:「バカ」101位以下(前ブログ「バカ」は「バカ」検索10位以内)
・リンク:少ない
・アクセス:少ない
・話題性:弱い

とかなるわけですよ。

一方で記事数がそこまで多くなくても人の注目を集められたりするブログもあるわけで。。。その辺をもう少し考えなくてはイカンなーと。

アクセス推移。(「バカ毛」開始の8月から12月まで)

 

伸びてるといえば、伸びてる。

 

弱点は何か?

色々とこのサイトの弱い面を考えてみた。

 

・恒久的なコンテンツがない
→「あれなんだっけ?」という時にここを見れば大丈夫、というもの。
どちらかと言うとその場その場でのニュースとか気付きが多い。
SEOやwebの記事って変遷していくものなのでそんなに恒久的なものはないのかもしれないけども。

・コンテンツ力
→ 文章力や扱っている内容など。
ちょっと最近、新しい気付きも少なくなっているような気もします。
もっと仕掛けを作って気付きを増やしたい。

 

ターニングポイントと、今後の課題として。
引き続きよろしくお願いいたします。

ロールオーバーで遊ぶ休日

11月 27th, 2011

途中で挫折シリーズw
更新やめようかと思ったんだけど、備忘録的にメモをしておく。

ロールオーバーを使って何か動きのあるコンテンツできないかなーと色々なサイトを見ていました。

やりたかったのは

この部分に電球の画像をつけて、マウスオーバーすると電球が光る!的なもの。

 

参考にしたサイト

 

CSS(スタイルシート) ロールオーバー

わかりやすい。
グローバルメニューのロールオーバーの時とか参考になりますよね。

※今、思いついたんだけどロールオーバーで単純にこの部分の変更すればできるんじゃないか。

 

========(作業中)========

 

できましたw
ちょっと複雑に考えすぎてて出来なかったっぽいですね。

 

実際のコード変更

 

.socialbox{
text-indent: 30px;
margin-top: 5px;
padding-top: 15px;
padding-right: 5px;
padding-left: 7px;
padding-bottom: 60px;
background-color:#f5f5f5;
background:url(/wp-content/uploads/32px_light_off.png) no-repeat;
background-position:5px 5px;

border-style: dotted; border-color:#696969;
font-size: 1.5em;
}

ここは元々あった部分のデザイン変更。
画像の差し込みとそれに合わせてテキストを少し右にずらしています。

.socialbox ul{
text-indent: 0px;
}

text-indentを挟むことによってソーシャルボタンが崩れてしまうのでボタン設定をしているul部分をindent無効に。

.socialbox:hover{
background:url(/wp-content/uploads/32px_light_on.png) no-repeat;
background-position:5px 5px;
}

ロールオーバー後の設定。結構単純。

自分でコーディングしてみると、シャレオツなあのサイトもこういう仕組みで動いてるんだ、というのが分かってきますね。
理屈でわかってるのとはまた別の感覚が身についてくる。

 

その他気付き

 

今回のPOSTって「途中までやったけどできなかった」的な更新だったんですが、メモとして書いていくうちに「こうすればできるんじゃないか?」というひらめきが生まれ、最終的に成功しました。
ダメだった、という時も「どうダメだったのか」というのをアウトプットしていくと新たなひらめきが生まれるかも知れませんね。

 

おまけ

 

ロールオーバーでこんな表現も出来ます。
hoverの設定部分の変更事例。


背景を白+線を点線じゃない設定にする


背景をオレンジに!

【デザイン】ソーシャルボタンの配置を変更してみた。

11月 20th, 2011

というわけで朝からずっと格闘していました。デザインの休日です。

 

前々から気になっていたこと

 

ページの一番下のソーシャルボタンの配置が気になってたんですね。

ちなみに以前のものはこんな感じ。

とってもフリーダム。

で、これをもっとカッコよくできないかと。
理想としていたのは以下のお三方のサイト。

Webデザインレシピ
YATのBlog
ホームページを作る人のネタ帳

個別記事のフッター部分のソーシャルボタンの配置が三者三様ですが自分の中で参考にしたいと思えるものでした。

ポイントとしては

1.配置を横並びにして
2.あわよくばアイコンをオリジナルに変更させる(自分では作れないので素材から借りてくる、みたいな感じですが・・・)

をやろうと思ってました。

 

結果

 

結論から先に書いてしまいますが、理想としていたものには届きませんでしたw
(3時間の格闘の末・・・)

before/afterは以下の通り。

before

 

after

 

※さらに変更しましたw
after2

(背景色を薄く、周辺をdottedで囲む)

 

前よりはすっきりしたと思う。

ちなみにやりたかったのがこういうやつですw(途中経過)

 

WordPressであれば「WP Social Bookmarking Light」というプラグインも便利です。
(参考:WP Social Bookmarking Light – ブックマークボタンの設置

 

難しかったこと(課題)

・オリジナルボタン(素材ですが)の配置は可能だがtweetやシェアなどをうまく反映できない
(ソーシャルへ送信する仕組みがわかってないと難しそう)

・海外系の素材を使用するとはてブなどのボタンがなく統一感が崩れる。
(自分の場合それ以前の問題でしたが・・・)

・ボタンによって変な空白が空く

ここでいうところのfacebookボタンとGoogle+ボタンの間の空白。
WP Social Bookmarking Light使った際に出てきたのですが、多分このへんは調整可能なはず・・・

3時間近くデザインと格闘してた。もっと基礎知識強化しないときついなー

これが正直な感想ですw
気を取り直して、再び時間をとって頑張ります。

 

【メモ】リストを画像で設定してみた

11月 13th, 2011

簡易更新。

休みはともかくサイトを触ってばかりいました。
変化させられるのは面白いけど、それがユーザーにとっていいかどうかは分からないのよね・・・

 

今回のちょっとした変更

 

before

after

元画像:デザイン素材.com 【無料Web素材・イラストアイコン・ライセンスフリー・商用利用可】

 

変更点

 

物凄く単純な話。

before

list-style-type: disc;

after

list-style-image: url(/wp-content/uploads/list.png);

 

まとめ

 

実感するのは、本当にこういうのってやってみて色々と実感できる話。

理屈でわかってるのと手を動かしてどういう動作をするのかってのは全く違う。
全然分からないけどやってみたい!という人は本当に手を動かすのが一番の近道かと思います。

これ、使わないとまた感覚が弱くなっちゃうんだろうなー。。。

投稿のタイトルデザインをちょっと変更してみた

11月 12th, 2011

シャレオツなサイトデザインシリーズです。
デザインは奥が深いのでやってて楽しいです。

今回は見出しを変更してみました。

 

元々の見出し

 


※クリックすると拡大します。

記事のタイトルとなる「骨」の部分にしてはインパクトが弱めです。

 

新しい見出し

 


※クリックすると拡大します。

元々のものよりは目立つようになりました。

変更ポイントですが・・・

1.太字に変更
2.見出しの前にフォルダアイコンを設定(単純に使いたかったというのもありますw)

簡単に2点です。
結構満足しています。

 

参考にしたサイト

 

昨日の記事の延長線上でかちびとさんからなのですが、

イラストやWeb制作に使えるフリー素材を紹介 | 9search
デザイン素材.com 【無料Web素材・イラストアイコン・ライセンスフリー・商用利用可】

この流れ。
アイコンはデザイン素材.com様でいただきました。

あとCSSの背景設定

CSS(スタイルシート) 背景

基本ですが、重要。

この2つを組み合わせてtext-indentで見出しを少しずらした、という感じです。
デザイン楽しいです。