Seesaaブログ　スマホ版をカスタマイズしました

これまでこのブログは、PC版についてはいろいろカスタマイズしていたのですが、スマホ版については放置していました。

しかし、7月にスマホを買ったので、これを機に見直すことにしました。
（使っているスマホはこれです。→【2016年7月現在】月々700円から！　最も安い「格安SIM」「通話アプリ」「スマホ本体」はこれ！（ライトユーザー向け））

メニューとタイトルロゴの追加

デフォルトだと、メニュー＝カテゴリー一覧……なのですが、このブログでは「Lc.ツリーカテゴリー(for Seesaa)」を導入してサブカテゴリーを追加しているため、カテゴリー名がやたらと長く、表示し切れていませんでした。

例えば、「クリエイターとしての集客・収益化」のカテゴリーの中にある小項目は、すべて「クリエイターとしての集客・収益化……」と表示される有様。区別がつきません＾＾；

これではいけないと思い、メニューは自作することにしました。
ついでにページ上部にPC版と同じタイトルロゴを入れました。


メニューはタップすると開きます。


スマホを横向きにして表示するとこんな感じ。


こうして見るとよく分かりますが、「左寄せ」のリスト全体に対して「中央寄せ」を適用しています。



参考ページ：
クリックで開閉する多階層ツリー型リストの作り方（このブログの記事です）
CSS divで囲んだulを左右中央揃え、ulの中身は左揃えにする方法。 - Yahoo!知恵袋
余白も含めて行全体をリンクにする方法 [ホームページ作成] All About

参考ページの情報の他、メニューの見た目を整えるための、背景色・枠色・リンク色・リストのインデント等に関するCSSが必要です。


◆このブログのCSS

これで、HTMLの方は

と記述しています。


タイトルロゴも、行全体（要素全体）をリンクにすることで、ロゴ画像そのものをタップしなくても反応するようにしてあります！

◆CSS

なお、「box-shadow」で、この要素の下に影をつけています。

プロフィールページへの誘導

トップページ以外のページの上下には、メニューに加えて、プロフィールページへの誘導もつけました。
（トップページは、リピーターによる閲覧率が高いと思われるので除外しました）



ページ下部には、TwitterのフォローボタンやWEB拍手も置いてみました。

PC版のCSSを輸入！

スマホ版のCSSをデフォルトのまま放置しておくと、テキストの表示が味気ないことになります。

・リンクの色が灰色（これは好みによりますが）
・見出しタグを使っても、普通の文章と同じ文字で表示される
・表に枠が表示されない
etc...

しかし、CSSはPC版・スマホ版関係なく統一規格なので、PC版のCSSをコピペしておけば大抵はどうにかなります！（笑）


フリー素材コーナーのメニューの表示はPC版と同じにはなりませんでしたが、まあギリギリセーフってことで……。

HTML5式MP3プレイヤー「audio.js」を導入

※「audio.js」について、詳しいことはこちらの記事をご覧ください。
いろいろ見たけど、埋め込みmp3プレイヤーは「audio.js」がおすすめ！　対応ブラウザ多し、デザイン良し、設置は簡単！

これまでスマホ版には「audio.js」を入れていなかったので、素材コーナーで音声の再生ができない状態でした。

でも、「audio.js」はHTML5式のプレイヤーなので、PC・スマホ関係なく使えます！
この通り！


う、うーん？　見にくいぞー？

それは「audio.js」のせいではなく、単純にスマホ画面の幅が狭すぎて、表が見やすく表示できないだけです＾＾；
スマホを横向きにすれば、そこそこ見れる画面になります。

これからは、スキマ時間にでも『145cmの考察』をお楽しみいただけます！

ほとんどの方はPCから見てくださっているので、スマホ版をカスタマイズしてもあまり関係ないと思いますが、これでスキマ時間にでも『145cmの考察』をスマホから気軽に楽しめるようになりました！

広告収入的には、PCから見てくださった方がありがたいのですが（おい）、どちらからアクセスするにしても、Re:Iに興味を持っていただけることが一番嬉しいです。
今後ともよろしくお願いいたしますm(__)m

なお、スマホ版の広告は、Seesaaブログ側が強制的に入れているものです。
これを消す改造方法もネット上には出回っていますが、そのような（Seesaaブログ側の利益を減らすような）使い方は規約違反となり、ある日突然ブログを凍結されても文句を言えない立場になりますので、僕はおすすめしません。
あと、それじゃSeesaaブログさんがかわいそうだと思うので……。

無料ブログなのにPC版の広告を消せるだけでもありがたいと思います。