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

76bitcaferedesign_eyecatch

どーも。diceです。

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

スポンサード リンク

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

ロゴができました

以前のYoYoZentはわりと早くにロゴが思い浮かんだんですが今回は難航いたしました。
これが76bitの新ロゴ。
76bitlogo76bitcafelogo
左が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 タブの色もイチオーカテゴリーのテーマカラーです!
redesign2013_3

記事内の装飾など追加

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

関連記事を実装

記事の終わりに関連する記事を「Yet Another Related Posts Plugin」で実装。
redesign2013_5
MAX9つまで表示される予定です。

人気の高い順の記事リストをサイドに実装

サイドバーに人気のある記事リストを「Wordpress Popular Posts」を用いて実装。
redesign2013_6
「Wordpress Popular Posts」自体セキュリティーホールがあるのでまんま使わずあくまで記事を抽出するためにプラグインを使用。
実際の記事表示はPHPで自作して表示。
「Wordpress Popular Posts」の独自タグに記事IDを取得するものがあればカンタンだったがそんなものは存在しなかったんでコレをつくるのはかなり難航した。
コレについても後ほど記事にしてやり方を公開します。

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

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

ページネーションの実装

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

HTML5とCSS3で

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

今回お世話になっているWordpressプラグイン

Akismet
デフォルトで入ってるスパム防止

WP Multibyte Patch
デフォルトで入ってる2バイト文字環境向けプラグイン

Contact Form 7
コンタクトフォーム

Really Simple CAPTCHA
「Contact Form 7」でCAPTCHAを使う場合必須

Delete-Revision
リビジョンを管理、溜まったりビジョンを可視化でき消すこともできる

Disable Revisions and Autosave
リビジョン設定を無効化してくれ且つ、オートセーブを無効化、無駄にIDを発行しないで済む

SoundCloud Shortcode
SoundCloudのコードをまんま記事に貼り付けるとき必要

WP-Nicodo
ニコ動のコードをまんま記事に貼り付けるとき必要

WordPress Popular Posts
人気記事リストを生成するがそのままで使うとセキュリティーホールがあって危険

Yet Another Related Posts Plugin
関連記事のループを吐き出してくれる便利なプラグイン

WP No Category Base
カテゴリーアーカイブのURLの「/category」を取り除いてくれる

WP to Twitter
記事を投稿すると自動的にTweetしてくれる

Maintenance Mode
メンテナンスモード

Ktai Style
携帯電話サイト(ガラケーサイト)を自動的に吐き出す

WPtouch
スマホサイトを自動的に吐き出す

おいおい対応していくこと

・カテゴリーごとに合う広告をランダムに表示させる
・WPのコメントを試験的に復活させる復活
・記事に通し番号を振ってみたい
・プラグインに頼らずスマホページに対応させたい

おわりに

まぁ、ざっとこんな感じでリニューアルしました。

今回も、いやいつも、コーディングは秀丸で手打ちです。
CSSの登場によりdice的にはWYSIWYG(ウィジウィグ)を使う意義が見つからなくなりました。
何よりdiceはソースは見やすくキレイじゃないと許せない性質です、別にプログラマーじゃないんだけどね。

というわけで新しい76bit Cafeをよろしくお願いします!

何か不具合とかデザイン崩れがあった場合はメッセージください、そのとき使用ブラウザとそのバージョンを教えてください!

コメント

Facebookコメント

※コメントしたけど表示されてない方へ

パーマリンクを変えてしまったおかげで表示されなくなってしまいました。
折角コメントいただいたのにスイマセンm(__)m
パーマリンク変更しても何とか表示できる方法を現在模索中です。

“Facebookコメント”じゃないコメントを残す

このコメント欄は一時的に且つ試験的に復活させ実装させています。スパムが増加すると廃止します。なのでできるだけFacebookのコメントでコメントをお願いします。m(__)m
なお、メールアドレスは公開されることはありません。

コメントを残す