借金地獄な人生ひたすら自業自得

読者です 読者をやめる 読者になる 読者になる

借金地獄な人生ひたすら自業自得

あなたの良き反面教師となる逸材です

はてなスマホ画面をカスタマイズ 〜ど素人が無料でどこまで出来るか?

アクセスアップ対策

【この記事は不定期に更新してます】タイトル下のブログナビに直リンク貼りましたので、気が向いたらまた覗いてみて下さい。


子供の頃、ガンプラやラジコンを改造(カスタマイズ)するのが大好きだったこてつです。

何かに没頭すると食事も寝る事も忘れて、好きな様にいじり倒し、自己満足に浸ります。大人になってもその感覚は忘れません。

そんな訳で、ここ数日記事の更新と寝る間を惜しんで、ど素人がブログのカスタマイズを全て無料でやってみました!自分的にはそれなりになったかなとひとまず満足してます。

PC画面のカスタマイズは制限が少ないのでまぁいいですよ。問題はスマホ画面です。デフォルトのデザインがあっさりしてる上に無料じゃ制限が多過ぎです。なんてったって私こてつ、ブログはiphoneでしか見る事が出来ないんです!唯一ブログを見れる環境がどノーマルじゃ寂し過ぎです。

無料じゃこんなもんかなって諦めてましたが、スマホ画面もレスポンシブデザインを使うと結構なんとかなるんですね!

ど素人がスマホ画面を無料でどこまでカスタマイズ出来るか?やった事まとめておきます。これくらいまでなら数時間でカスタマイズ可能です。よかったら参考にして下さい。

カスタマイズした環境

まずカスタマイズした私の環境です。

はてな一般ユーザー
iphoneのみでブログを運営
・PCでブログを見れる環境なし
・詳しい事は解らないので基本コピペのみ
・記者は神経質なぶきっちょ


お願い)PC画面で表示確認が出来ない為、「PC環境で見たらレイアウト変だよ」とか「こうした方がいいよ」とかあれば遠慮なくご指摘頂ければ嬉しいです。

カスタマイズの目的

まずは自分自身スマホ画面での見た目。そしてこうしたらブログに立ち寄ってくれた皆様が読やすいかな?こうしたら新米ブログとは思われず、やり込んでる感出るかな?って観点でカスタマイズしました。カスタマイズによるSEOの影響は私の知識ではよく解りませんのでご了承下さい。

カスタマイズした内容

カスタマイズした部分は以下の通りです。基本コピペですが、一部コードを自分のブログのURLに入れ替えたりはあります。


・レスポンシブデザインなブックテーマの導入
・記事上下にシェアボタン設置
・記事下の読者になるボタン追加
・フォローボタンの設置
スマホ画面トップの記事一覧と数
パンくずリストを記事下に設置
・ブログナビを設置
・サイドバー配置の見直し

iphoneでカスタマイズしにくい!

ちょっと余談ですが、iphoneを使ってデザイン設定を変える時、コードのコピペしづらくないですか?画面が小さい為か、クリックした瞬間に画面がどこか飛んだり、反応しなかったり、訳の解らないところで急に調べるボタン出たり。10回トライして決まればいい方です。最近、1センチ程度狙ったところから左にタップ位置をずらすと上手くいく事が解りました。それでも数回に一回位の確率かな?是非iphoneのキーボードにコピペボタン作って欲しいところです。

ブログテーマの導入

まずはブログのテーマです。初心者でもカスタマイズしやすい物、見た目がわかりやすい物、レスポンシブデザインな物を選びました。


選んだテーマは、シロマティ (id:shiromatakumi) さんの「Brooklyn 」クールでカッコいいです!テーマストアでも常にトップ3に入る人気のブログテーマです。シロマティさん使わせてもらいました。ありがとうございます!


詳しくは記事を参照して下さい。


このテーマのいいところは、やりたいカスタマイズのベースがすでに入ってるとこです。


以下、シロマティさんのブログから引用です。

タイトルに超便利って書いてますが、このテーマは何と!グローバルナビ(タイトル下のメニュー)とシェアボタン、読者登録ボタンを追加するためのCSSをすでに記述してあるのです!さらに、WEBフォントの「open sans」も記述済みです。

シェアと読者登録ボタンの設置

合わせて配置するとこんな感じです。

シェアボタンと読者登録ボタンは、シロマティさんの仕様をそのまま使わせてもらっています。


この読者登録ボタンって、どうしてスターの近くにないんだろうとずっと思ってました。スター付けて、読者登録してって動作をスクロールなしで出来たらより登録してもらいやすくなるかなって思ってます。

シェアボタンは他に下の仕様も設置してみましたが、私の環境ではボタンが上下にずれてしまいうまく表示出来ませんでした。対応法が解らず挫折しました。カッコ良かったので使いたかったのですが残念です。



フォローボタンの設置

設置した状態はこんな感じです。


フォローボタンはプロフィールの下にまとめて入れてみました。なんとなくですが、フォローする時に記者がどんな人かなって解ると安心かなって思います。フェイスブックはIDをもってないので表示が無い物を選びました。


スマホ画面トップの記事一覧と数

今まで、スマホ画面でレスポンシブデザインにしないでデフォルトの仕様を使っていた理由がこれです。デフォルトの記事一覧表示見やすいんですよね。レスポンシブデザインにするとPC画面と共通になる為、記事が一覧化されません。

そんな悩みを解消する方法の記事を見つけました!やり方は「ブログのトップページにアクセスしたら自動的にアーカイブページを表示させる」って方法らしいです。

この方法は普通にやると、記事の表示数は指定出来なくなります。

このブログの作者さんの凄いところは、スマへで記事一覧に飛ばした時の表示数もお好みで変えられるコードを作ってしまったところです。これで全ての問題は解決しました!


しかし、気になる記述もみつけました。SEO対策にマイナスではないのか?正誤性は不明ですが、私の場合検索エンジンからの流入は殆ど無いので見やすさ優先で良しとしました。将来もう少し記事が増えたら考えなおしたいと思います。

パンくずリストを記事下に設置

パンくずリストをデフォルトとは違う記事下に設置しました。記事を読んだ後にトップページに戻って最新記事を確認したり、カテゴリに誘導したり、読み終わった後の行動に繋がる様にしました。


参考にした記事はこちら。記事上下共に表示させたい場合は手順3だけでOKです。


ブログナビを設置

ブログの数カ所にブログナビを付けました。一般的には「おすすめ記事」とかで皆さん使ってますが、ちょっと思考を変えて初めてブログに来てくれた人が埋もれた記事へ立ち寄る入り口的な内容にしてみました。


コードはこちらを参考にさせて頂きました。


サイドバー配置の見直し

サイドバーの配置を見直しました。記事を最後まで読んでくれた人が興味ありそうな記事に誘導出来る様、一番上は関連記事しました。表示が長くなるので最新記事は勇気を出して省きました。訳の解らないはてな関連のリンクは削除!

最後に

ひとまず満足な形にはなりましたが、その他ページャーとか解りづらいのでなんとかしたいなって思います。あんまり拘り過ぎると記事を書く事に影響出るので暫くの間はカスタマイズは封印したいと思います。


でも、楽しかったです。
またいつか大改造しようかな!