アメリカ生活いろはのい

国際結婚した主婦のゆる〜りアメリカ生活

『 はてなブログ 』カスタマイズまとめ☆その4@スマホデザイン

f:id:americanlife:20161106202707j:plain



ずっと気になっていた、スマホのカスタマイズをやっと行いました。今までは「 レスポンシブ 」を利用していたのですが、もっとシンプルにスッキリとスマホで表示させたくなったからです。レスポンシブはPCとスマホが同じデザインになるので便利ですが、スマホでの表示がごちゃごちゃしているのが気になっていました。


はてなブログPro(有料プラン)でのカスタマイズとなります。はてなブログ(無料)では、スマホ表示のカスタマイズはできません。


そこで今回も備忘録も兼ねて、当ブログで行ったカスタマイズをまとめてみました。スマホデザインは初めてですが、カスタマイズのまとめ記事としては、第四弾になります。


前回の第三弾の記事はこちらになります。
www.americalife.net

はてなブログのスマホデザインのカスタマイズは『 ひつじの雑記帳 』を参考に!

はてなブログを利用しているなら、知っている方も多いと思いますが、こどみすさんのブログ『 ひつじの雑記帳 』で、ご自身がスマホで実践しているカスタマイズ・コード全てを紹介されています。


その記事がこちらです。
hitsuzi.hatenablog.com


有り難いことにこの記事を参考に実践すれば、初心者にも簡単にスマホデザインをカスタマイズすることができます。私も今回、参考にさせてもらいました。と言うか、ほぼほぼ同じデザインになりましたが。。。 (´∀`;)


プロフィール画像のURLと画像サイズの指定

コードのコピペとリンクなどを指示どおりに記入することで、カスタマイズができるようになっていますが、まだまだHTML・CSSの知識が少ない私には、理解できずに戸惑うところもありました。


その中でも特に苦労したのが、プロフィール画像のURLの確認です。どうやって確認したらいいのかが分からず、ネット検索して「 はてなブログで画像のURLを取得 」する方法を見つけました。


その記事がこちらです。
www.tsurezure-english.com


画像付きの説明でとても分かりやすく、無事にプロフィール画像のURLの取得と画像サイズの指定をすることができました。画像サイズを指定しないままだと大き過ぎて、表示がきちんとできませんでした。

< img src="プロフィール画像のURLをここに" width="60" height="60" alt="id:はてなIDをここに入れる" class="profile-icon" >

元のコード↑には、画像サイズを指定するwidth="60" height="60"がなかったので追加しました。ちなみに「 60×60 」がはてなブログのプロフィール画像と同じサイズになります。


『 はてなブログでプロフィール画面のURLを取得 』する方法

「 ダッシュボード 」→「 9個の四角のアイコン 」→「 はてなフォトライフ 」→「フォルダを編集 」

  1. プロフィールに使用する画像の「 選択にチェック 」を入れる
  2. 「 ブログに貼り付ける 」ボタンを押す
  3. 画像の「 HTMLタグ 」が表示される

< img src="http:/ /img.f.hatena.ne.jp/images/fotolife/a/americanlife/ 20160308/20160308181149.jpg" alt="20160308181149" >

そこで表示される、img src以降の部分がプロフィール画像のURLとなります。


「 レスポンシブ 」で行ったカスタマイズのコード変更を忘れずに!

『 ひつじの雑記帳 』にあるカスタマイズをしたらそれで完了だと思っていたら、そうではありませんでした。今まで「 レスポンシブ 」機能で、PCと同じようにスマホでカスタマイズが反映されていた部分が、適用されなくなったからです。


そんな事はすっかり忘れていたので、スマホでブログ記事の確認をしている時に、適用されていないことに気づきました。「 レスポンシブ 」を解除したので、それぞれPCではコードの変更、スマホではコードの追加が必要となります。


今回私が行った、それぞれのPCとスマホの変更と追加は以下になります。

*スマホのコードを挿入する場所*
「 ダッシュボード 」→「 デザイン 」→「 スマートフォン 」→「 ヘッタ 」→「 タイトル下 」

*スマホのコードはstyleタグで囲む*
<style type=text/css>
ここにコードをコピペ
</style>



『 カエレバ・ヨメレバ 』のカスタマイズコードの変更と追加

PCのレスポンシブコードをPCコードに変更して、スマホコードを追加しました。
参考にしたのは、こちらの記事です。
www.yukihy.com


『 アプローチ 』のカスタマイズコードの追加

スマホにコードを追加しました。
参考にしたのは、こちらの記事です。
www.yukihy.com


『 引用 』のカスタマイズコードの追加

スマホにコードを追加しました。
参考にしたのは、こちらの記事です。
saruwakakun.com

デフォルトの引用デザインの取り消し方法

ブログテーマは「 Minimalism 」を利用していますが、スマホにそのままカスタマイズコードを追加しても、デフォルトのデザインの「 左側の線 」が消えずに残っていました。そこでコードに、border-left:none;を追加して消しました。


blockquote {
position: relative;
padding: 5px 12px 5px 56px;
box-sizing: border-box;
font-style: italic;
color: #464646;
background: #f0f7ff;
border-left:none;
}


『 囲み枠 』のカスタマイズコードの追加

スマホにコードを追加しました。
参考にしたのは、こちらの記事です。
saruwakakun.com


『 マスキングテープ風デザイン 』のカスタマイズコードの追加

スマホにコードを追加しました。
参考にしたのは、こちらの記事です。
blog.minimal-green.com



『 文字の強調に蛍光ペン風ラインの装飾 』のカスタマイズコードの追加

コピペだけで、3色の蛍光ペン風ラインを装飾できるのでかなりオススメです。しかも使い分けもとても簡単にできます。


スマホにコードを追加しました。
参考にしたのは、こちらの記事です。
gadgerepo.com


スマホのSNSシェアボタンのデザインを変更

f:id:americanlife:20180314023433p:plain
スマホのSNSシェアボタン


じつは今まで使用していたSNSシェアボタンが、スマホ画面で表示されるとTwitterとPocketが下にズレ落ちてしまっていました。ずっと気になっていたのですが、そのままにしてしまっていました。(ちょっと面倒だっので。。。)


でもようやく今回、スマホのSNSシェアボタンを変更しました。PCは今ところはそのままで、コードの変更もしていません。また気が向いたらデザインを変更するかもしれませんが。。。


カウンターの表示なしにしたかったのと、丸型のデザインにしたくてこれに決めました。でも少しスマホで表示されると、イメージと違っているような気がしてます。
参考にしたのは、こちらの記事です。
www.daipanman.com


スマホのカスタマイズのまとめ

今までずっと「 レスポンシブ 」を利用していたので、PCで一度カスタマイズをすればスマホにも同じように適用されるので便利でした。でも、これからはPCとスマホのそれぞれでしなければなりません。少し手間は増えますが、スマホに合ったデザインに変更することができたので満足です。