好きな物とか琴線に触れた物とかHello.おすすめの記事はこちらこれは使える!!「リズムケア」あらゆる事を記録でき習慣化の手助けをしてくれるアプリですはてなブログで公式目次機能を使わないで自動的に目次を作る方法はてなブログに「パンくずリスト」を設置したらSEO的に効果があった!!この広告は、90日以上更新していないブログに表示しています。2016-01-09はてなブログにシェアボタンやフォローボタンを設置して色々分かったことブログカスタマイズスポンサードリンク@soraです。僕のブログにSNSのシェアボタンとフォローボタンを設置しました。@ftmacchoさんの記事を参考にして設置しました。今回はゆきひーさんのコピペコードにプラスαしてアレンジしました。ゆきひーさんのコピペコードは僕みたいにhtmlやcssの事が良く分からない人でも簡単に設置出来ます。これをアレンジするとなるとhtmlやcssに詳しくない僕にとっては一苦労でした。シェアボタンシェアボタンはこの記事を参考にしてコピペコードをほぼ、そのまま使ってます。「シェアする」の文字サイズがスマホで表示すると小さかったので、少し大きくしてあります。コピペコード4HTML(レスポンシブ)の文字サイズを指定している箇所を次のように変更しました。text-align:center">シェアする</span>www.yukihy.comフォローボタンフォローボタンはこの記事を参考にしました。www.yukihy.comこの記事では、はてなブログの購読ボタン・Twitter・Feedlyのボタンの設置方法だけしか解説してません。Google+やinstagram、Facebookも設置したかったので、色々調べて何とか設置する事が出来ましたので紹介したいと思います。Facebookの設定方法Twitter・Feedly・Facebookのアイコンは、はてなブログ標準のWEBフォントを利用します。・はてなブログのWEBフォント知らなかったのですが、はてなブログでは、次のWEBフォントを自動的に読み込んでます。絵文字みたいなやつです。ゆきひーさんのコピペコードも、これを使っている事が分かりました。このアイコンにはクラス名とコードが紐付けされています。Facebookのアイコンを表示させる場合は次のようにやります。標準サイズのアイコンとクラス名クラス名は「blogicon-facebook」このコードを記載するとアイコンが表示されます。lg」このコードを記載するとアイコンが表示されます。Awesomeのものを利用します。次のコードをダッシュボード→設定→詳細設定の「headに要素を追加」にコピペしておくと使えるようになります。コピー済みの場合はやる必要はありません。fa-instagram」このコードを記載するとアイコンが表示されます。fa-google-plus」このコードを記載するとアイコンが表示されます。Awesomeを利用してソーシャルメディアのアイコンを表示させることが出来るって事が分かりました。これを踏まえて出来上がった実際のHTMLとcssです。HTMLはてなブログ、Twitter、Facebook、instagram、Google+の順番になってます。◯◯◯の部分を自分のURLに変更して下さい。8px;}何分HTMLやCSSに疎いので、うまく説明出来てませんが、ゆきひーさんの記事と合わせてご覧ください。そらのまとめ今回のアレンジで色々勉強になりました。単純にコピペするだけなら何も考えなくても済みますが、自分好みにアレンジしようと思うと、タグやコードの知識を深めないと出来ません。大変ですが、ブログ記事を書くより楽しいです。勉強して更に使いやすいブログにしていきたいですね。今日の1ショットInstagramもやってますのでフォローよろしくお願いします。sora5174今朝の朝食はバナナ、にんじん、りんご、冷凍してあったブルーベリー、キウイフルーツのスムージーでした。お腹が冷えないように、コップ半分くらいのお湯を加えてシェークしてます。今日のテーマAmazonビデオいろんな映画を見る1日1新1日1新の詳細はこちら→click!ツレがうつになりましてAmazonビデオで観た映画です。