最新マンガアプリランキング

【厳選版】はてなブログのカスタマイズに超参考になる記事まとめ

この記事には広告を含む場合があります。

記事内で紹介する商品の購入やアプリをダウンロードすることで、当サイトに売り上げの一部が還元されることがあります。

こんにちわ、はてなブログのカスタマイズを夢見て手が付けられていないコトリです。

 

今年に入ってからはブログ用にtwitterを開始しはてなブログだけじゃないブロガーやアフィリエイターをフォローしていろんなブログを見てきました。はてな以外だとWordpressを使っている方を多くフォローしているためブログカスタマイズに興味をもつようになったんです。

 

ブログのアクセスアップ、マネタイズについては「ブログで稼ぐ方法 | 30万PV・10万円稼ぐまでにやってきたアクセスアップとマネタイズの方法を全部書く」にまとめてますのでぜひご覧ください。

 

はてなブログのカスタマイズ事情

そこでここ数日はてなブログのカスタマイズについていろんな記事を見まくったんですが完全に需要に供給が追い付いていないなと感じました。元々カスタマイズ前提のWordpressと違ってはてなはカスタマイズしなくても十分使えますからね。またWordpressにはカスタマイズの巨匠みたいなブロガーがたくさんいるので皆さんその人の作ったCSSを使っているようでした。

 

ただはてなにも結構ブログを魔改造している人もいます。いくつ記事上がっていたのでここ最近はひたすらブクマしていました。これから自分のブログをカスタマイズしてビフォーアフターで記事を書こうかなと思ったんですがズブの素人の僕が全部試すのは遙か先になってしまいそうなので、先に記事を紹介して出来る人はどんどん先にいってもらおうと。そんな献身的な気分になったのです。テレサと呼んでください。ここでまとめきれなかった記事は僕のブックマークかtwitterを見ていただけると拾えるかと。

 

ブログ記事は随時追加することになると思います。めざせWordpress!

 

ブログをカスタマイズする前に考えておきたいこと

カスタマイズに夢中になって記事更新を怠るべからず

私です。以前SEOを勉強している時にも完全に記事更新を怠りました。今回もその気配プンプンです。ブログの主役はあくまで記事。カスタマイズはサポートでしかない。特に僕みたいに記事数少ない奴がカスタマイズに夢中になっていると「見た目だけで全く中身ねーな」とがっかりブログまっしぐらです。猫まっしぐら。

 

時代はPCじゃねー。モバイルだ

カスタマイズって無数にやれることあるので、闇雲に手を付けるのではなく「インパクト」の大きいとこから手を付けるべきなんですよね。カスタマイズは表現の幅が大きいPCの方がTIPS含めやれること多いんですけどアクセス数はSP>PCがだと思うんです。だったら手を付けるべきはSPでしょ。今でしょ。

 

はてなブログ モバイルを魔改造しているブログ

以下スマホで見てください。僕がはてなブログを読み漁って「なんじゃこりゃ」ってなったブログたちです。あ、もちろんPCもカスタマイズされてますよ。

太陽がまぶしかったから

太陽がまぶしかったから
C’etait a cause du soleil.

PCも半端無く魔改造されているんですがそれは。トップに入ると書く記事のタイトルが赤地に白文字でかなり見やすいです。どうやってるんだこれは。ソーシャルボタンもカッコイイです。

 

iPhoneのこととかいろいろ

iPhoneのこととかいろいろ
iphoneのことを中心にちょっと役立つ情報などいろいろなことを私的解釈満載で書いていこうかなと

アドセンス広告がフッターにオーバーレイしてます。どうやってんだ、これ?あとは記事の見出しにロゴをつかっていたりソーシャルボタンをカスタマイズしてますね。スクロールすると右下に「▲PAGE TOP」っていうボタンが出てきます。これやりたい笑。

 

Literally

LITERALLY
知っておくと楽しい知識をまとめて紹介

当然PCもカスタマイズされているようですがスマホはヤバイです。すっごいオシャンティー。スマホという点ではWordpress以上にいけてると思います。トップ面もそうなんですけど記事下のPOPULAR ENTRIESなんて生唾ものですよ。

 

モバイルカスタマイズのおすすめ記事 4選

トップ面、見出しをお洒落にするカスタマイズ

はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 – LITERALLY
はてなブログのスマホ表示時のデザインはカスタマイズが面倒で、ほぼ全てのブログが同じデザインで個性が出しにくいのが特徴だ。簡単に変更できる部分は、ページ上部のアイコン画像ぐらい。 先日、その単調なはてなブログのスマホ向けデザインをカスタマイズしまくってみた。今回は備忘録がてら、その方法と「簡単にはてなブログのスマホ表示デザインをオシャレにするいくつかのテクニック」を記録してみようと思う。 はてなブログのモバイル(スマホ)デザインCSSを編集する方法 まず、ここがあまりネットで探してもなかなか見つからなかった。はてなブログにはPC表示向けのcss編集ボックスはあるが、スマホ表示用のcss編集ボック…

白状しますけど丸パクリしました。この中に書かれている記事中の見出しとトップページの記事一覧のカスタマイズです。僕の下賎な記事がオシャンティーに!ただ、フォントとか色とかもっと弄りたいのですがまだ手を付けられていません。超オススメカスタマイズです。できれば「POPULAR ENTRIES」も知りたい(厚かましい)

 

はてなブログのスマートフォン表示を外部CSSでオシャレにする – 太陽がまぶしかったから
スマートフォンデザインやWEBフォント設定を外部CSSで行う 以下の記事を参考にスマートフォンでのデザインを行いました。はてなブログPROに加入していると行えるスマートフォンのヘッダタイトル下にStyleタグを書いていくという方法です。 はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 – Literally この方法でも手軽にできてよいのですが、外部CSSで設定する事にしました。外部CSSを配置するには別途有料のレンタルサーバーが必要だと思いがちですが、僕の場合は『http://github.io』を利用していますし、Dropboxの公開機能を使っても無料で実…

もうプロい。外部のCSSを使ってカスタマイズしてるみたいです。記事タイトルがおしゃれだなーと思ってたらPCの表示に準拠させているようです。ふむー、すごい。

 

余計な導線を削除するカスタマイズ

はてなブログカスタマイズスマホ版でPVが絶対アップするおすすめ
はてなブログPROに変えたのでスマホのデザインをカスタマイズしてスッキリさせることで回遊率をあげてPVをアップさせましょうというお話です。

はてなブログの注目のブログSEOの謎を暴いたうさもふさん。この記事はなるほどと思いましたね。記事下にある「はてな」の開発、週刊、トップへの導線を削除するカスタマイズです。ネット広告の世界でも余計な導線を外すのはランディングページの鉄則ですからね。外に出さずにまず自分のブログ内を回遊してもらわないと。

 

グローバルメニューを取り付けるカスタマイズ

