はてなブログ フォローボタン カスタマイズ

はてな Twitter Instagram, コイツをそのまま貼って頂いても全然OKですが（ぼくのurlのままだけど）、変えたい方はコードの赤字部分をそれぞれ自分のSNSのurlに変更してください。, はてなの読者ボタンだけクセがあって、kuunerudasu/kuunerudasu.hatenadiary.jpのところですが「自分のはてなID/自分のブログのURLからhttp://を除いた部分」となるので注意！, お次はCSS。マウスオーバーしたときに、ゆきひーさんの色反転をなくして色が薄くなるようにしたので一瞬で終わります。, .follow-btn{ width: 100%;}.follow-btn a { display: block; height: 50px; line-height: 50px; width: 100%; font-size: 14px; text-align: center; text-decoration: none; }, .follow-btn .hatena { color: #ffffff; background: #3D3F44; }.follow-btn .twitter { color: #ffffff; background: #00ACEE; }.follow-btn .instagram { color: #ffffff; background:#0B3861;}, で囲んでコピペ。, それから、以下のcssをPCなら「デザインcss」に、スマホなら「記事上」にで囲んでコピペ。, 以下のHTMLを「記事下」にコピペ（PC,スマホともに）。「ここにアカウント名を入れる」ってところには、＠マークは不要なので注意。, で、以下のcssをPCは「デザインcss」に、スマホは「記事下」にで囲んでコピペ。, スマホデザインをもっとカスタマイズしたいのであれば、LITERALLYさんの記事がおすすめ。, 参考記事：はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法, これは、カスタマイズを行っていく中で、自分好みの色に変えたいときに使える色見本だ。, カスタマイズが終わったあとに、「はてなブログで本腰入れて稼いでいこう！」とお思いであれば、以下の記事で初心者から収益1万円を突破するまでの過程を全公開している。, 関連記事：【収益公開】はてなブログ初心者がアフィリエイト収入1万円を稼ぐまでの道のり, […] 見出しの設定の仕方はこちら参照 参考記事：http://www.wonderland02.com/entry/hatena-blog-customize#見出しデザインの変更 […], 上司が恐くて公認会計士を7ヶ月で逃亡 ▶︎営業が辛すぎて新卒を9ヶ月で退職 ▶︎ひきこもりフリーランス ▶︎「誰と働くか」が軸のjMatsuzaki株式会社に参画 ▶︎経理とマーケティングを担当, 【収益公開】はてなブログ初心者がアフィリエイト収入1万円を稼ぐまでの道のり【始め方を紹介】, 【コピペOK】はてなブログデザインカスタマイズで初心者が簡単にできるものまとめ【HTML・CSS】, コピペ一発ではてなブログ見出しをカスタマイズ！ちょっとの工夫で印象が格段に変わる！, 【CSS】コピペするだけ！はてなのヘッダのタイトル画像を切り抜きなしで画面にうまくフィットさせます, はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2), はてなブログに11種類から選べるSNSフォローボタンをコピペ＋αで実装するカスタマイズ, CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】, Milliard関連記事プラグインのCSSをいじり２列にしてブログになじむようにしてみました, 【改良版】コピペで簡単！はてなブログで「文中にアドセンス広告を入れる」を自動化する方法, Amp for WordPressのヘッダーの背景色、ブログタイトルの文字色を変更する方法【コピペ】, はてなブログ初心者が無料登録しておきたいアフィリエイトプログラムまとめ～アフィリエイトの始め方～ | むーびんぐ, ブログが素敵すぎるツールだから、その５つのメリットを熱く語ってみる。 | むーびんぐ, 【徹底解説】はてなブログ初心者がブログ収入1万円を得るまでの具体的ステップ~ブログを収益化しよう~ | むーびんぐ. border: solid 1px #dddddd; background:#cc4895; font-size:12px; 2015-12-20. フォローボタンのデザインは記事上・記事下用5種類、サイドバー用4種類、スマホ用2種類の合計11種類を用意しました！, なお、すでにこのコードを貼り付けている方も多いですので、同じコードがある場合には貼り付けないようご注意ください。, なお、PC版のコードは記事上or記事下とサイドバーの両立が可能です（ただし、コピペの注意点をよく読みしっかりと変更点の対応をお願いします）。, その場合は、3行目の".content-inner-follow-buttons"を"sidebar-follow-buttons"に変更してください。, その上で、4行目（class="follow-title"）の部分を消してください（フォローするという言葉が消えます）。, 次に、5行目のはてなの読者登録ボタンです（class="hatena"となっているとこ）。, この中の「shun_prog0929/www.ituore.com」という部分を「自分のはてなid/自分のブログのURL（http:// を抜いた部分）」にしてください。, 次に、9行目のFacebookです（class="facebook"となっているとこ）。, この中の"URL"となっているところを自分のFacebookページにしてください。, （僕がFacebookをブログで利用していないので例を省略しています。すみません。）, 次に、13行目のツイッターのフォローボタンです（class="twitter"となっているとこ）。, の「shun_hatena」を自分のツイッターアカウントにします（@マークは書かないでください）。, 次に、17行目のInstagramです（class="instagram"となっているとこ）。, この中の"URL"となっているところを自分のInstagramページにしてください。, （僕がInstagramをブログで利用していないので例を省略しています。すみません。）, の「http://www.ituore.com」を自分のブログのURL（http:// を含めた）に変えてください。, 最後に、25行目のGoogle+です（class="googleplus"となっているとこ）。, （僕がGoogle+をブログで利用していないので例を省略しています。すみません。）, 記事上・記事下用ですが、もし必要のないボタンを消してバランスが悪くなった場合（ボタンが4つの場合）には、, PC版・スマホ版合わせて11種類用意しましたので、自分のブログにあったデザインを選べるかなと思います。. background:#38393C; margin-top: 0.6em; } border: 1px solid #cc4895; filter: alpha(opacity=60); .sidebar__follow-btn.-circle > span{ フォローボタンも可愛らしいデザインが豊富だ。 このブログでは以下の記事を参照にした。めっちゃいい感じになるはず。 参考記事：はてなブログに11種類から選べるsnsフォローボタンをコピペ＋αで実装するカスタマイズ background: #ffffff; .p-name:hover { color: #55acee; はてなブログ用シェアボタンの設置. 今回ははてなブログユーザー向けに、はてなブログのカスタマイズ方法を紹介した記事をまとめました。, もしかしたらあなたの知らないカスタマイズがあるかもしれませんので、ぜひぜひご覧ください。おそらく、この手の記事で一番カスタマイズを網羅したんじゃないかと思ってます。, カスタマイズを行う前に頭に入れておいて欲しいことがありますので、それを先に読んでおいていただくと、非常に助かります。, カスタマイズをする上で、とても重要なことがあります。それは、かならずPCとスマホで動作確認をすることです。, PCではちゃんと表示されていても、手違いでスマホだと表示されていないことが多々あります。, カスタマイズをする時は、どこかにバックアップを取っておくことをおすすめします。メモ帳などにコピペしておいて、念のために保存しておきましょう。, カスタマイズをするとブログがかっこよくなり、SEOに効果があったりと便利な反面、やりすぎるとページの読み込みがおそくなります。, 特に、JavaScriptとjQueryを使ったカスタマイズは速度に影響がでやすいです。, アナリティクスを導入しているブログなら、行動→サイトの速度→速度の提案で点数が一覧で見られるのでかなり便利です。, これ重要。導入したからそれでおしまいではなく、数か月に一回くらいでいいので、導入したカスタマイズのコードが修正されていないか確認すること。, コードにミスやバグがあるかもしれません。公開された後に修正されていることもあります。, また、各WEBサービスが提供しているAPIには稀に仕様変更があるので、カスタマイズのコード修正を余儀なくされることがあるからです。, カスタマイズの定番といえば、シェアボタンのカスタマイズです。デフォルトのシェアボタンですと読み込みに時間がかかり、スマホなどは場合によって表示されないこともあります。シェアして欲しい人はカスタマイズしておきましょう。, いくつかの種類のシェアボタンが公開されているので、この中から選んでカスタマイズしてみて下さい。, 【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 – Yukihy Life, コピペ一発！はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ！ – いつ俺〜いつから俺ができないと錯覚していた？〜, はてなブログの記事上下にレスポンシブなカウント付きシェアボタンをつけるカスタマイズ（修正あり） – Minimal Green, Facebookのシェア数がカウントされない、「0」の時にぐるぐる回って表示されないという人は、こちらを参考にして下さい。, （グルグルする不具合治しました）Facebookの仕様変更があったので、シェア数カウントのコードを修正して下さい, 2016年5月以前にシェアボタンをカスタマイズした人で、以下の変更をしていない人はもう一度貼り直しが必要です。, ぴえええええ！Facebookのシェアボタンのコードを修正して下さい（はてなブログ向け）！！, はてなブログの読者や、Twitter、Facebook、Feedlyなどのフォロワー・読者を増やしたい人にはオススメのカスタマイズ。, はてなブログに11種類から選べるSNSフォローボタンをコピペ＋αで実装するカスタマイズ – いつ俺〜いつから俺ができないと錯覚していた？〜, コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ – Yukihy Life, はてなブログをコピペ+αでカスタマイズ！おしゃれなSNSフォローボタンのつけ方 – くうねるだす, 読者登録ボタンだけを強調したいという方は設置方法を紹介しているので、こちらをどうぞ。, コピぺでOK！CSSのみで記事タイトルのデザインをおしゃれにする方法15【はてなブログカスタマイズ】 – North-Geek, 文章を見やすくするには、やはり見出しをはっきりと表示させることが大切です。ブログの雰囲気も大きく変わるので、できるだけカスタマイズしておきましょう。, コピペ一発ではてなブログ見出しをカスタマイズ！ちょっとの工夫で印象が格段に変わる！ – Yukihy Life, コピペでどうぞ。はてなブログ用見出しカスタマイズをとりあえず25個ほど – つばさのーと, コピペでOK！CSSのみでリストをおしゃれにする6つの方法【はてなブログカスタマイズ】 – North-Geek, はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム – Yukihy Life, ヘッダー部分にメニューを設置することで、ブログ内の回遊率を高めましょう。ジャンルから色んな記事を読んでみたいという閲覧者も必ずいるかと思います。, はてなブログのスマホ表示にグローバルナビゲーションを設置する – AIUEO Lab2, CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 – Yukihy Life, 【jQuery】ナビゲーションをアニメーションで表示しページ上部に固定する方法 – North-Geek, はてなブログのトップページ一覧形式表示を使ってカード型レイアウトに – Minimal Green, コピぺでOK！CSSのみで強調太文字のデザインを蛍光ペン風にする方法10色【はてなブログカスタマイズ対応】 – North-Geek, Google先生は、カテゴリー→記事の構造を分かりやすくすることを推奨しています。そのためにも、パンくずリストを設置しましょう。これはSEOにも効果があると言われています。, はてなブログでGoogleにパンくずリストを認識させるブログパーツ – 太陽がまぶしかったから, 記事のカテゴリーを「パンくずリスト」として表示できるようにしました – はてなブログ開発ブログ, 続きを読むを見やすく、オシャレにする方法。特にマウスがのった時のエフェクトにこだわっているカスタマイズです。, コピペ一発！はてなブログの続きを読むボタンをめっちゃオシャレにカスタマイズ！ – いつ俺〜いつから俺ができないと錯覚していた？〜, せっかくブログに訪問した閲覧者がすぐ帰ってしまってはもったいないですよね。関連する記事を表示させて、回遊率を高めましょう。, はてなブログの記事下に関連記事を表示する「あわせて読みたいG」 – 太陽がまぶしかったから, はてなブログで同じカテゴリの記事を新着順に表示して関連記事っぽいものを作るカスタマイズ – Yukihy Life, はてなブログに「あわせて読みたい」機能を追加するAlso readをリリースしました – すなばいじり, 関連記事のサムネイル表示を選択できて、カテゴリー別の記事一覧をタブで切替可能なプラグインを自作した – はぴらき合理化幻想, ↑↑最近見つけたのですが、PageSpeed Insightsの減点が少なくておすすめ。, Milliard関連記事プラグインのCSSをいじり２列にしてブログになじむようにしてみました – Yukihy Life, ある程度アクセスやアドセンス収益がある人は、アドセンスの関連コンテンツユニットを利用してみるのも良いでしょう。, アマゾンや楽天などのリンクを生成してくれる、ヨメレバ・カエレバのカスタマイズを紹介した記事です。, ヨメレバ・カエレバをカスタマイズしておけば、きっとクリック率がアップするでしょう。, コピペでどうぞ。CSSでカエレバ・ヨメレバのデザインカスタマイズ2案目 – つばさのーと, コピペ一発！はてなブログでカエレバ・ヨメレバをオシャレにカスタマイズ！ – いつ俺〜いつから俺ができないと錯覚していた？〜, ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ – Yukihy Life, おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ – SHIROMAG, リンクを枠で囲むことで、目立たせることができます。クリックして欲しいリンクがある時に使うのがおすすめです。この記事でもうざいくらい使ってますね。, 毎回記事を書くごとに記事中にアドセンスを貼るのは面倒です。このコードを利用して、アドセンスの貼り付けを自動化するととても楽ですね。, 【改良版】コピペで簡単！はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 – UXエンジニアになりたい人のブログ, いくつかの記事でサイドバーの固定（追従）が紹介されていますが、スマホに対応していなかったり、ウィンドウサイズが狭くなるとおかしな挙動をすることがありました。, レスポンシブに対応したサイドバー固定Ver.2（はてなブログ向け） – SHIROMAG, はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズ – Yukihy Life, ＜はてなブログ＞Facebookページのページプラグイン設置方法 – イロイロひとりごと。, 「吹き出しで記事を会話形式にする方法がとても面倒」ということだったので、簡単に実装する方法を紹介しました。, 吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 – SHIROMAG, YouTubeが大量に埋め込まれている記事はとても読み込みに時間がかかってしまいます。動画を一度画像にして、クリック時に動画になるように設定する方法です。, YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった – SHIROMAG, ページの途中、または下部からページのトップに戻るのを楽にする方法です。無駄なスクロールを減らせるので、閲覧者は嬉しい機能です。, はてなブログにページトップへ戻るボタンをつけよう！ – No Hack No Life, 当ブログのカスタマイズで、一部の方々に支持を頂いたカスタマイズです。単にオススメ記事を表示するのではなく、カテゴリごと記事を切り替えることができます。, 【はてなブログ】記事のカテゴリーによってオススメ記事を切り替える方法 Ver.2 – SHIROMAG, jQueryのコードは読み込みに時間がかかるのですが、以下の方法に書き換えるとかなり改善します。, はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた – SHIROMAG, ブログ初心者にとってカスタマイズというのは少し難しく感じるかもしれません。そんな方々のために、カスタマイズ用のCSSコードがデフォルトで設定されているデザインテーマがありますので、紹介しておきます。, はてなブログの超便利なデザインテーマ「Brooklyn」を作りました – SHIROMAG, カスタマイズが超簡単なデザインテーマ「SOHO」を公開しました – SHIROMAG, 多数のCSSカスタム適用済のコンテンツ制作に最適なテーマCONTENTSを発表 – DREAMARK, はてなブログの便利過ぎるテーマ「Spirea」を作った｜一瞬で自分だけのデザインにできる！ – いつ俺〜いつから俺ができないと錯覚していた？〜, オシャレ・レスポンシブ・カスタム可能なはてなブログテーマ「Naked」リリース！ – Yukihy Life, はてなブログを一瞬でおしゃれにする最強のデザインカスタマイズ方法（テーマDUDEの手引き） – Literally, シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 – ひつじの雑記帳, スマホに特化したカスタマイズ。基本的にはてなProになっていないと利用できません。この機会にはてなProへのグレードアップをしてみてはいかがでしょうか。, WordPress勢に負けないためのはてなブログ・スマホデザイン最強カスタマイズ集 – ひつじの雑記帳, はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 – Literally, この記事はすごい。書くのに相当時間かかったんじゃないかと思います。それくらいたくさんのスマホカスタマイズが紹介されています。, はてなブログのスマホデザインを一瞬でおしゃれにカスタマイズする方法 – いつ俺〜いつから俺ができないと錯覚していた？〜, コピペ一発！はてなブログのスマホページでカテゴリ一覧を自動生成するカスタマイズ – いつ俺〜いつから俺ができないと錯覚していた？〜, はてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム – Yukihy Life, ここまではカスタマイズの方法でしたが、それ以外にもはてなブログに導入しておきたいツールなどを紹介しておきます。, はてなブログにSearch Consoleを導入しよう。どの記事が検索されているのか、どんなワードで検索されているのか、クローラのエラーが出てないかなどのチェックができるので、必須のツールです。, はてなブログにSearch Console（ウェブマスターツール）を導入しよう – SHIROMAG, Analyticsがあれば、色んな事ができます。PV数、直帰率、ページの閲覧時間、リアルタイムのアクセス数、閲覧者の流入経路などなど。導入しないと絶対損です。, 【画像解説】はてなブログにGoogle Analyticsを導入しよう – すなばいじり, はてなProにするなら、アドセンスを導入してお小遣い稼ぎもできます。審査や条件（独自ドメイン等）はありますが。, はてなブログ編集用のChrome拡張機能を作りました（使い方の説明） – SHIROMAG, はてなブログの画像タイトルとaltを編集できる「はてブロimageTitle」というChrome拡張を作った – すなばいじり, 最初にも書きましたが、カスタマイズしまくれば良いというわけではなく、ページの読み込み速度とのトレードオフだと思った方が良いでしょう。, このようなブログのカスタマイズを通して、HTMLやCSS、そしてJavaScriptに興味を持って勉強し始めるのも良い機会かもしれません。, しかし、こんなに多くの方々がカスタマイズ記事をアップしてくれるのは、本当に助かります。感謝感謝ですよ。, HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ, ブログ運営で独立し、現在は会社を経営しています。

エヴァ パチンコ おすすめ, 五木ひろし の 影法師, 中村倫也 体調, 鋭い 英語 対義語, How To Pronounce Extensive, オロナミンc Cm スマイル, 風間杜夫 学歴, 宮島 鹿 デマ, 住所 英語 大阪, リレンザ インタビューフォーム, インフルエンザ予防投与 保険適応, コーヒー 通販 大阪, 初号機 第10使徒, Twitterアプリ 広告 消す, ミズナラ 木材, エヴァq 考察 2019, 閑散 対義語, 上田麗奈 歌 うまい, 熱海 梅宮辰夫, ダイナー 中村 倫也, Takaとhiro 写真, ツイッター フォロワー数 端数, エヴァQ 批判, エヴァ 小説 公式, Twitter フォロワー0 鍵, ケンジトシ 舞台 日程, ツイッター タイムライン 自分のツイート表示 されない, 厚意 使い方, 下野紘 手紙 住所, 鬼滅の刃 柱 かっこいい, 冨岡義勇 羽織 錆兎,