ひとまず、ブログを書いてみる

価値のある情報をより多くの人の手元に最適な形で届ける。

【休日デザイン】気になるブログデザインをいじってみた

休日で特にやることもないので、ブログデザインで気になる箇所をいじってみました。

デザイン

太字を蛍光マーカーで引いたようにする

www.ringocatnote.com

なぜだろう、蛍光マーカーが引いてあると読みやすい。高校生の時、教科書に蛍光マーカー引きまくってたことが影響してるのかもしれない。

実装

f:id:yugiboyy:20170816162559p:plain

あれ、思ったのと違う。まず、黒い下線なにこれ。

下線の削除

なぜか30分くらい悩んでしまったが、ただ単に下線が引いてあるだけだった。これだから初心者ブロガーは。。

f:id:yugiboyy:20170816162637p:plain

おお、良い。そしてカスタマイズ楽しい。

マーカーの色を変更

こだわりが出てきたので蛍光マーカーの色を変えてみた。yellow:#FFFF00

f:id:yugiboyy:20170816163758p:plain

Oh....赤、青、黄色の組み合わせが絶妙にダサい。これでは信号だ。

日付の背景色を変更

.date{
      position: relative;
      color: #fff; 
      background: #cc4f5e;
      padding: 0px 10px 0 28px;
}

 悩んだ末にbackgroundをGold:#FFA500に変更した。

f:id:yugiboyy:20170816170742p:plain

統一性がでた。

Twitterへのリンク(スマホ) 

まず、スマホのデザインについては下記事を大いに参考にさせて頂いています。毎回思うのですが、デザインやSEOなど良記事を投稿している方には感謝しかありません。私も勉強し続けて役立つ記事を書いていきたいです。

hitsuzi.hatenablog.com

さて本題に戻る。

f:id:yugiboyy:20170817121644p:plain

記事下にSNSアイコンを設置していたものの、リンク先を設定していなかった。

<div class="flwtxt">ひとブロをフォローする</div>
  <div class="sns_follow">
    <a href=""class="follow_btn flwhtn"><i class="fa fa-bookmark"></i></a>
    <a href="" class="follow_btn flwtw"><i class="fa fa-twitter"></i></a>
    <a href="" class="follow_btn flwfb"><i class="fa fa-facebook"></i></a>
    <a href="" class="follow_btn flwp7"><i class="fa fa-bolt"></i></a>
    <a href="" class="follow_btn flwfd"><i class="fa fa-rss"></i></a>
  </div>

 この機会に読者登録、Push7、Feedlyへのリンク設定もやっておくことにした。

<a href = "">の""内にそれぞれのURLを記載。

はてなブログ

はてなブログの読者登録URLはダッシュボード→設定→詳細設定→読者になるボタンから見つけることができる。

Push7

Push7のリンク設定はこちらを参考にさせてもらった。

webledge-blog.com

Feedly

FeedlyのURLはRSSフィード取得・検出ツール - RSSリスティングで自分のブログのURLを入れるだけ自動検出してくれる。

まとめ

ブログデザインはやればやるほど、見栄えがよくなるので楽しいですね。今回はあまり手をつけることができなかったので、暇な時にデザインをいじって、随時この記事も更新していこうと思います。