#stinger3

WordPressのテーマ”Stinger3″のエントリーごとのSNSシェアボタンにLINEを追加した

時代の流れでLINEにも対応 すっかりここのブログも約半分はモバイルからのアクセスということで。 どんだけ使われるのやら、と思いつつも、勉強半分にLINEに送るボタンをつけてみようかと 設置方法 というわけで、公式サイトを見てみる。 LINEで送るボタン : ご丁寧にWordpress用もある。んがっ、Stinger3のテーマでどうやって組み込むのかさっぱり久しぶりで忘れてるので検索。 WordPress[Stinger3] LINEで送るボタンを設置 | ディーエムガジェット : ふむふむ 管理画面　→　外観　→　テーマ編集　→　sns.php をいじればいいらしい。…

昨日、Stinger作者のENJIさん（@ENJILOG）からのツィートで、ついに Stinger5 が一般公開された事を知りました。

Stinger5では、ついにレスポンシブに対応されるという事で、非常に楽しみにしていましたので、という事で、さっそくテーマに適用してみました。

まずはダウンロードから

Stinger5のダウンロードは下記リンクから可能です。

ダウンロード | STINGER5

ちなみに、8/19版が最新で、それ以前のβ版には修正がかかっているそうですので、ご注意ください。

テーマの適用とカスタマイズ

今日は、ほぼテーマの適用のみですが、

ロゴ画像の適用

ヘッダー画像の非表示

ファビコンの置換え　（これ、忘れがちｗｗｗ）

snsボタンの追加

といった基本部分のみをカスタマイズしています。

急ぎで適用したので、自分でいじった箇所に、多少、表示の崩れや修正したい点なども…

しばらくブログのカスタマイズに勤しんでいますが、

今回は、サイドバーのカスタマイズに挑戦です。

  Stinger系のブログを見ると、意外とサイドバーに枠線を付けている方は少ないみたいですね。

あと枠線を付けていてもサイドバー全体だったり。

やはりウィジェット毎に枠線って、ベタ過ぎるんでしょうか。。。

  サイドバーをウィジェット毎に枠線で囲む

とはいえ、構成のブロックを明示するのは、ブログを閲覧して下さる方にとっては解りやすくなるハズ。

という勝手な思い込みの元、サイドバーをウィジェット毎に枠線で囲ってみる事にしました。ｗ

  最初の状態はこんな感じ。

随分あっさりしていますね。＾＾

  まずは、各ウィジェットを枠で囲ってみましょう。 この辺は要素が入り組んでますが、下記のコードを挿入すればＯＫです。

#container #wrap #wrap-in #side #twibox…

Stinger3は、デフォルトで、パソコン用のスタイルシートとスマホ用のスタイルシートを切り分けてくれていますので、

パソコン、スマホ、それぞれ用のデザインを構築するのが簡単ですよね。

  今回は、スマホのデザイン変更に着手したいと思います。

  これまでスマホのビューを変更しなかった訳

これまでは、スマホ用のデザインには極力手を入れてませんでした。

というか、わざわざスマホ用のデザインには反映されないように、コードを編集したり。

  というのも、そもそもスマホでサイトを閲覧する場合、デザインの要素が多いとゴチャついて記事が読みにくい場合が多いのですが、

Stinger3のスマホ用のデフォルトデザインは、パソコン用のデザインと比べても、なおシンプル。

なので、記事を読む事にフォーカスしてもらいやすいのかな？という考えからです。

  が、ここにきて、スマホのデザインをカスタマイズすること…

今日は、少し趣向を変えて、ブログの速度向上を行ってみました。

これまでは、中途半端にプラグインを入れてたりしましたが、

今日は、決心を固めて、全体的に対策を打ちました。（と言っても、ある程度、簡単にできる範囲で。ｗ）

  レスポンス向上が必要な理由

サイトのレスポンス向上が必要な主な理由は、主にSEO対策と訪問者が記事を見る前に離脱する事を防ぐためですね。 特に、サイトのレスポンスは、サイトの評価に関わる重要な指標の一つ。 評価を上 げる事で上位表示がされやすくなります（多分ｗｗ）。

レスポンスの調べ方

まず、サイトのレスポンススピードの計測方法ですが、 一般的に、レスポンスの向上には下記のサービスを利用する事が多いようです。

なお、いずれもサーバーや回線の状況により結果がゆらぎますので、複数回試した平均値を見る様にして下さい。

1. PageSpeed Insights

Google…

昨日のカスタマイズで、ヘッダーのタイトルを画像のみにする対応を実施したところ、

ヘッダーがアッサリし過ぎてしまいました。

  そこで、今日はナビゲーションメニューを、少々いじって、見た目を引き締めたいと思います。

  やったこと

今日のカスタマイズは、見た目を引き締めるためだけなので、

手っ取り早くできる所だけ。

ナビゲーションの背景を濃いめに変更。

反面、文字色、区切り線が見えなくなるので、白系に。

マウスカーソルが当たった時に、表示を変える。

TOPの削除（ついでにｗｗｗ）

といった感じです。

スタイルシートとヘッダーのコードを少し触るだけなので、非常に簡単ですね。

  ナビゲーションのデザイン変更

ナビゲーションのデザイン変更は、スタイルシートを少し変更するだけなので、やり方を書くまでも無い程度ですが、一応記載しておきます。

まずは、背景色の変更から。

#navi-in {…

さてさて、昨日は新しいバナーに差し替えましたので、

気分も新たにヘッダー部分のカスタマイズに勤しんでみようかと思います。

  まず、今日やろうと思うのが、タイトルにもある通り、

ヘッダーのタイトルを画像のみにしてみる

です。

  ヘッダー部分の「ぽさ」

ヘッダー部分のStinger3「ぽさ」の一つが、文字タイトル、ディスクリプション、バナー画像の並びですよね。

Stingerブログと差別化するには、ここのカスタマイズは避けて通れないでしょう。。。

  という事で、カスタマイズの方法も色々とあると思いますが、

まずはタイトルを画像だけにしてみようと思います。

  ヘッダーを画像のみにする方法

実は、ヘッダーを画像のみにする方法はオフィシャルサイトに記事があります。

参考：ロゴを画像にしよう

これを参考に、heder.phpを修正します。

  ただ、これだけだと寂しいので、alt属性を追加…