シンプルライフを目指すあやさんのブログ

断捨離をきっかけに人生が変わろうとする私のひとりごと。ミニマム生活を目指しています。

MENU

久しぶりにWEBデザインしました。記事下は大事だよ。

 皆さん、最近のブログって記事下におすすめ記事とかありません?こんな感じで。

f:id:aya-haseko:20160605211720j:plain

こちらはシスウ株式会社さんが扱っているMilliardのプラグインなのですが見たことある方も多いと思います。おしゃれですよね。

でも、「シンプルにいきませう」というブログタイトルなので、私は今回リスト式のシンプルな記事下がいいなと思い昨日からGoogleと格闘していました。

まずは骨組みを作成しました。

参考にしたブログはこちらです。

www.aritai.net

えっとまとめますと…

  • サイドバーで関連記事を出す。(個別にしないと出てこないので注意)
  • サイドバーで関連記事が出ないようにデザインCSSよりCSSを設定する(ソースはリンク参照)
  • 最後に記事の記事上下のカスタマイズというところにjavascriptを設定する(ソースはリンク参照(汗)

完成したのがこんな感じ

f:id:aya-haseko:20160605212909j:plain

うーん、タイトルとリストのフォントが同じだから区別つかんな。
というわけで再度Googleさんに頼ります。

昔の参考書を見て解決

しかし、目星の物が見つからず悩んだ結果…

自分でソースを確認しました。

いやーコンピュータの学校出ててよかったよ。HTMLとか時代とともにだいぶ変わっちゃったけど何となくは覚えているのでソースを1個1個確認確認した結果。

こりゃCSSを使わないとだめだな。(当然!)

CSSって何?という人のために説明すると、デザインのソースになるプログラムというものです。

HTMLというホームページを作る際に必要な骨組みと考えればCSSはデザインをするのに必要な洋服と考えればいいです。(たとえはおかしいかもしれんが…)

そして、久しぶりに昔使っていたHTMLとCSSの辞書があったのでそれを見ながらちょこちょこ組み立ててきました。断捨離の時捨てなくてよかった。

そして何とか完成

f:id:aya-haseko:20160605214444j:plain

タイトルを太字にしました。

ソースはこんな感じでデザインCSSのところに落とせば大丈夫です。

.hatena-module-title {
    font-weight: bold;
}

 ソースだけ見ると簡単な感じはしますが、これから本格的にブロガーとしてがんばりたい皆さんはCSSは覚えておいたほうがよいと思います。

作業を終えた感想

疲れました…。

何しろ久しぶりにHPの本引っ張り出して調べたのですが。何しろ6~7年くらい前の本なので今となっては使っていないタグだってあるのですから。
ただ、やっぱりもう少し勉強しなければいけないなと思いました。

あと、記事下は関連記事を載せることによって直帰率を少しでも下げることができると書いております。少しでもPV数を上げるのであればこういったカスタマイズが必要になってきますね。