} .p-title{ 2015-12-20. font-weight: 700; .sidebar__follow-btn .twitter:hover{ } font-size:12px; font-size: 1.2em; border: 1px solid #38393C; border: 1px solid #cc4895; border: 1px solid #55acee; ちなみに今回設置したのは、SNSのシェアボタンではなく、フォローボタンです。はてなブログにfacebook、Twitter、Google+、Instagram、はてなブログ、feedlyの各種SNSのフォローボタンを設置し … align-items: center; .p-name{ color: #fff; .sidebar__follow-btn .hatena { text-align:center; はてなブログでアフィリエイトしてお金を稼ぐ方法・決定版. } } Follow @shun_hatena } } letter-spacing: normal; !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)? @media only screen and (max-width:768px) { 愛着がわいてブログを更新しよう（というより、ブログを育てていこうという感覚に近い）という気になる。良いこと尽くめだ。, だが、プログラミングとかまったく知らないWeb初心者のぼくにとって、ブログのカスタマイズというのはなかなか至難の業だった。, そこで、はてなブログをカスタマイズしていく上で、簡単コピペで実装できて、本当に参考になった記事を一挙に公開していく。, はてなブログでのカスタマイズの方法は、「デザイン」→「PC」・「スマホ」をいじる感じ。それぞれ下に「ヘッダ」とか「記事」とかあるので、そこにコードを追加していこう。（小さいのでアップしてみてください汗）, 「なんかうまくいかない…むりげー…」と思ったら、で囲んでコピペ。, それから、以下の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万円を得るまでの具体的ステップ~ブログを収益化しよう~ | むーびんぐ. text-align: center; } } .sidebar__follow-btn .hatena:hover{ フォローボタンも可愛らしいデザインが豊富だ。 このブログでは以下の記事を参照にした。めっちゃいい感じになるはず。 参考記事：はてなブログに11種類から選べるsnsフォローボタンをコピペ＋αで実装するカスタマイズ flex-wrap:wrap; フォローボタンのデザインは記事上・記事下用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種類用意しましたので、自分のブログにあったデザインを選べるかなと思います。. color: #fff; } 'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css", "http://blog.hatena.ne.jp/shun_prog0929/www.ituore.com/subscribe", 'http://blog.hatena.ne.jp/shun_prog0929/www.ituore.com/subscribe', "https://twitter.com/intent/follow?screen_name=shun_hatena", "http://feedly.com/i/subscription/feed/http://www.ituore.com/feed", はてなブログに11種類から選べるSNSフォローボタンをコピペ＋αで実装するカスタマイズ, はてなブログの便利過ぎるテーマ「Spirea」を作った｜一瞬で自分だけのデザインにできる！. font-weight: 700; .p-name:hover { .sidebar__follow-btn.-ver2 .twitter:hover{color:#55acee;} } ブログの更新をお知らせしたり、情報収集に活用してみたり。また自分の記事SNSを通して拡散され、多くの人に読んでもらえることもあります。, また自分のプロフィールにSNSへのリンクや、フォローボタンを設置しておくことで、交流の機会ができたりします。, そこで今回は、ブログのサイドバーに『Twitter』『Instagram』のフォローボタンを簡単に追加する方法をまとめてみました。, 今回はインスタ、ツイッター、はてなブログの読者登録ボタンの3つを横並びにしたパーツを作成しました。, マウスホバー時に背景に色が付きます。スマホだとタップしたときに切り替わるようになっています。, 編集画面の「デザイン」→「サイドバー」内にある、プロフィールの「編集」を押します。, 次にボタンを押したときに、各SNSアカウントのフォロー画面に移行させるための設定を行っていきます。, ツイッターのaタグの「IDを設定」となっているところを、自分のIDに差し替えてください。※”@”は不要です。, 読者登録ボタンは、aタグの「はてなのID」と「ブログのURL」となっているところを、自分のIDとURLに差し替えてください。, 編集画面のサイドメニュー内「デザイン」をクリック→サイドメニューのカスタマイズアイコンをクリック→「デザインCSS」から、サイト内のcssを編集することができます。, こちらは丸いデザインのフォローボタン。テキスト無しでアイコンのみなので、よりスッキリして見えますね。, 背景にイメージカラーを設定したバージョンも作成してみましたのでお好みでどうぞ。htmlは先ほどご紹介したものと一緒です。, CSSの変更点としては、color・border・backgroundの指定を上記のものと入れ替えているだけです。, はてなブログではデフォルトで使用できるアイコンがたくさんあるので、ボタンもおしゃれなものを簡単に作れるのがよいですね！, 「こだわり」が収入になる! background: #fff; .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フォローボタンを追加！インスタ、ツイッターなど. margin-top: 0.6em; cursor:pointer; font-size: 18px; ブログのSNSフォローボタン、はてな読者登録ボタンをおしゃれな感じにしたのでその方法を書いていきます。 コピペ+αで完成だよ！ くうねるだす Exploring My Nature. この度、はてなブログにfacebook、Twitter、Google+、Instagram、はてなブログ、feedlyの各種SNSのフォローボタンを設置しました。見ていただければ、わかる通りですが、いたってシンプルなSNSボタンです。今回は、この各種SNSのフォローボタンのコードを記事に記載しましたので、使ってみたいと … } height: 80px; フォローボタンも可愛らしいデザインが豊富だ。 このブログでは以下の記事を参照にした。めっちゃいい感じになるはず。 参考記事：はてなブログに11種類から選べるsnsフォローボタンをコピペ＋αで実装するカスタマイズ } フォローボタンのカスタマイズ. .p-box a:hover { .sidebar__follow-btn.-circle > span{ border-radius: 50%; align-content: center; はてなブログ用シェアボタンの設置. .sidebar__follow-btn > span { はてなブログの読者や、Twitter、Facebook、Feedlyなどのフォロワー・読者を増やしたい人にはオススメのカスタマイズ。 多くの方々が公開しているので、好きなデザインから選んでみるとよいかと思います。 color: #6490cd; text-decoration: none; } border: 1px solid #cc4895; border: 1px solid #38393C; margin: 0px auto 0px; .sidebar__follow-btn.-ver2 .hatena:hover{color:#38393C;} background: #38393C; -moz-opacity:0.6; border: 1px solid #55acee; border: solid 1px #E6E6E6; www.yuuu-nii.com, .sidebar__follow-btn{ カスタマイズは自己責任でお願いします。万が一、何か不具合があっても責任は負いかねます。 記事はよく読んで下さい。 WEBデザインやWordPressテーマの制作なども行っています。 color: #55acee; } (adsbygoogle = window.adsbygoogle || []).push({}); .p-box{ font-size: 1.2em; -moz-opacity:0.6; .sidebar__follow-btn .twitter{ color: #cc4895; .side-sp {display:none!important;} } snsフォローボタンの設置. snsフォローボタンの設置. .sidebar__follow-btn > span:hover { .p-box a{ この度、はてなブログにfacebook、Twitter、Google+、Instagram、はてなブログ、feedlyの各種SNSのフォローボタンを設置しました。見ていただければ、わかる通りですが、いたってシンプルなSNSボタンです。今回は、この各種SNSのフォローボタンのコードを記事に記載しましたので、使ってみたいという方は、コピペしていただければと思います。, ちなみに、このSNSのフォローボタンを作るに当って、参考にさせていただいたのが、こちらの『副業ハック』さんの記事。とってもわかりたすくて参考になりました。ありがとうございます。今回は、この『副業ハック』さんで紹介されていたコードを、ちょっとだけいじらせていただきました。, 流行りに乗れ！WordPressにバイラルメディア風のSNSボタンを設置する方法 – 副業ハック, まずは、どんか感じのSNSボタンか見てもらった方がいいと思いますので、SNSボタンを設置したブログ画像を貼らせていただきました。PC表示の場合は、サイドバーに、スマホ表示の場合は、フッターにそれぞれ設置しました。, ちなみに今回設置したのは、SNSのシェアボタンではなく、フォローボタンですのでお間違えなく！それでは、さっそく設置方法を解説していきます。, 設置方法と言っても、コピペするだけでOKなので、とっても簡単です。まずは、PC表示の方から設置していきたいと思います。それでは、はてなブログのダッシュボードから『デザイン→カスタマイズ→サイドバー→モジュールを追加』に進んでください。, そして、『URL』というところに、ご自分の各種SNSのプロフィールページなどのURLをコピペすればOKです。ここで、一番わかりずらいのが、はてなブログの『読者になる』ボタンです。以下の感じで設定してみてください。, 続いてCSSの設定です。以下のコードをダッシュボードから、『デザインCSS』に進んで、お好みの場所に貼り付ければ終了です。もしかしたら、はてなブログのテーマによって、デザインが崩れる場合は、CSSをいじってみてください。, スマホへの設置方法は、先ほど『モジュールに追加』から追加したHTMLコードを、ダッシュボードから『フッタ→ページャー下』にコピペして、CSSも上のコードと同じものをコピペすれば完成です。, 『副業ハック』さんのわかりやすい記事のおかげで、簡単にSNSのフォローボタンを作成することができました。ちなみに、僕が『副業ハック』さんのコードをちょっといじって変更したところは、以下の通りです。, 以上４点（※だったと思います）を変更しました。皆さんのはてなブログカスタマイズの参考になればと思います。記事にさせていただきました。, ※ 当ブログのはてなブログカスタマイズの過去記事です。もしよろしければ、のぞいてみてください。, #box2 img {max-width: 200%;} }, blog.hatena.ne.jp/はてなのID/ブログURL/subscribe. それでは記事の設置方法を説明していきます。 注意事項. background: #ffffff; display: flex; 今回は主にはてなブロガーさん向けのカスタマイズ記事になります。 突然ですが、みなさんはどんなsnsを利用しているでしょうか。 ブログを運営するにあたって、snsというのはとても大事なツールです。 ブログの更新をお知らせしたり、情報収集に活用してみたり。 opacity: 0.8; Follow @shun_hatena box-sizing: border-box; font-size: 22px; はてなブログのカスタマイズ集（すべてコピペでok）と収益化方法などのまとめ. } ブログを報告する, http://www.ikedahayato.com/20151219/43438032.html, https://twitter.com/intent/follow?screen_name=Sight50Sky, https://www.instagram.com/sight50sky/?ref=badge. 'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); 学生ブロガー。大学院でプログラミングを専攻している。日本のプログラミング教育に疑念を抱く。ブログのカスタマイズが好き。, 学生ブロガー。大学院でプログラミングを専攻している。日本のプログラミング教育に疑念を抱く。. はてなブログをコピペ+αでカスタマイズ！ justify-content: center; color:#fff; transition: all .3s; width: 100%; filter: alpha(opacity=60); | filter: alpha(opacity=60); background: #ffffff; 今回は、はてなブログ カスタマイズ記事のまとめです。 これまでに紹介してきたレイアウトやデザインカスタマイズ系の記事が増えてきたため、一覧ページを作ってみることにしました。 実際の動作と合わ … margin:1%; width: 80px; どうも！フジグチです！ 今日は普段読ませて頂いているLSSさんのブログで「コメントを書く」ボタンのカスタマイズをしている記事を読みました。 little-strange.hatenablog.com フジグチ そこをカスタマイズするのか！ と衝撃？刺激？を受けたので当ブログでもカスタマイズしてみたいと思います。 border: solid 1px #dddddd; .sidebar__follow-btn.-ver2 > span:hover{background:#fff;} text-align: center; width:100%; ブログのSNSフォローボタン、はてな読者登録ボタンをおしゃれな感じにしたのでその方法を書いていきます。, 前から言ってますが、PCもいじれず自分で勉強する根性もない僕はスーパーマンたちの知恵に頼っております。, ゆきひーさんのフォローボタン使ってる方めちゃくちゃ多いんですよ。ていうか、デフォルト以外はほぼほぼゆきひーさんのやつ。オソロシイ。もうめちゃくちゃお世話になりまくってます。, 「は？ゆきひーと全然ちげえじゃん」って言われそうですが、ぼくはCSSちょこっと変えただけなんでコードの8割はゆきひーさんのヤツなわけです。, ぼくはSNSのシェアボタン（スマホの写真に写ってるカラフルなヤツ）と統一感のあるデザインにしたくてこんな形に落ち着きました。, そうですよね、そう思いますよね。でもインスタすごいかんね？というか、最近ブロガーの間でインスタが流行ってるもん！, ほら、イケハヤさん（正確に言えば高知県民ではないのか？）だってブログにインスタがっつり貼ってるし, 引用：http://www.ikedahayato.com/20151219/43438032.html, ブログで稼いで美味しいモノたくさん食べてんのか。けしからん。 ぼくも食べたい。がんばろ。, あと、ブロガーの方って結構写真のクオリティーとか気にしてデジカメで撮ったりするじゃん。それだったら、インスタやらない手はないでしょ！, しかも利用者数だってインスタのがツイッターより多いんだぜ（やぎろぐに書いてあった←）、さあこれを読んだ人はインスタとブログを連携させよう。今すぐ！, おし、言いたいことは言い切った！あとはコピペのコード貼り付けるんでサササーっといきます。, PCはダッシュボード>デザイン>記事>記事下orサイドバーへ。ぼくはサイドバーに貼ってる。,