はてなブログ「カテゴリ」の3つのカスタマイズで「ページ/セッション」と「PV」アップを狙うっちゃ! – Yukihy Life
ブログの記事数が50をこして、だんだんと積みあがってきているのですが、扱っているテーマも更新する頻度も、書いている対象もバラバラなせいで、ページ/セッションの数値が本当に低いんです。今月の値は1.3くらい。 この意欲の見えないドッシリとした安定感。 ちなみに前回書いた記事 はてなブログ2か月目のアクセス数 【バズりと検索流入の関係&ここまでの運営の反省】 で紹介したように、最もはてブがついたものを記事下に入れるという自己満をしていたのですが、力不足だったみたいです。 バズったりすると値が下がりますが、今月は皮肉にもバズっていません(一つ前に書いた化学の記事は、僕の中ではバズっていますが、世間的…

ほぼ同期のYukihyさんの記事。このスマホのグローバルメニューいいなー。このブログで先にカスタマイズしてくれているのでよく参考にしています。

 

Google Adsenseのカスタマイズ

adsenseによる「スマートフォン横スクロール問題」に対応する記事

PROに契約してadsense貼り付けてる人結構いると思うんですけど、あなたのブログガクガクですからー。私もです。最近気づきました。この問題にはてなブロガーさんの叡智で立ち向かってる記事を見つけました。

はてなブログのスマートフォン表示で、記事上のアドセンスをガタガタさせずに綺麗に設置する – AIUEO Lab2
はてなブログはスマホ表示の記事部分がデフォルトで横幅300pxになっています。 それに対して、Google AdSenseの広告はスマホ用というと横幅320pxしか用意されていないので、そのまま使うとハミ出します。 その弊害で、スマホで見ると横スクロールが発生して上下のスクロール中にガタガタ動いてしまうんですね。はてなブログにアドセンスを普通に貼ろうとしたことがあるなら分かると思います。 アドセンスの広告は規約で勝手にサイズを変更してはいけないので、ブログ側を合わせてあげましょう。
「GoogleAdsenseレスポンシブ広告」と「iPhone」と「はてなブログ」と「推奨広告」と「私」♪ – iPhoneのこととかいろいろ
こんにちは。たけのこです。今日はいつものiPhoneやらAppleの記事ではなく趣向を変えて「GoogleAdsense」について。
はてなブログのスマホ用Googleアドセンスお勧め設定!iPhone6やiPhone6Plusにも最適! – マネー報道 MoneyReport
台風一過 昨日の記事では一昨夜巻き込まれたブログでの台風被害についてご報告させて頂きました。 ブログに台風突入!ブロガーさんからの指摘「Googleアドセンスにはスポンサーリンク表示必須ですよ!」 – マネー報道 MoneyReport 昨日の台風がネット世界の私のブログまでやってきまして、大荒れに(T_T)悲惨な寝不足対応が必要になりました。何だか肺が痛い様な(ー ー;)Googleアドセンスにはきちんと広告表記しましょう(^_^;) 正に正面から歩いてきて、頭に手斧をズブリと振り下ろされた感じでしたが、「スポンサーリンク」の表記をする事で本格的な台風災害にはあわなくて済みました(^^;その…

アドセンスの通常サイズの横幅が320になっているせいで起こっている問題ですね。ええ、僕もガクガクです。そもそもレスポンシブルフォーマット使ってなかったわ俺。SEOはモバイルフレンドリー必須ですからね。これ最優先で対応しないといけないと思って対応していないやつです。

 

Adsenseの掲載位置を見出し上に設置するカスタマイズ

アドセンスは実はやりたいカスタマイズが見つかっておらず模索中です。誰か最初の見出しの上にアドセンスを設置するカスタマイズについてまとめてください(他力本願)

以前はこのようにやりたくてもできていなかったのですがこの記事に書いてありました。

はてなブログの広告配置に悩む方へ!コピペで記事のリード文の後ろに広告を設置する方法 – Appism
photo by Billy Wilson Photography 気づいた方も多いかと思いますが、当ブログのデザインを結構カスタマイズしました。ということで、はてなブログのカスタマイズ方法を少しずつ書いていこうと思います。 注意:ちなみに、僕はCSSとHTMLの違いもイマイチ分からないほどの初心者ですので、カスタマイズには色々な方の素晴らしい記事を参考にさせてもらいました。感謝です! 第一弾として、この記事ではGoogleAdSenceの広告をリード文のすぐ後ろに配置する方法をご紹介します。

この方法であっさりリード文後の見出しの直前にアドセンスを設定できるようになりました。

はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 – UXエンジニアになりたい人のブログ
重要:この記事のコードには、問題が発見されましたので、以下の改良版コードを利用してください。 uxlayman.hatenablog.com==========================みんな大好きはてなブログのアドセンスの話題。よく、記事の文中にアドセンス入れてる人いるじゃないですか。 あれって結構効果あるようなイメージですが、手動でやってるんですよね?面倒ですよね?もし広告をつけ変える場合、いっこずつ全部書き換えなきゃだし。 ということで、それを自動化するコードを紹介します。 設定方法 ダッシュボード→デザイン→カスタマイズ→記事上下のカスタマイズ→「記事ページのプレビュー」を設定→…

この記事が出典とのこと。参考になるなる。

 

見出しや関連記事をもっとおしゃれにする記事

僕は今は上で紹介したLiterallyさんの記事のを使っているんですが大見出しを少し弄りたいなーと思って見つけた記事ですね。

 

見出しの色とサイズを変更

見出しの色やサイズを変更するカスタマイズ / はてなブログ – LOGzeudon
見出しの色やサイズを変更するカスタマイズ / はてなブログ – LOGzeudon

色とサイズ変更。シンプルでいいですね、これも。コピペで使えるコードも書いてあって嬉しい限りです。

 

大見出しにアイコンを付けるカスタマイズ

はてなブログに実施した、4つのデザインカスタマイズ – Banguardサイト
ブログのデザインを少し変更してみました。それほど大きな変更ではないのですが、変えたのは以下の4点です。 1.ブログのデザインテーマを変更した 2.記事の幅を広げた 3.「続きを読む」を加えた 4.ブログの見出しに画像を加えた はてなブログは、ある程度自分で自由にカスタマイズすることが可能です。Webデザインの知識がない私ですが、なんとか今回の4つは自分でできました。はてなブログのカスタマイズをしようとする際に、参考にしていただたら嬉しいです。 はてなブログのデザインをカスタマイズした場所 今回カスタマイズしたのは、主にブログ全体に関わる部分が2箇所、トップ画面で1箇所、記事画面で1箇所、計4箇…

この大見出しにリボンつけるカスタマイズ素敵ですよね!自分のアイコンでやろうとして失敗しました。ここまで丁寧に書いてあるのに…。自分の無知さが泣ける。

 

関連記事をお洒落にする記事

【修正済】コピペで簡単! はてなブログの人気記事を画像付きで表示させる方法。 – #ChiroruLab
img: この間、ついに私のブログ記事にも「はてなブックマーク」が付きました! そうなるとやっぱり付けたくなる「おすすめ記事」。はてなさんで用意してくれているブログパーツもあるのですが どうもサムネイルがなかったり弄り難そうなので作ってしまうことにしました

これ!画像付き人気記事。これをうまく使えなLITERALLYさんのやつみたいにできるかも!

 

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

まだまだ僕は使いこなせていませんがすなばいじりさんがTIPSをたくさん紹介してくれています。

すなばいじり
はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

 

FEEDLYボタンの設置

はてなブログにfeedlyのボタンを設置する – TASK NOTES
RSSリーダーはfeedlyを使ってます。そこでFollowボタンをこのブログにも設置しましたのでやり方などを書いておきます。とても簡単でした。

まだFEEDLY全然使いこなせていないんですけどちゃんと対応しないとと思っていたとこです。というかはてなのデフォルトに入れてほしい。タンブラーいらないから。

 

引用をおしゃれにする記事

はてなブログのデザインカスタマイズ方法(簡易版) – TASK NOTES
はてなブログのデザインカスタマイズ方法です。といっても今回は手の込んだものではなくて少し表示を変えるくらいの方法になります。 初めに はてなブログのデザインには様々なテーマがあります。全体的なデザインはこれがいいけど他のフォントとか見出しはこっちがいいなとか、何かちょっとずつ違ってて悩みますよね。カスタマイズといってもHTMLをいじる訳ではなくCSSを修正(上書き)する作業になるのですが、HTMLとCSSの知識がまったく無いと難しいかもしれません。 デザインテーマを選ぶ まず管理画面のデザインに移動して公式テーマを選びます。 私はReachというテーマにしました。大きく変更する訳ではないので全…

この記事の中の「引用」をおしゃれにするとこ。オススメです。デフォルトの引用いまいちだったのでこれは設定しました。

 

パンくず系

パンくずリストの考え方を整理する – すなばいじり
更新されたエントリーがあります。 psn.hatenablog.jp 構造化テストツールが新しくなり、機能変更・追加が行われたというお話で、今までOKだった記述がNGになったというネタを見て「これはこういう意味ですよ。」という解説を書いておかないとなぁと考えていたら一週間くらい過ぎそうなので、いい加減書いておきます。 構造化テストツールのチェックが厳しくなった? パンくずリストの部分で起こっているようです。厳密に言えばそうなります。 この部分ですね。きちんとリンクを置かないとエラーが表示されるようになった。というお話のようです。 パンくずリストのマークアップが何が正しいのか分からなくなってきた…

SEOふまえてもパンくずは大事そう。カテゴリの整理もしねーと。すなばいじりさんは他にも色々記事あげてくれています。残念ながら僕のスキルがついてきていません。

 

あとがき

最近ははてなでもカスタマイズ事例増えてきていますね。公式のアップデートも多いので情報は追って行きたいものです。

 

コメントを残す

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

pocketlinehatebuimagegalleryaudiovideocategorytagchatquotegoogleplusfacebookinstagramtwitterrsssearchenvelopeheartstaruserclosesearch-plushomeclockupdateeditshare-squarechevron-leftchevron-rightleafexclamation-trianglecalendarcommentthumb-tacklinknaviconasideangle-double-upangle-double-downangle-upangle-downstar-halfstatus