デザイン>記事>記事下orサイドバーへ。ぼくはサイドバーに貼ってる。,
はてな 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をいじり2列にしてブログになじむようにしてみました, 【改良版】コピペで簡単!はてなブログで「文中にアドセンス広告を入れる」を自動化する方法, Amp for WordPressのヘッダーの背景色、ブログタイトルの文字色を変更する方法【コピペ】, はてなブログ初心者が無料登録しておきたいアフィリエイトプログラムまとめ~アフィリエイトの始め方~ | むーびんぐ, ブログが素敵すぎるツールだから、その5つのメリットを熱く語ってみる。 | むーびんぐ, 【徹底解説】はてなブログ初心者がブログ収入1万円を得るまでの具体的ステップ~ブログを収益化しよう~ | むーびんぐ. 人数の町 バイブル, 遊 パチ エヴァンゲリオン11, エヴァンゲリオン 漫画, 刑事7人 シーズン3, クラウド 声優, 君の膵臓を食べたい 動画 パンドラ, スタジオカラー 採用, Oaky 意味, 愛しき日々 歌詞&動画視聴, 事柄 例, フィードバック 意味 わかりやすく, 沢田研二 人気, エヴァンゲリオン ゲームアプリ, 鬼 滅 の刃 花江 夏樹 ツイッター, 東大阪市西鴻池町1 10 5, 国鉄 民営化 失敗, 白猫温泉 周回, ゲオ レンタル 確認, 異例 対義語, 鬼 滅 の刃 映画 予告 いつ, エヴァ 破 ラスト 槍, エンターテイメント 名言, プログラミング言語 英語 で, Twitter-android 不具合, 森七菜 ブログ, 二階堂ふみ クォーター, プラダを着た悪魔 スクリーンプレイ, エール キャスト 子役 は な, 萬 万 違い, 鬼滅 の刃舞台 チケット 倍率, ごめんね カバー, セブンイレブン コラボ アニメ, エール 志村けん 何話まで, "> デザイン>記事>記事下orサイドバーへ。ぼくはサイドバーに貼ってる。,
はてな 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をいじり2列にしてブログになじむようにしてみました, 【改良版】コピペで簡単!はてなブログで「文中にアドセンス広告を入れる」を自動化する方法, Amp for WordPressのヘッダーの背景色、ブログタイトルの文字色を変更する方法【コピペ】, はてなブログ初心者が無料登録しておきたいアフィリエイトプログラムまとめ~アフィリエイトの始め方~ | むーびんぐ, ブログが素敵すぎるツールだから、その5つのメリットを熱く語ってみる。 | むーびんぐ, 【徹底解説】はてなブログ初心者がブログ収入1万円を得るまでの具体的ステップ~ブログを収益化しよう~ | むーびんぐ. 人数の町 バイブル, 遊 パチ エヴァンゲリオン11, エヴァンゲリオン 漫画, 刑事7人 シーズン3, クラウド 声優, 君の膵臓を食べたい 動画 パンドラ, スタジオカラー 採用, Oaky 意味, 愛しき日々 歌詞&動画視聴, 事柄 例, フィードバック 意味 わかりやすく, 沢田研二 人気, エヴァンゲリオン ゲームアプリ, 鬼 滅 の刃 花江 夏樹 ツイッター, 東大阪市西鴻池町1 10 5, 国鉄 民営化 失敗, 白猫温泉 周回, ゲオ レンタル 確認, 異例 対義語, 鬼 滅 の刃 映画 予告 いつ, エヴァ 破 ラスト 槍, エンターテイメント 名言, プログラミング言語 英語 で, Twitter-android 不具合, 森七菜 ブログ, 二階堂ふみ クォーター, プラダを着た悪魔 スクリーンプレイ, エール キャスト 子役 は な, 萬 万 違い, 鬼滅 の刃舞台 チケット 倍率, ごめんね カバー, セブンイレブン コラボ アニメ, エール 志村けん 何話まで, " > はてなブログ フォローボタン カスタマイズ
GAME

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

} font-weight: 700; それでは記事の設置方法を説明していきます。 注意事項. border: solid 1px #dddddd; 9/7追記:全体的にボタンのサイズが大きかったり、他のテーマでやると、円形のフォローボタンのデザインが悪かったりしたので、調整をしました。 また、サイドバーにも馴染むようなフォローボタンサンプルも追加しました。 9/9追記:feedlyのURLが間違っていました! font-size: 1.2em; 今回ははてなブログユーザー向けに、はてなブログのカスタマイズ方法を紹介した記事をまとめました。, もしかしたらあなたの知らないカスタマイズがあるかもしれませんので、ぜひぜひご覧ください。おそらく、この手の記事で一番カスタマイズを網羅したんじゃないかと思ってます。, カスタマイズを行う前に頭に入れておいて欲しいことがありますので、それを先に読んでおいていただくと、非常に助かります。, カスタマイズをする上で、とても重要なことがあります。それは、かならず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をいじり2列にしてブログになじむようにしてみました – 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を独学するのにおすすめの入門書・参考書まとめ, ブログ運営で独立し、現在は会社を経営しています。 } color: #6490cd; font-size:12px; background: #cc4895; } ブログの更新をお知らせしたり、情報収集に活用してみたり。また自分の記事SNSを通して拡散され、多くの人に読んでもらえることもあります。, また自分のプロフィールにSNSへのリンクや、フォローボタンを設置しておくことで、交流の機会ができたりします。, そこで今回は、ブログのサイドバーに『Twitter』『Instagram』のフォローボタンを簡単に追加する方法をまとめてみました。, 今回はインスタ、ツイッター、はてなブログの読者登録ボタンの3つを横並びにしたパーツを作成しました。, マウスホバー時に背景に色が付きます。スマホだとタップしたときに切り替わるようになっています。, 編集画面の「デザイン」→「サイドバー」内にある、プロフィールの「編集」を押します。, 次にボタンを押したときに、各SNSアカウントのフォロー画面に移行させるための設定を行っていきます。, ツイッターのaタグの「IDを設定」となっているところを、自分のIDに差し替えてください。※”@”は不要です。, 読者登録ボタンは、aタグの「はてなのID」と「ブログのURL」となっているところを、自分のIDとURLに差し替えてください。, 編集画面のサイドメニュー内「デザイン」をクリック→サイドメニューのカスタマイズアイコンをクリック→「デザインCSS」から、サイト内のcssを編集することができます。, こちらは丸いデザインのフォローボタン。テキスト無しでアイコンのみなので、よりスッキリして見えますね。, 背景にイメージカラーを設定したバージョンも作成してみましたのでお好みでどうぞ。htmlは先ほどご紹介したものと一緒です。, CSSの変更点としては、color・border・backgroundの指定を上記のものと入れ替えているだけです。, はてなブログではデフォルトで使用できるアイコンがたくさんあるので、ボタンもおしゃれなものを簡単に作れるのがよいですね!, 「こだわり」が収入になる! letter-spacing: normal; snsフォローボタンの設置. はてなブログ用シェアボタンの設置. .profile img { color: #55acee; } justify-content: center; text-align: center; .sidebar__follow-btn .inner-text { } } はてなブログでアフィリエイトしてお金を稼ぐ方法・決定版. display: block; .sidebar__follow-btn .instagram { margin:1%; } width: 100%; border: solid 1px #E6E6E6; transition: all .3s; .p-name:hover { .p-box a{ } margin-top: 0.6em; Follow @shun_hatena background: #fff; font-weight: 700; border: 1px solid #cc4895; 今回は、はてなブログ カスタマイズ記事のまとめです。 これまでに紹介してきたレイアウトやデザインカスタマイズ系の記事が増えてきたため、一覧ページを作ってみることにしました。 実際の動作と合わ … margin: 0px auto 0px; } フォローボタンのカスタマイズ. .sidebar__follow-btn .twitter:hover{ .sidebar__follow-btn .instagram:hover{ text-decoration: none; .sidebar__follow-btn.-ver2 .instagram:hover{color:#cc4895;}, 元漫画家アシスタント、現在WEBデザイナーをしています。趣味のことを中心にゲームをプレイした感想や、漫画や小説の書評、絵を描いてみたり、時にはお仕事についてブログに書いてます。, 長年多くのプレイヤーに愛用されているコントローラー!スマブラのコントローラーといえばコレ。, 【任天堂ライセンス商品】ホリ クラシックコントローラー for Nintendo Switch ゼルダ【Nintendo Switch対応】, USB接続だけで使用できるため接続タップ無しで遊べます。LRボタンもトリガーではなく、プロコンのようなボタンタイプなので操作しやすい!, Nintendo Switch Online月額300円は高い?他のサービスと比較-プラン解説【更新】, 【スプラトゥーン2】ウデマエX調査!S+~X昇格までのプレイ時間・割合・順位の表示条件, 【更新版】和風ホラーゲーム影廊の徘徊者(敵)攻略法-ShadowCorridor(シャドーコリドー), 【100日後に死ぬワニ】101日目?パロディネタを描いてみた!ガンツ/シュタゲ/リゼロ, "https://twitter.com/intent/follow?screen_name=IDを設定", "https://blog.hatena.ne.jp/はてなのID/ブログのURL/subscribe", 【ブログカスタマイズ】サイドバーにSNSフォローボタンを追加!インスタ、ツイッターなど. border-radius: 100%; .side-sp {display:none!important;} } ブログのSNSフォローボタン、はてな読者登録ボタンをおしゃれな感じにしたのでその方法を書いていきます。, 前から言ってますが、PCもいじれず自分で勉強する根性もない僕はスーパーマンたちの知恵に頼っております。, ゆきひーさんのフォローボタン使ってる方めちゃくちゃ多いんですよ。ていうか、デフォルト以外はほぼほぼゆきひーさんのやつ。オソロシイ。もうめちゃくちゃお世話になりまくってます。, 「は?ゆきひーと全然ちげえじゃん」って言われそうですが、ぼくはCSSちょこっと変えただけなんでコードの8割はゆきひーさんのヤツなわけです。, ぼくはSNSのシェアボタン(スマホの写真に写ってるカラフルなヤツ)と統一感のあるデザインにしたくてこんな形に落ち着きました。, そうですよね、そう思いますよね。でもインスタすごいかんね?というか、最近ブロガーの間でインスタが流行ってるもん!, ほら、イケハヤさん(正確に言えば高知県民ではないのか?)だってブログにインスタがっつり貼ってるし, 引用:http://www.ikedahayato.com/20151219/43438032.html, ブログで稼いで美味しいモノたくさん食べてんのか。けしからん。 ぼくも食べたい。がんばろ。, あと、ブロガーの方って結構写真のクオリティーとか気にしてデジカメで撮ったりするじゃん。それだったら、インスタやらない手はないでしょ!, しかも利用者数だってインスタのがツイッターより多いんだぜ(やぎろぐに書いてあった←)、さあこれを読んだ人はインスタとブログを連携させよう。今すぐ!, おし、言いたいことは言い切った!あとはコピペのコード貼り付けるんでサササーっといきます。, PCはダッシュボード>デザイン>記事>記事下orサイドバーへ。ぼくはサイドバーに貼ってる。,

掲載作品については記事公開時の情報です、配信期間終了している場合があります。