WPブログ）テーマ選択 ＆ Stinger7のカスタマイズ
ブログ移転に際して、考えたこと、やったこと、などを記録しておこうとおもいます。
今回は「テーマとカスタマイズ」です。
テーマを選ぶ
WPはテーマといわれるテンプレートを使います。有料・無料色々なテーマがあり、ブロガーは自分の好みのテーマをインストールして使います。今回、ピヨママが気になったテーマはこの２つ。
１）Digipressの”Colors" （サイトはこちら）
２）Enjilogさんの”Stinger" （サイトはこちら）
Colorsにひと目ぼれ
一番使いたかったのはColorsでした。シンプルなのにさし色が効いていてすごく素敵。これが気になりだすとこれしか目に入らないくらい気に言っていました。でも、有料ということで、一旦見送りました。１サイトごとに6980円。追加でライセンス購入する場合もあるらしいし、また「WordPressにてサイトを制作する以上、WordPressの機能、操作、またWebサイト制作における最低限の知識は必要となります」と書いてあって使いこなせるか不安だったからです。WPになれて、もっと自分色を出したい時に再考することにしました。
超メジャーなテーマ、Stinger７にしました
結局、インストールしたのはStingerの最新版、Stinger７です。Stingerに出会った時はまだStinger６が最新で、オーナー様が「近々アップデートする！」という宣言をされていましたので、Stinger７のβ版公開を待ち、ダウンロードしました。でも、この”公開直後にダウンロード”は色々困難も伴います。１つはバグの修正、１つはカスタマイズ情報が限られること。（次の章参照）
Stingerは、SEO対策も施されており、プラグインを使わずとも素敵なブログができるように作られています。一方で超メジャーなテーマなので、利用されているブロガーさんはとても多く、ブログを自分のイメージにあわせるには色々カスタマイズが”やりたくなる”テーマなのです。本当、やりたいことが山盛りでした。
Stinger7のカスタマイズ～情報をかき集めながらこんなことをしました
Stingerは超メジャーなテーマで、カスタマイズ情報もたくさん公開されているのですが、どれもこれもStinger３か５に関するもの。公開直後の ７の情報はほぼありませんでした。Stinger3と5と7がどう違うのか、３と５のカスタマイズ情報が使えるのかもわからず、トライ＆エラーを繰り返しました。すごく大変だったけど、Stingerのテンプーレトそのままでは使いたくない、という思いが勝ちました。
で、今のところ、カスタマイズが出来たのはこんな部分（成功したけど使っていないものもあります）
同じ事したいなーっていう方がいらっしゃるかもしれないので、ピヨママが参考にさせていただいたサイトもあげておきます。そのままタグをコピペで完了したものもあれば、他のサイトの情報などをあわせて成功した例もありますので、あくまでもご自身の判断でご利用ください。
子テーマの導入
＠roomnine:結局必要なの？WordPress初心者こそ「子テーマ」を使ってほしい理由を分かりやすく説明するよ
（注：Stinger７の子テーマって何？に答えをくれたサイトです→Stinger7の子テーマはStingerから出ています）
ヘッダー画像の高さ調整（400→200）
Webcraftlog:ヘッダー画像の高さを変更する方法
(注：ロゴ画像を使うことにしたので、ヘッダー画面は消すことにしました）
タイトルが途中で改行されないようにする（＝ヘッダー画像を大きく入れる）
ロゴ画像の挿入（GIMPで自作）と表示サイズの変更（拡大）
micata・STINGER・ AFFINGERの質問フォーラム：Stinger 7 タイトル名が改行されてしまう
Labo２Labo.com:[Stinger5]ブログタイトルをロゴ画像に置き換えるテクニック
(注：Stinger7ではロゴ画像はデフォルトでボタンがついています。サイズ変更の参考にしました）
ｈ２・ｈ３のデザインと色の変更
えけこのくるる：続２）女子ブロガー向けにWPテーマStinger3をカスタマイズしよう
テキストウィジットでリンクコラム作成（今はサイドバーのシンプル化の為ページに変更）
FC2ブログ運営当初でittinさんに教えていただいたタグで作りました
参考記事：インデックス投資女子カテゴリー
サイドバーに自画像と略式プロフィールを追加
yuichi.com ゆういちのノートブック：【Stinger7】右サイドバーでプロフィールをカッコよく表示させる方法
つい数日前に公開されたカスタマイズ情報です。これでプロフィールを作ったので、サイドバーにいれてたウィジット１つ削除できました。
タブにファビコンをいれる
パソコンで見てくださってる方、↑ページの上、タブのタイトルの前に「ピ」ってありますよね？これのことです。
うえぶあしび：Stinger7: ブラウザーのブックマークやタブに独自アイコンをキレイに表示する方法
メニューバーの幅の調整
タイトル画像の長さにあわせてメニューバーが伸びた分、６つのメニューが均等にわけられませんでした。１コラムあたり173pxにしてほぼ均等にしました。
気になるnet：[SThttps://piyo-mama.com/wp-admin/post.php?post=929&action=editINGER７]メニュー幅や高さのカスタマイズ方法
３カラムのフッター作成（覚書）
西沢直木のIT講座：Singer5のフッターにウィジェットを追加する
追加はできたんだけど、色やサイズのカスタマイズでつまづいてしまい、まだ実用にむかって試行錯誤中。
Twitterカード
記事ごとにMeta入れるかたちじゃなく、記事が変わっても反映される形でTwitterカードいれたかったんです。プラグインなしで。どうもOpen Graph Protocolを設定するようなのですが、設定ためのheader.phpを子テーマに移動させるとエラーが出て困っていました。まっていたら、これを解決する情報も公開してくださるブログがありました。その後OGPを設定し、無事完了です。
怪しい物を開発するブログ：Stinger7の子テーマを調整した時にAnalyticsタグではまったこと
うぇぶあしび：2016年版：WordPressでOGPを正しく簡単に設定する方法[プラグイン不使用]
記事下の広告をダブルレクタングル（横並び）に
どちらのクリック率がいいか、というのは気にしていないのですが、ページが下に長くなるのはあまり好きじゃないんです。だから横並びにしたかったのですが、既存の情報は私の手に負えませんでした。でもこの情報なら！！！簡単にできて感激です。
猫又：stinger7の記事下広告をダブルレクタングル(横並び)にする方法
こんなこともやってみたい
やりたい！とおもっているのに、まだまだ出来ないことが多いです。情報が見つけられない。あっても理解できない。プラグインまで含めてカスタマイズしていけたらと思います。
- ロゴ画像・メニュー・記事部分の横幅を広げる（左右の余白をなくしたい）
- PCのメニューをスクロールしても常に表示させたい（すぱいくさんのブログのように）
- サイドバーのカテゴリーの表示順を変えたい
- 「人気の記事」をプロフィールの直下にしたい
- 公開日時は表示しつつ、更新日時を消したい
公開から約1カ月、Stinger7のカスタマイズ情報も出回ってきました。「お！」っと思うものに出会ったらやってみたいと思います。ピヨママブログ、ある日何かが変わっていたら「やったね！」と思ってくださいね。