【STINGER PLUS・AFFINGER】icomoon導入方法&ヘッダーに自作SNSアイコンを作成・追加する方法

投稿日：2016年7月5日更新日：2018年5月9日

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。
2018年1月16日追記
Feedlyボタンのエラー対策としてコードに追加するリンクの修正を行いました。
参考Feedlyボタンが機能しなくなったので、修正点を調べたら修正箇所が多すぎたので、動作するボタンを作成できるツールを作った-ものくろぼっくす

カテゴリーゼロからのWordPress入門の、FeeedlyとPush7の購読ボタン設置方法の記事作成を前に、なんとなく寂しげだったヘッダー右側スペースにSNSアイコンを並べてみようと思い立ちました。

素材配布サイトからアイコン画像をお借りしようと検索してみましたが、FeedlyとPush7は全く見当たらず...。

ならば、WebアイコンフォントとCSSで自作してみよう！と一大決心っ！

が。

挑戦してはみたものの、なかなか波乱万丈でした...。

一度記事にするのを諦めましたが、途中発生したトラブルの原因を解明すべく、他のテスト用サイトやローカル環境でリベンジしてやっと形になったのがこちらのページ。
・・ご一読いただけたら、もうそれだけでハッピーです！(笑)

ということで、今回は、Webアイコンフォント「icomoon」の導入方法と、RSS・Feedly・Push7・Twitter・Facebookの5つの自作SNSアイコン（フォローボタン）を横並びに、ヘッダーに表示する方法をご紹介します。

こちらのアイコンは、以前ご紹介した見出し（h2）とお揃いにできるという点がポイント♪
CSSで作成したボタンですので、フォントカラーやボタンの形、サイズは自由に変更できます。

また、見出し・SNSボタンとお揃いの背景画像を使った3カラムのフッターの作成方法も下記ページでご紹介しています。
トータルコーディネートがお好きな方におすすめです。

3,669view

: 【STINGER PLUS】3カラムのフッターを追加する方法（背景色指定or背景画像使用）

AFFINGER4でのカスタマイズ方法を追加しました。コードの追加場所を「子テーマ」のfunctions.phpに変更しました。（テーマのアップデートの際の再編集は必要なくなりました）新たにリリー ...

Contents

1 事前準備
- 1.1 背景画像のアップロードとカラーピッカーの準備
- 1.2 各SNSアイコンのリンク先URLを準備
2 Webアイコンフォント「icomoon」を導入
3 SNSアイコンをヘッダーに表示する方法
4 テーマ標準のGoogleフォントが効かなくなった場合の対処法

事前準備

背景画像のアップロードとカラーピッカーの準備

以前に見出しのカスタマイズを参考にして下さった方は、コード内の背景画像のパスまたは画像URLと、カラーピッカーで取得したカラーコードをメモ帳にコピーしておいてください。

今回初めてカスタマイズに挑戦される方は、お手数ですが下記ページを参考に、背景画像をアップロード後、画像のパスまたは画像URLをメモ帳にコピーして、カラーピッカーの準備をお願いいたします。

8,874view

: 【STINGER PLUS】見出し（h2、h3）のCSSカスタマイズ～背景色指定・背景画像使用・ステッチ風～

こちらのカスタマイズは、STINGER8・AFFINGER4でも応用できます。 AFFINGER4での見出し（h3）のカスタマイズコードの指定先の変更を行いました。 7月に1度区切りをつけた、カテゴリ ...

各SNSアイコンのリンク先URLを準備

以下、それぞれの項目のリンクをご自身のサイトに合わせてメモ帳に準備しておいてください。

①RSS

http://kanamii.jp//?feed=rss2

【SSL化済みの場合】
https://kanamii.jp//?feed=rss2

※kanamii.jpの部分をご自身のサイトのドメインに書き換えます。

②Feedly

https://feedly.com/i/subscription/feed/http://kanamii.jp/feed

【SSL化済みの場合】
https://feedly.com/i/subscription/feed/https://kanamii.jp/feed

※kanamii.jpの部分をご自身のサイトのドメインに書き換えます。

③Push7

Push7に登録後、ログイン→トップページにて「アプリケーションURL」をコピーします。

