ブログの見た目を整える
コードブロックの整形
今まで、コードブロックは酷い見た目でした。 
現在は以下のように表示されるようになりました！
main = do
putStrLn "Hello world!"
やったこと
ここでは、以下のFomantic-UI要素を使用しました。
Segment
Attached label
又、各コードブロックに同じ処理をするために、Hakyllの=pandocCompilerWithTransform=を使用しています。 syntaxhilightは=Hakyll=に合わせて=Highlight.js=を使用しています。
最終的なHTML
=pandocCompilerWithTransform=を使用した処理
=pandocCompilerWithTransform=は=pandocCompiler=の一種で、Markdownなどを=Pandoc=型に変換しその値をいじることができます。 =Pandoc=型には便利な型クラス=Walkable=があるので、これを使用します。
=Walkable=とは、「値の中を歩き、各子要素を与えられた関数に適用して置き換える」ような処理をします。
WIP
右上に拡張子を表示する
右上に拡張子を表示するために使われているのが、attached labelです。 注意する点として、これは「コードブロックとは別の=div=として使用する」必要があります。
親=Div=に=segment=を設定する
code=ブロックの親の=Div=に、=class"ui segment"=を設定してください。
(他の要素はあっても大丈夫だと思いますが、とにかくsegmentが必要です。)\\
尚、きちんと調べているわけではないので、他のものでも代用できるのかもしれません。
(赤丸は注釈)
これをしない場合、ひとまわり上の=segment=、どこにもない場合webページの右上にこのラベルが表示されることになります。
(赤丸は注釈)
テキストの折り返し
これはシンプルにCSSの=overflow:auto=を使っています。
画像の整形
これまでは画像が正しいサイズになっておらず、このようになっていました。
現在は、この画像のようになっています。
ui image
=ui image=を使うことで、親のSegment以内に納めてくれます。\\ 又それにプラスして=rounded=をつけることで角を丸めています。 (最終的には=ui rounded image=となりました)
メニューの作成
画面上部にあるメニューを作成しました。 これは主に=ui menu=を使っています。 それに追加して、viewportの上部に固定するために=fixed=を、色を反転させるために=inverted=をつけています。
コンテンツの内容がかぶらないようにする
=fixed=を使った場合、そのままでは下のdiv(このサイトではidとして=content=を持つdiv)の内容に被ってしまいます。
そこで、=content= divに=margin-top: 5em=を適用しています。\\ 尚これは、同じ構成をしていたFomantic-UIのモバイルページでの設定値をそのまま持ってきています。 (モバイル端末で見るか、ブラウザの横幅を狭めれば見えると思います)
#content {
margin-top: 5em;
}
Feedのリンクを右づめにする
=menu=の中にある=item=に、=right=と入れるだけでそこから下の=item=全てが右詰になります。 このサイトだと以下のようになっています。