今スターサーバーに申し込むと利用料金が2ヶ月無料 !7月31日まで!

はてなブログカスタマイズ備忘録

BLOG
注意
現在はWordPressに移行しています。
情報が古くなって使えなくなるものが出てくる可能性がありますので、このエントリーは参考程度にとどめておいて下さい。
現在の状況は下記エントリーで確認できます。
BLOGSANGO+PORIPU+スターサーバーまとめ【前編】 BLOGSANGO+PORIPU+スターサーバーまとめ【後編】

このエントリーの改訂版
BLOGはてなブログカスタマイズ備忘録改訂版

はてなブログPROにしました

はてなブログにもだいぶ慣れてきたさっちん(@musukosuhaha)です。

無料で頑張ろうと思ったのですが、色々いじろうとするとPROの契約が必須になってくるので思い切って2年契約しちゃいました(;´∀`)

ちょこちょここのブログも手を加えているので、忘れないように備忘録。

随時追記していきます。

テーマ

テーマはこちらを使っています。

参考 Blankテーマ ストア

レスポンシブデザインなので、PCとスマホを分けなくていいのはありがたいです。

シンプルなテーマなので、カスタマイズもしやすくてオススメです。

以前のブログではピンクを基調としていたんですが、今回はあえて色は加えてません。

アドセンスなども色合いを揃えています。

設定

ブログの設定はこちらを参考にさせていただきました。

参考リンク 参考 はてなブログを始めるときに、まずやるべき9つのこと(はてなブログの使い方・初期設定)ニッチブログ

最初にやるべきことがわかりやすくまとめられていて助かりました。

ウェブマスターツールの導入

参考リンク
参考 超初心者用 ウェブマスターツールの導入方法(図解入り)鈴木です。別館

ウェブマスターツールの導入はこちらがとてもわかりやすかったです。

はてな記法

以前はてなダイアリーを使っていた時にもはてな記法は使っていたのですが、すっかり忘れていたので、よく使うものは辞書登録しました。

リンクはこれでかなりはかどります。

参考にさせていただいたのはこちら。

参考リンク
参考 はてな記法一覧はてなダイアリーのヘルプ

フォローボタン・シェアボタン・見出しのカスタマイズ

すべて同じサイトからコピペさせていただきました。

同じものを使ってる方はかなり多いと思います。

フォローボタンはサイドバーに、シェアボタンは記事下に設置しました。

参考リンク
参考 コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズYukihy Life 参考 コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズYukihy Life 参考 はてなブログシェア数付きSNSボタンカスタマイズで3D風ボタンコピペコードを追加ですYukihy Life 参考 コピペ一発ではてなブログ見出しをカスタマイズ!ちょっとの工夫で印象が格段に変わる!Yukihy Life

MEMO
Pocketのシェアボタンが変更になりました。
新たにシェアボタンを設置する方は上記の元記事から、Pocketのボタンだけ変更したい方は下記の記事からありがたくコピペさせていただきましょう。
参考 Font AwesomeでPocketアイコンが追加されたのでシェアボタンのアイコン変更の仕方Yukihy Life
注意
2015.9.30以降不具合が生じる可能性があるため、ゆきひーさんのシェアボタンを使わせていただいている方は早めに変更しましょう。
参考 【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2Yukihy Life

関連記事とパンくずリスト

これも使ってる方が多いですよね。

どちらも同じサイトからコピペで設置できます。

参考リンク
参考 はてなブログの記事下に関連記事を表示する「あわせて読みたいG」太陽がまぶしかったから 参考 はてなブログでGoogleにパンくずリストを認識させるカスタマイズ太陽がまぶしかったから

どちらも記事下に設置しています。

Google AdSenseの設置

アドセンスに関しては最後まで設置しようか悩んだのですが、せっかくPROにしたので設置しちゃいました。

サイドバーと記事上、記事下にあります。

参考リンク
参考 【意外にカンタン!】はてなブログにGoogle AdSense(グーグルアドセンス)を設置する方法と注意点はてなブログ云云でアフィリエイトがしたい人のブログ

こちらのエントリーが参考になりました。

メニュー周りのレスポンシブ対応

ほぼコピペでOKです。

いじるのは色とかフォント周りぐらいだと思います。

こちらのエントリーを参考にさせていただきました。

参考リンク
参考 はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズYukihy Life

PCサイトはグローバルメニュー、タブレットやスマホではトグルメニューに変わる優れ物です。

ヨメレバ・カエレバの導入

普段はそのままツールバーから商品リンクを貼っていますが、アマゾンにない商品に関してはカエレバ・ヨメレバを利用しています。

参考リンク
参考 コピペでOK!はてなブログのカエレバをcssでカスタマイズするAIUEO Lab2

こちらのエントリーのソースをそのままコピペでほぼ違和感ない感じで商品リンクが貼れます。

ボーダーの色と、枠をsolidに変えたのと、幅を少しいじったぐらいで、あとは変えていません。

TOPに戻るボタンの導入

私のエントリーは割と長いものが多いので、TOPに戻るボタンを導入しました。

参考リンク
参考 はてなブログにTOPに戻るボタンを追加する方法TASK NOTES

色を変えただけで、ほぼまるっとコピペで完了しました。

目次のカスタマイズ

公式の機能で目次が簡単に表示されるようになったのですが、そのままだと表示が崩れてしまうので、こちらを参考に調整しました。

参考リンク
参考 はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタムYukihy Life

強調文字を蛍光ペン風にするカスタマイズ

コピペで簡単にできます。

参考リンク
参考 コピぺでOK!CSSのみで強調太文字のデザインを蛍光ペン風にする方法10色【はてなブログカスタマイズ対応】North-Geek

最後に

以上が私がこのブログでカスタマイズした内容です。

コピペで完了するのは、私のような初心者にはホントにありがたいです。

一番の悩みは、PROにする前にアップしたエントリーのキーワードリンクが消えないこと。
これを消すいい方法があれば教えていただけると嬉しいです。

↑該当記事を更新したらあっさり消えました(;´∀`)

ただ、今週のお題だけは消えないようです。

コメントを残す

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