CSS編集を使ってサイト改造中①

やれやれ、このブログも1週間ぶりになってしまった。別に仕事が取り立てて忙しかったわけでもなく、介護に追われていたわけでもなく、病気していたわけでもない。そう、ちまちまとCSSをいじっていてすっかりブログを書くのを忘れていたからなんです。ハハハハハ。

よりにもよって私がいじっている最中に佳子がアクセスしたらしくて、「あれ? バグってる?」と携帯にメールが来てしまいました。デフォルトの配色がややきつくて、「レンガ造りで緑に囲まれた閑静な図書館」的イメージにしようと、色についてはけっこう考えていたんです。

一応、部分的にれんが色を使っているんですが、佳子からの反応はあまりいいものではなく・・・。「レンガ造りの図書館」というよりも「スーパーマリオの世界」的な配色といわれてしまったorz 「ブロック(メニュー)叩いたらコインとかきのことかが出てきそう」だってさ。真面目にやろうと思っていてもついついポップなイメージになっちゃうのはやっぱり性格なんだろうな。トホホホホ・・・。まあ、いいや。(いい意味で)きのこやコインに負けないようなものが飛び出すサイトにするってことで、前向きに考えましょう!(←切り替えだけは早い)

備忘録もかねて、以下に改造記録をメモします。

1、子テーマを作る

これは前にも書いているんだけど、wp-contentの中にあるthemesというフォルダに適当な名前のフォルダを新しく作る。とりあえずmh-childという名前にした。ここにはmh-magazine-liteというフォルダが存在するが、それと同じ階層に作ることがポイント。

で、そのフォルダの中に以下のようなファイルを作って保存。

/*
Theme Name: mh-child
Template: mh-magazine-lite
/*

困ったことに、半角英数字でスラッシュとアスタリスクを入力すると、ブログが動かなくなってしまう(下書保存で止まる)ので全角で入力しています。まずは適当なエディターソフトを開いて、そこに元になるテーマの情報を書き込む。最低限これ↑だけあればいいらしいんだけど、このテーマのcssには説明やURIが書かれているので、その部分をコピー。そんでもって

@import url(’../mh-magazine-lite/style.css’);

と記入すると、親テーマのスタイルを勝手に読み込んでくれる。ここでもまた半角だとブログが固まる・・・というかアットマーク、カンマ、スラッシュを全角に直したんだけど、まだ「下書を保存しています」が消えてくれない。( )を全角にしてようやくクリアー。やれやれ、ブログに直接コードを書くってけっこう大変だね。本当はsyntaxhighlighterとかを入れてきれいに表示すべきなんだけど・・・つい最近wordpressをアップデートしたばかりで、このバージョンに対応しているのかが分からないので保留。

2、以下のphpファイルをコピーして改造

A、content-none

例の「お探しの○○は~」という文を英語から日本語に、ウィジェットのタイトルを「Search」から検索に変更。そして以下のRecent articles(最新の投稿記事)を表示する部分を削除。

div class=”404-recent-articles home-wide”><?php
$instance = array(‘title’ => __(‘Recent Articles’, ‘mh’), ‘postcount’ => ‘6’, ‘sticky’ => 1);
$args = array(‘before_widget’ => ‘<div class=”sb-widget”>’, ‘after_widget’ => ‘</div>’, ‘before_title’ => ‘<h4 class=”widget-title”>’, ‘after_title’ => ‘</h4>’);
the_widget(‘mh_custom_posts_widget’, $instance , $args); ?>
</div

この部分、costum posts widgetとして引っ張り込まれているので、サムネイル部分まで表示されるんだけど、みんな四角いグレーが表示されるだけでかっこわるい。基本的にブログ記事にはアイキャッチ画像を載せないから、アーカイブとか検索結果にサムネイルつきで表示されるのは非常に困る。そんなわけで以下も修正。

B、loop

インデックスとかアーカイブ、検索結果に表示されるサムネイルを消すために以下を削除。

?php if (has_post_thumbnail()) { the_post_thumbnail(‘loop’); } else { echo ‘<img src=”‘ . get_template_directory_uri() . ‘/images/noimage_174x131.png’ . ‘” alt=”No Picture” />’; }

※もしかしたら上記すべてを取る必要はなくて、

else { echo ‘<img src=”‘ . get_template_directory_uri() . ‘/images/noimage-cp_small.png’ . ‘” alt=”No Picture” />’; }

ここだけ取れば、サムネイル(アイキャッチ画像)ありの場合は表示されるという形式になるのかも。このあたりはアイキャッチ画像なしでグレーの空白が表示されないように、何か特定の画像を表示させてしまうという方法もありそうだわ。あとで検討しましょう。

C、footer

コピーライト表示部分に本サイト名を挿入。

結構長くなったので、残りは次の投稿で。
了子