< STINGER8のサイドバーをカスタマイズ、新着記事を削除しタイトルを見やすくする

窓際マルチインカマーが真面目に効率的に0から資産を増やす

仕事できない窓際人間が、家電・完全食で時短を図り、マルチインカムで経済的時間的自由を達成していきます

アフィリエイト

STINGER8のサイドバーをカスタマイズ、新着記事を削除しタイトルを見やすくする

投稿日:2018年9月15日 更新日:

今回は、STINGER8でサイドバーを見栄え良くする方法をお伝えいたします。

デフォルトの状態ですと、サイドバーは見栄えがあまりよくありません。

少し装飾を加えて、見た目がお洒落なサイドバーを作成してみましょう。

STINGER8のサイドバーをカスタマイズ

STINGER8のサイドバーをカスタマイズしようと思った理由

アフィリエイトブログを開始して、3カ月ちょっとが経過しました。記事数は現在51で、一か月のアクセス数は自分を含めないと20くらいですかね・・。

弱小サイトですが、「これでも初月にくらべると10倍以上にアクセス数は増えているのだ」とポジティブに考えて行きたいです。

記事数もほどほどになってきたところで、アフィリエイトブログのデザインをもう少し何とかしたいと思うようになりました。

ユーザビリティも考えないといけないですからね、サイドバーの体裁を整えて行きます。

Stinger8のサイドバーを改善・・何をどうしようと思ったか?

現在のサイドバーは

  • 新着記事が表示されている(メインエリアと被っている)
  • サイドバーにタイトルがついていない
  • タイトルが表示されてもダサい

状態です。

これを

  • 新着記事は削除
  • サイドバーのタイトルを表示して、格好良く

させていきたいと思います。

Stinger8:サイドバーから最近の記事を削除する

STINGER8を使用すると、デフォルトでは、サイドバーに「新着記事」が自動的に生成されるようになっています。

最近投稿した記事を読者にお知らせするための機能なのですが、新着記事はメインエリアにも表示されるため、内容が被っており見栄えがよくありません。

この機能はデフォルトで備わっているのですが、消すことはできるのでしょうか?

簡単にできます。

WordPress管理画面から、外観⇒テーマの編集を選択、右端から「サイドバー(sidebar.php)を選択し、

<?php get_template_part( ‘newpost’ ); //最近のエントリ ?>

という文字を削除するだけです。

これだけで、トップページのサイドバーから「新着記事」が消えます。

Stinger8:サイドバーのタイトル名が表示されない

現在私のサイドバーには、カテゴリー(iDecO,NISAなど)が表示されています。

しかし「カテゴリー」というタイトル名の表示がありません。

実は、外観⇒ウィジェットで表示される「サイドバートップ」にウィジェットを入れた場合はタイトルが表示されません

外観⇒ウィジェットを選択すると、「サイドバートップ」と「サイドバーウイジェット」がありますが、サイドバーにタイトルと共に表示させたい項目は、「サイドバーウイジェット」の方に入れましょう

そうすることで、とりあえずはタイトルが表示されます。

Stinger8:サイドバーのタイトルを奇麗に

とりあえずは、タイトルが表示されましたが、文字が表示されているだけでダサいです。

以下の

外観⇒テーマの編集の、右端からスタイルシート(style.css)を選択して、以下のコードを入力しましょう。

サイドバーの見出しをお洒落にするコード

/*– サイドバーの見出し –*/
.menu_underh2{
font-weight: normal;
font-size: 16px !important;/*見出しの文字サイズ*/
text-align: center;/*見出しの配置*/
color: #fff;/*見出しの文字色*/
padding: .5em .0em;/*見出し内側の余白*/
background-color: #696969;/*見出しの背景色*/
box-shadow:0px 5px 4px -2px #a0a0a0;/*見出し枠の影*/
}

また、サイドバー同士の間隔がデフォルトだと狭いので広げてあげましょう。

以下のコードを同じく外観⇒テーマの編集の、右端からスタイルシート(style.css)に貼りつけてあげれば、間隔が広くなります。

サイドバー各項目の間隔を広げるコード

/*– サイドバー各項目の間隔 –*/
.ad {
margin-bottom: 30px;/*項目下の余白*/
}

STINGER8のサイドバーの改善を終えて

以上のことを行えば、サイドバーが現在表示されているスタイルに変わります。

大分、ユーザビリティは改善されましたよ。やって良かったと思えます。

-アフィリエイト
-,

執筆者:


comment

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

関連記事

楽天のモーションウィジェット

楽天のモーションウィジェットをスマホとパソコンで上手く表示する方法

楽天のモーションウィジェットを、パソコンとスマホで上手く表示できる方法記事にしました。 アフィリエイトをしていると、パソコンとスマホでそれぞれアフィリエイト画像の大きさを使い分けないといけないので面倒 …

ノートパソコンと手

パンくずリストを作成するには?そのSEO効果と共に解説

「パンくずリスト」という言葉を聞いたことがあるでしょうか?無いかたも多いのでは?この「パンくずリスト」アフィリエイトブログを行うにあたり、割と重要な機能なのです。 「パンくずリスト」が何なのか、またど …

疲れたサラリーウーマン

Google Search Consoleでブロックされたリソースが出現、その対応策

Google Search Console でブロックされたリソースが出た時の原因と対応策を記事にしました。 WordPressでHPを作成している方固有の現象になりますが、リソースに「images/ …

電球

アフィリエイトブログを始めると決めたらするべき事、始め方

今回は副業として、アフィリエイトブログの話をさせていただきます。今、ご覧になっているこのサイトもアフィリエイトを目的の1つとして作成しています。 「WordPressで新しくアフィリエイトブログを始め …

googleadsenseの審査に受かった

Google Ad sense の審査を通過した時の記事数

今回は、WordPressでアフィリエイトを開始して、2.5カ月後の状況を報告していきたいと思います。訪問者数はほぼゼロのままですねw Google Ad senseの審査に合格しましたので、主にその …


管理人の「たぬ」です。
株式投資・不動産投資・オプション取引をメインに日々最も安全かつ効率的な投資方法を模索しています。

どのように資産を増やしていくのか、具体的手法をお話していきたいと思います。