JIBURi.com

宮﨑大輔が青年海外協力隊・海外旅行・ライフハック・農業技術・ノマドライフを紹介します

厳選ライフハック記事BEST3

「ブログ・Webサイトの運営方法」カテゴリの人気記事

Stinger5のカスタマイズ!ヘッダー、サイドバー、フッターの参考にしたブログとレスポンシブ・Font Awesome

      2016/01/13


  • このエントリーをはてなブックマークに追加

stinger5

Stinger5のヘッダー、サイドバー、フッターのカスタマイズと参考にしたブログ

Stinger5で構築されているこのブログのヘッダー、サイドバー、フッターをカスタマイズした。

このブログはWordpressのStinger5という人気テーマで作られており、Stinger5は非常にカスタマイズしやすいのが特徴だ。 

 

ぼくはWebサイト作りに関しては素人なので、いろんな人のブログを参考にしながらカスタマイズを行った。

とても難しくて、何度もサイトを真っ白にしては何回もコードの記述をやり直した。

やはりカスタマイズしやすいStinger5といえども、Webサイト初心者にはWordpressのカスタマイズは難易度が高いのだ。

 

そこで今回は、これからStinger5をカスタマイズする人のために、どのようなカスタマイズを行ったのかと、そのために参考にしたブログを紹介しよう。

スポンサーリンク

 

 

 

 

 

 

ヘッダーのカスタマイズ:ウィジェットによる新着記事の表示

まずはウィジェットにより新着記事が表示するようになった、ヘッダー部分のカスタマイズを説明しよう。

1.完成したヘッダー

まずは完成したパソコンとスマホ用のヘッダー画像を見て欲しい。

(1)パソコン表示

パソコンで表示されるヘッダーはこのようになった。

タイトルロゴの下に概要が記載され、その下に「最新の更新情報」という名前で新しく作成した新着記事が5個並んでいる。

そして、その下にメニューが続く。

blog-header

 

(2)スマホ表示

スマホでは、このようなヘッダーが表示されている(機種により多少、表示内容は異なる)。

右上にメニューがあり、その下にタイトルロゴ、概要の記述があり、そして新しく作った新着記事が映っている。

そして、その下に記事のタイトルと記事の本文が続いている。

smat-header

 

 

2.ヘッダーのカスタマイズ方法

次にヘッダーのカスタマイズ方法を説明しよう。

簡単にいうと、カスタマイズ作業は以下の2点だけである。

(1)function.phpに新しいウィジェットを記載

(2)header.phpに新しいウィジェットを表示させる

 

しかし、苺を育てることしかできないぼくにはとても難しく、何回も失敗した。

その度にググっては、カスタマイズ作業の先輩方のブログを読み、何回も挑戦した。

そして、何とか完成した。

 

3.参考にしたブログ

参考にしたブログのみなさん、ありがとうございます!

(1)カスタマイズ作業の参考にしたブログ

stinger5のヘッダーにウィジェットエリアを追加する方法

WordPressのヘッダに新着記事をサムネイル付きで表示させる方法

 訪問別PVアップ!ブログヘッダーにサムネイル付き記事をランダムに表示する方法

 

(2)ヘッダーに新着記事、人気記事を載せるデザインの参考にしたブログ

男子ハック

SiteMiru(してみる)

 

 

 

 

 

サイドバーのカスタマイズ:表示されている記事のカテゴリの人気記事を表示

サイドバーの「表示されている記事のカテゴリの人気記事を表示させるカスタマイズ」を説明しよう。

1.人気記事の表示

まずは完成した人気記事を見て欲しい。

(1)トップページの表示

トップページには、閲覧回数によるここ一週間の人気記事が表示されている。

WordPress Popular Posts

 

(2)個別記事の表示

そして、個別記事をクリックしてどれか一つの記事を表示すると、全体の人気記事ではなく、その記事が含まれる「カテゴリの人気記事」が表示されている。

例えばゲストハウス・カテゴリの記事を読んだ場合には、このようにゲストハウス・カテゴリの人気記事が表示されるようになった。

WPP Plus Widget

 

2.カスタマイズ方法

それでは、カスタマイズ方法を簡単に説明しよう。

上の説明で分からなかった人のために、このカスタマイズの説明を引用させて頂こう。

