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

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

STINGER8・AFFINGER4でのカスタマイズ方法を追加しました。
2017年1月のAFFINGER4アップデート以降、アドセンスの横並びは管理画面で設定可能となりました。詳しくは下記ページをご参照ください。
▶【アップデート情報】AFFINGER4ver20170117をUP致しました
（当ブログでは、現在ご覧いただいているページ内でご紹介している方法でカスタマイズを行っています）
「スポンサーリンク」のラベル表記下の余白を消すためのコードを追加しました。
記事一覧用のインフィード広告の右端が途切れる現象の対処法として、ページの幅の修正を行いました。
オプション子テーマ「JET」をご利用の際の注意事項をこちらに追記しました。
以前ページ内でご紹介していた「サムネイル付きページナビゲーション」のカスタマイズ方法はこちらに移動しました。

ブログ記事を作成している途中に、「ここにこんなカスタマイズを入れてみたいなぁ。」とふと感じることがあります。

「それよりも中身でしょっ！」って自分にツッコミを入れるんですが、やっぱり色々と『見た目』を変えるのが好きなんですね。

欲望のままに行動すると、まるで「散らかった部屋」のようなページになってしまいますので(笑)、それでもかなり我慢しつつ。

今回は、記事下のアドセンス（レクタングル大）に「スポンサーリンク」のラベル表記を追加、さらに横並びに配置するカスタマイズに挑戦してみました。

カスタマイズ後、パソコンとタブレットでは横並びに「レクタングル大（336×280）」が2つ、スマホでは「レスポンシブ（自動サイズ）」が1つ表示されるようになります。

カスタマイズにあたり、Twitterでお世話になっている鳥取もん様 @tottorimon のブログ記事を参考にさせていただきました。

STINGER標準のアドセンス用ウィジェットをそのまま利用できるようにカスタマイズされたPHPコードを公開して下さっているので、大変助かりました。
また、記事作成をご快諾下さり本当にありがとうございます。

参考STINGER PLUSでアドセンスを横並び(ダブルレクタングル)にする方法/鳥取もん

Contents

1 ウィジェットへのアドセンスコード追加
2 記事エリアの横幅変更
3 single.phpの編集
4 アドセンス表示のスタイルの指定
- 4.1 STINGER PLUS・STINGER8・AFFINGER4共通

ウィジェットへのアドセンスコード追加

まずは事前準備として、WordPressダッシュボード→外観→「ウィジェット」をクリック→「広告-Googleアドセンス用336px」と「広告-Googleアドセンスのスマホ用300px」内に、左側にある「カスタムHTML」をドラッグ&ドロップして各サイズのアドセンスコードをそれぞれ追加しておきます。

スマホ用は「レスポンシブ（自動サイズ）」がおすすめです。

記事エリアの横幅変更

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

次に、アドセンスのレクタングル大（336×280）に合わせてパソコン表示のみ記事エリアの横幅を広げます。

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加してください。

STINGER PLUSの場合

/*記事下アドセンス横並び　ここから*/
/*記事エリアの幅変更*/
/*PCのみ*/
@media print, screen and (min-width: 960px) {

main {
  padding: 30px 23px 30px;
}

.st-eyecatch {
  margin: -30px -23px 20px;
}
}

/*記事下アドセンス横並び　ここから*/

/*記事エリアの幅変更*/

/*PCのみ*/

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

main {

padding: 30px 23px 30px;

}

.st-eyecatch {

margin: -30px -23px 20px;

}

STINGER8の場合

