Google先生に聞きながらWordPressテーマをカスタマイズすることに挑戦してみました。
ベースにしたテーマはTwenty Eleven。WordPressに関する書籍『ガンガン集客したい人のかんたんWordPress入門』を購入した時に、作者のサイトから子テーマをダウロードできたのでそれをもとにしました。
HTMLやCSSに関する知識がないため、試行錯誤しながら書き換えた部分も少なくないのですが、なんとか自分の理想に近いデザインにすることができました。もちろん、納得できていない表示部分や思いどおりにならない動作部分がまだ残っています。この辺のところは、これからも他の方のサイトなどで勉強しながら改善したいと考えています。
メモとして、カスタマイズした内容ごとに僕が参考にさせていただいたサイトをまとめて紹介しておきます。情報をサイトにアップしてくれた皆さんに感謝します。
プラグインを使わないでSNSボタンを設置する
プラグインを使用すれば簡単にSNSボタンを設置することができますが、自分の思ったとおりのボタンを好みの位置に設置しようとすると逆に面倒になる場合があります。
そこで、調べてみたら、プラグインを使わないでSNSボタンを設置する方法を教えて下さるサイトがたくさんありました。参考にした主なサイトは次のとおりです。
Facebook・Twitterなどソーシャルボタン設置方法まとめ
ブログに必須！はてなブックマーク ボタンをWordPressに設置する手順【プラグイン未使用Ver】
Facebookのいいねボタン（Like Button）を設置する方法。【MT＆WordPress対応】
TwitterやFacebookなどのソーシャルボタンを横に並べて設置する
SNSボタンを縦並びに表示する
個別記事を開いた時、GoogleアドセンスのとなりにSNSボタンが縦に並んでいるサイトがあり、真似してみたくなりました。でも、検索しても、その方法を教えてくれるサイトを見つけられないでいました。検索キーワードの組み合わせを変えながら、何回かチャレンジした後にようやく見つけることができました。参考にした主なサイトは次のとおりです。
[blogger]慣れるとこっちのほうがいいかも？ソーシャルボタンを縦に並べて配置する！
(K) TwitterやFacebookなどのソーシャルボタンを縦に並べて配置する方法
ソーシャルメディアボタンの横並び配置方法（ボックス型・縦型）
引用部分のデザインを変更する
引用文の表示する部分にダブルコーテーションを入れるには、画像をアップロードする必要があると思い込んでいましたが、別の方法があることがわかりました。次のサイトを参考にしながら、画像なしでダブルコーテーションを入れることができました。参考にした主なサイトは次のとおりです。
blockquoteタグをCSSだけで格好良いデザインにする【画像不要】
上部と左端の余白を削除する
画面の小さなiPadやiPhoneなどの端末でブログを表示すると左端の余白が消えずに残り、全体のバランスが悪くなってしまうのが気になりました。なんとかして左端の余白を削除する方法がないのかなあと思って調べてみたらわかりました。タイトル上部の余白も削除する方法もわかったので、こちらも削除しました。参考にした主なサイトは次のとおりです。
余白(margin padding)を削る-WordPress Twenty Elevenカスタマイズ
コメント欄にFacebookを利用する
コメント欄にFacebookを活用しているサイトを見つけました。この方法も調べてみたらわかったので真似して取り入れることにしました。参考にした主なサイトは次のものです。
MovableTypeとWordpressにFacebookコメントを設置する方法。
その他
・HTMLやCSSの意味を調べる
CSSファイルやPHPファイルを書き換える時に、意味がわからない時がありました。その時々に参考にした主なサイトは次のサイトです。
・配色を確認する
ブログの配色を変更する時には色見本を教えてくれるサイトが役立ちました。参考にした主なサイトは次のサイトです。
WEB色見本 原色大辞典 – HTML Color Names
なお、今回行ったカスタマイズのもとになったTwenty Elevenの子テーマは次の書籍を購入することでダウロードできまるようになります。
