プロクラシスト

今日の寄り道 明日の近道

ブログの外観をいろいろとカスタマイズしてみた(ほぼ記事紹介)


スポンサーリンク

f:id:imslotter:20161123233407p:plain

こんにちは!ほけきよです。

やっぱりブログをかっちょよくしていきたいですよね~。 なんか、CSSとかHTMLとかJavascriptとかつかって、こう、こなれた感じに。

残念ながら私にはそんなスキルがないので、 まずは偉大な偉大な先人様たちのものを拝借することに。

まずは真似ることから!

でも、真似るだけでも、意外とHTMLやCSSの勉強になって楽しかったです。 やっぱり悩むよりも手を動かしてみるのが早いですね!

やったこと

グローバルナビゲータをつける(レスポンシブレザイン)

いろんなブロガーさんのヘッダについてるこのナビゲーション。私も付けたし!!!とおもい調べました。参考にしたのはゆきひーさんのブログ

www.yukihy.com

これでヘッダーから特定のカテゴリに飛べるようになりました!

Feedlyに登録する

FeedlyというRSSリーダ、よく使われているのでそこでも読者登録してもらえるようにしたい!と思ったので出来るように。yuzuki1さんの記事を参考にさせていただきました!

marke-life.hatenablog.com

これでFeedlyボタンを押すと登録画面に行くように!

記事の下に読者になる/フォローボタンを付ける

思わず押したくなるようなかっこいいボタンにカスタマイズしたい!と思い、じょーじさんの記事を参考にしました。

georges.hatenablog.jp

今のページ下部はこんな感じ

f:id:imslotter:20161123232224p:plain

シンプルでかっこいいので、気に入ってます〜

ブクマやtweetボタンを変える

これも思わず押したくなるようなボタンにしたかったので、またまたゆきひーさんの記事を参考に!

www.yukihy.com

www.yukihy.com

こんな感じに

f:id:imslotter:20161123232444p:plain

シェア数やツイート数が仕様変更により使えなくなった時もあったそうですが、今は完全に対応してくださっているので、快適に動いています٩( ‘ω’ )و

吹き出しを使えるようにする

普段はMarkdown記法なのですが、どうやって吹き出しをつけたら良いかわからない… 調べてみると、書いてくれている人がいました! シロマティさんの記事.

shiromatakumi.hatenablog.com

できた!ヤッタネ!

関連記事の紹介

読んだ後に他の記事もリコメンドしたいなぁ。。。 と思って探していたら、思ったより簡単にできるようです。カシューさんの記事より

cashew.hatenablog.com

ページ下部に、おすすめ表示ができるようになりました٩( ‘ω’ )و

f:id:imslotter:20161123232747p:plain

まだまだ改良したいけど

他の人気ブロガーさん達を観察していると、もっと改良するところはたくさんあるんです

  • グローバルナビゲーションを多段構造にする
  • サイドバーの充実
  • ヘッダにオリジナリティ出したい

などなど… でも外観としては気に入ってるのでとりあえずはこのぐらいで!

今回引用させてもらったブログはどれも全てわかりやすく、情弱の私でも発狂することなくできました!ありがとうございました!

PROCRASIST