通知エリア

色々拘りをもって作成してるんだよって話

ゼウス&ヘラ

ブログちょこちょこと更新しましたぁー♪

今回はそんな苦労話とこだわりのポイントを語ります♪

※相変わらずわかる人にしか わからない内容かも知れません><

iPhoneの方ごめんなさい

まずは謝罪から><

知り合いのiPhoneユーザーの方から教えて頂きましたが
iPhone5等の 液晶4インチ以下の端末で見ると
表示崩れがあった模様です
(〃・д・) -д-))ペコリン

記事ページは 特に問題なく見れたはずですが
記事一覧ページなどは デザイン崩れで 気持ち悪い感じになってましたね

今回は 4インチでも 崩れないようにデザインし直しましたので
大丈夫かと思います
(4インチ未満はわからんがwまあ 居ないだろう← )

新ランキング用バナー制作とこだわりのポイント

ゼヘキュアバナー誕生

先日 ムラコから ゼウス&ヘラの画像が公開されました↑↑

久々画像に一目惚れw

ゼヘキュアゼヘキュア

ゼヘゼヘでキュアキュア

二人はゼヘキュア♪

ゲフン

というわけで ランキング用バナーに使うこと採用いたしましたw

そして出来たのが こちら
ランキング用バナー1
通常版ゼウス&ヘラ

ランキング用バナー2
究極ゼウス&ヘラ

PC用のランキングバナーとして制作しましたので
サイズは大きめに作ってます♪

今回のテーマは
ジグソーパズルにありそうな感じ‼
を意識して作りました

背景に横縞を入れてるのがポイントですねw

なかなか上手くできたなと 自己満足中w

気に入りすぎて PCだけでなく スマホ版にも無理やり使うことにしましたぁー←

スマホにもバナーを使う
こんな感じでページ上部に 縮小版が表示されますw

画像の横並びについて語る

PC版の場合は 横の表示サイズを指定してあるので 問題ないのですが

スマホ版は 画面の大きさが
機種によりかなりの幅がありますので
そのような事はしてません

画像1枚なら タグなどで 画像の横幅調整は簡単
 (画像のタグに style="max-width: 100%"/←を入れる等)

画像2枚並べると そうも行かないんですよね

そのため 4インチ以下でも 綺麗に横並ぶように
画像の横幅を縮小してます

結果 画像結構荒いことになってますw

とか打ってる今 まさに
style="max-width: 40%"/ とかにしたら
上手く表示出来るんじゃね?w

という事に気付いた 後でやってみよう♪

ブログのここが変わりました

今回のテーマは・・・

12月に ブログをリニューアルしたさいに
ユーザー エクスペリエンス(ユーザー視点からの利便性)を
追求しつくしてあるので

今回は なるべくユーザーエクスペリエンスを維持しつつ
コンテンツを増やす作業をしました♪

ちなみに現在のGoogle先生からの評価は
グーグルからのユーザーエクスペリエンス評価は99
高評価を維持出来てます↑↑

人気記事を作りました♪

プログラムの拘り

人気記事の表示例
ページ上部に人気記事を表示するようにしました

こちらは
ブログへのアクセス数をリアルタイムで集計
その結果の上位20位から ランダムで5つが表示されるように 作ってます

ちなみに 記事タイトル前の数字は現在の順位を表してますよぅー

設置理由などなど

設置理由は 他にもこんな記事あるよーー
ってのを ユーザーに伝えたいからです♪

せっかく書いた物ですから 過去の物も含めて
出来るだけ多くのページを 多くのユーザー様に見て頂きたい

ですが ページ上部のコンテンツって
ユーザー視点からみると 邪魔になりがちですよね?

そこで 出来るだけ省スペースかつ 効果の高い方法として
このような形にしました

ランダム表示ですが 20位までからのランダムなので
最新記事や定番の人気記事以外も色々出てきて面白いかなぁーと

表示されるものはブラウザの設定等にもよるかも知れませんが
10分程度で更新されますので 何度も確認してみてくださいw

メニュータイトル追加と見出しの色が変化

見出しの色を青紫に

ページ上部にコンテンツを増やしたので
最新記事などの 見出しを新しく付けました

無くてもわかるかも知れませんが
Google先生対策にも一応なってますw
(スマホ版の評価はランキングに影響しないけどねw)

それにともない 見出しのカラーを 黒ぽい灰色から 青紫に変えましたぁー

うちのブログは基本的に白と黒と灰色で統一したデザインにしてたんですが
あえてそこから外す&目立たせる意味で
別の色を入れる事にしました

変ではないはず・・・・多分w

またデザイン変える可能性は高いですがww

パンクズリスト小型化

パンクズリストが

過去のパンくずリスト

から

現在のパンくずリスト
のように変わりました
(誤字は気にしない←)

以前のは存在感ありすぎだったので自重しましたw

表示は小さくなったその分
ページ上部の目立つ所に表示するように

ページ下部まで行っても ウルズ↑↑タップで
ページ最上部飛ぶので 手頃にたどり着けるはず↑↑

また 周りのリンクと適度に離してあるので
パンクズリストから カテゴリーページに飛ぶのも
ストレスなく出来るはず↑↑

今後ももう少し手を加えます

 まだやろうと思ってる事あります

と 同時に諦めた事も多い
もっと技術力が( ゚д゚)ホスィ…

そしてそして 3月はフォロー数アップ&ランキングジャンプアップ計画を実地予定w

内容はまだ秘密w 

ランキングとか バナー作りたくてやってるくらいで
ほぼ放置だしね (´・∀・`)ハハハ…

トップへ戻る
タイトルとURLをコピーしました