人気記事を表示できるWordPressにプラグイン【WordPress Popular Posts】をご利用されている方、多いと思います。

【WPP Plus Widget】は【WordPress Popular Posts】ではできないカテゴリ別での人気記事の表示を、ウィジェットで簡単に管理できる拡張機能的なプラグインです。

【WPP Plus Widget】が優れているのは表示するカテゴリーの階層も簡単に設定でき、現在表示されている記事は人気記事からは排除することも簡単にできるのです。

そしてさらに!複数カテゴリを選択していた場合にはどれか一つを選んで表示させるのです。

引用元: 今表示している記事のカテゴリの人気記事を簡単に表示できるプラグイン【WPP Plus Widget】

 

カスタマイズの手順は以下の4つだ。

(1)WordPress Popular Postsをインストールして有効化

(2)WPP Plus Widgetをインストールして有効化

(3)WPP Plus Widgetを設定

(4)style.cssで装飾

 

下にまとめている参考ブログを読みながら行えば、とても簡単に設定できる。

おそらく15分もあれば、一連の作業が完了するだろう。

 

3.参考にしたサイト

今表示している記事のカテゴリの人気記事を簡単に表示できるプラグイン【WPP Plus Widget】

WordPress Popular Postsで今見てるカテゴリと同じ人気記事を表示させ、それ以外のページではブログのランキングを表示する方法

【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする

WordPress Popular Postsでカテゴリ別の人気記事を表示する

【STINGER5】サイドバーに一体感のある追従型『人気の記事』を付ける方法

【STINGER5】記事一覧/新着記事/関連記事の『抜粋文』を削除する方法

【STINGER5】NEW POSTの一つ一つの背景色を変更する方法

stinger5見出しをカスタマイズしてドレスアップ

 

 

 

 

 

パソコン用フッターのカスタマイズ:三分割したフッターの設置

次にパソコン用フッターのカスタマイズとして施した、三分割したフッターの配置を説明しよう。

1.パソコン用のフッターの表示

パソコン用のフッターとして、以下のようなデザインを用意した。

左部分にプロフィール、中央部分にFacebookページとTwitterフォローボタンとFeedlyのフォローボタン、右側上部にGoogleカスタム検索によるサイト内検索 、右側下部にお問い合わせ欄を設置し、背景は濃いグレーに変更した。

blog-footer

 

過去にフッターを設置したテーマを使用していたこともあって、前々からStinger5にもフッターをつけたいと思っていたが、Stinger5にはフッターにウィジェットを設置できないので、諦めていた。

たまたまStinger5にフッターを設置する方法を見つけたので、試してみるととても難しくて設置が完了するまでに、3日間ほどかかってしまった。

それでも理想通りのフッターが完成した。

 

 2.カスタマイズの方法

カスタマイズの方法を紹介しよう。

ぼくは、フッターに三分割のウィジェットを追加する方法を使った。

 

作業は以下の3つ。

1)function.phpをいじって、ウィジェット欄の追加

2)footer.phpをいじって、ウィジェットの表示

3)style.cssをいじって、表示の装飾

 

しかし、この3つが初心者のぼくには超難しかった。

function.phpは少しでも記述が間違えばサイトが表示されなくなるし、footer.phpも全然思うように動いてくれなかった。

それでも、もう少し下で紹介するブログをお手本にしたら、なんとか完成することができた。

 

設置作業は、一つのサイトのコードをコピペしただけではうまくいかなかったが、複数のサイトの情報を何回も試してたらうまくいった。

同じようなフッターを設置したい人は、必ずバックアップを取ってから、複数のサイトを参考にしながらカスタマイズすることをおすすめする。

 

3.カスタマイズの参考にしたサイト

この三分割したフッターを設置するために参考にしたサイトは、以下の通りだ。

このような分かりやすい情報を公開して頂けて、ぼくのような素人には大変有り難い。

みなさん、ありがとうございます。

(1)フッターカスタマイズ作業の参考にしたサイト

 stinger5フッターをカスタマイズ、3分割して足元をおしゃれに!

おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP

【Stinger5】WordPress初心者のワイが、フッター(footer)3カラムのカスタマイズに挑戦してみたよー。

STINGER3のフッターを3カラムにカスタマイズしてみた

