【はてなブログ カスタマイズ】はてなブログ Pro にしてから、カスタマイズした方法と参考にしたサイト

記事一覧ページに広告が多すぎるのに我慢できなくて、ブログ開設して数日後にすぐに はてなブログ Pro にしてしまいました。だからダイエットも続かないんじゃ…

カスタマイズというほどカスタマイズできていないのですが、はてなブログの基本的なカスタマイズの際に参考にしたサイトや記事をまとめておきます。

テーマ

はてなブログのテーマは「Innocent」を使っています。作者の方が公開しているコードをコピペするだけでナビゲーション下におすすめ記事一覧を表示できるのがとても便利です。

moonnote.hateblo.jp

続きを読むボタンを横長に

カスタマイズってほどのことでもないのですが、続きを読むボタンが左に寄ってると視線の動きが煩雑になるかなと思い、思い切って横幅いっぱいに伸ばしてみました。ついでにhover時に白抜きに色が変わるようにしました。

f:id:hatarakitakunaingo:20161220165021p:plain

 

/*======続きを読む======*/
.entry-content .entry-see-more {
 border:1px solid #333;
 border-radius:3px;
 width:100%;/*横幅いっぱい*/
}
.entry-content .entry-see-more:hover {/*白抜き*/
 background-color: #fff;
 color: #333;
 border:1px solid #333;
}

サイドバーの関連記事を記事の下に移動させる

直帰率改善・回遊率UPのため、関連記事を記事の下に表示させました。

こちらのブログで紹介されているコードがすごく簡単でした。jQueryをコピペするだけで簡単に設置できます。サイドバーのモジュールを移動するだけなので、プラグインを入れたりするより軽いんじゃないでしょうか(多分)

www.dreamark.tokyo

 

iPhoneホーム用アイコンを設定

言葉で説明しにくいので、画像で説明すると

コレです↓

f:id:hatarakitakunaingo:20161220181648p:plain

web仕事をしているので、通常サイトでのiPhoneホーム用アイコンの設定方法は知っていたのですが、はてなブログではどこに画像をアップロードして、どこで設定すればいいのかわからなくて困っていたのですが、下記のブログを参考にして設定できました。

happylife-tsubuyaki.hatenablog.com

 

シェアボタン

f:id:hatarakitakunaingo:20161220182642p:plain

シェアボタンのカスタマイズにはAddthisを使いました。全部英語のサービスですが、あっという間にシェアボタンをカスタマイズできます。サイトを登録してコードを自分のサイトに埋め込んでおけば、Addthisのダッシュボードでシェア先のSNSを簡単に変更できます。

www.addthis.com

 

おしまい

続きを読むボタンやシェアボタン、関連記事、アイコンなどは目を引かなきゃいけないので変更必須のポイントかなと思います( ˘ω˘ )

今度はAddthisの使い方とはてなブログに独自ドメインを設定する方法の記事を書きますね

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください