アップデートのロードマップ一覧
効率のいい経験値稼ぎまとめ
スティル,ピュラス素材早見ツール
特殊能力(OP)付けまとめ
全SOP検索ツール
ステータス比較ツール
エレメンタルブラスト比較ツール
トップページを見やすくしました！
ブログのトップページを色々と見やすいように変更しました。
備忘録として見ていきます。
ヘッダー画像
まずはサイトの顔であるヘッダー画像です。
前は撮った自キャラのギリアムをそのまま載せていたのですが、画像が大きすぎて見にくかった気がしました。
なので高さ300pxに変更。そして、タイトルもライブドアブログのデフォルトではなく、画像編集してブログ名を入れてみました～編集方法はパワポ使ってます。
綺麗なサイトを見ていると画像などでおしゃれのヘッダー画像作っている方も多かったので習ってみました。その方が特徴でますからね～
スライドショー
ちょっと前から導入してみたのですが、上記3つの画像が順繰りにループするスライドショーを入れてみました。
すべて「こちら」と記載ありますが、画像自体をクリックするとその該当ページに飛ぶことが可能です。前に「因子早見表の記事のリンクが辿りにくい」ってコメント貰ったのがきっかけでした。そういえば同じではないですが、公式のプレイヤーズサイトにもありますよね、こういうの。
まだまだ試験的なので、もう少し色々工夫したいと思っています。今は3つですが、増やすか悩みますね・・・入れすぎてもってあると思いますし。スライドは何個がいいんでしょうね？
画像の作成は素材（ジェネとか生放送のとか）以外はすべてパワポのみでやってます。パワポ便利すぎー。ちゃんとジェネの胸をクリックするように矢印もちゃんとずらしました、ここ大事（・∀・）
ブログ的には何かスクリプトを仕込んでいるわけではなく、HTMLとCSSのみで作成しています。スクリプトやツール仕込むと重くなりそうだったので。
記事一覧をスマートに
before
こちらは変更前。TOPページの記事一覧で今までは1つの記事のスペースが非常に大きかったです。画像もそのままのサイズで載っていたのも相まってスクロールが大変だった気がします。
after
なんということでしょう～
大きかった1つの記事がコンパクトに。
基本的に”Z”のように人は目線を動かすと言われていますので～画像を左に置いてサムネイルを表示、文字を右に置いてみました。それも相まってか前より見やすくなったかと思います。（当社比）
今まで通り画像orタイトルor続きを読むをクリックすると、記事の詳細ページに移ります。スマートフォンでもPC表示にしたときもスクロールしやすくなるかも。
ライブドアに限らないですが、ブログサービスにはテンプレートがあって、似たようなことを出来るテンプレートもあるのですが、自分はやりたいようにカスタムしてて変更したくないのでHTMLとCSSをいじってみました。
ぶっちゃけ自分はHTML・CSSなど詳しくないので試行錯誤でなんとか完成。こういうのいじるの大変ですね・・・出来た時は嬉しいですけどね～
最後に
色々と変更しましたが、残念なことはPC表示でしか見れないことです。（スマフォでも一番下の切り替えボタンかブラウザの表示切替機能でPC表示が見れます）
これはライブドアブログの仕様でして、スマートフォン版のCSSをいじることが出来ませんので無理でした・・・やっぱり一番いいのはWordPress使う事だと思いますね。
自分はいまさら移行するのもめんどいのでこのままですが、これからブログやろうと思っている方がいるのであればWordPressがおすすめです。< br />
前よりは良くなったかと思ってますが、他にもこうしたほうがイイヨ！とか見にくいよってのがあれば是非教えてもらえると助かります。
この記事が気に入ったら
フォローしてね！
PSO2関連専門ブロガー
ロボアークス
コメント
コメント一覧 （14件）
見やすいっス
記事内容自体もそうだけどほんとマメですなぁ
元から見やすかったけど磨きがかかったと思います
見やすいー(スマフォ
これはありがたい
閲覧が捗りますー
記事一覧が見やすくなっていいのですが、
TOPを開いたときに最新の記事が見える方が
いいかなと思いました。
スクロールしないと記事にたどり着けないのは
ちょっとしたことですが手間に感じるかも。
レイアウトも大事ですが、記事の文章で誤字脱字や漢字の無変換が頻繁に見られるので
投稿する前に推敲してはいかがでしょうか。
こ、これは見やすい。
私も>>6の方に同感ですね
開いてその時点で記事が更新されてるかどうかわからないのは微妙かと
私も６番の方と同感です！
ちょっとした事なのですけど
最新の情報に更新した時や よく行くページでトップに飛んできた時に新しい記事が有るかどうかがわかると そういうところで居心地の良さを感じます、
見る側の端末によって違うと思うので難しいとは思うのですけど…。
私のPCからだと 少し前に画面下端に引っかかる様になって 今度の調整で最新の一件だけまるまる見える様になりました。
きれいでセンスを感じますー。
タイトル画像がでっかい気もしますが、重要な部分だから難しいとこですよね。
記事ジャンルは開閉できるJqueryとかもあります。
「アコーディオン」
とかでググっていただくとざっくり分かるかと。
ただ動きが大きく、うっとおしいと感じる人がいるという欠点もありありで、万人受けするページの道は実に険しいですなぁ・・。
個人的には内容もページも明るくて大好きなので、出来る範囲でまったり更新を続けていただけると幸いですう。
スライドは現在は自動オンリーでループするタイプなので、スライドを多くするとじーっと待たなくてはいけないのであまり多くしないほうがいいでしょうが
切り替え矢印付きのものや、公式のような小さいサムネ画像付きのタイプ、要は手動でささっと切り替えられるタイプならばスライドは多めでもいいかもしれませんね
＞1. 名無しのアークスさん
＞2. 名無しさん
＞8. ななっしーさん
ありがとうございます！説明資料でも、人の印象もそうですが大体見た目の印象って大きいんですよねーなのでこだわってみました（・∀・）
＞3. 10鯖のキャス男さん
ありがとございます！色合い中々難しいですね・・・
＞4. 名無しさん
スマフォ版、ライブドアブログだとあんまりいじれないので個性が出ませんが、代わりにシンプルでいいのかも。
＞5. Make arks great again!!さん
スクロール大変ですからね。。ありがとうございます！
＞6. 箱アークスさん
＞9. ななしさん
＞10. 青物さん
言ってもらえて嬉しいです！たすかります（・∀・）
最新の記事が見えない件ですが、右側の上の方（メニューのすぐ下）に最新記事の見出し（上位3件）を表示する項目を移動しました。前は検索バーが上でしたが、目につくようにしてみましたがどうでしょう？
＞7. 名無しのアークスさん
その通りですね。誤字脱字も大きな課題なので推敲を怠らないようにします。
＞11. ろーさん
アコーディオンぐぐってみましたが、スマートでいいですね！テストサイトの方で実験してみますー
＞12. 名無しさん
やっぱり手動で切り替えれた方がいいですね。スライド矢印つきや、手動切り替えの部分はまだCSSの勉強が足りないのでまだ実装できてないですね。。色々試して付けるのを目指してます～
これだけ高速でカンストする人が多数いるって事はマイペースでレベル上げしてたら野良緊急でメインサブ共に80じゃない雑魚奴は帰れ！ってPTキックされそうだなぁ。