読者です 読者をやめる 読者になる 読者になる

心に火を、指先にペンを

愛と平和のラビリンス

コピペでできるはてなブログカスタマイズ / モバイルトップをオシャレに

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

皆さんこんばんみー。コトリです。

今日もやって参りました。ブログに行き詰まった時のカスタマイズタイム。わかってるんです。そんなことよりもブログを書けってことぐらい。でもさー、せっかく色々な記事見て勉強したのに試さないのもどうなのかなと(言い訳)。アウトプットしないインプットに何の価値が有るのかと(言い訳)。そう問いたいわけです。

 

ただ僕はこのエントリーでまとめたように自分でコードを書いて新しいカスタマイズを生み出せる人間ではございません。

defender-21.hatenablog.com

じゃあこのエントリーで紹介しているブログを見てもらうのが一番いいと思うんですけどやっぱり初心者には難しいわけです。その辺を同じ初心者である僕にできることはないかなと思った次第です。

カスタマイズ初心者向けに僕ができること

初心者はやっぱりCSSの意味分かんないんので丁寧に書いてあるコードや説明文みても「???」ってなります。じゃあカスタマイズすんなよって思うんですけどやりたいんですよね。ワガママ極まりない。良くコードの中に*ここに色を入れる*とかあるんですけどそれをそのまま貼っちゃうみたいな。しかも完コピしちゃうので色も形も皆おなじになってしまう。

 

ということで先輩方の偉大な知恵を私が人身御供になって

  1. 完全にコピペできる状態にまで落とす
  2. 複数パターン用意する(カラーバリエーションとか)

やってみましょう、ホトトギス。初心者の皆さん、先輩たちに感謝しながらブログをカスタマイズしていきましょうぞ。

1.大人気カスタマイズはてなブログモバイルのトップページ記事一覧をお洒落にするコピペ

参考にする記事

tsukuruiroiro.hatenablog.com

超おしゃれな「Literally」さんのこの記事を参考にカスタマイズしていきます。

設定箇所

まずPROであることが前提です。以下手順で進んで下さい。

  • ダッシュボード→デザイン→スマホ→ヘッダ→タイトル下→スマホ用HTML

ここにこれから貼るコードをコピペして下さい。

カスタマイズBefore-After

カスタマイズ前の状態

f:id:defender_21:20150324101931j:plain

真っ白でのっぺりしていますね。

①本家の紺地に白文字ver.

f:id:defender_21:20150324101911j:plain

<style type="text/css">
.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;
}
</style> 

いきなりお洒落になりました。それもかなり。ではこれの色違いを書いていきますね。

②当ブログ用青地に白文字

f:id:defender_21:20150324102020j:plain

<style type="text/css">
.list-entry-article .thumb-image
{
width: 100px;
height: 100px;
border-radius: 0em;
border: solid 3px rgb(61, 61, 61);
}
.date
{
color: white;
background: #0000ff;
padding: 0px 10px;
}
</style> 

青色をこのブログのテーマカラーにしようと思い変更しました。

③カープファン向け赤地に白文字

f:id:defender_21:20150324101941j:plain

<style type="text/css">
.list-entry-article .thumb-image
{
width: 100px;
height: 100px;
border-radius: 0em;
border: solid 3px rgb(61, 61, 61);
}
.date
{
color: white;
background: #ff0000;
padding: 0px 10px;
}
</style> 

赤字はやっぱり力強いですね。

④猛虎ファン向け黄色地に黒文字

f:id:defender_21:20150324102008j:plain

<style type="text/css">
.list-entry-article .thumb-image
{
width: 100px;
height: 100px;
border-radius: 0em;
border: solid 3px rgb(61, 61, 61);
}
.date
{
color: black;
background: #ffff00;
padding: 0px 10px;
}
</style> 

あふれる猛虎魂。

⑤大宮アルディージャファン向けオレンジ地に白文字

f:id:defender_21:20150324101950j:plain

<style type="text/css">

.list-entry-article .thumb-image
{
width: 100px;
height: 100px;
border-radius: 0em;
border: solid 3px rgb(61, 61, 61);
}
.date
{
color: white;
background: #ff8000;
padding: 0px 10px;
}
</style>

ポップな感じがしていいですね、オレンジも。

 

これでモバイルのトップ面がオシャレになりますね!次にモバイルの離脱箇所を減らす施策です。

はてなブログへの余計な導線の削除

参考にした記事

www.usamofu.com

うさもふさんのこの記事を参考にしていきます。

設定箇所

  •  ダッシュボード→デザイン→スマホ→フッタ→スマホ用HTML

今度はフッタの編集です。

カスタマイズ Before-After

カスタマイズ前の状態

f:id:defender_21:20150324105255j:plain

わかりますかね?この「はてなブログをはじめる」「はてなブログ開発ブログ」「週刊はてなブログ」「はてなブログトップ」への導線を切って可能な限り当ブログ内を回遊してもらおうというカスタマイズです。

本家のコード
<style>

.hatena-module-title{display:none;}
.profile-wrapper{display:none;}

.footer-action-wrapper{display:none;}

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

</style>

これをいれるともれなくなくなるんですがうさもふさんの言及している通り「読者になる」のボタンも消えてしまいます。ぼくは「読者登録」はブログの最重要KPIと思っているのでこれは外したくない。うさもふさんは知識ある方なので何とかしていましたが初心者の僕には厳しい。

「はてなブログをはじめる」の削除は諦めはてなへの導線のみを削除

f:id:defender_21:20150324101958j:plain

こうしました。「読者になる」と「はてなブログをはじめよう」は生きです。

<style>

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

</style>

どうやら「.footer-action-wrapper{display:none;}」が「読者になる」と「はてなブログをはじめよう」を内包していたようなのでそこは記載せず。あとプロフィールは合ってもいいかなと思ったのでそれも記載せずシンプルなコードになりました。

 

これでモバイルがオシャレかつ回遊しやすいサイトになったんではないかなと思います。僕も今後のユーザーの動きが楽しみです。

今後検討しているカスタマイズ

カスタマイズはキリがないのですが以下はやりたいなと

  1. 目次をつける
  2. 大見出しのカスタマイズ
  3. アドセンスの最適化
  4. 注目の記事のオシャレ化
  5. 引用部分のオシャレ化

とは言え記事を書くことのほうが重要なんですけどね。

 

第2弾はこちら

defender-21.hatenablog.com

ブログ運営関連記事

 合わせてどうぞ

defender-21.hatenablog.com

defender-21.hatenablog.com

defender-21.hatenablog.com

defender-21.hatenablog.com

Copyright© 心に火を、指先にペンを All Rights Reserved.