.wpcf7-submit:disabled{cursor:not-allowed}よく試し、よく作るブログ実験室naelabスマホ画面下固定でも邪魔くさくないSNSシェアボタンの設置方法(はてなブログのカスタマイズ)はてなブログ2016.05.15こんにちは、NAEです。先日、ブログのデザインを全面刷新しました。その詳細編として、画面下に固定されるけど邪魔くさくならないSNSシェアボタンをはてなブログへ設置する方法をご紹介します。※2016-11-03追記はてブ用ボタンにバグがありましたので修正しましたPocketボタンを追加しました注意:本番ブログをカスタマイズする前にテスト環境をつくっておくことを強くおすすめします!テスト用ブログを作ろう!はてなブログでカスタマイズを安全に行う方法ブログをカスタマイズしていると誰もが一度は経験する「前のに戻したいけど戻せない問題」。バックアップを取るよりも便利な方法がありますのでご紹介。bloglab.naenote.net2016.05.28目次SNSシェアボタンのコピペコード外部ファイルの読み込みHTMLCSS余談:このボタンを作った理由まとめ:SNSシェアボタンもユーザーフレンドリーにSNSシェアボタンのコピペコードはてなブログのカスタマイズにおいていじる要素は主に3つです。必要な外部ファイルの読み込み(Webフォントなど)表示するものの定義(HTML)その装飾や動きの指定(CSS、Javascript)それぞれのいじり方を順番にご紹介します。外部ファイルの読み込み今回は、ボタンに表示する各種SNSマークの元ネタとしてFontAwesomeというWebフォントを利用しています。そのWebフォントを読み込ませます。ヒントFontAwesomeというWebフォントには複数のバージョンが存在します(今回は4.6.0を使っています)。他の部分ですでに異なるバージョンのものを読み込んでいる場合、最新のもの1つだけをタイトル下に移して他は削除しましょう。読み込むWebフォントの数が減るため、ブログの読み込みが早くなります。過去カスタマイズした部分から、下記href=””の内側にあるURLに含まれるバージョン番号(4.6.0)部分が異なるものを探してみてください。href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">HTML次にボタンの本体を作っていきます。どちらでもいいんですが、なんとなく記事上にしてみました。プレビュー画面(記事ページをプレビュー)にこのようなSNSマークが表示されたら成功です。ヒント今回は「LINEに送る」ボタンとして、LINEの公式ロゴでなくFontAwesomeに含まれているチャットアイコンを利用しています。実現したいボタンデザインにあわせるとロゴの利用規約(変形・加工の禁止)に抵触する可能性があるためです。FontAwesomeにLINEのロゴが含まれておらず、またその他WebフォントでもLINEロゴが含まれているものがない、という事情もあります。CSS追加したSNSでボタンの原型(HTML)に対して装飾を施していきます。タイトル下スマホ版の場合、上記コードをstyleタグで囲って下さい。type="text/css">ここに上記コードをコピー</style>ヒントレスポンシブデザインのテーマを使っており、PC版ではこのボタンを表示させたくない、という方は、以下の通りコードを修正してください。*/}PC版表示とスマホ表示を切り替える画面横幅の域値は、ご利用のデザインテーマの推奨値を使って下さい。完全に個人的なこだわりですが、スマホ画面下が埋まるのはガマンならないからです。それが広告であれメニューであれ、記事が見えないようにブロックしてしまうものは邪魔でしょうがないです。SNSシェアしてほしい。他の記事も見てほしい。ぼくもブログ書く側の人間ですから、スマホ画面下というゴールデンスペースをそれに使いたいですよね。それが先行しすぎて読む側に不快に思われてしまうのは本末転倒だと思います。読む側が不快にならな。SNSシェアはしやすい。そのちょうどいいライン(=ぼく自身が不快に思わなかったライン)を探った結果この形に落ち着きました。ボタンの大きさとか透明度とか、結構本気で調整入ってます。まとめ:SNSシェアボタンもユーザーフレンドリーに以上、画面下固定でも邪魔くさくないSNSシェアボタンの設置方法をご紹介しました。うまく動かなかったりデザインの崩れなどありましたら、本記事のコメント、はてブコメント、もしくはぼくのTwitterでご連絡ください。可能な範囲でサポートさせていただきます。書く側と読む側、両方がうれしいデザインが増えていくことを願っています。そのデザインはダメなんだ。users」の正体はてなブログテスト用ブログを作ろう!はてなブログでカスタマイズを安全に行う方法スポンサーリンク目指せ最高の使い心地。08:07いつも楽しく拝見しています。23:44しらたまさん嬉しいコメントありがとうございます。WordPressは触ったことがなく、残念ながらピンポイントでのやり方はわかりません・・・。記事ベージのみに表示するHTMLやCSS、Javascriptを仕込む場所はあるはずです。WordPressカスタマイズ方法の解説記事が参考になるかもしれません。お力になれず申し訳ありません。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。管理人NAEただのブログ好き。お問合わせはこちらもしくはTwitterのDMまでどうぞ。ブログ実験室naelab.タイトルとURLをコピーしました。