/*記事エリアの幅変更*/
/*PCのみ*/
@media print, screen and (min-width: 960px) {
 
.st-main {
  padding: 30px 23px 30px;
}

/*記事エリアの幅変更*/

/*PCのみ*/

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

.st-main {

padding: 30px 23px 30px;

}

AFFINGER4の場合

AFFINGER4の場合は、WordPressダッシュボード→外観→カスタマイズ→「基本エリア設定」→「PC時の記事エリアの幅を広げる」の指定が優先されてしまうのでそのままのコードは反映されません。

なので、追加したコードの優先順位をさらに上げるために「!important」を追加します。
もしくは、「PC時の記事エリアの幅を広げる」にチェックを入れて、テーマ側でコンテンツ幅を700PXに設定します。（この場合は下記コードの追加は不要です。）
左右の広告のバランスを見てお好みで選択してくださいね。

※AFFINGER4のオプション子テーマ「JET」を利用する場合は、テーマ側（外観→カスマタマイズ）で設定を行います。
下記コードを追加されている方は必ず削除してください。お手数をおかけいたします。（2017年10月追記）

/*記事エリアの幅変更*/
/*PCのみ*/
@media print, screen and (min-width: 960px) {

main {
  padding: 30px 23px 30px !important;
}

.st-eyecatch {
  margin: -30px -23px 20px !important;
}
}

/*記事エリアの幅変更*/

/*PCのみ*/

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

main {

padding: 30px 23px 30px !important;

}

.st-eyecatch {

margin: -30px -23px 20px !important;

}

デフォルトでは、記事エリアの横幅は640PX。余白は「上下：30PX」「左右：50PX」となっています。

今回のカスタマイズで、幅336PXのアドセンス広告を2つ、間の余白を10PX入れるように計算すると、必要な記事エリアの横幅は682PXとなりますので、左右の余白を21PXずつ減らして「29PX」に変更しました。

・・計算。合ってますか？(笑)

さらに、当ブログのように投稿記事の最上部にアイキャッチ画像を表示している場合に記事エリアの余白を変更すると、アイキャッチ画像が左右にはみ出してしまいますので、アイキャッチ画像の左右の余白もデフォルトの「-50PX」から「-29PX」に変更しました。（STINGER8を除く）

※記事一覧用のインフィード広告の右端が途切れる現象の対処法として、現在は「29px」から「23px」に変更しています。

子テーマのstyle.cssに追加したコードが反映されない場合は、キャッシュをクリア及び、追加場所を先に入力しているコードの前に変更して再度お試しください。

single.phpの編集

STINGER PLUSの場合

WordPressダッシュボード→テーマ→テーマの編集→「single.php」を開きます。

パソコンの「Ctrlキー」+「F」で表示される検索欄に「広告枠」と入力してマークされる部分、内のコードを<?php /**/ ?>で囲んでコメントアウト。（削除せず、コメントアウトしておくとコードを元に戻したくなった場合に便利です。）

さらに、のすぐ下に、下記コードを追加しました。

「スポンサーリンク」のラベル表記以下は、参考サイト様に掲載されているコードをそのままコピーさせていただいています。

<div align="center">
<div class="label"><p>スポンサーリンク</p></div>
</div>

<!-- 広告枠 -->
 
<div class="adbox">
  
  <?php if ( st_is_mobile() ) { //スマホの場合 ?>
  <?php get_template_part( 'ad' ); //アドセンス読み込み ?>
 
<div class="adsbygoogle" style="padding-top:10px;">
  <?php get_template_part( 'st-smartad' ); //スマホ用広告読み込み ?>
</div> 
 
  <?php } else { //PCの場合 ?> 
 
<div class="ad-box clearfix"> 
 
<div id="ad-pc-left">
  <?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div> 
 
<div id="ad-pc-right">
  <?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div> 
 
</div> 
  <?php } ?>
</div> 
 
 <!-- /広告枠 -->

<div class="label"><p>スポンサーリンク</p></div>

</div>

<?php if ( st_is_mobile() ) { //スマホの場合 ?>

<?php get_template_part( 'ad' ); //アドセンス読み込み ?>

<?php get_template_part( 'st-smartad' ); //スマホ用広告読み込み ?>

</div>

<?php } else { //PCの場合 ?>

<?php get_template_part( 'ad' ); //アドセンス読み込み ?>

</div>

<?php get_template_part( 'ad' ); //アドセンス読み込み ?>

</div>

<?php } ?>

</div>

STINGER8の場合

広告表示の指定先となる「st-ad-on.php」を編集する方法もありますが、ここではより簡単に「single.php」に直接コードを追加するカスタマイズ方法をお伝えしています。

WordPressダッシュボード→テーマ→テーマの編集→「single.php」を開きます。

パソコンの「Ctrlキー」+「F」で表示される検索欄に「広告」と入力してマークされる部分の<?php のすぐ後ろに //（半角）を入力してコメントアウト。

<?php //get_template_part( 'st-ad-on' ); //広告 ?>

1	<?php //get_template_part( 'st-ad-on' ); //広告 ?>

そのすぐ下に下記コードを追加します。

<div align="center">
<div class="label"><p>スポンサーリンク</p></div>
</div>
 
<!-- 広告枠 -->
 
<div class="adbox">
  
  <?php if ( st_is_mobile() ) { //スマホの場合 ?>
  <?php get_template_part( 'st-ad' ); //アドセンス読み込み ?>
 
<div class="adsbygoogle" style="padding-top:10px;">
  <?php get_template_part( 'st-smartad' ); //スマホ用広告読み込み ?>
</div> 
 
  <?php } else { //PCの場合 ?> 
 
<div class="ad-box clearfix"> 
 
<div id="ad-pc-left">
  <?php get_template_part( 'st-ad' ); //アドセンス読み込み ?>
</div> 
 
<div id="ad-pc-right">
  <?php get_template_part( 'st-ad' ); //アドセンス読み込み ?>
</div> 
 
</div> 
  <?php } ?>
</div> 
 
 <!-- /広告枠 -->

<div class="label"><p>スポンサーリンク</p></div>

</div>

<?php if ( st_is_mobile() ) { //スマホの場合 ?>

<?php get_template_part( 'st-ad' ); //アドセンス読み込み ?>

<?php get_template_part( 'st-smartad' ); //スマホ用広告読み込み ?>

</div>

<?php } else { //PCの場合 ?>

<?php get_template_part( 'st-ad' ); //アドセンス読み込み ?>

</div>

<?php get_template_part( 'st-ad' ); //アドセンス読み込み ?>

</div>

<?php } ?>

</div>

STINGER8でこのコードを利用すると「スポンサーリンク」のラベル表記が自動で挿入されます。
デフォルトのラベル表記をお使いの場合は、5行目の以下をコピーペーストしてください。

下記コードの下に追加すると、ソーシャルボタンの下に表示させることも可能です。

<?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?>

1	<?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?>

自動挿入される「スポンサーリンク」のラベル表記を消す方法

WordPressダッシュボード→外観→テーマ→テーマの編集→「st-ad.php」を開きます。

下記のコードを、<?php /**/ ?>で囲んでコメントアウトするとラベル表記を消すことができます。横並びのアドセンスそれぞれのラベル表記ではなく、中央に1つだけ表示させたい場合にお試しください。
（投稿ページ・固定ページの他の場所にショートコードを使って追加したアドセンスのラベル表記も非表示となりますのでご注意ください。）

<?php /*<p style="color:#666;margin-bottom:5px;">スポンサーリンク</p>*/ ?>

1	<?php /<p style="color:#666;margin-bottom:5px;">スポンサーリンク</p>/ ?>

AFFINGER4の場合

AFFINGER4でsingle.phpの編集をする場合は、子テーマに「single.php」と「single-type1.php」の2つのファイルをアップロード（コピー）します。
さらに、「single.php」内の下記コードを2か所編集してください。

編集前（TEMPLATEPATH）

include(TEMPLATEPATH . '/single-type2.php');
include(TEMPLATEPATH . '/single-type1.php');

1 2	include(TEMPLATEPATH . '/single-type2.php'); include(TEMPLATEPATH . '/single-type1.php');

編集後（STYLESHEETPATH）

include(STYLESHEETPATH . '/single-type2.php');
include(STYLESHEETPATH . '/single-type1.php');

1 2	include(STYLESHEETPATH . '/single-type2.php'); include(STYLESHEETPATH . '/single-type1.php');

こちらの対処法については、下記ページを参考にさせていただきました。
ありがとうございます。

参考Affinger4で子テーマを使って個別記事をカスタマイズしても反映されない時の対処法 | なちブ〜living freely〜

---single.phpの編集方法ここまで---

AFFINGER4の場合は、「single-type1.php」に広告を指定するコードがあります。
デフォルトの広告コードのコメントアウト方法と追加箇所はSTINGER8と同じですが、追加コードはSTINGER PLUSのラベル表記がつかない方を使用できます。

・・わかりにくいですね・・(笑)

もう一度同じコードを載せておきます。

<div align="center">
<div class="label"><p>スポンサーリンク</p></div>
</div>

<!-- 広告枠 -->
 
<div class="adbox">
  
  <?php if ( st_is_mobile() ) { //スマホの場合 ?>
  <?php get_template_part( 'ad' ); //アドセンス読み込み ?>
 
<div class="adsbygoogle" style="padding-top:10px;">
  <?php get_template_part( 'st-smartad' ); //スマホ用広告読み込み ?>
</div> 
 
  <?php } else { //PCの場合 ?> 
 
<div class="ad-box clearfix"> 
 
<div id="ad-pc-left">
  <?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div> 
 
<div id="ad-pc-right">
  <?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div> 
 
</div> 
  <?php } ?>
</div> 
 
 <!-- /広告枠 -->

<div class="label"><p>スポンサーリンク</p></div>

</div>

<?php if ( st_is_mobile() ) { //スマホの場合 ?>

<?php get_template_part( 'ad' ); //アドセンス読み込み ?>

<?php get_template_part( 'st-smartad' ); //スマホ用広告読み込み ?>

</div>

<?php } else { //PCの場合 ?>

<?php get_template_part( 'ad' ); //アドセンス読み込み ?>

</div>

<?php get_template_part( 'ad' ); //アドセンス読み込み ?>

</div>

<?php } ?>

</div>

アドセンス表示のスタイルの指定

STINGER PLUS・STINGER8・AFFINGER4共通

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加。

/*アドセンス記事下　ここから*/
/*PC・タブレット*/
@media print, screen and (min-width: 768px) {

#ad-pc-left {
  float: left;
}

#ad-pc-right {
  float: right;
}
}