「えっ!?ブログのフッター活用できてなさすぎ!」ってことで急いでカスタマイズしました 【Stinger】

フッターに背景色をつけてブラウザ画面いっぱいに広げる方法

 

(2)フッターデザインの参考にしたサイト

フッターデザインを考える時に参考にしたのは、以下のサイト。

フッターデザイン.com

あなたが作ったサイトのフッターの役割は?12のフッター活用方法!

Webサービスの作り込みはフッターにあらわれる、13のサービスのフッターSSをまとめてみました

 

 

 

 

 

スマホ用フッターのカスタマイズ:スマホだけ分岐させて専用ウィジェットを表示

次にスマホ用フッターのカスタマイズ、スマホを分岐させてウィジェットを表示する方法を紹介しよう。

 1.スマホのフッターの表示

まずは完成したページを見て欲しい。

スマホ用のページでは、フッター部分がこのように表示されているはずだ。

運営者プロフィール、サイトマップ、お問い合わせが縦に並んでいる。

sma-footer


 

2.カスタマイズ方法

スマホ用フッターのカスタマイズは、以下の3つの手順で行った。

(1)function.phpへスマホ用ウィジェットの追加

(2)footer.phpへ条件分岐タグ「is_mobile」を記載し、スマホとパソコンを分ける

(3)style.cssを装飾

 

ぼくはfooter.phpへの条件分岐タグ「is_mobile」でつまずいてしまい、成功するまでに一日かかった。

すでに成功している他のブログのみなさんのコードを参考にして、適宜それぞれのサイトに合わせて修正しながら試してもらいたい。

もちろん、試す前にバックアップは取ってほしい。

 

 

3.参考にしたブログ

以下が参考にしたブログ。

カスタマイズの参考にブログ

 【Stinger5カスタマイズ】モバイルのみ一部のウィジェットを非表示化したよ。

遂に!Stingerをカスタマイズしまくってレスポンシブデザインに対応させました。

【WordPress】is_mobileを使ってスマホとPC表示を分ける方法

PCとスマホで見た目のデザインを変える[Stingerカスタマイズ]

 

デザインの参考にブログ

スマホ用フッターのデザインは、人気ブログGori.meさんのスマホ用フッターを参考にさせてもらった。

まだまだGori.meさんのようにカッコ良くないので、もっと修正したい。

Gori.me

 

 

これでだいたいのカスタマイズの話は終わったので、最後に2つおまけ情報を載せてみた。

WordPressでテーマをカスタマイズする時に、使うと便利なアイテム情報だ。

 

 

 【おまけ1】Google Chromeのデベロッパーツールで各種「スマホ・タブレット」表示

Google Chromeのデベロッパーツールを使うと、 スマホとタブレットの表示確認ができる。

Google Chromeはブラウザの幅を変更することである程度はスマホ表示が確認できるが、デベロッパーツールを使った方がさらに確実に確認することができる。

 

1.Google Chromeのデベロッパーツールでスマホ・タブレット表示を確認する方法

(1)まず通常通り、Google Chromeを開こう。

(2)次に右上のメニューバーをクリックする。

(3)下から2番目の「その他のツール」へマウスを合わせる

(4)「デベロッパーツール」をクリックする

すると、このような画面になる。

developper2

 

(5)左上の「Device」と書かれたタブをクリックすると、iPhone4、iPhone5、iPhone6、iPhone6plus、iPad、iPad mini、galaxy、Samsonなどのスマホとタブレットの商品名がずらっと現れるので、表示確認をしたい機種を選択する。

これはiPhone6の表示画面だ。

developper-iphone5

 

これはiPad miniの横向き表示。

(6)Deviceタブの下の回転している矢印をクリックすると、横向きと縦向きを変えることができる。

developper-ipad

 

(7)右側上の「スマホマーク」をクリックすると、表示画面の横幅を自由に変えられるようになる。

developper

 

ぼくはタブレットNexus7を持っているがスマホは一台も持っていないので、このデベロッパーツールを使って、スマホとタブレットの表示確認を行っている。

スマホとタブレットの表示確認がしたい人には、ぜひ試してほしい。

 

 

 

 

【おまけ2】Webフォント Font Awesomeの活用

ヘッダー、サイドバー、フッターにはWebフォント「Font Awesome」を活用した。

