こトリさんが!米国株投資で借金家族を助けたい!

ゆるゆる米国株投資とゆる育児(*'ω'*)

ーおすすめ記事ー




はてなブログでサイトをスマホ向けに大幅カスタマイズ!劇的ビフォーアフター18選!

f:id:fereshte:20191019113529p:plain

はじめに、今回サイトをカスタマイズするにあたり、様々なサイトを参考にさせて頂きました。先駆者様の努力があってこその今回のカスタマイズが完成いたしました。

ここに、全てのカスタマイズサイト運営者様に感謝の意を表します。

皆様、ありがとうございます!

Point
☆特にスマホユーザーに向けた大幅カスタマイズ!
☆サイトは顔!見る人を引き付けるサイト作り
はてなブログでもここまでできる!

 

はてなブログを大幅カスタマイズしました!

長らくお暇をいただきまして、ブログのカスタマイズを行っていました。ワードプレスに比べて拡張性の乏しいし、なんかダッセエと言われるはてなブログですがたとえはてなブログでもカスタマイズすればここまで出来る!ことをテーマに今回は記事を書いています。

従来までの画面

f:id:fereshte:20191019105726j:image

リニューアル後

f:id:fereshte:20191019105815j:image

全く原型を留めていないのがお分かりいただけるでしょうか?

当ブログでは8割の方がスマホより閲覧されています。そのため、今回のデザイン変更はスマホ利用でのユーザービリティを最優先課題として行いました。(もちろんPC版と共通するところもありますが)

なお、ブログのカスタマイズをする際には必ずバックアップを取ってから行いましょう。

では、今回のブログで変更した箇所をご紹介していきます!

1.タイトルの変更

(旧)ことりパパの育児とお金の話→(新)ことりさんが!米国株投資で借金家族を助けたい!

ふと大きなことに気づいたのですが、誰もことりパパって呼んでいないんですよね、タイトルなのに。活動のプラットフォームがTwitterにあるのが大きな要因なのですが、いつの間にやらこトリさんがメインで活動していました。

そのためそれに伴い「こトリさん」と「米国株投資」を主題としたブログをテーマに題名を変更しました。

下剋上というやつじゃな!

はてなブログダッシュボード→設定→基本設定→ブログ名変更

f:id:fereshte:20191016211515p:plain

②アナリティクス→⚙→プロパティ設定→プロパティ名変更

f:id:fereshte:20191016211836p:plain

タイトル変更後行うことはこれだけです。

しかし、タイトル変更後に伴いGoogle検索に引っ掛からなくなりますので、また地道に活動を続けましょう。

なお、既存の記事の検索順位等は変わらないようなのでご安心を。

2.ヘッダー画像の作成
3.アイキャッチ画像の作成

ヘッダー画像およびアイキャッチ画像はCanvaで作成しました。手探りで覚えていけるものなので、説明を読むより触ってみた方が早いです。

↓作成したヘッダー画像↓

f:id:fereshte:20191019105937j:image

センス次第ですが簡単にオサレなデザインが作成できます。私のデザインセンスはアレですが、センスがある人ならきっとかっちょよく仕上げてくれると信じています。

www.canva.com


4.おすすめ記事の作成
5.おススメ記事をパネル型で作成

画面下におすすめ記事およびワードプレス風のパネル型記事を作成しました。ホーム画面を見たときに、3秒でパッと視覚に訴えれるように記事を作成しています。

↓トップページのオススメ記事↓

f:id:fereshte:20191019110209j:image

冷やかし(失礼)で当ブログを訪れた方に、パッと興味を持ってもらうようにするにはどうするか、と考えたゆえの結論です。

  • 視覚と直感で興味を引くようにする
  • 情報量は多すぎず、3つか4つに留める

そのためにパネル型の表記にしてあります。

以下のサイトを参考にさせて頂きました。

www.oheya-migaru.com

なお、おススメ記事をパネル型で表示する際には、写真であればJPG、当ブログのようにイラストであればPNGでのアップロードをおススメします。

イラスト系画像をJPGでアップロードすると、ピンぼけしたような画像になる可能性があるためです。

とはいえ、JPGでアップロードするに越したことはないため、まずJPG、画像がボケるようならPNGを試してみては如何でしょうか?

JPGでアップロードする場合

(※はてなフォトライフにアップロードすると、自動的にJPG変換されるため、PNG貼り付けは出来ません)

f:id:fereshte:20191019102530p:plain

PNGでアップロードする場合


