データサイエンティストハトリのブログ

PythonとインテリジェントクラウドとAIが好きな学生エンジニア。データ分析、スクレイピング、就職活動などについて書いていきます。

【UnderShirt】はてなブログでwordpressっぽいデザインにカスタマイズする方法

f:id:hatorihatorihatorik:20180929121253j:plain

こんにちは、どうもハトリです!!

 

TwitterでプログラミングやIT関連のことについてつぶやいているのでよかったら是非フォローしてください →→(@tori_engineer)


はてなブログをうまくカスタマイズして、wordpressっぽくデザインできないかな〜と思いいろいろ調べてみたのでまとめてみました。

 

↓ このサイトをお手本にしてカスタマイズをしていきました。


phys-and-program.com

はてなブログwordpressっぽいデザインにするためにやったこと

テーマの設定

UnderShirtというデザインテーマを使用しました。初期設定のwordpressのように、ブログの一覧がカード型でみることができ、綺麗なデザインなのでおすすめです。

f:id:hatorihatorihatorik:20180628224900p:plain


UnderShirt - テーマ ストア

UnderShirtはこちらのリンクから設定できます。

[プレビューしてインストール]>[このテーマをインストール]

で設定完了です。

サイドバーの色変更

画面右側のサイドバーを設定していきます。これを


f:id:hatorihatorihatorik:20180628225137p:plain:w600

 f:id:hatorihatorihatorik:20180628225144p:plain:w600

こんな感じにしましょう!

[デザイン]>[カスタマイズ]>[デザインCSS] 

に下記コードをコピペでOKです。

 

/* サイドバーをwordpressっぽく */
.hatena-module-title{
 margin: 20px 0px;
 border-top-style: none !important;
 background-color: #232932;
 padding: 10px;
 border-top: 4px solid #ddd;
 font-size: 1.2rem;
 font-weight: 500;
 color: white;
 border-radius: 3px;
}
.hatena-module-title a{
 color: white;
}

/* デフォルトでついている線を削除 */
#blog-description{
 border: none;
}

/* 文字の大きさを微調整 */
.entry-content {
 font-size:16px;
}

見出しの設定

h2とh3とかの見出しのデザインを設定していきます。こちらも [デザイン]>[カスタマイズ]>[デザインCSS] に下記コードをコピペでOKです。

 

/*見出しの設定*/
h2 {
 background: #232932;/*背景色*/
 padding: 0.8em;/*文字まわり(上下左右)の余白*/
 color: white;
 font-weight: normal;
}

h3 {
 padding: 0.25em 0.5em;/*上下 左右の余白*/
 color: #232932;/*232932*/
 background: transparent;/*背景透明に*/
 border-left: solid 5px #232932;/*左線*/
}
</style> 

スライダーの設定

最後にトップページ上部にあるスライダーを設定します。この設定は以下のサイトを参考にしました。これもこのサイトをコピペで OKです!
www.tairakenji.com

 以上で完成です!