【WordPress】導入記録連載 ②全体のデザインを整える

この記事は全4回予定の連載の第二回目です。
 

» 【WordPress】導入記録連載 ①WordPressとの出会い、そしてインストール。木村聡子のだらだらぶろぐ

 
まずは上の記事を読んで下さいねー。
WordPressを簡単インストールしたところで足踏みしてしまった、というところでした。

木村聡子PR 木村はオタクですが本業はプロの歌手・声優です。（Profile＆Vocal） 主な出演作：ディズニー「魔法にかけられて」ジゼル(主役)・「アナと雪の女王」 「美女と野獣2017」・「名探偵コナン～戦慄の楽譜～」千草らら役歌唱 など。 メインのSNSはFacebookで、twitterに転送してます。 Instagram（親バカ写真）もちょこっとやってます。 ---------------------------------------------- 「Welcome Symphony」 CD発売開始！(販売サイト) アナ雪クリストフ役・原慎一郎さんとの命の誕生の奇跡を テーマにしたデュエット曲「life」は必聴です！ 視聴だけでもぜひお願いします♪　→【YouTube】

スポンサーリンク

◆◆テーマを決める◆◆

WordPress(以下、ＷＰ)わけわかんないし、やっぱ楽天ブログでいっかなというオーラが私の毛穴から漂い始めたのですが、歌手なのに声優なのに演劇や音楽やアニメや映画じゃなくて、デジタルマニアとして一部で名を馳せてると思い込んでいる私としては、このまま引き下がるのは悔しい！

そう思い、近所の本屋でＷＰの解説書を買ってきました。
しかも2冊。
だってどれがいいかわかんなかったんだもん。
（しかもその後さらに1冊買い足して3冊になった。結局どれもろくに読んでません。）

WordPress レッスンブック 3.x対応

posted with ヨメレバ

エビスコム ソシム 2010-09-08

Amazon

楽天ブックス

ブックオフ

10日でおぼえる WordPress 入門教室 ［WordPress 3.x対応］

posted with ヨメレバ

さわだえり 翔泳社 2011-05-17

Amazon

楽天ブックス

ブックオフ

WordPressデザインブック3.x対応

posted with ヨメレバ

エビスコム ソシム 2011-09

Amazon

楽天ブックス

ブックオフ

ササッとページをめくったらとにかくＷＰは無料で公開されているテーマ（デザインテンプレート）が無数にあるから好きなの選んじゃいないよ、YOU。
ということは理解できました。

私の希望は以下の通り

• 白っぽい背景
• メイン＋ウィジェットの2カラムで左がメイン記事
• 文字小さめで余白多めのスッキリレイアウト
• トップぺージは各記事のダイジェストをごく短く表示。「続きを読む」で全文表示させるパターン。
• 見た目も重要。かわいいやつ。

数日かけていろいろ見てまわった結果。
Warm-homeテーマに出逢いました。

かわいいのにごちゃごちゃしてなくて理想的！！
ＷＰのテーマに多い男性的で固い雰囲気とも違って、やわらかくて癒し系～♪
癒し系の日記は書かないけどネ！

「こーれーは運命の出会いぃ～♪」　（＠魔法にかけられて「真実の愛のキス」）

ということでこの子を導入することに決定！！

無事、テーマは決まってインストールもできたのですが。
私の希望の「2カラム」では、実はないテーマでした。
3カラムなのね～ん。テーマのプレビューページ見てみて～。

でも、この雰囲気や大まかなシステムがとっても気に入ってまして。
とくにトップページに各記事のタイトル・ダイジェストとともに画像が1枚表示切り込みに差し込まれるように表示されるのがすっごい好き。かわいいー。

で、どーしてもこのテーマ使いたいけど、2カラムじゃなきゃイヤ！改造したい！！
ということで本が3冊になったわけです。
でも全っ然わからん！ （Ｔ Ｔ

ＷＰを動かすプログラムは1つではなく、ページ上部・メイン・右部等のパーツごとのデザインとそれを1ページにまとめるプログラムとの組み合わせでできていて、それがすべて嚙み合わないと、思ったような変更ができません。
それを自分でやるには、スキルがなさすぎました。

で、どうしたか。
究極の方法をとりました。

 「ザ・ひとにやってもらった」

ヨッ！古田社長！！（@do_gugan）

ありがとーございます。ほんと、ありがとーございます。
古田社長とは私が電子書籍の自炊サイトを作ったときに、参考にさせていただいて以来、仲良くさせていただいています。
というか一方的にお願い聞いてもらってます。
ネットでの出会いって大切ぅ～。

今回はテーマのデザインの制御プログラムだけはなく、ブログタイトルすぐ下の棚みたいな画像もみょーんと長くしてもらって、ツイッターやFaceBookのチャットで会話しながら私の好みのレイアウトに直してもらいました。
数時間というか半日というか一日というか、長い時間お付き合いいただきまして、厚く御礼申し上げる次第でございますｍ(＿)ｍ

で、あとは細かいところは、出来る限り自分でも本読んだりネットのスタイルシートやHTMLの解説ページ見ながら試行錯誤で何日も徹夜しつつ古田さんのお助けもいただきながら、いろいろいろいろ直しました！

全部の直し方をタグまで書いたらエラいことになっちゃうので、何を直したかの一覧だけ。

• 3カラムを2カラムに（棚の長さを伸ばす）
• メインの記事の幅を広く・余白を少し多めに
• トップページ各記事の写真が縦横の縮尺を勝手に変えちゃうので縦横比を固定に
• 日付・カテゴリ・タグの表記を日本語に変更（投稿者の表記などのいらない情報は削除）
• 記事タイトルとリンクが目立たなかったので大きさと色を変更
  （トップページの記事一覧のコメント数もピンクになっちゃったのでそれだけもどす）
• 右側ウィジェットのリンク部にマウスオーバーで太字になるのを解除
• 記事内画像の文字まわり設定を変更
• 右カラムウィジェット内の文字・画像の位置をセンタリングに調整

たぶん、全体デザインの調整はこんな感じだったと思います。
けっこう直したなぁ。

次回からはいよいよ細か～い書式デザインを決めて行きます。

－－－－－連載第二回・完－－－－－