はてなブログのスマホデザインをコピペだけでプチカスタマイズ

ブログ

はてなブログプチカスタマイズ

　ひさしぶりにスマホ用画面のデザイン弄りたくなってしまったのでやってみました。ちなみにはてなブログPro専用です。

　ちなみにこの記事は完全に自分のメモです。こうやって書き残しておかないと、後で何をやったかわからなくなってしまうので書いています。デザイン変更するときは、こうやって何をしたか残しておくと後で助かることは多いのでわりとオススメです。

カスタマイズ

　やったことは以下。全部コピペだけです。

英語フォント変更・記事中の見出し変更・記事一覧変更

　以下記事参照


フッターにあるはてなブログ関係のリンクを削除

　以下記事参照


PCの表示スタイルと合わせたタイトルや見出し設定

デザイン変更前後

　デザインの変更前後のスクリーンショットです。こうやってみると地味な変化ですね。

デザイン変更前

記事一覧

f:id:karaage:20150310224837j:plain:w480

記事中身

f:id:karaage:20150310224908j:plain:w480

フッター

f:id:karaage:20150310224843j:plain:w480

デザイン変更後

記事一覧

f:id:karaage:20150310224935j:plain:w480

記事中身

f:id:karaage:20150310225453j:plain:w480

フッター

f:id:karaage:20150310224940j:plain:w480

　以降は細かい話なので、読みたい方だけ続きを読むをクリック下さい

CSSコード

　デザインは、はてなブログのデザイン画面のスマホ画面のスマホ・ヘッダーのタイトル下htmlの部分を編集することで変更できます。詳しくは下記記事参照下さい。

　コピペするコードは以下。

スポンサーリンク
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- karaageR -->
<div style="text-align:left;margin-left:0px">
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-6660796932619209"
     data-ad-slot="9139203376"
     data-ad-format="horizontal"></ins>
</div>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


<style type="text/css">
  body {font-family:"Avenir Next", sans-serif;}
 .entry-content h4 { color: rgb(59, 66, 126);/*文字色*/
                    background: rgb(243, 242, 252); /*背景色*/
                    padding: 10px 10px; /*見出しまわりのスペース 上下、左右*/
                    border-left: 9px solid rgb(97, 101, 134); /*見出し左の線*/}
  .list-entry-article .thumb-image 
      {
      width: 100px; /*サムネイル画像の横幅*/
      height: 100px; /*サムネイルが画像の縦幅*/
      border-radius: 0em; /*サムネイル画像の角の丸みをなくす*/
      border: solid 3px rgb(61, 61, 61); /*画像の枠線をつける*/
      }
  .date
      {
      color: white; /*日付の文字色*/
      background: #444B99;/*日付の背景色*/
      padding: 0px 10px;/*日付の文字まわりのスペース*/
      }
    
  .footer-action-wrapper{
    display:none;
  }

  .touch-item-list{
    display:none;
  }

  .entry-content h3, .entry-content h1, 
  .entry-content h2, .hatena-module-foot h3 {
    font-size: 110%;
    font-weight: bold;
    margin: 1em 0 0.5em 0;
    padding: 4px 10px;
    border-left: solid 10px #c0392b;
    background: #eee;
  }
</style>

まとめ

　デザインはちょこちょこ変えたくなりますね。PCデザインの方も4月くらいのタイミングでテーマ変えたいなと思っています。ただ、デザインいじるのははまるときりが無いので、自分は1回のリニューアルに1時間以上はかけないようにしています。そもそもあんまりセンスがないので。

関連記事