仮想サーファーの波乗りスマートフォン用の表示で見る仮想サーファーの日常プログラミング・エンジニアのスキルアップ・ブログ運営などに関してよく書く雑記ブログMENUプログラミング初心者Webエンジニアブログ運営お問い合わせ免責事項2018-03-20はてなブログ記事シェアボタンのデザインを変えてクリックしやすくする方法(コピペでOK)ブログ運営はてなのデフォルトの記事シェアボタンって超押しづれえ...。思ってたので、シェアボタンを目立ちやすくかつクリックしやすいデザインに変更しました!せっかくシェアしようと思っても「シェアボタンねえじゃん!」と探す羽目になって諦める。(id:shun_prog0929)さんの記事を参考にさせてもらいました。ありがとうございました!後世のはてなブロガーのために、記事シェアボタンのデザイン変更のコードを貼って軽く解説しておきます。【PC画面】はてなブログ記事シェアボタンのデザインを変更するコードデフォルトのシェアボタンを消しておく新しいシェアボタンを追加していくので、デザイン→カスタマイズ→記事のソーシャルパーツを消しておきましょう。HTMLを記載していきます。class="share-text">Twitter</span></a></div></div>コードを貼り付けたら、「変更を保存する」ボタンを押して変更を保存しておきましょう。コードの内容の説明は後ほど行います。次に、デザイン→カスタマイズ→デザインCSSのCSSを記載できる箇所に以下のコードを記載します。none;}こちらも貼り付けたら、「変更する」ボタンを押して変更を保存しておきましょう。これで、いい感じに押しやすいシェアボタンが表示できているはずです。できてる!すげー押しやすそう!!【PC画面】変更後シェアボタンのコード解説ここからは、上記のコードを軽く解説しておきます。困ったらここを見てコードの該当箇所をチューニングしてください。center;}こちらでシェアボタン全体の調整をしています。上下にmarginで20px分の間隔をあけていますが、もう少し間隔あけたい場合はpxを大きくしたりと変更してみてください。padding:5px;}こちらで、シェアボタンのそれぞれ(はてブやTwitterなど)のサイズや大きさなどを調整しています。30%;」をもう少し大きくしたりと調整しましょう。15px;}こちらは、「Bookmark!」などの箇所の大きさを調整しています。これらを調整すればより自分のサイトに最適化されたシェアボタンになるかと思います!【スマホ画面】はてなブログ記事シェアボタンのデザインを変更するコード次に、スマートフォンサイトのシェアボタンも同じように変更しておきます。以下のHTMLを記載していきます。#55acee;}</style>こちらは、CSSもHTML内に記載しています。変更を保存して画面を確認してみると、シェアボタンが反映されています。変更うまくいっていますね。スマートフォンは特にボタンが押せないとストレスになるので、押しやすいデザインになっていない方はぜひ対応してみると良いと思います!コードの内容は、基本的にPC画面のものと変わらないので割愛します。まとめデザイン変更方法を紹介し始めて今回で3回目になるのですが「コピペで実現できて、非エンジニアでも自分の望みのデザインに調整できる。」という記事を目指して、今後も紹介していきたいと思います!ブログの基本設定はこちらの本が参考になるのでオススメです。積極的にさぼるために頑張る25歳Webエンジニアのブログ。プログラミング・エンジニアのスキルアップ・ブログ運営についてよく書きます。@virtual_techXプログラムとか技術の話はQiitaでよく書いてます。Webエンジニア向けです。virtual_techXはてなブログをはじめよう!virtual-surferさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。