ウェブ学のすすめ

Study of Web Design & Programing

はてなブログテーマ(レスポンシブ)にブログアイコンを表示させる方法


f:id:vinton:20150517210725p:plain

はてなブログテーマのスマホ版にはブログアイコンが表示されていますが、レスポンシブデザインにするとHTML自体が書き出されません。レスポンシブデザインでもブログアイコンを表示させる方法を無理やりですが編み出したのでご紹介します。

作成したはてなブログテーマ「Material」に合わせて解説していますが、他のテーマでも応用できるかと思います。

はてなブログテーマ(レスポンシブ)にブログアイコンを表示させる方法

【1】「設定」画面を開き、タブ「詳細設定」を選択してブログアイコン上で右クリックします

↓「画像URLをコピー」をクリックしてメモしておきます

f:id:vinton:20150506181545p:plain

【2】「デザイン」画面を開き、タブ「カスタマイズ」を選択して「ヘッダ」をクリックします。

f:id:vinton:20150506180416p:plain

【3】「タイトル下」に下記のHTMLを追加します
  • 2行目:「http://webgaku.hateblo.jp/」はご自身のブログURLに書き換えてください。
  • 3行目:「src=""」内の画像URLを【1】でメモしたURLに書き換えてください。
<div class="header-blog-icon">
  <a href="http://webgaku.hateblo.jp/">
    <img src="http://cdn.image.st-hatena.com/image/square/17329e6313331dbbb7f7a8ae011afeda4b6b06e7/backend=imagemagick;height=128;version=1;width=128/http%3A%2F%2Fcdn.mogile.archive.st-hatena.com%2Fv1%2Fimage%2Fvinton%2F297796995581124407.png">
  </a>
</div>
【4】「デザイン」画面を開き、タブ「カスタマイズ」を選択して「デザインcss」を表示します

f:id:vinton:20150502212011p:plain

【5】「デザインcss」の一番下に下記のcssを追加します
/* スマホ時にブログアイコン表示 */
.header-blog-icon {
  display: none;
}
@media (max-width: 767px) {
  #blog-title {
	padding: 5em 0 5em;
  }
  .header-blog-icon {
	display: block;
	text-align: center;
	margin-top: 2.5em;
        position: relative;
  }
  .header-blog-icon img {
	width: 60px;
	height: 60px;
	-webkit-border-top-right-radius: 60px;
	-webkit-border-bottom-right-radius: 0;
	-webkit-border-bottom-left-radius: 0;
	-webkit-border-top-left-radius: 0;
	-moz-border-radius-topright: 60px;
	-moz-border-radius-bottomright: 0;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-topleft: 0;
	border-top-right-radius: 60px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 4px solid #FAFAFA;
	background: #FAFAFA;
  }
}
【3】カスタマイズ完成です

スマートフォン(横幅767px以下)になるとブログアイコンが表示されます

f:id:vinton:20150506183242p:plain