りんろぐ。

女子でも分かるぷちまにあっく話。

Wordpress テーマカスタマイズ

WordPress無料テーマStinger3を導入しました!今までのテーマとの変更点と躓いた点。

2013/09/09

Neska posant el perfil bo
photo credit: PCB75 via photopin cc

WordPressの無料テーマ”Stinger”シリーズがお気に入りの凛(@rin_wan)です。先日、最新作”Stinger3″が公開されたので当Blogりんろぐ。にも導入してみました!

導入を検討されている方もいるようなので、今までとの主な変更点と導入時に素人が躓いた部分をご紹介しまーすヾ(o´∀`o)ノ



Stinger導入について

りんろぐ。は7月にBlogのテーマを”Stinger”に変更し、2ヶ月経ちますが私はこのテーマがお気に入りです( ●´艸`)

巷ではアクセスが○倍になった、アフェリエイト売上が○倍になった!!という声があるようですが、私は難しい事はよく分かりませんごめんなさい!

もちろん嬉しい変化はありますが、テーマだけの原因だと特定するような能力を持ちあわせていない残念な子です_(:3 」∠)_

また、最近”Stinger”に変更する人が増えたので、似たようなテーマになるのはどうなの?という声もあるようですが…私は特に気にしてません。

だってりんろぐ。はわんこ風なので特に問題ないんですよー@ ‘ェ’ @あ、幸せですねってよく言われますw

意見は色々あると思いますが、個人的には初心者さんにとってテーマのカスタマイズを覚えるのに最適なテーマだと思っています。作りも丁寧だしコードに解説も豊富!!

さらに周りにStingerを使っている人が多いので、質問しやすい!そしてカスタマイズのパターンを見て勉強しやすい!!最高の環境だと思いますよー!

初心者さんは、まずは情報が沢山あるテーマで方法やパターンを覚えてから自作テーマや他のテーマを試すのをオススメします♪

最新作”Stinger3″導入

さて、そんなStingerは先日最新版である”Stinger3″が公開されました:*:・(*´ω`pq゛

中には導入するとページが真っ白になった…orzなんて方もチラホラ。導入前は必ずこちらの注意点を確認してプラグインが競合してないか確認を!!

いきなり本番公開は怖い…という方は先日公開したこちらの記事で紹介した「Theme Test Drive」というプラグインを使ってみるのをオススメします♪
WordPressで愛用しているプラグイン11個とお別れしたプラグイン6個。

既にStinger2を導入していて、差分を変更するのが面倒くさい…という方はこちらの記事で紹介したテキストエディタの比較機能が便利ですよー!
WordPressテーマのカスタマイズをする時はテキストエディタの比較機能が便利!

あ!りんろぐ。はStinger3を色々とカスタマイズしているので、Stinger3を導入したからといってりんろぐ。風になるわけではないのでご注意下さーい!

りんろぐ。の変更点

今回りんろぐ。は少しですが前回とは変更した所がありますのでご紹介しておきます♪

スマートフォン版メニュー

スマートフォン版のりんろぐ。では画面右上がメニューです。

今回はさらにメニューが分かりやすくなりました!

この右上の黒い「りんろぐ。Menu」をタップするとこんなメニューが出てくるようになってます。

何か検索したい時やりんろぐ。で人気のカテゴリを読みたい時は使ってみて下さいヾ(●´ω `●)ノ

肉球アイコン

今回のイチオシはこちら!!!

肉球アイコンがつきました〜ヾ(*´∀`*)ノキャッキャ

前々から肉球アイコンつけたかったのですが、ようやく実現しました♪

今回お世話になったのはこちらのピクトアイコン集。数が豊富で色々なカテゴリが揃ってるのが素敵です( ´艸`)

各種SNS

今回、少しSNSの配置を変えました。

まずはスクロールすると後を着いて来るSNSボックスですが、今回はPocketのみに絞りました。

なぜなら私が使いたいから(*`・ω・)ゞっていうのは半分冗談で、りんろぐ。ではPocketを使って下さる方が意外と多いのでその方々向けです( ´艸`)

