2018年1月16日こちらのカスタマイズは、STINGER8・AFFINGER4でも応用できます。2016年11月10日追記Feedlyのアイコン画像のファイル名と指定コードが違っているため、アップロードした画像が表示されないことに気がつきました。記事を参考にして下さった方には大変お手数をおかけいたしますが、こちらにて内容をご確認の上、画像ファイル名の修正をお願いいたします。ご迷惑をおかけしてしまい申し訳ございません。2018年1月16日追記Feedlyボタンのエラー対策としてコードに追加するリンクの修正を行いました。ついている、デフォルトのオリジナルソーシャルボタン。私の場合、ゼロから自分で作るとなると、かなりの勇気と行動力が必要です。無理かも?(笑)ここでは、デフォルトのカウント付きオリジナルソーシャルボタンに、RSS・Feedly・Push7の3種のボタンを追加する方法をご紹介します。シェア&フォローを下さった皆様、ありがとうございます。9種類3列での表示だと、下記のようにスマホとタブレット表示で少々歯切れが悪い感じがするので、RSSを非表示にする方法をこちらに追記しました。AFFINGER4のアップデートで変更された新しいデザインに合わせたCSSコードも追記しています。※こちらでご紹介する追加方法は、FeedlyとPush7のアイコンに画像を使用している関係で、デフォルトのアイコンフォント横のborderはやむを得ず非表示としています。STINGERへのソーシャルボタンの「追加」のカスタマイズ方法で、「作成」する方法ではありませんのでご了承ください。「Push7」とは?Webプッシュ通知サービス「Push7」は、更新ボタンを押して間もなくのタイミングで、更新情報を購読者のブラウザに自動的に送ることができるサービスです。Chrome・Firefox・Android・ios(アプリ対応)。購読者側は購読したいサイトのPush7購読ボタンを押し、プッシュ通知を許可するだけという手軽さなので、今後利用する方が増えそうですね。ユーザー目線で見ても、とても便利な機能なので導入しておくことをおすすめします。「Push7」導入に必要となる、アカウント登録と自動プッシュ通知を行うためのWordPressプラグインの設定方法については下記ページをご参照ください。2,297viewWordPressサイトにPush7を導入する方法と設定手順を簡単4ステップで♪Webプッシュ通知サービス「Push7」は、更新情報を購読者のブラウザに自動的に送ることができる便利なサービス。実は私もつい最近知ったばかりです。以下、それぞれの項目のリンクをご自身のサイトに合わせてメモ帳に準備しておいてください。1RSShttp://kanamii.jp//?feed=rss2【SSL化済みの場合】https://kanamii.jp//?feed=rss2※kanamii.jpの部分をご自身のサイトのドメインに書き換えます。2Feedlyhttps://feedly.com/i/subscription/feed/http://kanamii.jp/feed【SSL化済みの場合】https://feedly.com/i/subscription/feed/https://kanamii.jp/feed※kanamii.jpの部分をご自身のサイトのドメインに書き換えます。3Push7Push7に登録後、ログイン→トップページにて「アプリケーションURL」をコピーします。AwesomeにはないFeedlyとPush7のアイコンは、自作の小さな画像を背景画像として使用します。アイコンフォントを自作するという選択肢もあるようですが、私には敷居が高そう・・。いっても、めっきり画像加工は苦手分野でして。ものっすごく頑張ったつもりなんですが、Feedlyのアイコンの中身を上手く透過させることができず。大きさも違うし自分でも笑っちゃうような画像なんですが、これでもいいよ~という優しい方は、右クリック→「名前を付けて画像を保存」でお持ち帰りください。大丈夫!こんな画像でもCSSで綺麗に表示できますっ!(笑)ご自身のパソコンにダウンロードした2つのアイコン画像は、FTPで子テーマフォルダ(stingerplus-childまたはaffinger4-child)内の「images」フォルダへアップロードします。(推奨)もしもFTPでのアップロード方法がわからない場合は、WordPressダッシュボード→メディア→「新規追加」でアップロードしてもOKです。メディアにアップロードした場合は、アップロードした画像をクリックして表示されるhttp://(またはhttps://)で始まる画像URLをそれぞれメモ帳にコピーしておいてください。【画像ファイル名修正のお願い】2016年11月10日以前に、こちらからダウンロードしていただいたFeedlyの画像ファイル名は「feedly-i-.png」となっておりました。style.cssで指定したコードと異なっているためこのままでは表示されません。お手数をおかけいたしますが、カスタマイズを行ってくださった方は、FTPにてアップロード済みの画像ファイル名を右クリック→「名前変更」にて、拡張子の前の「-」(ハイフン)を削除して「feedly-i.png」に変更してくださいますようお願いいたします。全てのテーマファイルの編集は、テーマのアップデートの影響を受けない「子テーマ」で行うことをおすすめします。やむおえず親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。▶子テーマについてWordPressダッシュボード→外観→テーマ→テーマの編集→「sns.php」を編集してコードを追加していきます。(トップページのソーシャルボタンにも適用させる場合は「sns-top.php」にも同じ手順が必要となります。PLUSのカウント付きソーシャルボタンは、シェア数が増えたときのスペースを配慮して、パソコン以外の端末ではテキストが表示されない仕様となっています。今回追加する3つのソーシャルボタンに合わせて、タブレットやスマホでもテキストを表示させるように下記のコードをあらかじめコメントアウトしておきます。?>と入力してマークされるコード内の<?phpのすぐ後ろに//(半角)を入力します。?>※ツイートボタン、Facebookボタン、Google+1ボタン、ポケットボタン、はてブボタンの5か所の修正が必要です。こちらのカスタマイズは、必要に応じて任意で行ってください。下記赤枠で囲んだLINEボタンのコードのすぐ下、</ul>の上の部分にコードを追加していきます。class="snstext">RSS</span></a></li>※1のリンクの文字を削除して、あらかじめ準備しておいたリンクを張り付けてください。?></a></li>※2のリンクの文字を削除して、あらかじめ準備しておいたリンクを張り付けてください。?>内の//を削除してください。?></a></li>※3のリンクの文字を削除して、あらかじめ準備しておいたリンクを張り付けてください。?>内の//を削除してください。この時点で表示確認を行っても、テキストが白い文字のため見えません。CSSで装飾してあげると確認できるようになりますので、続けて次の項目へ進んでくださいね。style.cssにコードを追加WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」にコードを追加していきます。子テーマのstyle.cssに追加したコードが反映されない場合は、キャッシュをクリア及び、追加場所を先に入力しているコードの前に変更して再度お試しください。アイコンフォント横の縦線を非表示にする今回追加するFeedlyとPush7のアイコンに画像を使用する関係で表示を揃えるために、下記のコードを追加して、既存のソーシャルボタンのアイコンフォント横のboderを非表示にします。{border:none;padding-right:0;}RSS・Feedly・Push7のスタイルを指定するコードを追加デザイン変更前と変更後、どちらかのコードをお使いください。{padding-left:22px;}※背景色とマウスホバー時の背景色、背景画像にあらかじめアップロードしておいたアイコン画像を指定、テキスト位置の調整。アイコン画像を「メディア」にアップロードしている場合は、/wp-content/themes/stingerplus-child/images/feedly-i.pngを削除して、http://(またはhttps://)から始まる画像URLを張り付けてください。STINGER8をお使いの場合は、上記コード内の/stingerplus-child/の部分を/stinger8-child/に、AFFINGER4をお使いの場合は、/affinger4-child/に修正する必要があります。{padding-left:24px;}※背景色とマウスホバー時の背景色、背景画像にあらかじめアップロードしておいたアイコン画像を指定、テキスト位置の調整。アイコン画像を「メディア」にアップロードしている場合は、/wp-content/themes/stingerplus-child/images/push7-i.pngを削除して、http://(またはhttps://)から始まる画像URLを張り付けてください。こちらのコードも、STINGER8をお使いの場合は、上記コード内の/stingerplus-child/の部分を/stinger8-child/に、AFFINGER4をお使いの場合は、/affinger4-child/に修正してください。{padding-left:24px;}スマホとタブレットのRSSボタンを非表示にRSSボタンを非表示にすることで、下記のように8種類4列に収まります。お好みでコードを追加してくださいね。Cache」を導入して設定していきます。導入と設定自体はとてもシンプルで簡単ですが、ちょっとした事前準備が必要となりますので、詳しくは下記ページをご参照ください。Cache」導入・設定・カスタマイズ方法こちらのプラグインは、STINGER8・AFFINGER4のオリジナルソーシャルボタンにも利用できます。カウント付きオリジナルソーシャルボタンにRSS・Feedly・Push7の3種のボタンを追加する方法をご紹介しました。最後までお付き合い下さりありがとうございます。meKanami(かなみ)40代、4児の母、認知症の義母と同居中です。何気ない日常に幸せを感じるマイペースなヒト。子育てと介護の傍ら「自分にできることってなんだろう?」を模索しながらブログを書いています。専用子テーマ【JET】記事タイトルの文字数変更などのカスタマイズ前記事では、WordPressテーマ「AFFINGER4」の専用子テーマ「JET」の導入手順、カスタマイズの引継ぎ方法、注意事項などをご紹介しました。...896view【AFFINGER4】AMPページ用ウィジェットの見出し追加と表示位置の変更方法こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。管理画面内の「Facebook設定(AMP用)」に「fb:app_id」の入力欄があります。入力した場合は優先して出力されますので、テーマファイルのカスタマイズは不要です。...2,113view【AFFINGER4】AMPページのアドセンスの中央寄せと「スポンサーリンク」のラベル追加方法こちらのカスタマイズは、AFFNGER5「WING」でも応用できます。PLUS】記事エリアの横幅を広げてアドセンス(レクタングル大)を横並びに配置する方法STINGER8・AFFINGER4でのカスタマイズ方法を追加しました。2017年1月のAFFINGER4アップデート以降、アドセンスの横並びは管理画面で設定可能となりました。...1,208view【AFFINGER4】通常ページのアイキャッチ画像の下に追加したアドセンスをAMPページで非表示にする方法こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。...3,431view【AFFINGER4】「この記事を書いた人」にプロフィールページへのリンクを追加する方法ご紹介している追加コードにタグの閉じ忘れがあり修正を行いました。先に参考にしていただいた方には大変ご迷惑をおかけいたしますが、コードの変更をお願いいたします。...1,747view【AFFINGER4】AMPページの見出し(h2~h4)のカスタマイズこちらのカスタマイズは、AFFINGER5「WING」でも応用できます。WordPressテーマ「AFFINGER4」のAMPページの見出し(h2~h4)のカスタマイズ方法をご紹介します。...1,681view【AFFINGER4】AMPページの背景色の変更方法と背景画像の設定方法こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。PLUS」「STINGER8」「AFFINGER4」のカスタマイズ情報です。現在見ていただいている当ブログで行っている全てのカスタマイズ方法を記録しています。※AFFINGER5「WING」のカスタマイズにつきましては、現在確認作業とまとめ記事の作成中です。備忘録(WordPress)ウィジェットに追加したアドセンスが保存できない・余白ができる場合の対処法WordPressのウィジェットエリアにアドセンスコードを追加する場合、つい最近までは「カスタムHTML」を利用するのが一般的でしたが、WordPress4.9よりHTMLのエラーチェック機能が新たに加わったことで、エラーにより保存できない状態になることがあるようです。上記のように「!」の警告が表示されていても保存できる場合は問題ありませんが、保存ボタンをクリックしても保存されない場合は「カスタムHTML」ではなく「テキスト」にアドセンスコードを貼りかえることで対処することができます。備忘録(WordPress)カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ記事内でおすすめの商品や書籍を紹介するときには、Amazonや楽天、Yahooショッピングなど、複数の商品リンクをひとまとめにすることができるブログパーツ「カエレバ・ヨメレバ」がとても便利。カエレバは商品の紹介用、ヨメレバは書籍の紹介用に使い分けることができます。利用されている方も多いですよね。当ブログでも導入を検討中に、お世話になっている方からタイムリーなご質問を受けたことをきっかけに、CSSカスタマイズに挑戦してみることにしました。N」ver20180117を追加しました。style.css及びst-amp-css.php内の画像パスに拡張子(.png)の記載もれがあり、コードの修正を行いました。...ReadMoreSTINGER・AFFINGERカスタマイズ【AFFINGER4】関連コンテンツを通常ページとAMPページに設置する方法こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。WordPressテーマ「AFFINGER4」の通常ページとAMPページにアドセンスの関連コンテンツユニットを設置する方法をご紹介します。最近になって、新たに「インフィード広告」や「記事内広告」などのネイティブ広告が追加されたことで、どこにどんな風に広告を置けばいいんだろう?と戸惑っている方も多いのではないでしょうか。ページ以外のアイキャッチ画像(トップページ含む)」にて設定可能になりました。先日Twitterでトップページをシェアしていただいたことをきっかけに、トップページのみ「Twitterカードの画像が表示されない」ことに気がつきました。下記は、TwitterとFacebookのOGPチェックツールでの検証結果です。数年前、右も左もわからず挑戦したWordPressでのサイト作成。当時はWeb上の沢山の情報に助けられました。初心に戻り、WordPressにゼロから挑戦したい方を応援!難しい説明や専門用語は極力省いて、初心者さん目線でレクチャーします。ゼロからのWordPress入門【21】プラグインの設定方法について加筆修正を行いました。前回までは、更新情報の受け取りツールとして、サイト名で登録することができる「Facebookページ」の作成方法とページプラグイン設置方法、さらに、Twitterのフォローボタンと埋め込みタイムラインの設置方法をお伝えしました。WordPress.comを利用して、FacebookページとTwitterへ更新情報を自動投稿する方法をいくつかの注意点などを含めてお伝えしていきます。前ページでは、ユーザーさん向けの更新情報受け取りのツールとして、サイト名で作成することができる「Facebookページ」の作成方法とページプラグインの導入方法をご紹介しました。今回は、サイドバーやフッターへのTwitter埋め込みタイムラインウィジェットとフォローボタンの設置方法、さらに埋め込みタイムラインの背景を透明にする方法を説明していきます。・・実は埋め込みタイムラインの設置方法については、以前にも記事内で一度お伝えしているのですが、その後変更があったようです。前ページでは、WordPressのカスタマイズと子テーマについてご紹介しました。次のステップは、ブログの『更新情報発信』についてのお話しです。無料ブログサービスのように、コミュニティ間での「読者登録」のツールがないWordPressでのサイト運営では、更新情報の受け取りに必要なツールは自身で設定する必要があります。前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。トラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。WordPressでは、自分の好みに合わせてテーマファイルを自由にカスマイズすることが可能となっています。このカスタマイズ時に便利なのが「子テーマ」です。ここでは、実際に「FFFTP」を利用したファイルのバックアップとWordPressプラグイン「WP-DBManager」を利用したデータベースの自動バックアップ方法を順を追って詳しく説明していきます。バックアップ作業はいくつものステップがあって大変ですが、2回目以降は面倒な設定がないのでとても楽チンです。子育て心は一緒に♪娘へのプレゼントはお揃いのくまのお守りに決めましたクリスマスまであと1か月を切りましたね。お子さんをお持ちの方はプレゼント選びや準備にワクワクの季節。それも含めてクリスマスは親子の一生の思い出に残る楽しいイベントだと思っている私です。我が家では毎年、4人の子供たちが小さな頃からサンタさんからのプレゼントの他に、母企画の「家族Deビンゴ大会」というイベントをクリスマスイブに開催しています。一人ひとりが驚くような。嬉しいサプライズプレゼントはなんだろう?と心を弾ませるこの季節。AdSenseフォローアップセミナー(札幌)に参加してきました。当日は受付を担当させていただいたものです。参加者の方々には謎の人物だったかもしれませんね。んくらさん(@matari39)とは8年前、無料ブログサービスで子育てブログを書いていた頃に出会い、私にとっては、恩師でもあり...そうですね。友人というよりも、先生というよりも「お兄さん」という位置づけがぴったりの。備忘録(WordPress)カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ記事内でおすすめの商品や書籍を紹介するときには、Amazonや楽天、Yahooショッピングなど、複数の商品リンクをひとまとめにすることができるブログパーツ「カエレバ・ヨメレバ」がとても便利。カエレバは商品の紹介用、ヨメレバは書籍の紹介用に使い分けることができます。利用されている方も多いですよね。当ブログでも導入を検討中に、お世話になっている方からタイムリーなご質問を受けたことをきっかけに、CSSカスタマイズに挑戦してみることにしました。今までブログやSNSでのプロフィール画像は、フリー素材でお借りしたものを使っていましたが、2018年のスタートと合わせて似顔絵アイコンに変更しました。周囲にはご自身で綺麗に絵が描ける方もいらっしゃって、常々「すごいなぁ。そんなことができたら素敵だな。」と思っているのですが、なんせ人一倍絵心がなくてですね。