どうしたらいいのNAVI

どうしたらいいの?にお答えするサイト

【Stinger5】Stinger5のカスタマイズ方法のまとめ特集

      2015/11/07


WordPressでブログを運営し、Stinger5を使っていると自分好みにカスタマイズしたいと考える人も少なくないでしょう。
Stinger5はSEOに強いテーマであり、シンプルな見た目で老若男女問わずブログを運営する事が出来るテーマです。

 
しかし、シンプルな分独自の個性を出したいと考える人も居ると思います。
そんな人にお勧めのカスタマイズ方法について、まとめてみましたのでチェックしていってください。

 

 
【Stinger5】Stinger5のカスタマイズ方法のまとめ特集
 

 

Stinger5のカスタマイズ方法について

Stinger5はそのままでも十分に使えるWordpressのテーマですが、ブログ運営者としての好みや思い、やりたい事、実現したい事や狙いなどによってレイアウトや機能的に完全に理想的な動作とはいかない事も多いでしょう。

 
内容によってはプラグインを導入する事で多くの事が解決してしまう事が多いものですが、テーマ固有の仕様のようなものもあるので、そういった内容についてはテーマそのものを編集したりカスタマイズする事で対応する必要があります。

 
ここでは、Stinger5でよくある悩みから、Stinger5のテーマの編集方法まで含め次のカスタマイズについて紹介しています。

  • サイドバーの新規記事一覧を消したい
  • Stinger5で追加される記事下二つの広告を横並びにしたい

 
では、Stinger5の各種カスタマイズ方法について具体的にどうカスタマイズすれば良いのか見ていきましょう。

 

サイドバーの新規記事一覧を消したい

【Stinger5】Stinger5のサイドバーの新規記事一覧を消す方法
Stinger5のサイドバーの新規記事一覧を消す方法というのは、プラグインではなく、Stinger5が機能として標準搭載している新規記事の一覧を消す方法について紹介しています。
Stinger5の標準機能として搭載している新規記事一覧はブログパーツの「NEW POST」という項目名で表示され、ウィジット等の項目を見ても非表示にする機能がありません。

 
もし、プラグインで新規記事一覧を表示したいと考えていたり、キャッシュ系プラグインの誤作動の原因になるので新規記事一覧を消したい等の考えがあるときはどうしても消したい場合がありますよね。

 
Stinger5の新規記事一覧を消す方法ではStinger5のテーマを編集する方法で解決する事が出来ます。
Stinger5のサイドバーの新規記事一覧を消す手順は次の通りです。

  • テーマの編集からサイドバーに関するPHPの編集画面を開く
  • サイドバーの表示PHPから新規記事一覧のプログラムを削除する

 
テーマの編集からサイドバーに関するPHPの編集画面を開く
Stinger5のサイドバーから新規記事一覧を削除するために、サイドバーに関するPHPの編集画面を開きましょう。

 
テーマの編集はWordpressの管理画面から「外観」->「テーマの編集」を選びましょう。
テーマの編集を選んだら、次に「テンプレート」の一覧から「サイドバー (sidebar.php)」のリンクをクリックし、Stinger5のサイドバーのPHP編集画面を開きましょう。

 
サイドバー (sidebar.php)の編集画面を開く事が出来たら、実際にサイドバーのなかで新規記事一覧を表示するプログラムを探し、削除しましょう。
削除した後は「ファイルを更新」ボタンを押して、変更した内容を反映する事をお忘れなく。

 
サイドバーで新規記事一覧を表示するプログラムは次に示すPHPのプログラムです。ハイライトされている部分がサイドバーの新規記事一覧のPHPですので、プログラムからごっそり削除してしまいます。

 
探す目安はサイドバー (sidebar.php)の13行目付近となります。

 

  <!-- RSSボタンです -->
  <div class="rssbox"> <a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss-square"></i>&nbsp;購読する</a> </div>
  <!-- RSSボタンここまで -->
  <?php get_search_form(); //検索フォーム表示  ?>
  <!-- 最近のエントリ -->
  <h4 class="menu_underh2"> NEW POST</h4>
  <?php get_template_part('newpost');?>
  <!-- /最近のエントリ -->
  <div id="mybox">
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : //サイドウイジェット読み込み ?>
    <?php endif; ?>
  </div>
  <!-- スマホだけのアドセンス -->

 