アイコン1つなので、スクロールに着いて来ても邪魔じゃない。これ最大のポイントですヾ(●´ω `●)ノ

それからTwitterアイコン類は記事の一番下に配置しました。読み終わってからシェアする事が多いと聞いたのでタイトル下は外しました。

いやいや、上もめっちゃ愛用してたし!!!という方は凛(@rin_wan)まで教えて下さい!すぐ戻しますw

今回からGoogle+も付けました。あんまり私は使ってないのでアレなのですが…使ってる方、気が向いたらシェアしてみて下さい(* ´ ω ` *)

りんろぐ。の楽しみ方

りんろぐ。の記事が気に入っていただいた方にご紹介しているりんろぐ。の楽しみ方のコーナー!

今までは記事のすぐ後ろでしたが、今回は実験的に関連記事と新着記事の間に挟んでみました。

あれ?そんなコーナーあったの?という方、ぜひスクロールしてみて下さいーヾ(●´ω `●)ノ

導入時、躓いた点

今回Stinger3を導入するにあたり、躓いた部分が少しあったので記録しておきます。同じような点で気になる方がいるかも。

文字化け

なぜかダッシュボードのテーマ説明、プラグインなどが文字化けしています。まだこれは改善してませんが…とりあえずは使えてるので問題ないですw

今回Stinger3ではPC用とは別にスマートフォン用のGoogle Adsenseを設定する事が可能になりました。

ダッシュボード内「外観」>ウィジットと進むと一番下「Google??????width300」と書いてある部分があります。ここがスマホ用のGoogle Adsense登録エリアですよー!

Google Adsenseで300サイズの広告を作成しておいて、ここにテキストウィジットをドラッグ。テキストエリアに広告コードを挿入すればOKです!

関連記事/新着記事タイトル

個別記事を閲覧した時に、下の方に関連記事や新着記事が並んでます。

iPhoneから見た時にその中の数個だけタイトルの一部、またはアイキャッチの隣に空白が挿入されるという謎の現象が発生(´・ω・`)

色々と皆様のお知恵を拝借した所、どうやらタイトルに含まれた英単語の部分が幅を圧迫してズレが生じている模様。根本原因としては何かのプラグインが邪魔をしている可能性があるようですがまだ特定出来ていませんorz

取り急ぎの応急処置は出来たのでメモしておきます!

編集するのはsmart.cssですよー!デフォルトだと892行あたりにこんなコードがあるはずなので探して下さい!

#container #wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .saisin {
background-color: #FFF;
font-size: 20px;
line-height: 30px;
margin: 0px;

padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

この「font-size: 20px;」を「17px」ぐらいに小さくすると、とりあえず空白が消えます。

今回関係があるのは「#topnews」だけなので、きっと他の方法がある予感。CSSが分かるベテランの方、こんな方法がスマートなのになーと哀れに思ったら凛(@rin_wan)までご教授下さい♪

凛的まとめ

・おニューな”Stinger3″!
・色々可愛くなりました!!
・謎は残るものの、とりあえず使えてますw

夜中に残念なぐらいタグがズレて戻らなくなってやり直したのもいい勉強になりました…( ꒪⌓꒪)w

サイドバーにいるはずの子達が真ん中の下に入り込んでる!!とか、一番下にあるはずのものがサイドバーに入り込んでる!!といった現象は必要なタグを消したから起こるらしい怪奇現象です…( ꒪⌓꒪)

こういう時ベテランさんだったらなー。・゚・(ノ∀`)・゚・。なんて思いながら1からやり直す勇気も必要ですよwま、色々ありますが少しずつでもカスタマイズ楽しんでいきましょーヾ(o´∀`o)ノ

最近いくつかStinger関連のご質問もいただいていますので、近いうちにまた情報共有しまーす!

こんなカスタマイズもあるよー!という情報がございましたら凛(@rin_wan)まで教えてやって下さい(*´ω`*)

スポンサードリンク

スポンサードリンク

CATEGORIES & TAGS

Wordpress, テーマカスタマイズ,

Author:

iPhoneアプリ/語学学習/間取り図/ガジェットが大好きです!手帳と宇宙画像が最近の癒しです。WorkFlowyが好きでスマホから操作ができるアプリHandyFlowyとMemoFlowy絶賛オススメ中♡

スポンサードリンク