プログラミング

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

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

このサイトをお手本にしてカスタマイズをしていきました。
物理学生エンジニア

はてなブログを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です!
参考:にーとのかがみ。

以上で完成です!