はてなブログのスマホデザインのカスタマイズに挑戦！

はてなブログのスマホ用ページをカスタマイズしてみました。

マイペースな更新ではありますが、２年くらいはてなブログを続けています。そしてようやく私の重い腰が上がり、ブログのデザインのことの覚えてみようという気になりました。

もうあれですね、ウェブのことはホントに詳しいことは何も解らず閲覧、利用専門の私からしたら『ＣＳＳカスタマイズ』とか『ＨＴＭＬ』とか何を言っているのかすら解らないです。まずその役割から学びだしたので今日中に理解できるか不安でしたが何とかなりました。

そんな私でもはてなブログのスマホ用のページのカスタマイズ出来ました。出来たっていうよりほぼ参考サイトのを色や細かい部分を自分好みに変えただけなので、果たしてこれがカスタマイズと呼べるかどうかはわかりませんが、何とか形にはなったので紹介したいと思います。

参考にさせてもらったサイト⇓

tsukuruiroiro.hatenablog.com

id:tsukuruiroiroさんのブログです。グーグル先生で『はてなブログ　スマホ　デザイン』で検索をかけたら表示されたのでそちらを参考にさせていただきました。

非常にわかりやすい構成で書かれていたとは思うのですが、『ド』が一つでは足りない程の素人な私からしたらちょっと難しく感じました。っていうより上にも書きましたが、何を言っているのか理解するところから入りました。

参考サイトの通りＣＳＳを貼り付けたら表示されない？！

 ブログで紹介されている通り『はてなブログ』の管理画面⇒デザイン⇒スマートフォン（スマホのマークのやつ）⇒ヘッダー⇒タイトル下⇒スマートフォン用ＨＴＭＬを設定するにチェック⇒すぐ下の枠内にソースを入れるみたいなんですが、まず解らないのでビビる。変なことやって記事がどうにかなるんじゃないか、ビビりながらソースを入れていく。（って言ってもほぼコピペ（笑））

一つのカスタマイズが変更されていることを確認。

なんだっ！意外に簡単じゃんって余裕かましてたらハマりました～。

次のカスタマイズのソースを入力後表示を確認すると…。変更されているのは初めの一つのみ。

あれ？！ブログ通りにコードを入れているのに何で？なんか入力が必要なのかな？なんて思い２０分程度いろいろ検索。

 謎の<DIV>の入力

こいつを次のソースの前に入力。そしてソースの最後に</DIV>を入力する。つまり<DIV>～</DIV>で挟む。～の部分がソースになるみたいで挟むことでソースの機能が生きるみたいです。はっきり言ってまだ全然理解できてませんが、使い何処はなんとなく解りました。

参考サイト

www.htmq.com

知りませんでした。そしてそこまではさすがに常識範囲だということでしょう。ブログには書いてませんでした。無知ですみません。もしくは見落としでしょうか。

カスタマイズした箇所

なかなか時間掛かりましたよ。好きな色にＲＧＢの数値を探して入力するのも一苦労でした。スマホでご覧の方には見たまんまに変更されていますがＰＣ閲覧の方の為にビフォー・アフターを載せたいと思います。

before

 after

id:tsukuruiroiroさんのブログで紹介されているものの中でヘッダー以外変更してみました。ヘッダーはいいのが作れたら差し替えてみたいと思います。

 ちょっとは洒落た感じになったのでは？！ってか私の実力でも何でもないです。

 id:tsukuruiroiroさんの実力です。（笑）

今回いじってみてこんな感じかな…。なんていう触りは解り興味が出てきたので自分的にはやってよかったと思います。

 またちょっとずつ勉強してみよう。

  最後になりましたが、id:tsukuruiroiroさん参考にさせていただきました。ありがとうございます。

ではまた。

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方