/*アドセンスラベル　ここから*/
.label p {
 margin-bottom:0;
 font-size:12px;
}

/*ラベル下の余白を消す*/
.adbox {
  padding-top:0;
}

/*アドセンス記事下　ここから*/

/*PC・タブレット*/

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

#ad-pc-left {

float: left;

}

#ad-pc-right {

float: right;

}

/*アドセンスラベル　ここから*/

.label p {

margin-bottom:0;

font-size:12px;

}

/*ラベル下の余白を消す*/

.adbox {

padding-top:0;

}

参考サイト様に習い、左右の広告を左寄せ、右寄せに配置。

当ブログの場合は、パソコンとタブレット（スマホ以外）で、レクタングル大のアドセンス広告を横並びに表示させるようにしました。

さらに、ラベル表記の文字サイズと余白を指定するコードを追加しました。（数値はお好みで変更可能です）

各端末での表示確認をパソコン（Google Chrome）で行う方法は下記ページ内で説明しています。

▶パソコンでレスポンシブサイトのスマホ表示を確認する方法

また、「端末別サイズのアドセンスをアイキャッチ画像の下・見出し（h2）の前に配置する方法」は下記ページをご参照ください。

8,085view

: 【STINGER PLUS】アドセンスをアイキャッチ画像の下・見出し（h2）の前に設置する方法