Canvaで作成した場合→Canvaホーム画面で右クリック→画像アドレスをコピー→該当箇所に貼り付け
(※PNG画像は重いため、サイトが重くなることに注意しましょう)

f:id:fereshte:20191019102307p:plain

Canvaホーム画面

6.スライドメニューの作成

画面上部のスライドメニュー表記です。

スライドメニューに収まるよう、カテゴリを再編成してを最小限に抑えました。今までタグが目立つところになかったため、前面に出してきた形です。

スライドメニュー画面↓

f:id:fereshte:20191019110607j:image

また、閲覧数が少なかったりブログテーマに合わない記事はバッサバッサと切り捨て、不要な記事の整理も行っています。

参考にしたのは以下のサイトです。

hitsuzi.hatenablog.com

上記サイト様のコピーコードには載っていませんが、スライドメニュー前にはアイコンを設置することもできます。

<nav id="gnav">
  <div class="gnav-inner" id="menu-scroll">
  <div class="menu"><a href="URL">メニュー1</a></div>
  <div class="menu"><a href="URL">メニュー2</a></div>
  <div class="menu"><a href="URL">メニュー3</a></div>
  <div class="menu"><a href="URL">メニュー4</a></div>
  <div class="menu"><a href="URL">メニュー5</a></div>
  <div class="menu"><a href="URL">メニュー6</a></div>
 

<div class="menu"><a href="URL">メニュー7</a></div>

アイコンを設置する場合は<i>タグを使って以下のように設定します。

<div class="menu"><a href="URL"><i class="blogicon-hatenablog lg"></i>メニュー1</a></div>

上記コードでははてなブログのアイコンですが、このブログアイコンは以下のサイト様にまとめられているのでご参考ください。

shirokai.hatenablog.com

7.スマホ用複合メニューバーの作成

こちらはスマホ下のメニューです。はてなブログでは記事を読んだ後に、上に戻る画面がすぐ探せないのが意外にストレスです。

そのため、スクロールしても常に画面上部に戻れるようなボタンは有用だと考えて作成しました。

複合メニューバー↓

f:id:fereshte:20191019110711j:image

参考にしたのはこちらのサイト様なのですが…なぜか上に戻るボタンがうまく機能しませんでした。

恐らくCSSを入れすぎてどこかと競合しているんでしょうが、原因が結局わからなかったため、自分でアレンジして上に戻るボタンを作成しました。

該当コード個所に<a class="back-btn" href="#">を代入してホーム画面に飛ぶように設定をしています。

www.yukihy.com

8.はてなメニューを片っ端から消す

その名の通り、はてなメニューを片っ端から消しました。はてなブログを使っていると、運営画面に飛んだりするような表記になっているのでそれを避ける形です。

大事な「読者登録」ボタンも無くなりましたが、上記の複合メニューバーに組み込むことで解決としました。

すっきりしますが、その後が大変なのでバックアップをきちんとしておくことをおススメします。

参考にしたのはこちらのサイト様。

www.hucl.jp

はてなっぽさが一気になくなるから、一瞬はてなブログとわからなくなるぞい


9.目次画面の変更
10.見出しの変更
11.タイトル回りのデザイン変更

はてなの既存の見出しや目次は文字が太くなるだけと武骨ですので、デザインの変更をしました。

目次の変更↓

f:id:fereshte:20191019110900j:image

見出しの変更↓

f:id:fereshte:20191019110927j:image

タイトル回りのデザイン変更↓

f:id:fereshte:20191019110957j:image

目次画面および見出しデザインの変更はこちらのサイト様を参考にして変更しています。

 

hitsuzi.hatenablog.com

12.見出しのタグ自動変更

また、はてなブログの「大見出し」「中見出し」「小見出し」は何故か<h3>,<h4>,<h5>になっています。特に大見出しのh2タグの表記はSEO対策として重要とされているにも関わらず、<h3>タグであるため、今までは地道に<h2>タグに変更していました。下記サイト様の記事は、Chrome拡張機能を利用して見出しのタグを自動で<h2>、<h3>、<h4>に変更してくれます。

affiliate-couple.hatenablog.com 

13.ラインマーカーの使用

ここからは記事内のデザイン変更ポイントです。まずはよく使われるラインマーカーを使用するカスタマイズ。

ラインマーカー例↓

f:id:fereshte:20191019111102j:image

参考にしたのは以下のサイト様です。

maroharu.com

14.黒板の使用

Pointを表示するための黒板風CSSコードです。記事内容のまとめの強調のために利用しています。

黒板使用例↓

f:id:fereshte:20191019111205j:image

