ブログテーマTilesをシンプルな見た目にカスタマイズ(PC版)

このブログでは、タイル型レイアウト「TILES」というテーマ(テンプレート)をお借りしています。

Tiles - テーマ ストア

 

イラストを公開する目的で始めたため、派手になりすぎないようにシンプルな白の背景、黒(濃灰)の文字等々、少しカスタマイズして使用しています。

たくさんの方がカスタマイズ方法を公開してくださっていたので、なんとかできましたが、調べるにも「何と検索すればいいか?」が大変で;

同じテーマでカスタマイズしたい方へ、情報を共有したいと思います。

 

Tilesのテーマはレスポンシブと書いてあるので、PC版とスマホ向けを同じテーマで見せることができるようです。ただ、当方はデフォルトテーマのままで公開しています。ノータッチ。最初からないものとしています。

無料会員で使用しているので、スマホ向けはほとんどすること無いんですよね。有料オプションぐらいの認識…なので、このカスタマイズでは、レスポンシブを有効にしたときにどう変化するかは考慮していません。すいません(´⊥`;)

色や文字サイズを変えたくらいで、たいしたことはしていないので崩れる心配はないと思いますが、その先はできる方お願いします…。

 

<変えたこと>

  • TOPのバーの色(灰)
  • 背景色(白)
  • TOPの記事表示枠(黒)
  • 続きを読むボタン追加
  • 記事ページタイトル表示(中央→左)
  • サイドボックス表示枠(黒)
  • 文字の大きさやポジション等々

ダッシュボードからデザイン設定に移動し、背景は背景色から白を選択。

他は、デザインCSSを開いて以下の文をコピペで追加。

/*TOPバーの色*/
#globalheader-container {
    background-color: #fff;
    color: #ccc;
    border-bottom: 1px solid #eee;
    position: relative;
}


/*TOPの記事部分 */
.entry-header {
  border-bottom: none;
}
.entry-title {
  font-size: 125%;
}
.entry{
  box-shadow: 0px 0px 0px 1px #999;
  border-radius: 3px;
}


/*続きを読むのボタン*/
.entry-see-more {
  display: block;
  width: 120px;
  height: 50px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  background-color: #fff;
  color: #1487bd;
  border: 1px solid #1487bd;
  border-radius: 3px;
  transition: .01s
}


/*個別記事部分*/
body.page-entry .entry-header{
  text-align: left;
}
.pager {
 margin: 5px auto;
 background-color: #fff;
 max-width: 100%;
}


/*下部ボックス部分*/
.hatena-module{
     border: 1px solid #999;
     border-radius: 3px;
}

保存したらここと同じ見た目のテンプレートになります。

/*...*/の部分が変更点の説明文です。もし、色やサイズなどを変えたいときは、カラーコード(#)やpx数を調整して保存してください。

作業は以上です。

 

余談:

ブログ上でCSSをもっとコンパクトに表示したかったんですが、普通にpreとcodeで囲って載せました。あとはコード表示の装飾の問題なのでいいや、と投げました。

(コピペできればいいや!>(´⊥`)

 

余談2:

現在、はてなブログを移転&休止中です。移転先↓

linosmemo.blogspot.jp

ここは跡地としてしばらく残す予定です。

ありがとうございました!