④Twitter

https://twitter.com/intent/follow?screen_name=kanamii_jp

※kanamii_jpの部分をご自身のTwitterユーザー名（@無し）に書き換えます。

⑤Facebook

https://www.facebook.com/kanamii.jp/

※kanamii.jpの部分をご自身のFacebookページのユーザー名（ユニークURL）に書き換えます。

Webアイコンフォント「icomoon」を導入

テーマ標準で利用できるWebアイコンフォント「Font Awesome」にはない、FeedlyとPush7は「icomoon」を利用します。
こちらは、無料WordPressテーマSimplicityの作者、わいひら様が公開されているWebアイコンフォントを使用させていただきました。

画像加工は苦手分野でして...こちらのフォントがなければ実現しなかったカスタマイズです。

この場をお借りして、心より感謝御礼申し上げます。

feedlyとPush7のWebアイコンフォントをダウンロード

下記ページ、Feedlyはページ下部の「feedlyのWEBアイコンフォント」、Push7は「アイコンフォント」という見出しの場所にダウンロードボタンがあります。
こちらからダウンロードさせていただきました。
画像加工の手間に時間をかけることもなく、完成したWebアイコンフォントをすぐに使うことができたので本当に助かりました。

▶自作のWEBアイコンフォントの作り方（無料ツールのみでfeedlyフォントを作る）- 寝ログ

▶Push7ロゴのSVGとアイコンフォントを作ってみました - 寝ログ

ダウンロード後、それぞれのZip圧縮ファイルを右クリック→「すべて展開」、または、解凍ソフトを使って解凍します。

次のステップでは、その中の「selection.json」というファイルを使用します。

使用するWebアイコンフォントだけをインポート

次に2つに分かれているファイルをひとつにまとめる作業をします。

icomoonにアクセス→左上の「Import Icons」をクリック→Feedly・Push7それぞれの「selection.json」ファイルを選択してインポート。

下記のように、黄色の枠になっているものが今回使用するWebアイコンフォントです。
クリックで選択後、右下の「Generate Font」をクリック。

選択したアイコンに間違いのないことを確認して、右下の「Download」をクリックしてください。

ダウンロードされたファイルは、先ほどと同様、解凍しておきます。
次のステップでは、その中の「fonts」というファイルを使用します。

「fonts」ファイルをFTPでアップロード

次に、FTPを使って「fonts」ファイルをテーマファイル内（子テーマをお使いの場合は子テーマファイル内 ※推奨）にアップロードします。

左側（ローカル側）は「フォルダを移動」→解凍した「icomoon」ファイルを選択。
右側（サーバー側）は、一番上の階層名をダブルクリック→wp-contentをダブルクリック→themesをダブルクリック→テーマ（子テーマ）名をダブルクリック→ローカル側の「fonts」ファイルのみをサーバー側の空きスペースへドラッグ&ドロップしてアップロードします。

FTPクライアントソフト「FFFTP」のインストールと設定方法は、下記ページで説明しています。

3,655view

: WordPressのバックアップ① ～FFFTP（FTPS対応版）のインストールと接続設定・基本操作方法～ - ゼロからのWordPress入門【16】

万が一のトラブルに備えて、WordPressでのサイト運営の際には、サイトデータのバックアップが必要不可欠です。「今まで更新してきた全ての投稿記事が消えてしまう。」・・こんな事態を想像したら怖いで ...

style.cssにコードを追加

全てのテーマファイルの編集は、テーマのアップデートの影響を受けない「子テーマ」で行うことをおすすめします。
やむおえず親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて

さらに、icomoonのWebアイコンフォントをサイト内で利用できるようにするために、WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」（子テーマ推奨）に下記コードを追加します。
子テーマへのコードの追加箇所は、ご自身で追加しているコードがある場合は、一番上の最上部でお願いします。

