connecting...
Google translation for articles :
1 NEMBER donated to you!!

【webデザイン勉強日記】趣味のブログサイトのデザインをいじってみました

nem0.85xem (1) 126 0 0

ネムログが暫く間を空けてしまって毎日投稿が途切れてしまいました。
一応それにはいくつか理由がありまして、一つは以前投稿した幾原展に行っていたことでもう一つはブログのデザインを3日くらいかけていじってたからなんですね。
幾原展とサイン会の感想についてはこちらをご覧頂けたらと思います。

 

私はネムログ以外にライブドアブログの方で完全に趣味で一番大好きな漫画である『おおきく振りかぶって』の考察ブログをしているんですが、ライブドアブログって少し古いと言いますか、元々のデザインが結構ダサいんですね。
もう少し勉強を重ねてWordPressあたりで自分の趣味サイトとか持てたらいいなと思っているのですが、せっかくだから力試しも兼ねてまずは今のこのダサいサイトデザインをいじってみようということになりました。

 

とはいえ勢いで決めてしまったので、ろくに調べもせずとりあえずカスタムデザインページを開けてどんなもんかと取り掛かってみたのですが、これがかなり難しい。
というのも、今までは真っさらな状態で1からデザインしたり模写したりという感じで自分でid名とclass名をつけることができ、謂わば白紙にパーツを並べるといった感じだったのですが、ブログのカスタムは型が既にできてしまっているところからいじらないといけないので中々自分の思い通りにできません。なので1日目はとりあえず何ができるのか、どんな風にすれば良いかを色々いじりながら試してメモして終わりました。

 

2日目は昨日考えたデザインを元にさあいじるぞとグーグルのディベロッパーツールを使って挑みました。昨日考えた時点ではギャラリー表示の1カラムレイアウトにしようと思っていたのですが、やはりパソコン画面での1カラムレイアウトだとかなり見にくくなってしまいます。前回盛大に躓いたレスポンシブデザイン作成方法の一つ、bootstrapの使い方がやっとわかったので試してみようと思ったのですが、htmlの記述を見るとおそらくphpと思われるものが記述されており、全く触っていない人間からするとホントになんじゃこりゃ状態なのでどのタグにbootstrapを適応させるべきか全然わからなくて断念しました。
後から調べてわかったことなのですが、そもそもライブドアブログはcss をスマホ対応させることが出来ないらしくbootstrap使ってもあんまり意味ないみたいです。


2日目の反省としては1カラムレイアウトを諦めて元々カスタムデザインの中にあったギャラリー三つ横並びになってるデザインを元にヘッダーを画像背景にして今流行りな感じにしようということで落ち着きました。

3日目はさすがにいじるのにも慣れてきてある程度はさくさくこなせました。真ん中が寂しい感じになっちゃってるのでもう少し幅を広げようと思ってflexboxを使って調整しようとしたのですが、幅を100%にすると広がりすぎるし幅を固定にしちゃうと綺麗に折りたたまれてくれないしで四苦八苦しました。とりあえず幅は960pxに固定してその中で折りたたむように調整したのですが、私の技術ではそこが限界。本当はギャラリー自体も大きくしたかったのですがそれはphpが関わってくるため変にいじるとレイアウトがぐちゃぐちゃになってしまうので諦めました。
とにかくなんとか作り上げたトップページ。そのあとは個別記事ページも少々いじり、スマホ用サイトにも個別記事ページはcss を適応させられるらしいのでそこも調整して今回の挑戦はひとまず終わりました。

 

ブログデザインを直接いじったことがなかったので今回はすごく大変でしたが、既にある型のものをいじるというのは自分にとって結構勉強になったと思います。
今回で学んだことは以下の3つ。

・既に型のあるものをいじる時はディベロッパーツールでシミレーションをしてからcss に記述する。
・レスポンシブが適応されるのかどうか確認をする。
・技術が足りないところは一旦諦めてもう一度勉強し直す。

こんなところだと思います。どれもすごく当たり前のことなんですが、いざ取り掛かってみると出来ないところに執着して時間を取られてしまったりかなり作業効率が悪くなってしまったので、次からはこの反省を生かしてwebサイトを10個くらい模写して作業効率の向上と基礎徹底を心がけたいと思います。


以下は今回作ったもののタブレット表示版と個別記事ページです。
ヘッダーの背景画像は自分で描いたものなんですがオタク丸出しでちょっと恥ずかしいですね。
該当ブログはこちらになります。

 

 

Why don't you get crypt currency 'nem' by posting your blog article?

nemlog is blog posting service which has donation feature by crypt currency nem.
nemlog was launched to create environment which can be donated nem among NEMbers via blog articles.
Let's get nem by posting good blogs.

Nem prize event is being held frequently, Please join us on this opportunity!

nemlog registration from here
Register

NEMber who posted this article

ネムログ気になったのでライブドアブログからいくつか移行します。

趣味は読書(特に太宰治)、アニメ鑑賞(特に幾原作品)、京都観光。
京都には足繁く通っているので色んな情報を提供できたらと思います。

また、教育実習、学校教員(少しですが)を経験して思ったことも少し書けたら良いと思います。

現在はwebデザインを勉強中。
23343
0