よしまのメモ帳

思いついたことを書き留める雑多ブログ。コメント欄は設けていますが基本的に反応しません。ご用の方はyoshimanote☆gmail.comまでお気軽にどうぞ(☆を@に変えてご送信ください)

コピペに頼ってブログのスマホデザインをカスタマイズしてみたよ!

f:id:yoshimamo:20150716133930j:plain

どうも、よしまです。

昨日ブログのスマホ表示を少しいじってみました。
スマホからのアクセスが多いので媚売ってやろうという魂胆です(こら

ネット上には自作のHTMLコードやCSSコードを作られている方がたくさんいらっしゃいますよね。
本当に尊敬します。

画像貼り付けタグしか知らない私でも本読んだらできるようになるんだろうか。
それよりまともな文章を書けるようになるのが先だな。

今回はその凄い方々のコードをお借りしてカスタマイズしてみました。

見出し

スマホ版の見出しは字の大きさと太さが変わるだけだったので、線を引いてみました。

f:id:yoshimamo:20150716200424j:plainf:id:yoshimamo:20150716200435j:plain

コピペさせていただいたのはこちらのブログ。

www.yukihy.com

ここからh2は「四角」、h3は「よくあるやつ」、h4は「点線」を使わせていただいてます。
(PC版も「上下線」「よくあるやつ」「下線」を使ってます)

コード内の「border-bottom:~」の横にあるカラーコードを変更すると色を変えられます。
当ブログではグリーン系を使用。
カラーコードについては以下のサイトが参考になりました。

WEB色見本 原色大辞典 - HTMLカラーコード

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

 

シェアボタン

はてなブックマークやツイートをするためのシェアボタン。
いつも表示が遅いな~と思っていたんですが、デフォルトのアイコンは少し重たいらしいです。
なので変えてみました。

f:id:yoshimamo:20150716200642j:plain

 

▽こちらからコピペさせていただきました。

daipanman.hatenablog.com

PC表示も今のところは同じシェアボタンに変更しております。
カウンターが出なくなりましたがスッキリとしました。

角が丸くなったアイコンがとても好みで、こちらのブログに出会えてよかったです(^^)

 

いろいろなリンク

ヘッダやブログ名の上の画像、ページ下部のはてなへのリンクなどを消しました。

f:id:yoshimamo:20150716200530j:plain

これではてなっぽさが減るらしいです。
それはどうでもいいけど、少しでも表示速度が上がるのを期待しています。

いろいろなものの消し方は以下のブログを参考にさせていただきました。

konoyono.hateblo.jp

他にも注目ブログの項目や記事終わりに表示される自分の名前とID、プロフィール欄なども消すことができるみたいです。
すごいな~。
全部消したらスクロールがかなり少なくて済みますね!

読者登録ボタン

読者になるボタンはページの下の方にあって面倒なので、もっと気軽に押してもらえるようシェアボタンのすぐ下に配置してみました。

f:id:yoshimamo:20150716200659j:plain

ダッシュボードの「設定」から「詳細設定」ページへ行き、一番下までスクロールするとHTMLコードがあります。
それをコピペして「デザイン」ページの好きな場所に貼り付けることができます。

f:id:yoshimamo:20150716134025j:plain
※クリックで拡大します

おわりに

この他にも広告の場所を変えたりマイナーチェンジしてます。
これで少しは目新しくなったかな?

今後も面白そうなカスタマイズを見つけたらいろいろ試してみたいと思います。

それにしてもブログやホームページのデザインを変えるのは面白いですね。
昼過ぎから始めて気がついたら夕飯時になっていました^^;