Hacks旅ブログの作り方、ブログデザインのこと、wordpressのことなど。2018.01.28Simplicityでは、投稿の上下に、↓このようなSNSのシェアボタンを設置することができます。今回は、このSNSのシェアボタンのデザインをカスタマイズする方法を紹介します。編集するのは、スタイルシート(CSS)のみです。(style.css)の編集は必ず子テーマで行って下さい。先に、僕のカスタマイズ例を載せておきます。色付きのボックスと、各SNS名のテキストを非表示にし、カウントはそのまま残しています。コンパクトになったので、SNSシェアボタン全体を右寄せにしています。色を統一したので、目立たなくなりましたが、スッキリしている方が好きなので気に入っています。SNSシェアボタンのデザインをカスタマイズするスタイルシートはWordpress管理画面左側にある「外観」→「テーマの編集」→「スタイルシート(Style.css)」から編集・更新、またはFTPソフトでサーバからダウンロードして編集・アップロードという手順で変更することができます。僕は、これくらいの軽い編集であれば、Wordpressの管理画面内でやってしまうことが多いです。事前に、Wordpress管理画面左側にある「外観」→「カスタマイズ」→「SNS」から「シェアボタンのタイプ(PC)」を、「バイラルタイプ(高速)」に設定しておいて下さい。モバイル表示も同じにする場合は、「シェアボタンのタイプ(モバイル)」も「バイラルタイプ」に設定して下さい。(style.css)を開き、以下のコードを貼り付けて下さい。a.feedly-btn-icon-link{background-color:#fff;}このサンプルでは、Twitter、Facebook、はてなブックマーク、Pocket、Feedlyの5つのサービスのボタンについて記述しています。*/」にGoogle+の記述(.google-plus-btn-icon-link)を付け足して下さい。逆に、使っていないものがあれば消して下さい。マウスホバー時に、アイコンの色を各SNSのイメージカラーにするマウスホバー時に、色を付けるカスタマイズです。ボタンのデザインをシンプルにしたので、マウスをホバーしたときに、SNSシェアボタンだと分かるように色を付けました。【サンプル:Facebookホバー時】ホバー時に色を付けるカスタマイズを施すには、以下のCSSコードをスタイルシートに貼り付けて下さい。アイコンサイズを大きくする各SNSアイコンのサイズを30pxにしました。グレーのボタンに白抜きアイコンのデザイン背景色を薄いグレーにして、各SNSアイコンを白にしています。a.feedly-btn-icon-link{background-color:#bbb;}さいごにブログのSNSシェアボタンは、各SNSのイメージカラーを使ったものが多く、目立つデザインが多いです(シェアボタンなので目立つのが当たり前ですが)。僕は控えめなデザインにしたかったので、このようなカスタマイズをしました。・CSSコピペからはじめよう。PostsSimplicityカスタマイズ【Simplicity】FontAwesomeを使って記事を装飾する方法FontAwesomeを使って記事を装飾する方法と、Simplicityで使われているFontAwesomeのアイコンを変更する方法について説明します。「○○の買い方」のような、旅の情報記事を書くときに便利なスクリーンショット(画面キャプチャ)の作成・編集を効率良く行えるScreenpressoというツールを紹介します。CocoonカスタマイズCocoonの人気記事ウィジェットのカスタマイズ方法Cocoonの人気記事ウィジェットのランキング順位のカスタマイズ方法を紹介します。CocoonカスタマイズCocoonのSNSシェアボタンを、よりシンプルにカスタマイズする方法CocoonのSNSのシェアボタンのデザインをカスタマイズする方法と、デザインサンプルを紹介します。ブログデザインコピペでOK。アプリーチのカスタマイズ方法とデザインサンプル4ブログにきれいにアプリのリンクを貼ることができる、「アプリーチ」のデザインをカスタマイズする方法と、デザインサンプルを紹介します。ブログの配色を考えるのに役立つサイト・ツール6選ロリポップからMixHostへ。[...]返信コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。Ultimateの使い方。Snippetsの使い方。人気記事ウィジェットのデザインサンプル102019.12.232020.01.03スマホ・パソコン間でテキストやファイルをやり取りする方法。Ultimateの使い方。Snippetsの使い方。人気記事ウィジェットのデザインサンプル102019.12.232020.01.03スマホ・パソコン間でテキストやファイルをやり取りする方法。コメント欄のデザインをカスタマイズする方法(枠、色、文字の変更)と、デザインサンプル2019.11.26CATEGORIESCocoonカスタマイズ11Simplicityカスタマイズ9Windows7Wordpress21その他6ブログデザイン27旅ブログの作り方18タイトルとURLをコピーしました。