76bit Cafe のデザインなど大幅にリニューアルしました

76bitcaferedesign_eyecatch

どーも。diceです。

年明けからコツコツ制作していたリニューアルですが、なんとか公開できるレベルまで達した。
本日公開に踏み切りましたのでご報告します！
何とかブログ一周年前に公開できてよかったです。

スポンサードリンク

主なリニューアルポイント

ロゴができました

以前のYoYoZentはわりと早くにロゴが思い浮かんだんですが今回は難航いたしました。
これが76bitの新ロゴ。
76bitlogo 76bitcafelogo
左が76bitのロゴ。右が76bit Cafeのロゴ。
YoYoZentのロゴを引き継ぐのもいいんですが、このブログに対してゲンが悪いんでやめました。
YoYoZentLogo
この太陽マークは気に入ってるんで他で何か使うかもしれません。
ロゴのデザインはカフェスタイルの円の形はそのままにしました。
76bitという名前から中のティーカップはドット絵っぽくしてみました。

テーマカラーを決めました～朱～

このブログのテーマカラーは朱(あけ)　(「緋」とも書くときもあります)

朱・緋
#ba2636
H:354 S:79 B:73

特に理由は無いです。なんとなく赤にしたいなぁと思い、色見本をぱらぱらと見ていたんですが、和っぽいし漢字とかカッコイイからです。
お仕事と違いこーいう理由とかは自分の好みでなんとなく理由がなくても決められるのはラクですwww

最近好きな色はマゼンタ～フクシアンだったりするんですがこの赤もHue(色相)が354°のようにわずかにマゼンタ寄りの赤なんです。

横幅を少し拡張、1080pxに！

YoYoZentも含め以前は横幅が1024pxでしたが、今回のリニューアルで56px拡張し1080ピクセルにしました。
日本の企業サイトは穏健的で1000pxを超えるサイトは少ないんですが
dice的にはHDが普及したと判断しデスクトップPCは幅1920pxのユーザーが多いと決めウチしました。
アクセス解析でも 1280px 以上の方が全体の 94.73％
redesign2013_1

別にそれ以下を切り捨てるわけではなく、サイドバーを除いた、左側のメインコンテンツの幅は770pxです。

ゆくゆくはプラグインを使わずブラウザの幅で3段階に可変させスマートフォン端末に対応させる予定です。

広告掲載

閲覧する方々にはどうでもいい部分ですが
運営側的に、内部的に今回リニューアルの一番大きな目玉です！

ブログの運営資金(取材費やサーバ管理費など)などを広告で稼げたら、皆さんにもっと楽しめる、役に立てる記事が書けるのではと思いスポンサードリンクを張っています。

Googleアドセンスを使えればいいんですが昨年夏、悪意のある第三者に不正クリックを行われアドセンスアカウントの凍結・・・、つまりアボセンスを喰らってしまったorz
何度Googleに異議申し立てを行っても未だ潔白は認められず冷たい自動返信みたいなメールしか来ません。（＞＜）

そこで他のASPと契約し広告を掲載しようと考えました。
しかしGoogleアドセンスのようにコンテンツに応じ広告が変化したりしません。
それならせめて任意の広告の中からランダムに広告を表示させられればと思いPHPでそれができるプログラムを組みました。

今回実装させている機能は、
・自分が使ってみたい広告ソースを配列で定義しそこからランダムで選び広告を表示させる
・記事のページ(Single)において「続きを読む」のmoreを設置した部分に広告を挿入させる

その辺りの実装の仕方やプログラムソースは後日記事にしてまとめアップする予定です。

カテゴリーごとにテーマカラーを制定し見出しタブをつけてみました！

カテゴリーごとにテーマからを決め色分けしました。
そして記事の横にカテゴリー名とアイコンを付け一目でどんな記事か分かるようにしてみました。
redesign2013_2
以前からやろうとしていましたが見送ってきました、ようやくコレを実装できて制作者的に自己満足なうですw

グローバルナビゲーションを追加

今まで記事の数が少なかったんで見送ってきましたが、満を持して実装させてみました、まだ「食ログ！」は記事が無いんで404NotoFoundになりますが気にしないw　タブの色もイチオーカテゴリーのテーマカラーです！

記事内の装飾など追加

hタグの表示や引用、プログラムソースコードなど装飾を行ってみました。
redesign2013_4
もしかしたら記事の書き方により不具合が出てくるかもしれないけど、おいおい修正していくはずです・・・。

フッターコンテンツを増強！

個人的なことがらからサイトマップまで充実の品揃えwww
メインじゃないけど個人的な活動をここで紹介しています、気が向いたらチェックしてみてくだされ。
redesign2013_7

ページネーションの実装

そういえば付けてなかったのを思い出し実装させました！
redesign2013_8
ちなみにプラグインに頼っておりません、PHPでちょっとオラオラしてやればわりと簡単にできます。
『WordPressにプラグイン無しでページネーションを設置する方法 | コリス』
を参考にしました、あとは自分のページに合わせて改造しています。

HTML5とCSS3で

2b1ab_Faceook_html5-css3-300x205
ま、最近はずっとHTML5でコーディングしているんですが、今回はわりとCSS3を角丸以外にも使ってみました。
今回多用しているのが影です、外側に落としたり、内側に落としたり、グラデーション効果を狙ったり、節操無くwww
イチオーブラウザのプリフィックスも付けてるんでFirefoxじゃなくても機能するはずです。
IEは知りませんッッ！ (｀・ω・´)ｷﾘｯ