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

YESかNOか半分か

元ニートが、再びニートになって何かいろいろ書いてます

YESかNOか半分か

ブログデザインをブリブリでガーリーな感じにしてみた。

はてなブログ ブログカスタマイズ

とりあえずブログデザインをクリスマス仕様にしたい!と思ったのがキッカケだったのですが、
結果的に現在の様なブリブリ・デザインになってしまいました。

PC表示したブログ全体図

f:id:lunasaurus:20131118152239j:plain

うん、改めて見てみると非常にブリブリしてる。ブリブリしてるはてな女子ブログ。


Twitterに画像を載せた初期段階時よりかは格段に進化した気がします。


個人的に、はてなユーザーや私のブログの読者登録してくださってる方って男性が多いイメージなのですが…。
以前のデザインみたいにあんまり女の子女の子してなくて、シンプルなデザインの方が好まれるのかなー?なんて考えたりもしました。

ですが、ここでは私の個性を貫き通す事に決めたので、
クリスマスまでは私の趣味丸出しなデザインにお付き合い下さいね


「コイツのブログいきなりブリブリしだしてきめぇ。」とか「こんなにブリブリしたやつだと思わなかった。」とかは別にいいんですが、
ブログデザインに酔って吐いた。」なんて報告があった場合にはデザイン変更をちょっとだけ考えてみます。


参考までに

  • ブログデザイン 第一段階

f:id:lunasaurus:20130906222509j:plain

  • ブログデザイン 第二段階

f:id:lunasaurus:20130906222516j:plain

f:id:lunasaurus:20131118152239j:plain

私の妹は、第二段階が好みだったようです。
妹「シンプルでいいじゃん。私、女の子じゃないから可愛さとか分かんない。…ブフォッ
妹は「女の子じゃない」って自分で言って自分でウケてました。


カスタマイズ点まとめ

デザインを変更した箇所を画像付きでまとめてみました。

Webフォントを使ってみたよ!

f:id:lunasaurus:20131118151733j:plain
ブログタイトルや、記事タイトルなど様々な箇所にWebフォントを仕込ませました。

f:id:lunasaurus:20131118151739j:plain

スマホ用のページでは残念なことに表示されませんが、スマホでもPC版に切り替えて見てみるとWebフォントがちゃっかり適用されています。(私のiPhone5での検証結果)

今回はGoogleフォントと、TypeSquareさんのフォントを利用してみました。
Googleフォントは素早く表示されますが、和文フォントが無いのが残念。
f:id:lunasaurus:20131118151720j:plain
しかしながら、TypeSquareさんのWebフォントがTwitterアプリのWebブラウザや、はてなブログアプリ内のブラウザでは反映されないという悲しい事態に。

まあ、Safariで開けば反映されているので、そこは目を瞑りたいと思います。


CSSを駆使してみた!

以前のカスタマイズ記事で、「CSSなんて大嫌いー!」に近い言葉を発していた私ですが、今回は真面目にCSSと向き合ってみました。

f:id:lunasaurus:20131118151758j:plain
はてなモジュールのタイトルもCSSを使ってみました。画像を使わずにこういうのが作れるCSSさんには頭が上がりません。


パンくずリストや、
f:id:lunasaurus:20131118151910j:plain
アーカイブページ、
f:id:lunasaurus:20131118151851j:plain
プロフィールページもCSS部分を大改造しました。
f:id:lunasaurus:20131118151904j:plain
とってもブリブリになりました。



はてなウェジットを記事下へ挿入。

以前はサイドバーに「人気記事一覧」を表示させていて、ブログのヘッダ部分に【B】 はてなブログに過去記事を写真で表示する、お手軽カンタンカスタマイズの巻 - HSKぐうたらジャーナルさんで紹介されている複眼RSSを利用した「最新記事一覧」を表示していました。

しかし、デザイン的にヘッダ部分には何も置きたくなかったので、代わりに記事下にはてなブックマークブログパーツを挿入してみました。
f:id:lunasaurus:20131118171350j:plain
この方法だと、サイドバーが表示されないスマホ用のページでも表示されますし、CSSも一緒に指定すると私のiPhone5でもCSSが一部反映されていたのでウハウハです。

その他

見出しに画像をつけてみたり…
f:id:lunasaurus:20131118151759j:plain
引用部分をデコレーションしてみたり…
f:id:lunasaurus:20131118151915j:plain

あ、後は「続きを読む」ボタンを記事ごとに設置しました。


ただし、ページャーには殆ど手をつけていません!手抜き感満載!
f:id:lunasaurus:20131118151845j:plain


最後に

私は全くのド素人なので、ズレ、不具合等ありましたら、教えて頂ければ嬉しいです。
全て、IE10、Safariのみでしかチェックしていないので、他のブラウザを使ってる方からみたらどうなっているんだろうーと思うと、非常に心配です。


HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】