SANGO公認の子テーマPORIPUがリリースされました

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

注意
現在はWordPressに移行しています。
情報が古くなって使えなくなるものが出てくる可能性がありますので、このエントリーは参考程度にとどめておいて下さい。
現在の状況は下記エントリーで確認できます。
テーマをSTORKからSANGOに変えたのでカスタマイズやプラグインをまとめてみたよ
はてなブログカスタマイズ備忘録改訂版

はてなブログを色々カスタマイズしました

はてなブログにもだいぶ慣れてきたさっちんです。
無料で頑張ろうと思ったのですが、色々いじろうとするとPROの契約が必須になってくるので、思い切って2年契約しちゃいました(;´∀`)

ちょこちょここのブログも手を加えているので、忘れないように備忘録。
随時追記していきます。

テーマ

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

参考 Blankテーマ ストア

レスポンシブデザインなので、PCとスマホを分けなくていいのはありがたいです。
シンプルなテーマなので、カスタマイズもしやすくてオススメです。

以前のブログではピンクを基調としていたんですが、今回はあえて色は加えてません。
アドセンスなども色合いを揃えています。

設定

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

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

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

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

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

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

はてな記法

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

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

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

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

すべて同じサイトからコピペさせていただきました。
同じものを使ってる方はかなり多いと思います。
フォローボタンはサイドバーに、シェアボタンは記事下に設置しました。

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

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にする前にアップしたエントリーのキーワードリンクが消えないこと。
これを消すいい方法があれば教えていただけると嬉しいです。

↑該当記事を更新したらあっさり消えました(;´∀`)
ただ、今週のお題だけは消えないようです。

Leave a Reply