読者です 読者をやめる 読者になる 読者になる

reilst.txt

ゲームとアニメとマンガ。現在はTree of Saviorブログ!

結局、僕はブログをオシャレに見せるために時間をかけてしまう。


f:id:reilst:20160718003503p:plain

結局ブログやると見た目がきになってそればかり時間掛けてしまうんだよなあ・・・


Wordpressからはてなブログに移行した理由の一つにデザインに時間をかけないためだったのに
まーたこれだ

こればっかしはもうしょうがない。
自分はそういう人間なんだ。

やっぱりブログって自分の場所だからどうしても見た目はオシャレにしておきたい。

ということで色々とカスタムしたので
自分がなにしたかメモしておかないとまずそうだと思ったのでまとめる。

このブログの見た目にしたい人は下記のカスタムをすればまるっきり同じになるのでどうぞ。

ブログのテーマ

テーマはとにかくシンプルな奴を選んだ。
みやびさんという方のブログが非常に見やすかったので
こちらのブログの見た目を意識してカスタムしてみた。
hacogaki.hatenablog.com

テーマは「Blank」というものを使用した。
おそらくミヤビさんのブログも「Blank」だと思われる。(原型はないくらいシンプルでオシャレになっているが)
Blank - テーマ ストア

メニューバー

大体のブロガーさんがやってるので僕もつけた。
これがあるないではわかりやすさが全然違う。
最初にブログを訪れた人のナビゲーションにもなるので大事。

メニュー追加で参考にしたのはこちらの記事
www.hiroseyonaka.com

メニューのアイコンをつけるために参考にしたのはこちらの記事
www.mutant-tetsu.com


記事のシェアボタン

これもほとんどのブログで導入されている。
記事のシェアはアクセス数に関わってくるので大事かと思い、いれてみた。

元々はてなブログの機能でシェアボタンを入れてたが見た目が微妙だったので、こっちにした。

参考にしたのはこちらの記事
www.ituore.com

サイドバーのSNSフォローボタン

これも入れてる人が多い。
おしゃれなアニメーション付きなので気に入っている。

参考にしたのはこちらのブログ
www.ituore.com

見出しの変更

デフォルトだと文字サイズが大きくなるだけで分かりづらかったので変更。
やっぱ見出しのデザインを変えると一気に見た目がよくなった。
これは必須だ。

参考にしたのはこちらの記事
www.north-geek.com

記事一覧ページのコメントボタンを削除(7/18追加)

個々の記事ページでコメントはできるようにしているが
トップの記事一覧画面ではコメント記入ボタンは明らかに必要がないなーと思い削除した。

基本的に記事は、続きを読むで閉じているので読めないところでコメントできても意味ないからね。

やり方はCSSに下記を記述するだけだった。

.page-index .comment-box, .page-category-category_name .comment-box, .page-entries-year-month-day .comment-box{
display:none;
}

参考にしたのはこちらの記事
michiko-70554148.hatenablog.com


続きを読むボタンのデザイン変更(7/18追加)

デフォルトのものだと黒一色で質素な感じで地味ーだったので、変更!
アニメーションついてるので、なんかオシャレベルが3くらいあがったんじゃないか?

下記のコードをデザイン>カスタマイズ>デザインCSS に追記するだけだったぞ。

/*続きを読むボタンデザイン変更*/
.entry-see-more {
  display: block;
  width: 600px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  position: relative;
  color: #fff;
  background:#707070;
  border: 3px solid #333;
  z-index:2;
  overflow: hidden;
  transition: 0.2s;
}

.entry-see-more:hover {
  color:#707070;
}

.entry-see-more:after {
  position:absolute;
  content:'';
  width:100%;
  height:100%;
  top:-100%;
  left:0;
  z-index:-1;
  transition: 0.2s;
}

.entry-see-more:hover:after {
  top:0;
  background:#8fbc8f;
}


参考にしたのはこちらの記事
www.ituore.com


投稿時間から何時間経過しているか表示を消す(7/18追加)

デフォルトだと5時間前に書いた記事だとか、3日前に書いた記事だとか情報がでるので
それを消す設定。

まだ何日前とかなら意味を成すかもしれないけど
今後、ブログを何年もやった時に1年前とか2年前とか出されても・・・
と思ってしまったので表示消しました。

複数人でブログやってたりすると他の人がいつ更新したかがわかるので便利かなーと思うが
1人でやってる限りは何の意味もなさないよね

/*7/18追加 投稿時間から何時間経過したかを消す*/
.entry-footer-section{ display:none!important; }

参考にしたのはこちらの記事
www.dekihiroyoshi.com

記事内のフォントサイズ変更(7/18追加)

フォントのサイズは、ブログの読みやすさに最も関係するところだと思う!
このブログでは16に設定してみたが、デフォルトと変わらなかったので最初から16だった説。

参考記事のおすすめの設定をそのまんま持ってきました。

/*7/18追加 記事のフォントサイズ変更*/
.entry-content p{
    font-size: 16px;
    line-height: 1.7em;
    letter-spacing:1;
    margin-bottom:2.0em;
}

参考にしたのはこちらの記事
www.tarappism.com


個人的にオシャレなデザインにしたつもりだけど
全然オシャレじゃないよというツッコミはやめようね
僕はプレパレートのハートだからね。