以下のサイト様を参考にしています。

blog.minimal-green.com

15.吹き出しの改善

会話風吹き出しも今回の改善のテーマでした。おそらく会話風吹き出しのHTML&CSSは多くの人がシロマさんのこちらのサイトを利用されていると思います。

www.notitle-weblog.com

私もこれを従来より利用していましたが、顔に合わせた丸型アイコンではなく、全身を表示して会話形式にすることはできないかと考えていました。

従来の会話アイコン↓

f:id:fereshte:20191019111512j:image

まず、コードをイラストの長さに合わせるために縦長にします。元のコードに吹き出しの大きさを指定するCSS箇所があるのでそれを書き換えます。

@media screen and (max-width: 478px) {



.entry-content .l-fuki::after,



.entry-content .r-fuki::after {



width: 60px;←幅



height: 60px;←高さ



border-radius: 30px;

私はwidthを80px、heightを120pxにして調整しました。

続いて周りの枠を消します。下記コードのborder部分を削除します。

.entry-content .l-fuki::after,



.entry-content .r-fuki::after {



position: absolute;



content: "";



width: 80px;



height: 80px;



top: -10px;



border-radius: 40px;



border: 3px solid #fff;←消す



background-size: cover;



background-position: center center;



background-repeat: no-repeat;



box-shadow: 1px 1px 5px #aaa;



}

最後に、全身絵を使う場合はイラストを背景絵と同化させる必要があります。引用画像がpng画像であれば背景が透明化されるのでbackground-colorを変更すればすんなりできる(ハズ)なのですが、このコードは「はてなフォトライフから指定画像を引用する」ことになっており、はてなフォトライフはJPG画像であることから背景の透明化処理ができません。

そのため、元の画像の背景をサイトの同色で描く必要があります。

まず、ブログの背景画像のカラーコードを下記サイトを利用して抽出してきます。

higashi-dance-network.appspot.com

次に、Windowsに内蔵されているペイント3Dを利用して、抽出したカラーコードで色を指定します。そして画像の背景を該当する色で塗りつぶします。

f:id:fereshte:20191018000812p:plain

  1. 吹き出しのサイズ変更
  2. アイコン枠を消す
  3. 背景色と同化させる

この3ステップを経て現在の全身絵アイコンが完成しました。

ドヤァ、全身絵じゃぞい

私も全身絵になったぞ

16.イラストの新調

これまで1枚だけだったイラストを元に、デフォルトアイコンをココナラで依頼しました。アイコンを増やすことで、何より自分の書くモチベーションが上がるのが利点です。自分の好みに合った絵柄を吟味して決めましょう。

coconala.com

作成して頂いたイラスト

f:id:fereshte:20191019111607p:image

17.アドセンスの貼り付け位置変更
18.関連コンテンツの追加

最後にアドセンス関連の変更です。2019年10月からアドセンスで自動広告が開始されましたので、公式に従いコードの貼り付けを行いました。

また、いつの間にやら関連コンテンツの追加が可能になっていましたので、そちらのコードも記事下に貼り付けました。

関連コンテンツの開放についてですが、当ブログでは200記事、5万PV達成後に貼り付け可能になっていました。何かの参考になれば幸いです。

最後に、負けるな!はてなユーザー

ほとんどのカスタマイズは元サイト様に従ってコピペするだけなので苦ではないでしょう。しかし、今回の私のように色やサイズを変えたりと簡単なカスタマイズをしたいと考えることもあると思います。

全くHTMLとCSSの知識が無い方は、Progateの無料部分だけでも学習することをおススメします。全く知らない「0」の状態よりは、少し学んで「1」の状態で臨んだ方が、はるかに作業ははかどります。

prog-8.com

初級なら数時間で終わるから、是非やってみるとよいぞい!

わたし自身はHTMLとCSSの知識は全くありませんでしたが、本当に最低限Progateで学んでいただけでもだいぶ違うと実感しました。

各コードが何を表しているか、用語を知っているだけでも作業は捗ります。

はてなブログワードプレスに比べて拡張性がないと言われていますが、先駆者様が研究してくださった技術を使えば負けないほどのサイトが作れることがわかりました。

拡張性さえ何とかできれば、はてなブログには読者登録やはてなブックマークなどの強みを生かしてサイト運営をすることが出来ます。

皆様も是非一度、腰を据えて取り組んでみるのはいかがでしょうか?

 

ここまで読んでくれてありがとう!応援クリック嬉しいですぞい!

 

にほんブログ村 株ブログ 米国株へ
にほんブログ村


米国株ランキング