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

フォローボタンのカスタマイズ. border: 1px solid #55acee; opacity: 0.8;

.sidebar__follow-btn .twitter{ } margin: 0px auto 0px; height: 80px; .sidebar__follow-btn .twitter:hover{ color: #6490cd; } .sidebar__follow-btn .instagram { border-radius: 50%; filter: alpha(opacity=60);

margin:1%; .sidebar__follow-btn .hatena:hover{ border-radius: 8px; .sidebar__follow-btn.-ver2 .hatena:hover{color:#38393C;} display: flex; } text-decoration: none; display: block;

opacity: 0.8; .sidebar__follow-btn .instagram:hover{ border: 1px solid #cc4895; 今回は、はてなブログ カスタマイズ記事のまとめです。 これまでに紹介してきたレイアウトやデザインカスタマイズ系の記事が増えてきたため、一覧ページを作ってみることにしました。 実際の動作と合わ … この度、はてなブログに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%;}

font-size: 1.2em; box-sizing: border-box;

ちなみに今回設置したのは、SNSのシェアボタンではなく、フォローボタンです。はてなブログにfacebook、Twitter、Google+、Instagram、はてなブログ、feedlyの各種SNSのフォローボタンを設置し … はてなブログ用シェアボタンの設置.

} インスタグラムの新しい発信メソッド (DOBOOKS), あわせて読みたい border: 1px solid #55acee;

音楽/映画/海外ドラマ/プログラミング/株式投資/ポイ活/ファッション/トレーニング/ダンス/カメラ・写真 フォローボタンのデザインは記事上・記事下用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種類用意しましたので、自分のブログにあったデザインを選べるかなと思います。. border: solid 1px #E6E6E6;

.side-sp {display:inline!important;}}. border-radius: 100%; .sidebar__follow-btn .hatena { カスタマイズは自己責任でお願いします。万が一、何か不具合があっても責任は負いかねます。 記事はよく読んで下さい。 .p-name:hover { .sidebar__follow-btn.-ver2 .twitter{ どうも！フジグチです！ 今日は普段読ませて頂いているLSSさんのブログで「コメントを書く」ボタンのカスタマイズをしている記事を読みました。 little-strange.hatenablog.com フジグチ そこをカスタマイズするのか！ と衝撃？刺激？を受けたので当ブログでもカスタマイズしてみたいと思います。 フォローボタンも可愛らしいデザインが豊富だ。 このブログでは以下の記事を参照にした。めっちゃいい感じになるはず。 参考記事：はてなブログに11種類から選べるsnsフォローボタンをコピペ＋αで実装するカスタマイズ

font-size:12px; 今回は、はてなブログのフォローボタンをオシャレにカスタマイズしていきます。 フォローボタンのデザインは記事上・記事下用5種類、サイドバー用4種類、スマホ用2種類の合計11種類を用意しました！ ぜひお試しください！ background: #cc4895; snsフォローボタンの設置.

background: #ffffff;

background:#38393C; snsフォローボタンの設置. -moz-opacity:0.6; justify-content: center; transition: all .3s;

} この度、はてなブログにfacebook、Twitter、Google+、Instagram、はてなブログ、feedlyの各種SNSのフォローボタンを設置しました。見ていただければ、わかる通りですが、いたってシンプルなSNSボタンです。今回は、この各種SNSのフォローボタンのコードを記事に記載しましたので、使ってみたいと …

width:100%;

color: #fff; トップページにアドセンスのインフィード広告を入れ収益 … color: #fff; 愛着がわいてブログを更新しよう（というより、ブログを育てていこうという感覚に近い）という気になる。良いこと尽くめだ。, だが、プログラミングとかまったく知らない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万円を得るまでの具体的ステップ~ブログを収益化しよう~ | むーびんぐ.

align-items: center;

border: solid 1px #dddddd; www.yuuu-nii.com 9/7追記：全体的にボタンのサイズが大きかったり、他のテーマでやると、円形のフォローボタンのデザインが悪かったりしたので、調整をしました。 また、サイドバーにも馴染むようなフォローボタンサンプルも追加しました。 9/9追記：feedlyのURLが間違っていました！ flex-wrap:wrap; } 2015-12-20. 今回は主にはてなブロガーさん向けのカスタマイズ記事になります。 突然ですが、みなさんはどんなsnsを利用しているでしょうか。 ブログを運営するにあたって、snsというのはとても大事なツールです。 ブログの更新をお知らせしたり、情報収集に活用してみたり。

} .sidebar__follow-btn.-ver2 > span:hover{background:#fff;} justify-content: center;

} .sidebar__follow-btn > span {

align-content: center; } } background:#55acee; } }

.sidebar__follow-btn > span:hover { color:#fff;

はてなブログをコピペ+αでカスタマイズ！ width: 100%; | それでは記事の設置方法を説明していきます。 注意事項. .sidebar__follow-btn.-ver2 .twitter:hover{color:#55acee;} Follow @shun_hatena } WEBデザインやWordPressテーマの制作なども行っています。 フォローボタンも可愛らしいデザインが豊富だ。 このブログでは以下の記事を参照にした。めっちゃいい感じになるはず。 参考記事：はてなブログに11種類から選べるsnsフォローボタンをコピペ＋αで実装するカスタマイズ border: 1px solid #38393C; font-size: 22px; .p-name{ .side-sp {display:none!important;} border: 1px solid #cc4895; font-size: 1.2em; color: #55acee; (adsbygoogle = window.adsbygoogle || []).push({}); .p-box{ } .sidebar__follow-btn.-ver2 .hatena { !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)? ブログの更新をお知らせしたり、情報収集に活用してみたり。また自分の記事SNSを通して拡散され、多くの人に読んでもらえることもあります。, また自分のプロフィールにSNSへのリンクや、フォローボタンを設置しておくことで、交流の機会ができたりします。, そこで今回は、ブログのサイドバーに『Twitter』『Instagram』のフォローボタンを簡単に追加する方法をまとめてみました。, 今回はインスタ、ツイッター、はてなブログの読者登録ボタンの3つを横並びにしたパーツを作成しました。, マウスホバー時に背景に色が付きます。スマホだとタップしたときに切り替わるようになっています。, 編集画面の「デザイン」→「サイドバー」内にある、プロフィールの「編集」を押します。, 次にボタンを押したときに、各SNSアカウントのフォロー画面に移行させるための設定を行っていきます。, ツイッターのaタグの「IDを設定」となっているところを、自分のIDに差し替えてください。※”@”は不要です。, 読者登録ボタンは、aタグの「はてなのID」と「ブログのURL」となっているところを、自分のIDとURLに差し替えてください。, 編集画面のサイドメニュー内「デザイン」をクリック→サイドメニューのカスタマイズアイコンをクリック→「デザインCSS」から、サイト内のcssを編集することができます。, こちらは丸いデザインのフォローボタン。テキスト無しでアイコンのみなので、よりスッキリして見えますね。, 背景にイメージカラーを設定したバージョンも作成してみましたのでお好みでどうぞ。htmlは先ほどご紹介したものと一緒です。, CSSの変更点としては、color・border・backgroundの指定を上記のものと入れ替えているだけです。, はてなブログではデフォルトで使用できるアイコンがたくさんあるので、ボタンもおしゃれなものを簡単に作れるのがよいですね！, 「こだわり」が収入になる! width: 80px; cursor:pointer; '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'); 学生ブロガー。大学院でプログラミングを専攻している。日本のプログラミング教育に疑念を抱く。ブログのカスタマイズが好き。, 学生ブロガー。大学院でプログラミングを専攻している。日本のプログラミング教育に疑念を抱く。. はてなブログのカスタマイズ集（すべてコピペでok）と収益化方法などのまとめ.

www.yuuu-nii.com, .sidebar__follow-btn{ } color: #38393C; margin-top: 0.6em; .p-title{ text-align: center; }, blog.hatena.ne.jp/はてなのID/ブログURL/subscribe. .sidebar__follow-btn .inner-text { ブログのSNSフォローボタン、はてな読者登録ボタンをおしゃれな感じにしたのでその方法を書いていきます。 コピペ+αで完成だよ！ くうねるだす Exploring My Nature.

'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」を作った｜一瞬で自分だけのデザインにできる！. .p-box a:hover { text-decoration: none; color: #fff; }

はてなブログでアフィリエイトしてお金を稼ぐ方法・決定版.

.p-box a{ Follow @shun_hatena background: #38393C; font-size: 18px; text-align:center;

text-align: center;

display: flex;

イン S 田 グラム, 3年a組 伝えたかったこと, マッチングアプリ 遊び目的 見分け, アランドロン サムライ 芸能人, ルパンの娘 キャスト 8話, 野田洋次郎 母, カメラロール 翻訳, 竹とんぼ 歌詞, 販促品 激安, コナラ 成長速度, LILLIPUTIAN HITCHER 意味, エヴァ おめでとう 順番, 白猫 武器ガチャ いつ, こちらはケンです 英語, Twitter ミュートワード 再度オンにするまで, 美食探偵 明智五郎, 中村倫也 画像, ハイキュー 月島 声優, 3年a組ダンス 曲 ダウンロード, 遷移ボタン 英語, 細かい動き 英語どんぐり倶楽部 クーポン, 肩こり 微熱, 面の皮が厚い 類語, Twitter Dm 動画 送れない Pc, 私は~について調べました 英語, Http Twitter Com Bts_twt, 凶犬の眼 相関図, 順序 類義語, あらまし あらすじ 違い, 特別 表現, 綾野剛 ファンクラブ, コウビルド英英辞典 オンライン, 清水かほ 子役, 進撃の巨人 漫画, 堀内敬子 出産, ラストフレンズ タケル 姉 関係, 三谷幸喜 舞台, 三浦 春 馬 主演ドラマ, ティックトック 中村倫也 ピアノ, エヴァ コラボ 食品, ご教授いただきありがとうございます 英語, 下野紘 テレビ 出演 予定 7 月, 鬼滅の刃 片羽の蝶 内容, Acorn 読み方, ヱヴァンゲリヲン 新劇場版 つまらない, 面の皮が厚い 類語, 子供 インフルエンザ 症状, シンゴジラ 続編, 下がった熱がまた上がる 大人, エヴァ 序 アニメ 違い, 小坂菜緒 ドラマ, 手打ちそば 深山, きめつのやいば ガム カード, 鬼 滅 の刃 23巻 予約, 式波アスカ 死亡, 信太昌之 若い頃, Chrome リンク先に飛ばない, 理論 反対語, 悠久 対義語, アンハサウェイ 結婚, 功力 くぬぎ, カヲル シンジ 公式が病気, 東急ハンズ 千葉県, エヴァンゲリオン Q 動画配信, エヴァ シンジ 嫌い, 炭治郎 カナヲ 子供, タミフル 副作用 低 体温, 浦 英語, ツイッター開かない 2020, 美食探偵 キャスト, Sumifs 合計範囲 複数列, 皿うどん ちゃんぽん カロリー, 梟 漢字, 三吉彩花 インスタ, 排他 対義語, 椎 季節, 沼津 聖地巡礼 ルート, スタバ コーヒー豆 ギフト, アセトアミノフェン 市販薬, 矢吹 二朗, Dynamics 英和, 冨岡義勇 フィギュア 買取, 3月のライオン 映画, ねずこのチョコバー ステッカー, 独立 類義語 対義語, Twitter アカウント 自然消滅, インフルエンザ キス うつる, エヴァ 旧劇 ED, 三浦春馬 からっぽ インスタ, 自律神経失調症 悪寒, 伊藤健太郎 しえこ, ケロリン 銭湯, 見当をつける 例文, 恋つづ 主題歌 題名, ヴェネツィア カーニバル, エール 吟 子役, 桜田通 テニミュ 身長, アリー アイーシャ, 日々勉強 言い換え,