ちきちこちゃんねるITや経済、ゲームなどの情報をまとめた、息抜きできるメディアです。...スポンサーリンクこの記事を読むならこれも読もう。【CSS3】文字や画像などの要素を回転アニメーションにするブログ開始3ヶ月で2万PV達成と収益報告!【2015年7月運営】ライブドアブログやグーグルから見るスマホの影響力の高さブログ開設1ヶ月で月間1万PV達成?と私が行ったこと。2016/08/20212はじめまして!(@Nishi)です。実は当サイトである、ちきちこちゃんねるとSapporoFashion.comは、Wordpressテーマである、Stinger5が元となっています。この記事を訪問してくれた方のほとんどはStinger5ユーザーであると思うので、どのようなテーマかご存知かと思います。Stinger5はブログ形式に適したテーマであり、骨組みを基本としているテーマなので非常にシンプルで洗練されています。この記事では、シンプルで表示する情報量が少ないStinger5をニュースサイト風、ウェブマガジン風に3カラムにカスタマイズした手順を紹介します。まとめ基本となるテーマ僕は細かい部分のデザインやカスタマイズが嫌いなので、Stinger5の子テーマである、Simplesterを使用しています。親テーマはStinger5で、子テーマはSimplesterとなります。言えば、基本のデザインや形は、デジテクノートさんのサイトとなっています。SimplesterはGoogleChromeやFirefoxなどのモダンブラウザしか対応していないため、IEなどではデザインが崩れてしまいます。IEやsafariなどの主要ブラウザも対応するようにしました。スマートフォンでの表示デザインは、無駄なmargin(外側の余白)を省き、padding(内側の空白)を中心とすることで、小さい画面でも多くの情報を表示できるようにしました。PC大画面、PC画面、タブレット、スマホとレスポンシブデザインのブレイクポイントを多く設け、表示デザインが大幅に変化するので、ブラウザの大きさを小さくして確かめてみてください。個人的にPC大画面とスマホのデザインが気に入ってるのですが、ユーザビリティが万人受けするかは分からないです。自分が使いやすいデザインにしただけです。これから紹介するカスタマイズはPC大画面を主にしています。ヘッダー部分のカスタマイズSapporoFashion.comヘッダー部分は、ロゴにfloatでSNSボタンも右に配置しています。当サイトを見ればわかりますが、ヘッダー上に、サイドバー上に、記事下にSNSフォローボタンを配置しています。ユーザーの目に入りやすい、クリックしやすい場所と言われる場所にこれでもかと配置しています笑Googleなどの検索エンジンに依存せず、ソーシャルからの流入を増やす目的です。昔のSEOは被リンク、今はコンテンツの時代で、いつ仕様が変更し、検索エンジンからの流入が無くなるかわかりません。ヘッダー下のナビゲーション(メニュー)は追従するようになっています。ヘッダーとメニューの間には、Stingerの特徴であるヘッダー画像が挿入できます。ヘッダー画像はwidth:100%で画面いっぱいに引き延ばし、背景画像をメニューから下に配置することによって全面広告を出せるようになっています。間にメニューを挟んで、立体的に遊びを入れた広告を入れることもできるし、ヘッダー画像を使わなければ一枚の画像で全面広告を出すこともできます。トップページのカスタマイズトップページでは、画面の大きさで特にデザインが変化します。PC大画面では、ちきちこちゃんねるとSapporoFashion.comの画像をホバーしたさいの動きが違います。トップページでは3カラムにしていません。記事PR★のマークがついている、PR部分にはタグで指定したワードを入れると表示するようになっています。これは記事広告を依頼されて書いた場合に、常にトップページに表示した方が広告主さんも嬉しいと思うので1枚絵で採用しました。その下はアドセンス表示部分と、ランダムで記事を表示する部分です。PC大画面で記事をカード型に3列で表示することによって情報を多く見せています。間にアドセンスを置くことで効果的な収益も望めます。サイドバー下部の人気記事は追従するため、スクリーンショットで表示が崩れています。サイドバーのカスタマイズサイドバーは、3カラムに対応するため、300pxに小さくしています。これにより、記事下のアドセンスをダブルレクタングルで表示することができました。ほかは特に何もしていません。フッターのカスタマイズフッターは端いっぱいに引き延ばし、濃い色にすることで全体のデザインを締めています。フッターにもウィジェットを配置できるように3カラムにしています。これもレスポンシブ対応です。その上には、月間アクセスランキングを表示しています。1ヶ月の全体のアクセスの傾向が分かるので僕にとっても嬉しい表示です。ちなみに、フッターの一番下の部分はあまりいじらない方がいいです。トップページではh2が割り振られていたり、SEO上いじらないほうが良いと思います。記事ページのカスタマイズ3カラムに変更した記事ページ部分です。左カラム人は文字を読むときに左から右へ視線を動かします。左カラムを大きくしてしまうと、コンテンツとなる記事を読むさいに非常に邪魔になります。したがって、左カラムをライター情報だけにし、横幅を小さくしました。左カラムも追従するため、スクリーンショットでは残像が写ってます。3カラムになるのは、PC大画面のみでそれ以外は記事下にライター情報が表示されます。ライター情報が大事(とても重要)なのかは後ほど記事にします。記事上の今日の人気記事は、PV数をあげるために配置しています。以前はテキストのみで10記事ほど表示していましたが、3記事でサムネイル表示にすることでユーザーに優しくしました。見出しは分かりやすくh1、h2、h3など、見出しを分かりやすく、見やすい表示にしました。ウェブマガジン風におしゃれな見出しになってるはず...。ちなみに記事上のアドセンスをfloatで左回りにし、ウェブマガジン風に広告を配置しました。まとめ原型が無くなるくらいカスタマイズしているため、細かいところを気になりだしたら紹介しきれません。実際に気になるところをカスタマイズしていたらキリがありません。カスタマイズは無限大です。細かいカスタマイズの仕方は、コメントで教えてほしいと言ってくれれば記事にするかもしれません。ある程度はhtml、CSS、PHP、JavaScriptの知識が必要です。この記事ではサイトのデザインを大幅に変更したということを報告しました。この記事を書いた人M.Nishi管理人ファッションが好きで、ライフスタイルなどの情報に強いです。夏はテニス、冬はスノーボードをするアクティブ系インドア人間。コメントをキャンセルメールアドレスが公開されることはありません。【CSS3】文字や画像などの要素を回転アニメーションにする初心者おすすめプログラミング学習サイトCODEPREPの評判とは?ブログ開設1ヶ月で月間1万PV達成?と私が行ったこと。【CSS3】文字や画像などの要素を回転アニメーションにする今までは、アプリやウェブサイトなどのローディング画面に、アニメーションgif画像を使っていました。...Stinger5をニュースサイト・マガジン風に3カラムにカスタマイズ!はじめまして!(@Nishi)です。Technologyさんの製品第2弾。私もかなりランニングをする人なので、今回はランニング用の安い、高音質のおすすめイヤホンをレビューしていきます。Technologyさんの大容量モバイルバッテリーを1ヶ月使用したので、レビューしていきます。...イギリス、オーストラリアの大学院留学の費用や難易度!準備はそれほど難しくない?海外大学院への留学を希望している方が年々増えています。...ブログ開始3ヶ月で2万PV達成と収益報告!【2015年7月運営】いつの間にか、ちきちこちゃんねるを運営してから3ヶ月経ったのでPVと収益報告をします。2ヶ月目の報告はすっかり忘れてしまいました。...マセラティのSUV、レヴァンテの価格や発売時期は?スペックまとめ!マセラティ初のSUVとなる、「レヴァンテ」が現在開発中となり、市販モデルとしての投入が数年以内にも行われる予定となっている。...ランボルギーニのSUV、ウルスの価格や発売時期は?スペックまとめ!ランボルギーニから正式に市販化されると発表のあったSUV、ウルスの価格や、発売時期、サイズなどのスペックをまとめてみました。...断線したiPhone5の充電ケーブルをハサミで修理、直す方法!断線して充電できなくなったiPhone5の充電ケーブルをハサミ1本で修理、直す方法を紹介します。初心者おすすめプログラミング学習サイトCODEPREPの評判とは?ブログ開設1ヶ月で月間1万PV達成?と私が行ったこと。人気!おすすめ千切りキャベツピーラーと貝印のピーラーを紹介!...521ビュースポンサーリンクこのサイトについて・広告の要望について・お問い合わせ・サイトマップメールマガジンメールアドレスを記入して購読すれば、更新をメールで受信できます。8人の購読者に加わりましょうメールアドレスStinger5をニュースサイト・マガジン風に3カラムにカスタマイズ!ITや経済、ゲームなどの情報をまとめた、息抜きできるメディアです。