実験学基礎Ⅰ(2単位)

そして デザイン職人への 道へ

実験報告(2018/7/1)

タイトルは実験報告(日付)にします。

前々から「編入学基礎Iのデザインって他のブログに比べてあまりイケてないような気がする、、もっと現代的なイケてる感じにしたい!」と思っていたので、編入学基礎Iのデザインを変えるために、お勉強することにしました。

今はまだ、編入学基礎Iと全く同じデザインになっていますが、将来的にはこのブログデザインも変更されていくので、お楽しみに...!

Webデザインを学んで、何回か実験を繰り返したら、編入学基礎Iのほうへ学んだ成果を反映させていくので、このブログデザインはいわば編入学基礎Iの未来とでも言えるでしょうか...

また、Webデザインは将来きっと役にたつと思っているので、できるだけまじめに勉強したいと思っています。ただおもしろくなければ続かないので、できるだけ楽しく、ゆっくり活動していきます。

 

目標:9-10月までに、スマホ閲覧用の編入学基礎Iを、綺麗で見やすいサイトにする。

「綺麗で見やすい」が主観的なものにならないように、逐次チェックする協力者も得られました。

 

実験学基礎Ⅰの記事について

毎回ブログデザインのことを調べて、学んだことをまとめた記事を作っていきます。公式なブログではないので、日本語をあまり考えずに文章作ったりしますし、本当に自己満足なブログが出来上がることでしょう。

 

ではさっそく1回目の今日の記事です。

まずはこのデータをご覧ください。

f:id:e-nanndewatashigahanndaini:20180702062726j:image

上の写真は2018/5/10から2018/6/9にかけての編入学基礎IのPV数と、閲覧した端末の内訳です。圧倒的なスマホ率...!

しかし、編入学基礎Iのスマホ画面はとっても見づらい...ですから早急にスマホデザインを変更する必要があると思いました。どうにかスマホ用の画面が綺麗にならないかと思い、こちらのサイトを参考にしてみることにしました。

hitsuzi.hatenablog.com

 

上記のサイトはスマホ画面用のデザインが紹介されていて、とても綺麗でした。なおかつ無料で公開しているとのことでしたので、今回はこれをベースにデザインを作りたいと思います。また、このサイトには前段階に準備として、FontAwesomeというものを導入をしなければならないとのことだったので、

 

moghouse.hatenablog.com

 

を参考にして、ついさっき何かよくわからないコードを、はてなブログの「設定」→「詳細設定」→「headに要素を追加」のところに追加しました。

 

1日目の今日は前段階であるFontAwesomeの導入までにしておくことにします。あまりやりすぎるとたぶんWebデザインが嫌いになりそうだから...あとなぜかPCが熱持ってるから。

 

 

以下FontAwesomeを使った実験をしてみます。

 こんな感じ

 どうかな、うまくいってるかな

 

↑あれ、、実験に失敗してしまいました。。(ツイッターマークを表示させたかったああああああ)

 

実験に失敗したので原因をしらべました。。。

 

FontAwesomeを導入する過程はよかったのですが、はてなブログに特有の問題で、FontAwesomeのコードを記事編集画面のhtml編集で書いたとしても、記事公開時にはコードが消えてしまうことがあるらしいです。

その原因が書いてあったサイトはこれ。

 

はてなブログでFontAwesomeが使えないときの対処法

 

ありがとうサルワカくん、このサイトスっごくわかりやすくて参考になってる。

FontAwesomeのコードを書いた後、< /i>の前に& nbsp ;を書けばいいのね、また実験してみます。

以下実験です。

 出来てるかな、、

 

うおおおおできたあああああああああ!!!!!!!!!!!!!!!

ツイッターマークが表示されてるううううううう!!!!!!!!!!!!

うれしいいいいいいい

アイコンの大きさの変更や、回転などの調節は、やっぱりサルワカくんにのってたので、このリンクも貼っておくことにします。

saruwakakun.com

 

今日は、前段階の導入までで終わりにしますが、来週はこれを駆使したブログデザインの変更をおこなっていくつもりです。ブログのデザインを調べたり、実験に失敗するたびにもうやりたくないとか思いますが、「Webデザインできたらかっこいいよね!」と思うのでこつこつ積み上げていければと思います。

 

最後にまた実験をしてみます。Twitterマークを大きくしてまわしてみる!!!

閲覧ありがとうございました。