Stinger5のテーマの編集をして新規記事一覧を表示するPHPを削除したら、実際に画面を表示して新規記事一覧が削除されているか確認しましょう。
結果としては次の画面のイメージのようにサイドバーの新規記事一覧が削除されました。
サイドバーの新規記事一覧が削除されたか確認しよう

 

Stinger5のサイドバーの新規記事一覧を消す方法については「【Stinger5】Stinger5のサイドバーの新規記事一覧を消す方法」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

 

Stinger5で追加される記事下二つの広告を横並びにしたい

【Stinger5】PCで記事下に2つ横並びの広告を表示する方法
Stinger5でPC表示の際に2つ横並びの広告をする方法とは、Stinger5のテーマを利用している時にウィジット機能によって追加できる記事下のパソコン用の2つ縦並びになっている広告を横並びにテーマをカスタマイズする事です。

 
なお、Stinger5この方法ではテーマのプログラムコードやCSSを編集してテーマをカスタマイズしていきます。

 
2つ横並びの広告を表示するレイアウトの事を「ダブルレクタングル」と言います。

 
Stinger5で追加する事が出来るパソコン表示の際の記事下2つの縦並び広告をダブルレクタングルにするには、次のような流れで行う事が出来ます。

  • 投稿記事の横幅の調整
  • 広告の横並びCSSの追加
  • ダブルレクタングルCSSを広告に適用する

 
投稿記事の横幅の調整では、広告をダブルレクタングルで表示した際に広告によってレイアウト崩れが発生しないよう、あらかじめ適切な形で横幅を広げます。

 
投稿記事の横幅の調整では、Stinger5のデフォルトの横幅が980pxとなっていますが、これを1100pxに調整しましょう。

 
投稿記事の横幅の調整を行うには次の流れで修正を行いましょう。

  • style.cssの編集画面を開く
  • 修正箇所を探す
  • 投稿記事の横幅の調整を行う

 
Stinger5のパソコンの記事下2連の縦並びの広告はデフォルトの状態では、回り込みの指定がされていないので広告を回り込ませてダブルレクタングルの表示が出来るようにしていきます。

 
広告の横並びCSSの追加では「style.css」を編集し必要な要素を追加していきます。
style.cssは次の手順で修正していきましょう。

  • 修正箇所を探す
  • 広告の横並びCSSの追加

 
広告をダブルレクタングルで表示する為のCSSをStinger5の広告表示を行うPHPに追加していきましょう。
Stinger5のパソコン記事下の2つの広告を表示する制御を行っているPHPは「single.php」です。

 
ダブルレクタングルCSSを広告に適用するには次の手順を行いましょう。

 

  • sigle.phpの編集画面を開く
  • 修正個所を探す
  • 広告にダブルレクタングル表示を適用する

 
Stinger5のPCで記事下に2つ横並びの広告を表示する方法については「【Stinger5】PCで記事下に2つ横並びの広告を表示する方法」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

 

スポンサーリンク


Stinger5のカスタマイズ方法のまとめ特集 あとがき

Stinger5のカスタマイズ方法のまとめ特集 あとがき
Stinger5のカスタマイズ方法のまとめについて特集といった形で紹介いたしました。
Stinger5は他にもたくさんのカスタマイズ方法があるので、記事が完成次第、色々なカスタマイズの方法を紹介していきます。

 
ここで紹介しているカスタマイズ方法は実用的な物だけで、「もっとオシャレに!」や「もっと機能的にかっこよく!」等の欲を満たす事は出来ていないと思いますので、そういった内容もドシドシ投稿していくので度々チェックして頂けるとありがたいです。

 
Stinger5をカスタマイズして自分好みのブログを作成していってくださいね。

 

 

 

 

Stinger5のカスタマイズ方法のまとめ特集 まとめ

Stinger5のカスタマイズ方法のまとめ特集 まとめ
Stinger5はそのままでも十分に使えるWordpressのテーマですが、ブログ運営者としての好みや思い、やりたい事、実現したい事や狙いなどによってレイアウトや機能的に完全に理想的な動作とはいかない事も多いでしょう。

 
内容によってはプラグインを導入する事で多くの事が解決してしまう事が多いものですが、テーマ固有の仕様のようなものもあるので、そういった内容についてはテーマそのものを編集したりカスタマイズする事で対応する必要があります。

 
ここでは、Stinger5でよくある悩みから、Stinger5のテーマの編集方法まで含め次のカスタマイズについて紹介しています。

  • サイドバーの新規記事一覧を消したい
  • Stinger5で追加される記事下二つの広告を横並びにしたい

 

