[Stinger3]ブログテーマを修正して1カラムにしてみた!あといろいろ・・・

突然訪れる瞬間がある・・・
それは「ブログのテーマ修正」!!!

自分の場合その波は結構な頻度で訪れていて数ヶ月に1度はブログテーマの修正をやっているような気がしますw
開発環境とかもないので直接本番を弄ってますが(゚ε゚)キニシナイ!!

いつも通り変更前のスクショを取っていないので変更点を挙げていきます.

スポンサーリンク

PC向け(Stinger3)

まずはPC向けテーマ「Stinger3」からです.

Screenshot of stinger3.com
WordPressテーマのSTINGER3公式サイト
 

①サイドバーを排除し1カラムに,そして横幅を1024pxに変更

image

今回一番の変更点がここです.
image 
通常のStingerではこのようにサイドバーがあります.
もともとサイドバーにはプロフィールやSNSのフォローボタンを置いていたのですが,「特になくてもいいかな?それよりメインコンテンツを大きく表示させよう!」と思い削除してみました.
実際自分がブログを見るときもサイドバーはほとんど見ていなくてメインのコンテンツばかり見ていますし.

Screenshot of www.akibaphotography.net
アキバフォトグラフィ – アキバフォトグラフィ67
 

あとはこちらのブログの影響ですね.
自分がよく見ているブログなのですが写真をおっきく載せていていいなぁと思っていたので真似してみましたw

ちなみにやったことは「footer.php」にある「<?php get_sidebar(); ?>」を削除しただけです.
簡単ですね!

横幅の1024pxについてはFlickrからの張りやすさを優先した結果です.

R0020085.jpg
新宿御苑にて

普段はWindowsLiveWriterを使って書いているのですが,「Flickr Image」を使って張ると1024pxというサイズが丁度いいのです.
写真をメインにブログをやっていきたいと思いの現れでもあります.

サイドバーの削除と横幅の増加に伴いサムネイルサイズやメニューも修正しています.

②ソーシャルボタン(シェア・フォロー)としてAddThisを追加

image

効果があるかわかりませんが,追従型のソーシャルボタンを追加してみました.
今回は試しに「AddThis」というサービスを利用してみました.

Screenshot of www.addthis.com
Personalized widgets at your finger tips. | AddThis
 

簡単に導入できて,デザインもシンプルでなかなか(・∀・)イイ!!

シェアの部分だけソースは手書きしたので載せておきます.

ソース

③フッターをカスタマイズ

 image

サイドバーをなくしたことでプロフィールやカテゴリー,アーカイブを表示する場所がなくなったでのフッターをカスタマイズしてみました.

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

この記事を参考にしてウィジェットをフッターでも使えるようにしてみました.

ここは実際に使う人がいるとは思えないので自分用ですねw

④記事下をカスタマイズ

image

サイドバーがなくなったことで記事下も大きなスペースになりました.
さすがに広告で埋めるのもアレだったのでこれまで行を分けていた記事情報やページナビを載せ,新たにページ内検索窓を設置してみました.
ソーシャルボタンもフォローボタンを追加し,賑やかな感じになっています.

記事を最後まで見た後に欲しい情報はやっぱりカテゴリーとかタグなのかなぁと思い文字を大きめにしたりしてます.

スマホ向け(WPtouch Pro Classic Redux)

スマホは細かいところの調整になっているので大きな変化はありません.

①記事前後に記事情報を追加

image image

今までなかったのが不思議なくらいですが追加しました.
気になるカテゴリーへのアクセスが容易になるのかなぁと.

②目次を正しく表示できるように修正

image

記事の最初のほうに表示されている目次.
「Table of Contents Plus」というプラグインを使っているのですが,いつからか記事によって表示できていなかったみたいです.

Screenshot of wordpress.org
WordPress › Table of Contents Plus « WordPress Plugins
 

原因は記事中にAdsenseを埋め込むために使っている機能との優先度によるものでした.
どちらの機能も「add_filter」を使っているのですが「Table of Contents Plus」にのみ優先度の記述があり,優先度が低かったため表示されていなかったようです.
詳細な原因については調べていませんが,ググってもわからなかったので解決まで時間かかりました・・・

image
「Table of Contents Plus」のコードには「100」という優先度の記述があります.

image
Adsense追加コードには優先度の記述がなかったので「200」というのを追記しています.
優先度は記述しないと「10」になるので「Table of Contents Plus」の優先度が低かったのが原因と思われます.

編集後記

今回の修正は今まで一番時間かかったんじゃないかと思います.
3月15日1時~7時,13時~18時なので約11時間ですか・・・w
どうりで翌日のももクロライブで頭痛ヤバかったんですね・・・

まぁこれだけ時間かけただけはあってだいぶ細かいところまで修正することができたので満足してます.
1カラム化というのは個人的には大きな決断だったわけですが,吉とでるか凶とでるかまだなんとも言えません.
今のところ影響はなさそうですけどね.

ただ昔の記事に関しては貼付けている写真が横幅500pxなので少し見づらくなっています.
本記事から横幅1024px化しているので今後の記事は見やすくなるかなとは思います.
わざわざFlickrへ飛ばなくてもある程度の画像は見えるますしね.

もうこれで何回テーマを直したかわかりませんが,きっと終わりは来ないような気がしますw
自分の場合記事を書くのはもちろん,ブログをいろいろ弄くるのも好きなのでもはや趣味の領域ですね.

とりあえず一区切りついたので記事を書くことに集中していきますかね!

スポンサーリンク