ブログサイトのリニューアルで変更&追加した所
2019/11/28◉ 100 views

どうも皆さんこんばんわ、ちょめこです。
やっとブログサイトのリニューアルが終わりました!
機能の追加ってよりは主にデザインを変えてみました。
色んな参考サイトを見て真似....参考にしてみたのだけれど、僕HTMLとCSSの知識がそこまでないのでめっちゃ大変でしたw
具体的にどこを変えたのか何を追加してみたのかを書こうかと思います。
やっとブログサイトのリニューアルが終わりました!
機能の追加ってよりは主にデザインを変えてみました。
色んな参考サイトを見て真似....参考にしてみたのだけれど、僕HTMLとCSSの知識がそこまでないのでめっちゃ大変でしたw
具体的にどこを変えたのか何を追加してみたのかを書こうかと思います。
デザイン編
まずデザインの方ですが、実は変更はこれで3回目になります。
1回目はこのブログサイトを初めて作った時です。同じように白をベースに作りました。
画像で紹介しようと思います。
初期
これが初めて作ったデザインでのブログサイトです。
今回のリニューアルと似ていますねw
でも何か物足りなく感じて少し寂しい感じがしていました。
この2ヶ月後くらいに2回目のデザイン変更をしましたね...
次のデザインはとにかく透明な物を使ってみたい衝動にかられて、無理やり透明化してデザインしましたw
それがこちらになります。
2回目
どうでしょうか?w
背景にどうしても木目を使いたくて、フリー素材を探しまくりましたw
そして透明なカードを無理やり作ってできたデザインがこれでした!
完全に自己満ですね。
そして見れば見るほど微妙に感じて来るんですよね〜。
僕飽き性なんで....///
あ、でもプログラミングは続いてますよ!
気づいたら8ヶ月も立っています...
8ヶ月も立ってるのにまだ自分のブログサイト触ってる....
早く就職しなくちゃ....
話がそれましたが、次に今回のデザインを載せようと思います。
3回目
これが今回のリニューアルになります!!
1回目に戻ったような感じですねw
ですが今回は色々追加しています。
まずはトップ画像には最新記事3件分のカルーセルのスライドを実装しています。
そしてフェードインで最新記事6件の表示とサイドバーに人気記事の表示までしました。
制作物にはgif画像で動きをつけています!
一般的なブログサイトっぽくなったのではないでしょうか?w
これぞブログサイトって感じで大満足ですw
ええ、自己満ですけどw
他にもスクロールしていくと、右下にボタンが出てきて、押すとトップに自動でスクロールしてくれる便利な物も設置しています。
まーほんとどこの辺はコピペで作ったので内容までは理解できてませんが...
まだJavascript勉強してないんで....
とまーデザイン的にはこんなもんですね!
これだけですが結構時間かかりましたw
お次はRails編をご紹介します。
1回目はこのブログサイトを初めて作った時です。同じように白をベースに作りました。
画像で紹介しようと思います。

これが初めて作ったデザインでのブログサイトです。
今回のリニューアルと似ていますねw
でも何か物足りなく感じて少し寂しい感じがしていました。
この2ヶ月後くらいに2回目のデザイン変更をしましたね...
次のデザインはとにかく透明な物を使ってみたい衝動にかられて、無理やり透明化してデザインしましたw
それがこちらになります。

どうでしょうか?w
背景にどうしても木目を使いたくて、フリー素材を探しまくりましたw
そして透明なカードを無理やり作ってできたデザインがこれでした!
完全に自己満ですね。
そして見れば見るほど微妙に感じて来るんですよね〜。
僕飽き性なんで....///
あ、でもプログラミングは続いてますよ!
気づいたら8ヶ月も立っています...
8ヶ月も立ってるのにまだ自分のブログサイト触ってる....
早く就職しなくちゃ....
話がそれましたが、次に今回のデザインを載せようと思います。