STINGER8・AFFINGER4（AMPページへの対応を含む）でのカスタマイズ方法を追加しました。無料WordPressテーマ「STINGER PLUS+」は、ウィジェットに各コードを追加するだ ...

以上、STINGER PLUS 追加のカスタマイズとして、記事エリアの横幅を広げてアドセンス（レクタングル大）を横並びに表示する方法をご紹介しました。

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

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

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

-STINGER・AFFINGERカスタマイズ

Kanami（かなみ）

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

プロフィールページへ

Recommend Posts・Ad

3,555view: 【STINGER PLUS】ソーシャルボタンのテキストがスマホで表示されない原因と対処法は？

WordPressテーマ「STINGER PLUS+」の初期設定とカスタマイズの途中で、ふと、パソコン以外の端末（タブレット・スマホ）では、ソーシャルボタンのテキストが表示されていないことに気が付きま ...

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

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。 WordPressテーマ「AFFINGER4」の通常ページとAMPページにアドセンスの関連コンテンツユニットを設置する方法をご ...

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

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

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

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

2,970view: WordPressサイトにPush7を導入する方法と設定手順を簡単4ステップで♪

Webプッシュ通知サービス「Push7」は、更新情報を購読者のブラウザに自動的に送ることができる便利なサービス。実は私もつい最近知ったばかりです。購読したいサイトの購読ボタンを押して通知を許可する ...

2,978view: テーマをAFFINGER4に変えました～決め手はAMP対応～

WordPressテーマをSTINGER PLUSからAFFINGER4に変更しました。ほぼ、見た目変わらずですので間違い探し状態ですね。 AFFINGER4は、リリース当初から別サイトで利用する予 ...

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

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

6,357view: 【AFFINGER4】AMP化方法の全手順をまとめました

WordPressテーマ「AFFINGER4」は、テーマ標準でAMP対応機能が準備されています。これまで、いくつかの注意点や躓いたポイントなどを記事にしてきましたが、今回はAFFINGER4でのAM ...

2,172view: 【AFFINGER4】AMPページの背景色の変更方法と背景画像の設定方法

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。前回までは、WordPressテーマ「AFFINGER4」のAMPページのアドセンス広告のカスタマイズ方法をお伝えしましたが、 ...

1,483view: 【AFFINGER4】通常ページのアイキャッチ画像の下に追加したアドセンスをAMPページで非表示にする方法

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。 ※こちらの記事は、下記ページ内の「アイキャッチ画像の下にアドセンスを追加する方法」を参考にしてくださった方にのみ該当するカスタ ...

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 】 OGP設定の「fb:admins」を「fb:app_id」に変更する方法

Twitterカードが表示されない・タイムラグがある・修正後もエラーが出る場合の確認ポイントと対処法

Site search

PickUp♪

子育て

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

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

ブログ・サイト運営

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

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

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

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

ブログ・サイト運営

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

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