結局、僕はブログをオシャレに見せるために時間をかけてしまう。
結局ブログやると見た目がきになってそればかり時間掛けてしまうんだよなあ・・・
Wordpressからはてなブログに移行した理由の一つにデザインに時間をかけないためだったのに
まーたこれだ
こればっかしはもうしょうがない。
自分はそういう人間なんだ。
やっぱりブログって自分の場所だからどうしても見た目はオシャレにしておきたい。
ということで色々とカスタムしたので
自分がなにしたかメモしておかないとまずそうだと思ったのでまとめる。
このブログの見た目にしたい人は下記のカスタムをすればまるっきり同じになるのでどうぞ。
ブログのテーマ
テーマはとにかくシンプルな奴を選んだ。
みやびさんという方のブログが非常に見やすかったので
こちらのブログの見た目を意識してカスタムしてみた。
hacogaki.hatenablog.com
テーマは「Blank」というものを使用した。
おそらくミヤビさんのブログも「Blank」だと思われる。（原型はないくらいシンプルでオシャレになっているが）
Blank - テーマ ストア
メニューバー
大体のブロガーさんがやってるので僕もつけた。
これがあるないではわかりやすさが全然違う。
最初にブログを訪れた人のナビゲーションにもなるので大事。
メニュー追加で参考にしたのはこちらの記事
www.hiroseyonaka.com
メニューのアイコンをつけるために参考にしたのはこちらの記事
www.mutant-tetsu.com
記事のシェアボタン
これもほとんどのブログで導入されている。
記事のシェアはアクセス数に関わってくるので大事かと思い、いれてみた。
元々はてなブログの機能でシェアボタンを入れてたが見た目が微妙だったので、こっちにした。
参考にしたのはこちらの記事
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
個人的にオシャレなデザインにしたつもりだけど
全然オシャレじゃないよというツッコミはやめようね
僕はプレパレートのハートだからね。
