Everything has meaning

Everything has meaning

たくさんの情報が溢れる世の中で文系大学生の必死にもがく様子をお届けします。

トップページの記事表示デザインを変更しました!

 

 

しゃっす!どうもまくろ(@makuroblog)です!

 

実はずっとブログに悩みを抱えていました。

 

そう。デザインです。

 

過去にProgateでプログラミングを経験していたにも関わらず、CSSがよくわからんでした。(一応CSS上級編✕2したのに、、、)

 

 Progateについてに記事もあるのでぜひ!

makurooo.hateblo.jp

 

 

トップページがダサい、、、 

f:id:makurohirata:20170219185658p:plain

私のブログのトップページを簡単に表すとこんな感じです。

 

ダサい、、、

よいうか見にくいですよね。

 

これだと最初の記事しか見れません。

せっかく興味を持ってブログを訪れてくれていても最初の記事だけで判断されてしまいます。

 

私はあくまで大学生に向けて記事を書いているつもりなんでしが、大学生といっても色んな人がいますからね。

インターンや英語やプログラミングや大学生活 and so on...

 

こんな感じにしたい!!!

f:id:makurohirata:20170219185706p:plain

どう考えてもこっちのほうが見やすいですよね。

 

どんな記事を書いているのかすぐにわかります。

色んな人にブログを見てもこのデザインでした。

 

でも、やりかたわからん、、、

f:id:makurohirata:20170219190427p:plain

とにあえず検索して辿り着いたにがこの記事でした。

 

www.bombkun.com

 

結果的によくわかりませんでした笑

 

f:id:makurohirata:20170219190825p:plain

 

とりあえず、これを「設定→詳細設定→検索エンジン最適化→headに要素を追加」にコピペすればいいことがわかりました。

 

もし参考にする際はこの2点に注意してください!

*ブログURL(http://makurooo.hateblo.jp/)をあなたのURLに変更。

*タイトル(Everything has meaning)をあなたのタイトルに変更。

 

f:id:makurohirata:20170219192150p:plain

 こんな感じです。

 

まとめ

これが、、、

f:id:makurohirata:20170219192331p:plain

こうなりました。

f:id:makurohirata:20170219192347p:plain

見やすいですね。

 

あなたもデザインを変更したいなら参考にしてください!

 

でわ!!!

 

P.S.

どうでしたか?

 

私もまだまだデザインにはうといので精進していきたいと思います!

これからはトップメニューバーやアドセンス収益化などブログ周りに環境設定も報告できればいいなと思います。