小さなロゴみたいなやつが、Webフォントだ。

Stinger5にはもとからFont Awesomeが設定されているので、簡単に使用することができる。

1.Webフォント Font Awesomeの使い方

(1)Font Awesomeが使いたい場合には、まずはFont Awesomeのサイトへ行こう。

Font Awesome

(2)Font Awesomeのサイトで、「icons」という文字をクリックしよう。

(3)500個以上のアイコンが表示されるので、使いたい物をクリックするか、上部の検索バーで英単語で探そう

Font Awesome

 

(4)通常は「<i class=”fa fa-bed”></i>」こんな表記を表示したい場所へコピペする。

Font Awesome2

 

(4)style.cssに記述する場合には、「Unicode」に¥を付け加えて、「 ¥f236」こんな感じで使う。

(5)すると、記載した場所へ選んだアイコンが表示される。

 

2.参考にしたブログ

【簡単導入】ブログにアイコンフォント「FontAwesome」を使ってみよう!

他ブログとちょっと差がつくSTINGER5とプラグインのカスタマイズ

 

 

 

 

 

まとめ

Stinger5のヘッダー、サイドバー、フッターをカスタマイズした。

WordPress初心者なので何回も失敗したが、他の方のブログを参考にさせて頂いて、無事に完成させることができた。

これからStinger5をカスタマイズする人に参考にしてもらいたい。

 

ブログを書いている人におすすめの教科書

ブログのアクセス数を増やしたい人、もっとわかりやすい文章を書きたいブロガーのみなさんには、こちらの記事で紹介しているブロガー本をぜひ読んでもらいたい!

参考:ブログの書き方&アクセスアップ!ブロガーの教科書ベスト10

 

Amazonのブログ関連の人気本ランキングベスト10

こちらがAmazonで人気のブログ関連の本です。

Powered by amaprop.net

 

 

ブログ開設にはお名前.comがおすすめ!


合わせて読むと役立つかも!?

「Wordpressブログの運営方法」カテゴリの人気記事ランキング カテゴリー

Amazonが期間限定セール中!


  


  • このエントリーをはてなブックマークに追加
最後までお読み頂きありがとうございます。SNSでシェアして頂けるとうれしいです。

この記事が気に入ったら
いいね!をお願いします

JIBURi.comの最新情報をお届けします

TwitterでJIBURlをフォローしよう!

JIBURi.comの運営者・宮﨑大輔の紹介

一眼レフカメラを握る宮﨑大輔

宮﨑大輔 Daisuke Miyazaki

【 仕事内容 】
海外農業コンサルタント / 世界を旅するフォトグラファー / 海外秘境ライター / 旅人限定のブログコンサル / CFコンサル

●青年海外協力隊の任期終了後に、フリーランスとして世界中を旅しながら国際協力やビジネスをしている現代版ノマドワーカー
●環境汚染がすすむ世界一の絶景ウユニ塩湖で環境改善プロジェクトを行うためにクラウドファンディングを行い一週間で100万円達成&現在はアドバイザーに就任。

→ 詳しいプロフィールはこちら

→ 人生で報われた決断ランキングベスト10

→ 宮﨑大輔のAmazonのほしいものリスト

【 農業経歴 】
長野県飯田市のリンゴ農家に生まれる→信州大学大学院で農学修士号取得→青年海外協力隊の野菜栽培隊員として中米パナマ共和国で2年間農業ビジネス支援→フリーランスの農業コンサルタントとして日本、アジア、中南米、アフリカで、日系企業から依頼を受け農業ビジネスのコンサルティングを行っている。

【 仕事のお問い合わせ先 】
【農業コンサルタント】遠隔指導&出張指導

【海外旅行&秘境ライター】執筆・寄稿依頼

【世界を旅するフォトグラファー】撮影依頼&写真の利用

【旅をキャリアに生かしたい人専門】ブログのコンサル

【成果報酬制】クラウドファンディングコンサル

【月間25万PV】PR記事作成の依頼

shigoto_9042

SNS・RSSで更新情報を受け取れます

目指せ1,000いいね。Facebookページにいいね!をお願いします。

follow us in feedly


Instagram

note_9254

youtube-logo

「ブログ・Webサイトの運営方法」カテゴリの人気記事BEST10

  同じカテゴリの記事