/*ヘッダーSNS（フォロー）ボタン　ここから*/
/*icomoon Webアイコンフォント*/
@font-face {
  font-family: 'icomoon';
  src:  url('./fonts/icomoon.eot?m16c1k');
  src:  url('./fonts/icomoon.eot?m16c1k#iefix') format('embedded-opentype'),
    url('./fonts/icomoon.ttf?m16c1k') format('truetype'),
    url('./fonts/icomoon.woff?m16c1k') format('woff'),
    url('./fonts/icomoon.svg?m16c1k#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-push7:before {
  content: "\e900";
}
.icon-feedly:before {
  content: "\e600";
}

/*ヘッダーSNS（フォロー）ボタン　ここから*/

/*icomoon Webアイコンフォント*/

@font-face {

font-family: 'icomoon';

src: url('./fonts/icomoon.eot?m16c1k');

src: url('./fonts/icomoon.eot?m16c1k#iefix') format('embedded-opentype'),

url('./fonts/icomoon.ttf?m16c1k') format('truetype'),

url('./fonts/icomoon.woff?m16c1k') format('woff'),

url('./fonts/icomoon.svg?m16c1k#icomoon') format('svg');

font-weight: normal;

font-style: normal;

}

[class^="icon-"], [class*=" icon-"] {

/* use !important to prevent issues with browser extensions that change fonts */

font-family: 'icomoon' !important;

speak: none;

font-style: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

line-height: 1;

/* Better Font Rendering =========== */

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.icon-push7:before {

content: "\e900";

}

.icon-feedly:before {

content: "\e600";

}

※ダウンロードした「icomoon」ファイル内のstyle.cssと同じ内容となりますが、テーマ内にコードを追加するため、相対パスの頭に同じ階層を指定する「./」をプラスしています。

ファイル更新後、必ずブラウザのキャッシュをクリアしてください。
ここは、私自身が大きく躓いたポイントです。
「icomoon」導入後のこの先の作業や他のカスタマイズ時に、style.cssに追加したコードが反映されなくなったときもキャッシュをクリアすることで解決できますので、「CSSが効かなくなったらキャッシュをクリア！」この合言葉を覚えておいてくださいね。

ここまでで、ようやくサイト内でicomoonのWebアイコンフォントが使えるようになります。
・・長かったですね。お疲れ様でした。

SNSアイコンをヘッダーに表示する方法

こちらでご紹介するカスタマイズは、パソコンでは画面右上に。

タブレットとスマホでは画面中央のタイトル下にSNSアイコンが表示されます。

header.phpにコードを追加

WordPressダッシュボード→外観→テーマ→テーマの編集→「header.php」（子テーマ推奨）を開きます。

STINGER PLUS・AFFINGER4の場合

STINGER PLUSの場合は下から2行目、AFFINGER4の場合は下から3行目、AFFINGER5「WING」の場合は下から13行目あたり、

<?php get_template_part( 'st-header-image' ); //カスタムヘッダー画像 ?>

1	<?php get_template_part( 'st-header-image' ); //カスタムヘッダー画像 ?>

STINGER8の場合

STINGER8の場合は、

<div id="gazou-wide">
							<?php get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー ?>

1 2	<div id="gazou-wide"> <?php get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー ?>

↑この各コードのすぐ上に下記コードを追加します。

<ul class="header-sns">
<li><a class="sns-btn" href="【①のリンク】" target="_blank"><i class="fa fa-rss" aria-hidden="true"></i></a></li>
<li><a class="sns-btn" href="【②のリンク】" target="_blank"><span class="icon-feedly"></span></a></li>
<li><a class="sns-btn" href="【③のリンク】" target="_blank"><span class="icon-push7"></span></a></li>
<li><a class="sns-btn" href="【④のリンク】" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="【⑤のリンク】" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
</ul>

</ul>

※【①のリンク】～【⑤のリンク】の部分は、事前にメモ帳に準備しておいたURLに書き換えてください。

この時点では、このように画面左端に縦並びのリストで表示されます。
もしも、FeedlyとPush7のアイコンのみ表示されていないときは、再度キャッシュのクリアをお試しください。

SNSアイコンのスタイルを指定

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」の先に追加したコードの下に下記コードを追加します。
長いコードなので読みにくいかと思いますが、下に各コードの解説を入れておきますので、必要個所を編集してくださいね。

繰り返しになりますが、上手く反映されないときは「キャッシュをクリア！」です。

/*ヘッダーSNSアイコン*/
/*共通*/
ul.header-sns li {
  display:inline-block;
}

ul.header-sns li a {
  display:inline-block;
  vertical-align:top;
  width:30px;
  height:30px;
  text-align: center;
  text-decoration:none;
  list-style:none;
  color:#d6adff;
  font-size:23px;
  background-image:url("【画像のパスまたはURL】");
  background-repeat:repeat;
  box-shadow:0 0 0 4px #****, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
  border:2px dashed #ff6893;
  border-radius:40%;  
}

ul.header-sns li a:hover {
  color:#fea7c3;
}

a.sns-btn {
  margin-right:15px;
}

/*タブレット・スマホ*/
@media print, screen and (max-width:959px) {
ul.header-sns {
  text-align:center;
  margin:30px 0 30px 0;
}

ul.header-sns li a {
  padding-top:5px;
}
}

/*パソコン*/
@media print, screen and (min-width:960px) {
ul.header-sns {
  text-align:right;
  margin:-35px 40px 30px 0;
}
}

/*Firefox*/
@-moz-document url-prefix(){
ul.header-sns li a {
  border-style:none;
}
}

/*ヘッダーSNSアイコン*/

/*共通*/

ul.header-sns li {

display:inline-block;

}

ul.header-sns li a {

display:inline-block;

vertical-align:top;

width:30px;

height:30px;

text-align: center;

text-decoration:none;

list-style:none;

color:#d6adff;

font-size:23px;

background-image:url("【画像のパスまたはURL】");

background-repeat:repeat;

box-shadow:0 0 0 4px #****, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);

border:2px dashed #ff6893;

border-radius:40%;

}

ul.header-sns li a:hover {

color:#fea7c3;

}

a.sns-btn {

margin-right:15px;

}

/*タブレット・スマホ*/

@media print, screen and (max-width:959px) {

ul.header-sns {

text-align:center;

margin:30px 0 30px 0;

}

ul.header-sns li a {

padding-top:5px;

}

/*パソコン*/

@media print, screen and (min-width:960px) {

ul.header-sns {

text-align:right;

margin:-35px 40px 30px 0;

}

/*Firefox*/

@-moz-document url-prefix(){

ul.header-sns li a {

border-style:none;

}

/共通/ ul.header-sns li {（リスト項目）以下

リスト項目を横並びで表示

ul.header-sns li a {（リスト項目リンク部分）以下

リスト項目のリンク部分を横並びで表示
ボタンの縦位置を上端揃えに指定
高さを30pxで指定
幅を30pxで指定
テキストを中央寄せに
リンク部分の下線を非表示に
リストマークを非表示に
Webアイコンフォントのカラーを指定：#d6adffの部分は、お好きなカラーコードに変更可能です。
フォントサイズを23pxで指定
背景画像を指定：【画像のパスまたはURL】の部分は、事前にメモ帳にコピーしておいた画像のパスまたは画像URLに書き換えてください。
背景画像を繰り返し指定
ステッチ風ラインの外側の影のカラーを指定：#****の部分は、カラーピッカーで取得したカラーコードに書き換えてください。（一度更新して確認後に入力されてもOKです。）
ステッチ風ライン：太さ2pxの破線を指定、#ff6893の部分は、お好きなカラーコードに変更可能です。
4つのコーナーを40%の角丸に指定：50%にすると丸いボタンになります。お好みで数値を変更してみてくださいね。

ul.header-sns li a:hover {（リスト項目リンク部分マウスホバー）以下

Webアイコンフォントのマウスホバー時のカラーを指定：#fea7c3の部分は、お好きなカラーコードに変更可能です。

a.sns-btn {（Facebook以外の各ボタン）以下

要素外側の余白を、右（15px）で指定

/タブレット・スマホ/～ul.header-sns {（リスト全体）以下

タブレットとスマホ表示時にリスト全体を中央寄せに
要素外側の余白を、上（30px）右（0）下（30px）左（0）で指定（お好みで数値を変更してください。）
アイコン位置の微調整（少し縦長の表示になります）

/パソコン/～ul.header-sns {（リスト全体）以下

パソコン表示時にリスト全体を右寄せに
要素外側の余白を、上（-35px）右（40px）下（30px）左（0）で指定、アイコン上のメニューと右端を合わせたい場合は、右の余白を20pxに。表示を確認しながらお好みで数値を変更してくださいね。

/Firefox/以下

Firefoxでは、角丸に指定した箇所のborderの破線（dashed）が反映されず実線（solid）で表示されてしまう現象が見られたので、borderを非表示に指定しました。
Firefoxのみ、このように表示されます。

STINGER8・AFFINGER4・AFFINGER5「WING」への追加コード

STINGER8とAFFINGER4、AFFINGER5は、ヘッダーの横幅があらかじめ100%となっていますので、style.cssに下記コードを追加してパソコン表示のみ横幅を1060pxに調整しています。
（管理画面で横幅を変更している場合はその数値に合わせてくださいね。）
このコードを追加することで、ブラウザの幅を変更した場合でも定位置に表示されるようになります。

/*ヘッダー横幅（パソコン）*/
@media print, screen and (min-width:960px) {
header {
  width:1060px;
  margin-right:auto;
  margin-left:auto;
}
}

/*ヘッダー横幅（パソコン）*/

@media print, screen and (min-width:960px) {

header {

width:1060px;

margin-right:auto;

margin-left:auto;

}

ここまでで、ヘッダーにSNSアイコンを表示する作業は完了です。

が。

あともう一つ追加作業があります...。

テーマ標準のGoogleフォントが効かなくなった場合の対処法

その他のテーマでは未確認ですが、当ブログで利用しているSTINGER PLUSでは、テーマ標準のGoogleフォントが適用されなくなるトラブルが発生してしまいました。

その場合、style.cssに一番最初に追加した、/*icomoon Webアイコンフォント*/の上（最上部）に、Googleフォントを呼び出す下記コードを追加することで対処できました。

/*Googleフォント　ここから*/
@import 'https://fonts.googleapis.com/css?family=Josefin Sans';

1 2	/Googleフォント　ここから/ @import 'https://fonts.googleapis.com/css?family=Josefin Sans';

※Josefin Sansの部分は、STINGER管理で選択したフォント名に書き換えてください。

※AFFINGER5「WING」をお使いの場合は、AFFINGER5管理→「デザイン」にて再度Googleフォントの設定をお試しください。

以上、STINGER PLUS・STINGER8・AFFINGER4 へのicomoon導入方法と、ヘッダーに見出しとお揃いの5種の自作SNSアイコンを作成・追加する方法をご紹介しました。

いくつもの手順と手間のかかるカスタマイズとなりますが、興味のある方は是非挑戦してみてくださいね。

最後までお付き合い下さりありがとうございます。

その他のカスタマイズ記事一覧へ

AFFINGER5 WINGカスタマイズ一覧へ

Facebook・Twitterへ最新記事をお届けします

-STINGER・AFFINGERカスタマイズ

コメントを閉じる

挑戦中！STINGER8カスタマイズ２｜投稿ページ編 – NyanChest より:

2017年2月6日 11:11 AM

[…] とこが一番わかりやすかった。【STINGER PLUS・8・AFFINGER4】icomoon導入方法&ヘッダーに自作SNSアイコンを作成・追加する方法 […]

Kanami（かなみ）

40代、4児の母、認知症の義母と同居中です。何気ない日常に幸せを感じるマイペースなヒト。子育てと介護の傍ら「自分にできることってなんだろう？」を模索しながらブログを書いています。

プロフィールページへ

Recommend Posts・Ad

2,216view: 【AFFINGER4】AMPページのフッターのカスタマイズ～文字色変更とキャプションの非表示方法～

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。 WordPressテーマ「AFFINGER4」のAMPページのフッター（サイトタイトル・キャプション・コピーライト）の文字色変 ...

2,578view: 【AMPページ】Googleの検索結果に表示されないときのチェックポイントと注意点

WordPressテーマを「AFFINGER4」に変更して、一部のページをAMP対応しました。 AMPテストも問題なし。素早くインデックスされるようにサーチコンソールの「Fetch as Google ...

2,057view: 【AFFINGER4】AMPページも自分色♪カスタマイズまとめ

当ページでご紹介しているカスタマイズは、AFFINGER5「WING」でも応用できます。当ブログの開設当初に利用していたWordPressテーマは「STINGER PLUS」。まだ1年の月日も経っ ...

6,329view: AFFINGER4 専用子テーマ【JET】に変更しました～カスタマイズの引継ぎ・注意点など～

当ブログで利用しているWordPressテーマ「AFFINGER4」に専用子テーマ「JET」を導入しました。「JET」は、トップページ・アーカイブページ・記事下の関連記事をカード型で表示することがで ...

5,120view: 【AFFINGER4】「この記事を書いた人」にプロフィールページへのリンクを追加する方法

ご紹介している追加コードにタグの閉じ忘れがあり修正を行いました。先に参考にしていただいた方には大変ご迷惑をおかけいたしますが、コードの変更をお願いいたします。申し訳ございません。（2017年10月4 ...

9,469view: 【STINGER PLUS】記事エリアの横幅を広げてアドセンス（レクタングル大）を横並びに配置する方法

STINGER8・AFFINGER4でのカスタマイズ方法を追加しました。 2017年1月のAFFINGER4アップデート以降、アドセンスの横並びは管理画面で設定可能となりました。詳しくは下記ページをご ...

8,874view: 【STINGER PLUS】見出し（h2、h3）のCSSカスタマイズ～背景色指定・背景画像使用・ステッチ風～

こちらのカスタマイズは、STINGER8・AFFINGER4でも応用できます。 AFFINGER4での見出し（h3）のカスタマイズコードの指定先の変更を行いました。 7月に1度区切りをつけた、カテゴリ ...

4,504view: 【STINGER PLUS】カウント付きオリジナルソーシャルボタンにRSS・Feedly・Push7を追加す...

こちらのカスタマイズは、STINGER8・AFFINGER4でも応用できます。 2016年11月10日追記 Feedlyのアイコン画像のファイル名と指定コードが違っているため、アップロードした画像が表 ...

2,909view: AFFINGER4 専用子テーマ【JET】記事タイトルの文字数変更などのカスタマイズ

前記事では、WordPressテーマ「AFFINGER4」の専用子テーマ「JET」の導入手順、カスタマイズの引継ぎ方法、注意事項などをご紹介しました。「JET」を有効化して最初に見たときの感想は.. ...

1,107view: 【AFFINGER4】AMPページの記事タイトルの上（アイキャッチ画像の下）にアドセンスを追加する方法

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。 WordPressテーマ「AFFINGER4」のAMPページの記事タイトル上（アイキャッチ画像の下）のファーストビューの位置に ...

Recommended category

STINGER・AFFINGERカスタマイズ

WordPressテーマ「旧STINGER PLUS」「STINGER8」「AFFINGER4」のカスタマイズ情報です。現在見ていただいている当ブログで行っている全てのカスタマイズ方法を記録しています。気に入ったカスタマイズが見つかりましたら是非参考になさってください♪
※AFFINGER5「WING」のカスタマイズにつきましては、現在確認作業とまとめ記事の作成中です。

STINGER・AFFINGERカスタマイズ備忘録（WordPress）

ウィジェットに追加したアドセンスが保存できない・余白ができる場合の対処法

WordPressのウィジェットエリアにアドセンスコードを追加する場合、つい最近までは「カスタムHTML」を利用するのが一般的でしたが、WordPress4.9よりHTMLのエラーチェック機能が新たに加わったことで、エラーにより保存できない状態になることがあるようです。上記のように「！」の警告が表示されていても保存できる場合は問題ありませんが、保存ボタンをクリックしても保存されない場合は「カスタムHTML」ではなく「テキスト」にアドセンスコードを貼りかえることで対処することができます。 Kanamiコー ...

STINGER・AFFINGERカスタマイズ備忘録（WordPress）

カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ

記事内でおすすめの商品や書籍を紹介するときには、Amazonや楽天、Yahooショッピングなど、複数の商品リンクをひとまとめにすることができるブログパーツ「カエレバ・ヨメレバ」がとても便利。カエレバは商品の紹介用、ヨメレバは書籍の紹介用に使い分けることができます。利用されている方も多いですよね。当ブログでも導入を検討中に、お世話になっている方からタイムリーなご質問を受けたことをきっかけに、CSSカスタマイズに挑戦してみることにしました。ここでは、コピーペーストだけで「カエレバ・ヨメレバ」のカスタマ ...

STINGER・AFFINGERカスタマイズ

AFFINGER4 専用カスタマイズ済み子テーマ2種を無料配布します

お知らせ AFFINGER4 ver20171227bより追加された新パーツのAMP表示に対応した「Kanamii for AFFINGER C」「Kanamii for AFFINGER N」ver20180117を追加しました。（2017年1月17日） 2017年11月30日追記 style.css及びst-amp-css.php内の画像パスに拡張子（.png）の記載もれがあり、コードの修正を行いました。有効化後、各所の背景画像が正常に表示されている場合は修正前のままお使いいただけますが、表示されな ...

STINGER・AFFINGERカスタマイズ

【AFFINGER4】関連コンテンツを通常ページとAMPページに設置する方法

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。 WordPressテーマ「AFFINGER4」の通常ページとAMPページにアドセンスの関連コンテンツユニットを設置する方法をご紹介します。最近になって、新たに「インフィード広告」や「記事内広告」などのネイティブ広告が追加されたことで、どこにどんな風に広告を置けばいいんだろう？と戸惑っている方も多いのではないでしょうか。私自身も例外でななく、アドセンス、WordPressテーマ、AMP、SSL... 時代の流れについていくのは大変 ...

STINGER・AFFINGERカスタマイズ

【AFFINGER4】トップページのTwitterカードに画像が表示されない場合の対処法

AFFINGER5「WING」をお使いの場合は、WordPressダッシュボード→AFFINGER5管理→SNS→OGP設定→「投稿・固定ページ以外のアイキャッチ画像（トップページ含む）」にて設定可能になりました。先日Twitterでトップページをシェアしていただいたことをきっかけに、トップページのみ「Twitterカードの画像が表示されない」ことに気がつきました。下記は、TwitterとFacebookのOGPチェックツールでの検証結果です。《 Card Validator-Twitter Dev ...

記事一覧へ

おすすめ記事へ

ゼロからのWordPress入門

数年前、右も左もわからず挑戦したWordPressでのサイト作成。当時はWeb上の沢山の情報に助けられました。初心に戻り、WordPressにゼロから挑戦したい方を応援！難しい説明や専門用語は極力省いて、初心者さん目線でレクチャーします。

ゼロからのWordPress入門

WordPressとFacebook・Twitterを連携して更新情報を簡単に自動投稿する方法 - ゼロからのWordPress入門【21】

プラグインの設定方法について加筆修正を行いました。（2017年10月）前回までは、更新情報の受け取りツールとして、サイト名で登録することができる「Facebookページ」の作成方法とページプラグイン設置方法、さらに、Twitterのフォローボタンと埋め込みタイムラインの設置方法をお伝えしました。ここでは、プラグインJetpack by WordPress.comを利用して、FacebookページとTwitterへ更新情報を自動投稿する方法をいくつかの注意点などを含めてお伝えしていきます。 SNSへの自 ...

ゼロからのWordPress入門

サイドバーへのTwitter埋め込みタイムラインウィジェットとフォローボタンの設置方法（変更後）- ゼロからのWordPress入門【20】

前ページでは、ユーザーさん向けの更新情報受け取りのツールとして、サイト名で作成することができる「Facebookページ」の作成方法とページプラグインの導入方法をご紹介しました。今回は、サイドバーやフッターへのTwitter埋め込みタイムラインウィジェットとフォローボタンの設置方法、さらに埋め込みタイムラインの背景を透明にする方法を説明していきます。・・実は埋め込みタイムラインの設置方法については、以前にも記事内で一度お伝えしているのですが、その後変更があったようです。友人から「Twitterのタイム ...

ゼロからのWordPress入門

サイト名でのFacebookページ作成とページプラグイン導入方法 - ゼロからのWordPress入門【19】

前ページでは、WordPressのカスタマイズと子テーマについてご紹介しました。次のステップは、ブログの『更新情報発信』についてのお話しです。「更新まだかなー？」「・・まだだった・・」ご自身にもこんな経験はありませんか？無料ブログサービスのように、コミュニティ間での「読者登録」のツールがないWordPressでのサイト運営では、更新情報の受け取りに必要なツールは自身で設定する必要があります。 Facebookを頻繁に使われる方、Twitterを使われる方、RSSフィードや更新情報サービスを使われ ...

ゼロからのWordPress入門

WordPressのカスタマイズ～子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法～ - ゼロからのWordPress入門【18】

前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。ご自身のサイトを見渡してみて、例えば「ここの文字は大きくしたほうが見やすいかな？」とか「ここの部分は少しスペースを空けたいなぁ」と思う箇所はありますか？ WordPressでは、自分の好みに合わせてテーマファイルを自由にカスマイズすることが可能となっています。このカスタマイズ時に便利なのが「子テーマ」です。「子 ...

ゼロからのWordPress入門

WordPressのバックアップ② ～ファイルとデータベースのバックアップ方法を詳しく～ - ゼロからのWordPress入門【17】

前ページでは、WordPressのバックアップの事前準備として「FFFTP（FTPS対応版）」のインストールと接続設定、基本操作方法をご紹介しました。ここでは、実際に「FFFTP」を利用したファイルのバックアップとWordPressプラグイン「WP-DBManager」を利用したデータベースの自動バックアップ方法を順を追って詳しく説明していきます。初めてのバックアップ作業はいくつものステップがあって大変ですが、2回目以降は面倒な設定がないのでとても楽チンです。お時間のとれるときに初期設定と初回バック ...

記事一覧へ

おすすめ記事へ

STINGER PLUS 「子テーマ」がダウンロードできない！そんな時は自分で作成してみよう♪

今までの STINGER PLUS+ カスタマイズまとめ

Site search

PickUp♪

子育て

心は一緒に♪娘へのプレゼントはお揃いのくまのお守りに決めました

クリスマスまであと1か月を切りましたね。お子さんをお持ちの方はプレゼント選びや準備にワクワクの季節。お財布はシクシクの季節でもありますかね(笑) ・・・まぁね。それも含めてクリスマスは親子の一生の思い出に残る楽しいイベントだと思っている私です。さて。我が家では毎年、4人の子供たちが小さな頃からサンタさんからのプレゼントの他に、母企画の「家族Deビンゴ大会」というイベントをクリスマスイブに開催しています。一人ひとりが驚くような。嬉しいサプライズプレゼントはなんだろう？と心を弾ませるこの季節。我が ...

ブログ・サイト運営

【GoogleAdSenseマネタイズの教科書・札幌セミナー】のんくらさんってどんな人？

2019年3月13日、「のんくらセミナー」ことGoogle AdSenseフォローアップセミナー（札幌）に参加してきました。当日は受付を担当させていただいたものです。「受付で強制的に名刺渡してきたおばちゃん、誰やねん？」参加者の方々には謎の人物だったかもしれませんね。のんくらさん（@matari39）とは8年前、無料ブログサービスで子育てブログを書いていた頃に出会い、私にとっては、恩師でもあり...そうですね。友人というよりも、先生というよりも「お兄さん」という位置づけがぴったりの。そんな大切な ...

STINGER・AFFINGERカスタマイズ備忘録（WordPress）

カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ

ブログ・サイト運営

ブログやSNSアイコンの似顔絵はどこで？おすすめサイトのご紹介♪

今までブログやSNSでのプロフィール画像は、フリー素材でお借りしたものを使っていましたが、2018年のスタートと合わせて似顔絵アイコンに変更しました。周囲にはご自身で綺麗に絵が描ける方もいらっしゃって、常々「すごいなぁ。そんなことができたら素敵だな。」と思っているのですが、なんせ人一倍絵心がなくてですね。何年前かな？「顔のほくろを取りました」といった内容の記事を書いたときに自分の似顔絵を堂々と公開したことがあるのですが.... これですからね。「・・・・・。」さて。前置きが長くなりましたが、新 ...