トップページを見やすくしました!

20170202190949
ブログのトップページを色々と見やすいように変更しました。

備忘録として見ていきます。

 


ヘッダー画像

ヘッダー完成版
まずはサイトの顔であるヘッダー画像です。

前は撮った自キャラのギリアムをそのまま載せていたのですが、画像が大きすぎて見にくかった気がしました。

なので高さ300pxに変更。そして、タイトルもライブドアブログのデフォルトではなく、画像編集してブログ名を入れてみました~編集方法はパワポ使ってます。

綺麗なサイトを見ていると画像などでおしゃれのヘッダー画像作っている方も多かったので習ってみました。その方が特徴でますからね~

スライドショー

1
2
3
ちょっと前から導入してみたのですが、上記3つの画像が順繰りにループするスライドショーを入れてみました。

すべて「こちら」と記載ありますが、画像自体をクリックするとその該当ページに飛ぶことが可能です。前に「因子早見表の記事のリンクが辿りにくい」ってコメント貰ったのがきっかけでした。そういえば同じではないですが、公式のプレイヤーズサイトにもありますよね、こういうの。

まだまだ試験的なので、もう少し色々工夫したいと思っています。今は3つですが、増やすか悩みますね・・・入れすぎてもってあると思いますし。スライドは何個がいいんでしょうね?

画像の作成は素材(ジェネとか生放送のとか)以外はすべてパワポのみでやってます。パワポ便利すぎー。ちゃんとジェネの胸をクリックするように矢印もちゃんとずらしました、ここ大事(・∀・)

ブログ的には何かスクリプトを仕込んでいるわけではなく、HTMLとCSSのみで作成しています。スクリプトやツール仕込むと重くなりそうだったので。

記事一覧をスマートに

20170202191444
before

こちらは変更前。TOPページの記事一覧で今までは1つの記事のスペースが非常に大きかったです。画像もそのままのサイズで載っていたのも相まってスクロールが大変だった気がします。

20170202191340
after

なんということでしょう~
大きかった1つの記事がコンパクトに。

基本的に”Z”のように人は目線を動かすと言われていますので~画像を左に置いてサムネイルを表示、文字を右に置いてみました。それも相まってか前より見やすくなったかと思います。(当社比)

今まで通り画像orタイトルor続きを読むをクリックすると、記事の詳細ページに移ります。スマートフォンでもPC表示にしたときもスクロールしやすくなるかも。

ライブドアに限らないですが、ブログサービスにはテンプレートがあって、似たようなことを出来るテンプレートもあるのですが、自分はやりたいようにカスタムしてて変更したくないのでHTMLとCSSをいじってみました。

ぶっちゃけ自分はHTML・CSSなど詳しくないので試行錯誤でなんとか完成。こういうのいじるの大変ですね・・・出来た時は嬉しいですけどね~

最後に


20170202195001

色々と変更しましたが、残念なことはPC表示でしか見れないことです。スマフォでも一番下の切り替えボタンブラウザの表示切替機能でPC表示が見れます)

これはライブドアブログの仕様でして、スマートフォン版のCSSをいじることが出来ませんので無理でした・・・やっぱり一番いいのはWordPress使う事だと思いますね。

自分はいまさら移行するのもめんどいのでこのままですが、これからブログやろうと思っている方がいるのであればWordPressがおすすめです。< br />

前よりは良くなったかと思ってますが、他にもこうしたほうがイイヨ!とか見にくいよってのがあれば是非教えてもらえると助かります。

投票頂けるともう少し見やすくなる
宜しければお願い致します(・∀・)














更に楽しむ
綺麗、快適なPSO2

PSO2はキャラクリエイトが素晴らしいゲームだと思います。その楽しみを最大源に発揮するプレイ環境をあなたに