【Stinger5】Stinger5のサイドバーの新規記事一覧を消す方法
Stinger5のサイドバーの新規記事一覧を消す方法というのは、プラグインではなく、Stinger5が機能として標準搭載している新規記事の一覧を消す方法について紹介しています。
Stinger5の標準機能として搭載している新規記事一覧はブログパーツの「NEW POST」という項目名で表示され、ウィジット等の項目を見ても非表示にする機能がありません。

 
もし、プラグインで新規記事一覧を表示したいと考えていたり、キャッシュ系プラグインの誤作動の原因になるので新規記事一覧を消したい等の考えがあるときはどうしても消したい場合がありますよね。

 
Stinger5の新規記事一覧を消す方法ではStinger5のテーマを編集する方法で解決する事が出来ます。
Stinger5のサイドバーの新規記事一覧を消す手順は次の通りです。

  • テーマの編集からサイドバーに関するPHPの編集画面を開く
  • サイドバーの表示PHPから新規記事一覧のプログラムを削除する

 

Stinger5でPC表示の際に2つ横並びの広告をする方法とは、Stinger5のテーマを利用している時にウィジット機能によって追加できる記事下のパソコン用の2つ縦並びになっている広告を横並びにテーマをカスタマイズする事です。

 
なお、Stinger5この方法ではテーマのプログラムコードやCSSを編集してテーマをカスタマイズしていきます。

 
2つ横並びの広告を表示するレイアウトの事を「ダブルレクタングル」と言います。

 
Stinger5で追加する事が出来るパソコン表示の際の記事下2つの縦並び広告をダブルレクタングルにするには、次のような流れで行う事が出来ます。

  • 投稿記事の横幅の調整
  • 広告の横並びCSSの追加
  • ダブルレクタングルCSSを広告に適用する

 

 
最後までお読みいただきありがとうございました。

スポンサーリンク





 - Wordpress ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

W3 Total Cacheの設定方法と使い方とは
【W3 Total Cache】W3 Total Cacheの設定方法と使い方

WordPressで運営されるブログを高速化する上で今や必須となっているW3 T …

【Wordpress】プラグインを整理してブログ価値を高めよう!
【WordPress】プラグインを整理してブログ価値を高めよう!

WordPressを使用している人はとても多いですよね。 SEOに強いし、いろい …

【Stinger5】Stinger5でGoogle Adsenseの広告を貼る方法
【Stinger5】Stinger5でGoogle Adsenseの広告を貼る方法

WordPressでブログ運営している人で、テーマにStinger5を使っている …

【Head Cleaner】CSSとJavaScriptをサーバ上にキャッシュする設定!
【Head Cleaner】CSSとJavaScriptをサーバ上にキャッシュする設定!

WordPressでブログを運営している人の中にはブログの高速化を期待して、高速 …

【Wordpress開発環境】開発環境構築で必要なXamppの設定
【WordPress開発環境】開発環境構築で必要なXamppの設定

WordPressでテーマやプラグインの開発を進めるには、自分のパソコン上で開発 …

【Crayon Syntax Highlighter】ショートコードでテンプレート化したソースコードにCSSを適用する方法
【Crayon Syntax Highlighter】ショートコードでテンプレート化したソースコードにCSSを適用する方法

WordPressで作成したブログでソースコードを紹介するとき、綺麗な表示にして …

【Wordpress】データ通信を削減してブログを高速化! Head Cleaner
【WordPress】データ通信を削減してブログを高速化! Head Cleaner

WordPressでブログを運営している人で、「もっとブログのパフォーマンスを上 …

【WordPress】WordPressの本体をダウンロードする方法

ここではWordpress本体をダウンロードする方法を紹介しています。 &nbs …

クイックタグを入力補助するボタンをエディタに追加するか-1
【Quick Adsense】エディタに追加されるクイックタグのボタン設定

WordPressのブログ運営でQuick Adsenseを使って広告掲載を行っ …

【WordPress】ソースコードを綺麗に紹介したい! Crayon Syntax Highlighter

ブログ運営をしていてプログラムのソースコードを利用したいという人は、「Crayo …