photo credit: swanksalot via photopin cc
最近はスマホから閲覧いただく事が多いりんろぐ。です。
あ、書いてるのは凛(@rin_wan)です。
がしかし、いかんせんりんろぐ。は記事がぼりゅーみーなのが悩み。
スマホからぼりゅーみーな記事を少しでも読みやすくするべくWPtouchカスタマイズ第2弾をやってみましたヾ(o´∀｀o)ﾉ
※2013/4/3 23:20 共有ボタンの所、一部ソースが崩れていたので修正しました※
見出しスタイルシート変更
まずは見出しのスタイルシート。
PC版の見出しがスマホでは反映されておらず、見難いなーと個人的に思っていた所でした。
「見出し」というのは目次に表示される項目名のことです。
色をつける事で区切りが分かりやすく読みやすくなるはず！
未だにCSSがあんまり分かっていないので、参考にさせてもらったのはこのサイト。
こんな感じにしてみました。h2が2本でh3が1本です。
いやいや、変化ないよ！という方はキャッシュが邪魔してるかも。
ページ更新するか、キャッシュクリアするか、気長にお待ち下さい( ´艸｀)
h2のCSSはこちら。
font-size: 20px;
line-height: 26px;
margin-bottom: 18px;
border-left:7px double #FFA500;
border-bottom:1px dashed #FFA500;
padding:.6em .8em
}
h3のCSSはこちら。
font-size: 18px;
line-height: 26px;
margin-bottom: 18px;
border-left:5px solid #FFA500;
border-bottom:1px dashed #FFA500;
padding:.6em .8em
}
あれ？どちらも下に点線入れようと思ったのに出ない…ｗきっと何かが邪魔しているに違いない。おかしいなぁｗ
****2013/4/9追記****
原因が分かったので修正しました！
上記のコードでちゃんと点線出るようになりました♪
****追記ココマデ****
共有アイコン類の表示位置追加
PC版にはエントリー上下に共有ボタンをつけてあるのですが、スマホ版は下のみでした。
教えていただいたのはふぃーぷれさんのこの記事！
自分でBlog読むとりんろぐ。ってエントリーが長い！！共有ボタンのある下まで降りるのがめんどくさい！！！
ってことで上にもつけました。
入れる魔法の呪文はこれ。
入れる場所。毎度の事ですが知識のない私はこれが分からないｗ
まぁ適当に色々入れてみる＞更新＞確認を繰り返したらやっと出来た！！
WPtouchテーマ内のSingle.phpの中。
他の方もこんな表記があるのか不明ですが、私のは…
シングルページのエントリーを書き込む部分と実際のコンテンツの間。
無事に出たーー｡･ﾟ･(ﾉ∀｀)･ﾟ･｡
文中への共有ボタン表示
そしてふと途中で時間がなくなった、飽きたけど後で読むかも？と思った時に、真ん中あたりにこのボタン欲しい。と思ったので実装してみました。
さっき書いた魔法の呪文をー本文に書けばーOKー！…ではなかったorz というのもWordpressの本文中はデフォルトではPHPの呪文が効かない！！
ってことでこちらのサイトにお世話になってまずは呪文が効くように下準備。
「Exec-PHP」を導入。サイトを参考に下準備をしたら、後は本文の共有ボタンを教示させたい所に例の魔法の呪文を書くだけヾ(o´∀｀o)ﾉ
本文中にもちゃんと出たー！！
今後のりんろぐ。では大体真ん中あたりに追加するようにしまーす！
共有アイコンへのPocketの追加
この共有アイコン類はJetpackというサービスを使っていますが、デフォルトだとPocketが入ってない。
今後は使っていこうと思っているのに自分で自分のBlogで使えないのはなんだかなーと思ったので追加してみました。
お世話になったのはひろせさんのこの記事。
新サービスを追加から以下を登録。
サービス名：Pocket
共有URL：http://getpocket.com//save?url=%post_url%&title=%post_title%
アイコンURL：http://img.readitlater.com/i/getpocket.com/favicon.ico
無事に小さなピンクのアイコンが表示されましたヾ(o´∀｀o)ﾉ
記事一覧へ戻るリンク設置
PCテーマの方では、ある程度下にスクロールすると「ページトップへ戻る」ボタンが出てくるように変更しました。
これをスマホ版にも反映させたかったのですが、PC版に反映した箇所がWPtouchに見当たらない…ｗどうにかならないかなーと色々やったのですが、よく分からなかったのでまた今度！
その代わりにはならないのですが、下まで降りて他の記事が見たい！という貴重な方は「記事一覧へ戻る」リンクをタップして下さい。記事一覧が表示されるようになります！
参考にさせていただいたのはこちら。
ちなみにモバイルテーマ利用時に一番上に戻る簡単なやり方も念の為ご紹介。りんろぐ。はiPhoneのSafariで見ていただくケースが多いようです。
りんろぐ。面白いけどちょっと飽きた！とか時間ない！からとりあえず一番上に移動したい！
そんな時には時刻が表示されている黒いバーを触って下さい。
勝手につるーん！と一番上に戻りますｖ(*´∀｀*)ｖ
まとめ
・見出しをカラーに！
・共有ボタンをカスタマイズ！
・ページトップへ戻る方法も！！
スマホテーマの変更もまだ課題に残ったままですが、まずは一番気になっていた部分を修正してみました。
もっとこここうなったら嬉しい！というご意見あれば凛(@rin_wan)までお待ちしております♪
次の記事もお楽しみに～(*｀･ω･)ゞ