これが今回のリニューアルになります!!
1回目に戻ったような感じですねw
ですが今回は色々追加しています。
まずはトップ画像には最新記事3件分のカルーセルのスライドを実装しています。
そしてフェードインで最新記事6件の表示とサイドバーに人気記事の表示までしました。
制作物にはgif画像で動きをつけています!
一般的なブログサイトっぽくなったのではないでしょうか?w
これぞブログサイトって感じで大満足ですw
ええ、自己満ですけどw
他にもスクロールしていくと、右下にボタンが出てきて、押すとトップに自動でスクロールしてくれる便利な物も設置しています。
まーほんとどこの辺はコピペで作ったので内容までは理解できてませんが...
まだJavascript勉強してないんで....
とまーデザイン的にはこんなもんですね!
これだけですが結構時間かかりましたw
お次はRails編をご紹介します。
Rails編
今回のRailsで作った機能は、サイドバーの人気記事一覧になります。
僕はこのブログサイトにはまだ、PV機能を作っていませんでしたので人気記事順にランキングを作ることができませんでした。
なので各記事にPV機能を追加して、PV順で人気記事を作成する為にgemを使って実装しました。
gem名はimpressionistってやつです。
https://github.com/charlotte-ruby/impressionist
これを使うことで簡単に記事にPV機能をつけることができました。
詳しいコードはまた別記事で書こうと思っているので今回は説明しません。
サクッとできたので、初心者に優しいgemでした!
これで各記事にPVが表示されるようになったので、サイドバーにてランキングも作れるようになりました。
ただ今までのPVは加算されないので各記事0viewsからになっちゃいます。
これから増えるもんね!!!!!
ずっと0のままとかあったら泣けるよ?w
ってな感じで今回リニューアルした所はこの辺になります。
あまり変わってねえじゃんwwwとか思わないでね!
これでも毎日死にそうな顔で必死に作ったんだからw
僕はこのブログサイトにはまだ、PV機能を作っていませんでしたので人気記事順にランキングを作ることができませんでした。
なので各記事にPV機能を追加して、PV順で人気記事を作成する為にgemを使って実装しました。
gem名はimpressionistってやつです。
https://github.com/charlotte-ruby/impressionist
これを使うことで簡単に記事にPV機能をつけることができました。
詳しいコードはまた別記事で書こうと思っているので今回は説明しません。
サクッとできたので、初心者に優しいgemでした!
これで各記事にPVが表示されるようになったので、サイドバーにてランキングも作れるようになりました。
ただ今までのPVは加算されないので各記事0viewsからになっちゃいます。
これから増えるもんね!!!!!
ずっと0のままとかあったら泣けるよ?w
ってな感じで今回リニューアルした所はこの辺になります。
あまり変わってねえじゃんwwwとか思わないでね!
これでも毎日死にそうな顔で必死に作ったんだからw
今後の予定
今までの制作でわかったことがあります。
僕はずっとRailsばかり勉強していました。
HTMLとCSSに関しては、progateの中級までで終わり
Railsチュートリアルの中でHTMLとCSSを学び
あとは自分で開発物を作りながら調べたりして覚えて、ほぼ独学で知識がぐちゃぐちゃのままなんですね。
HTMLの基礎もCSSの色んなテクニックも正直自分流にやってるだけで、できる方から見たら本当に糞コードになっていると思います。
CSSに関しては、ほぼほぼbootstrapを上書きして使ってるコーディング。
bootstrapを使わなかったら僕はコーディングがまともにできないんです。
そのせいでデザインも単調な物しかできずに、1つ1つのデザインにもめっちゃ時間がかかります。
Railsのエラーで時間を使い、CSSでさらにめっちゃ時間を使うので進歩も遅いし、スピードがとにかく遅い。亀のようなスピードでコーディング。
このままじゃダメだと思いました。
なので、このリニューアルで一旦区切りをつけてRailsを少しだけお休みしようと思います。
明日から僕はHTMLとCSSを覚えます。
bootstrapも卒業します。
また1からHTMLとCSSを学び、EmmentやSASSを使ってフロント側のスピードアップを目指そうと思います。
ある程度覚えて、明らかにスピードが上がったようならまたRailsに戻ってきて、次の開発物に向けて動き出そうと思っています。
その時はゴリゴリコーディングができるようになってるはずですw
あとブログの方は少しづつ更新していくので、また気が向いたら覗いてくれたら嬉しいです!
よくわからない記事になりましたがこんな感じでこれからも頑張っていくので、暖かい目で見守ってください!w
終わります。
僕はずっとRailsばかり勉強していました。
HTMLとCSSに関しては、progateの中級までで終わり
Railsチュートリアルの中でHTMLとCSSを学び
あとは自分で開発物を作りながら調べたりして覚えて、ほぼ独学で知識がぐちゃぐちゃのままなんですね。
HTMLの基礎もCSSの色んなテクニックも正直自分流にやってるだけで、できる方から見たら本当に糞コードになっていると思います。
CSSに関しては、ほぼほぼbootstrapを上書きして使ってるコーディング。
bootstrapを使わなかったら僕はコーディングがまともにできないんです。
そのせいでデザインも単調な物しかできずに、1つ1つのデザインにもめっちゃ時間がかかります。
Railsのエラーで時間を使い、CSSでさらにめっちゃ時間を使うので進歩も遅いし、スピードがとにかく遅い。亀のようなスピードでコーディング。
このままじゃダメだと思いました。
なので、このリニューアルで一旦区切りをつけてRailsを少しだけお休みしようと思います。
明日から僕はHTMLとCSSを覚えます。
bootstrapも卒業します。
また1からHTMLとCSSを学び、EmmentやSASSを使ってフロント側のスピードアップを目指そうと思います。
ある程度覚えて、明らかにスピードが上がったようならまたRailsに戻ってきて、次の開発物に向けて動き出そうと思っています。
その時はゴリゴリコーディングができるようになってるはずですw
あとブログの方は少しづつ更新していくので、また気が向いたら覗いてくれたら嬉しいです!
よくわからない記事になりましたがこんな感じでこれからも頑張っていくので、暖かい目で見守ってください!w
終わります。

このブログサイトは初学者の僕が独学で
Ruby on Railsで作ったブログサイトです。
間違っている所もあるかもしれません。
あくまで参考程度にしていただけたらなと思います。
何かありましたらお問い合わせか、Twitter@ちょめこよりご連絡下さい。
人気記事
最新記事
タグリスト