ちきちこちゃんねる

ITや経済、ゲームなどの情報をまとめた、息抜きできるメディアです。

*

ランニングにおすすめ!安い高音質イヤホンを紹介!【Bluetooth対応】

ランニングにおすすめ!安い高音質イヤホンを紹介!【Bluetooth対応】

  2015/10/28    家電・ガジェット

EC Technologyさんの製品第2弾。 私もかなりランニングをする人なので、今回はランニング用の安い、高音質のおすすめイヤホンをレビューしていきます。 B …

スポンサーリンク

Writer


この記事をシェア

本日の人気記事

Stinger5をニュースサイト・マガジン風に3カラムにカスタマイズ!

, ,

      2016/08/20

Stinger5をニュースサイト・マガジン風に3カラムにカスタマイズ!

はじめまして!(@Nishi)です。

実は当サイトである、ちきちこちゃんねるとSapporoFashion.comは、Wordpressテーマである、Stinger5が元となっています。

この記事を訪問してくれた方のほとんどはStinger5ユーザーであると思うので、どのようなテーマかご存知かと思います。

Stinger5はブログ形式に適したテーマであり、骨組みを基本としているテーマなので非常にシンプルで洗練されています。

なので、この記事では、シンプルで表示する情報量が少ないStinger5をニュースサイト風、ウェブマガジン風に3カラムにカスタマイズした手順を紹介します。

スポンサーリンク

 

基本となるテーマ

stinger-newssite-magazine-3colomn (2)

僕は細かい部分のデザインやカスタマイズが嫌いなので、Stinger5の子テーマである、Simplesterを使用しています。

つまり、親テーマはStinger5で、子テーマはSimplesterとなります。

もっと言えば、基本のデザインや形は、デジテクノートさんのサイトとなっています。

しかし、SimplesterはGoogleChromeやFirefoxなどのモダンブラウザしか対応していないため、IEなどではデザインが崩れてしまいます。

なので、IEやsafariなどの主要ブラウザも対応するようにしました。

そして、スマートフォンでの表示デザインは、無駄なmargin(外側の余白)を省き、padding(内側の空白)を中心とすることで、小さい画面でも多くの情報を表示できるようにしました。

PC大画面、PC画面、タブレット、スマホとレスポンシブデザインのブレイクポイントを多く設け、表示デザインが大幅に変化するので、ブラウザの大きさを小さくして確かめてみてください。

個人的にPC大画面とスマホのデザインが気に入ってるのですが、ユーザビリティが万人受けするかは分からないです。ただ単に自分が使いやすいデザインにしただけです。

これから紹介するカスタマイズはPC大画面を主にしています。

 

ヘッダー部分のカスタマイズ

stinger-newssite-magazine-3colomn (3)

SapporoFashion.com

ヘッダー部分は、ロゴにfloatでSNSボタンも右に配置しています。

当サイトを見ればわかりますが、ヘッダー上に、サイドバー上に、記事下にSNSフォローボタンを配置しています。

ユーザーの目に入りやすい、クリックしやすい場所と言われる場所にこれでもかと配置しています笑

Googleなどの検索エンジンに依存せず、ソーシャルからの流入を増やす目的です。リスク分散ですね。

昔のSEOは被リンク、今はコンテンツの時代で、いつ仕様が変更し、検索エンジンからの流入が無くなるかわかりません。

そしてヘッダー下のナビゲーション(メニュー)は追従するようになっています。

stinger-newssite-magazine-3colomn (4)

ヘッダーとメニューの間には、Stingerの特徴であるヘッダー画像が挿入できます。

ヘッダー画像はwidth:100%で画面いっぱいに引き延ばし、背景画像をメニューから下に配置することによって全面広告を出せるようになっています。

間にメニューを挟んで、立体的に遊びを入れた広告を入れることもできるし、ヘッダー画像を使わなければ一枚の画像で全面広告を出すこともできます。

 

トップページのカスタマイズ

トップページでは、画面の大きさで特にデザインが変化します。

PC大画面では、ちきちこちゃんねるとSapporoFashion.comの画像をホバーしたさいの動きが違います。

尚、トップページでは3カラムにしていません。

記事PR

stinger-newssite-magazine-3colomn (5)

★のマークがついている、PR部分にはタグで指定したワードを入れると表示するようになっています。

これは記事広告を依頼されて書いた場合に、常にトップページに表示した方が広告主さんも嬉しいと思うので1枚絵で採用しました。

その下はアドセンス表示部分と、ランダムで記事を表示する部分です。

スクリーンショットだと少しレイアウトが崩れてますね。

記事一覧

stinger-newssite-magazine-3colomn (6)

記事一覧では、PC大画面で記事をカード型に3列で表示することによって情報を多く見せています。

間にアドセンスを置くことで効果的な収益も望めます。

サイドバー下部の人気記事は追従するため、スクリーンショットで表示が崩れています。

 

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

サイドバーは、3カラムに対応するため、300pxに小さくしています。

これにより、記事下のアドセンスをダブルレクタングルで表示することができました。

ほかは特に何もしていません。

 

フッターのカスタマイズ

stinger-newssite-magazine-3colomn (7)

フッターは端いっぱいに引き延ばし、濃い色にすることで全体のデザインを締めています。

そして、フッターにもウィジェットを配置できるように3カラムにしています。これもレスポンシブ対応です。

その上には、月間アクセスランキングを表示しています。1ヶ月の全体のアクセスの傾向が分かるので僕にとっても嬉しい表示です。

ちなみに、フッターの一番下の部分はあまりいじらない方がいいです。

トップページではh2が割り振られていたり、SEO上いじらないほうが良いと思います。念のため。

 

記事ページのカスタマイズ

3カラムに変更した記事ページ部分です。

左カラム

stinger-newssite-magazine-3colomn (8)

人は文字を読むときに左から右へ視線を動かします。

なので、左カラムを大きくしてしまうと、コンテンツとなる記事を読むさいに非常に邪魔になります。

したがって、左カラムをライター情報だけにし、横幅を小さくしました。

左カラムも追従するため、スクリーンショットでは残像が写ってます。

3カラムになるのは、PC大画面のみでそれ以外は記事下にライター情報が表示されます。

なぜライター情報が大事(とても重要)なのかは後ほど記事にします。

今日の人気記事

記事上の今日の人気記事は、PV数をあげるために配置しています。

以前はテキストのみで10記事ほど表示していましたが、3記事でサムネイル表示にすることでユーザーに優しくしました。

見出しは分かりやすく

h1、h2、h3など、見出しを分かりやすく、見やすい表示にしました。

ウェブマガジン風におしゃれな見出しになってるはず…。

ちなみに記事上のアドセンスをfloatで左回りにし、ウェブマガジン風に広告を配置しました。

 

まとめ

原型が無くなるくらいカスタマイズしているため、細かいところを気になりだしたら紹介しきれません。

実際に気になるところをカスタマイズしていたらキリがありません。

そうです。カスタマイズは無限大です。

細かいカスタマイズの仕方は、コメントで教えてほしいと言ってくれれば記事にするかもしれません。

しかし、ある程度はhtml、CSS、PHP、JavaScriptの知識が必要です。

とにかく、この記事ではサイトのデザインを大幅に変更したということを報告しました。

この記事を書いた人

M.Nishi管理人
ファッションが好きで、ライフスタイルなどの情報に強いです。
夏はテニス、冬はスノーボードをするアクティブ系インドア人間。

スポンサーリンク