実験学基礎Ⅰ(2単位)

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

実験報告(2018/7/7)

今日は七夕なんですが、道民の友人によれば北海道の七夕は 8/7 におこなわれるらしいので、特にきゃっきゃうふふなイベントもなく、ブログのデザイン作業をすることにしました。

それでは本日の作業報告です。

 

1.Minimalismの導入

現在の実験学基礎Ⅰのデザインは、どこからか拾ってきたデザインをカスタム(といってもカスタムと呼べるほどカスタムはできていない)して使っている編入学基礎Ⅰのデザインをそのまま流用したものです。しかし、今回は編入学基礎Ⅰのコンセプトを「シンプルでわかりやすく余計なものをそぎ落とす」と定め、なるべくその意向に沿ったデザインを探しました。(1からデザインを作るとなると、デザイン変更までに1年以上は要すると思うのでさすがに断念しました。)

今回選択するのは、「Minimalism」という名前のついたデザインです。スマホとPCの両方同時にカスタマイズでき、かつカスタム例が豊富で初心者にも使いやすそうです。

hitsuzi.hatenablog.com

このデザインをベースに、編入学基礎Ⅰに沿ったカスタムをしていきたいと思います。

(まああのほかのデザインを導入しようとして、カスタムがうまくいかなかったというのもありますが...)

 

 

2.FontAwesomeの利用

前回はFontAwesomeの導入作業をしたのですが、FontAwesomeによってメニューバーの「大学を探す」の前に絵(?)を付けることができました。こんな風に!「 」←ちゃんとかけてうれしい...

FontAwesomeは、記事の中だけでなく外観のデザインにも利用できるんですね、、なぜ前段階で準備しておく必要があるのだろうと思っていたので、もしかしてFontAwesomeってほんとうにAwesome!と1人でなっておりました。

また、html編集をする際にどこにFontAwesomeの記述をすればいいのか今は手探り状態なので、今後慣れていく必要がありますね...

 

 

3.公式のタイトルやバーの削除

 今回の作業で一番うれしかったのがこれですね...!

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

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

ブログを見ていて思うのですが、このバーがあるとデザインの邪魔をするし、わざわざこのブログを見てからアチキもブログを開設しよー!wとかなる人もいない(と思う)ので、消したかったのです。今回、これを消す技を学べたのは大きかったです。

学んだサイトを貼り付けておきます。

hitsuzi.hatenablog.com

 

4.今後の課題

今後の課題です。今日は21時からずっとPCとにらめっこしていたのですが、テーマの導入とその基本的なカスタムに失敗したおかけで得たもののわりに苦労がめちゃくちゃあった、とかいう状態でしたが学んだことも大きく今後の課題も見つけました。

(i)編入学基礎Ⅰに特有の課題

編入学基礎Ⅰは多くの大学の編入体験記を集めたブログですが、その特性からなるべくわかりやすく、かつ早く大学を検索できるようにしなければなりません。しかしどの大学の編入体験記があるのか一目でわかるようにもしなければなりません。メニューバーにあまりに多くの項目を付けてしまっては利便性を欠くので、検索バーを上に持っていく必要があります。つまり、このブログのタイトル部分のような検索画面を付けたいと考えています。

take-log.com

このタイトル部分の検索ボックスの実装は、知識がないので労力がかかる作業になりそうです、これが今後の課題の一つです。未来の自分が解決してくれることを願っています。

(ii)広告サイズとそれ用の余白の作り方

広告の貼り方についても担当外でしたし、編入学基礎Ⅰブログは機械学習による児童の広告貼り付けの機能を使っていたので、広告の貼り方を未だ理解していません。タイトル下に「適切なサイズのもの」を1つや記事中に広告は3つまで、などこだわりたいので、広告の貼り方と広告用の余白獲得の仕方についても学ぶ必要がありそうです。

編入学基礎Ⅰは広告がおおすぎて見づらいので。(なお現在は広告をすべて外しているので、快適な閲覧ライフが楽しめることと思います笑)

 

5.記事中の文字サイズの変更

実験学基礎Ⅰのブログ記事は文字サイズが小さかったので、なにか大きくする方法はないかと思い、調べました。これは、タイトル下部分に

<style type="text/css">

.entry-content{

font-size:○○px;

}

</style>

を挿入すればいいのだとか。このブログでは17px に設定しました。大きな文字のほうが読みやすいですしね...!

 

今日の作業は以上です。夕飯食べて寝ます。完全自己満足ブログですが、閲覧していただきありがとうございました。