14 件のコメント

  1. 1.名無しのアークス より : 2017/02/02(木) 21:21:21 ID:QyNDcwMzk

    見やすいっス

    返信
  2. 2.名無し より : 2017/02/02(木) 21:54:19 ID:Y0Mzg4NTk

    記事内容自体もそうだけどほんとマメですなぁ

    返信
  3. 3.10鯖のキャス男 より : 2017/02/02(木) 23:22:39 ID:MxNTE4OTA

    元から見やすかったけど磨きがかかったと思います

    返信
  4. 4.名無し より : 2017/02/03(金) 00:25:38 ID:I0MTYxMDQ

    見やすいー(スマフォ

    返信
  5. 5.Make arks great again!! より : 2017/02/03(金) 01:01:40 ID:E4NTY0NjQ

    これはありがたい
    閲覧が捗りますー

    返信
  6. 6.箱アークス より : 2017/02/03(金) 04:43:28 ID:E4NTMzNTE

    記事一覧が見やすくなっていいのですが、
    TOPを開いたときに最新の記事が見える方が
    いいかなと思いました。
    スクロールしないと記事にたどり着けないのは
    ちょっとしたことですが手間に感じるかも。

    返信
  7. 7.名無しのアークス より : 2017/02/03(金) 05:10:19 ID:E4MzE1MTM

    レイアウトも大事ですが、記事の文章で誤字脱字や漢字の無変換が頻繁に見られるので
    投稿する前に推敲してはいかがでしょうか。

    返信
  8. 8.ななっしー より : 2017/02/03(金) 08:42:01 ID:Y1MTM1Njc

    こ、これは見やすい。

    返信
  9. 9.ななしさん より : 2017/02/03(金) 17:12:21 ID:UxNzYwMTY

    私も>>6の方に同感ですね
    開いてその時点で記事が更新されてるかどうかわからないのは微妙かと

    返信
  10. 10.青物 より : 2017/02/03(金) 18:26:54 ID:E4NTM5Mjg

    私も6番の方と同感です!
    ちょっとした事なのですけど 
    最新の情報に更新した時や よく行くページでトップに飛んできた時に新しい記事が有るかどうかがわかると そういうところで居心地の良さを感じます、
    見る側の端末によって違うと思うので難しいとは思うのですけど…。
    私のPCからだと 少し前に画面下端に引っかかる様になって 今度の調整で最新の一件だけまるまる見える様になりました。

    返信
  11. 11.ろー より : 2017/02/03(金) 19:54:19 ID:Y1MDMxMjc

    きれいでセンスを感じますー。
    タイトル画像がでっかい気もしますが、重要な部分だから難しいとこですよね。
    記事ジャンルは開閉できるJqueryとかもあります。
    「アコーディオン」
    とかでググっていただくとざっくり分かるかと。
    ただ動きが大きく、うっとおしいと感じる人がいるという欠点もありありで、万人受けするページの道は実に険しいですなぁ・・。
    個人的には内容もページも明るくて大好きなので、出来る範囲でまったり更新を続けていただけると幸いですう。

    返信
  12. 12.名無し より : 2017/02/03(金) 22:54:23 ID:U1NDIyMTU

    スライドは現在は自動オンリーでループするタイプなので、スライドを多くするとじーっと待たなくてはいけないのであまり多くしないほうがいいでしょうが
    切り替え矢印付きのものや、公式のような小さいサムネ画像付きのタイプ、要は手動でささっと切り替えられるタイプならばスライドは多めでもいいかもしれませんね

    返信
  13. 13.ギリアム より : 2017/02/07(火) 10:31:00 ID:==

    >1. 名無しのアークスさん
    >2. 名無しさん
    >8. ななっしーさん
    ありがとうございます!説明資料でも、人の印象もそうですが大体見た目の印象って大きいんですよねーなのでこだわってみました(・∀・)
    >3. 10鯖のキャス男さん
    ありがとございます!色合い中々難しいですね・・・
    >4. 名無しさん
    スマフォ版、ライブドアブログだとあんまりいじれないので個性が出ませんが、代わりにシンプルでいいのかも。
    >5. Make arks great again!!さん
    スクロール大変ですからね。。ありがとうございます!
    >6. 箱アークスさん
    >9. ななしさん
    >10. 青物さん
    言ってもらえて嬉しいです!たすかります(・∀・)
    最新の記事が見えない件ですが、右側の上の方(メニューのすぐ下)に最新記事の見出し(上位3件)を表示する項目を移動しました。前は検索バーが上でしたが、目につくようにしてみましたがどうでしょう?
    >7. 名無しのアークスさん
    その通りですね。誤字脱字も大きな課題なので推敲を怠らないようにします。
    >11. ろーさん
    アコーディオンぐぐってみましたが、スマートでいいですね!テストサイトの方で実験してみますー
    >12. 名無しさん
    やっぱり手動で切り替えれた方がいいですね。スライド矢印つきや、手動切り替えの部分はまだCSSの勉強が足りないのでまだ実装できてないですね。。色々試して付けるのを目指してます~

    返信
  14. 14.名無しのアークス より : 2017/03/23(木) 17:29:24 ID:Y1NzE4NzI

    これだけ高速でカンストする人が多数いるって事はマイペースでレベル上げしてたら野良緊急でメインサブ共に80じゃない雑魚奴は帰れ!ってPTキックされそうだなぁ。

    返信

コメントをどうぞ