AfroNamiHeiの箱

style.cssファイルの編集

イメージの周りについている灰色の枠はstyle.cssファイルに宣言されてます。

.post .entry img { background: #fff; padding: 2px; border: solid 10px #e2e2e2; }

ここのプロパティで枠の要素が設定されている。この行を削除することで基本的にはイメージの枠がなくなると考えれる。

border: solid 10px #e2e2e2;

色e2e2e2の太さ10pxの一本線

padding: 2px;

余白2px

borderを削除した場合

paddingとborderを削除した場合
余白のpaddingは2pxなので指定反転で確認しないと分かりずらい。

borderの色を変更してみた。

border: solid 10px #ffb7b7;

色をかえてこんな感じに。

イメージの枠が宣言されている箇所を見つけるまで

Afroがスタイルシートで見つけたい宣言がある場合は、該当するページ（今回なら画像の載っているシングルページなど）のソースを見つめるところから始める。

ブラウザがFirefoxならページの上から右クリックのメニューから「ページのソースを表示」
InternetExplorerなら「ソースの表示」

反転している箇所が気になるタグ。

画像を表示するタグはimgタグなのでimgタグが持っているプロパティを変更すれば・・・ってことになりますが、ChocoThemeのstyle.cssファイルの中にはimgタグがいくつか存在します。

そのいくつかを順に見ていくのもいいですが、さらに絞り込むのに上記画像のもう1つの反転でentryタグがdivボックスで宣言されている。
なので、style.cssファイル内で該当する画像を表示させているプロパティを持っていそうなのはdivタグで宣言されたimgタグ宣言ではないかということになるので

.entry img

っといったことにたどり着きました。

style.cssファイル内でその箇所は

.post .entry img { background: #fff; padding: 2px; border: solid 10px #e2e2e2; }

の1つだけで、ボーダーのスタイルなどを設定するborderプロパティが載っている。

paddingプロパティは領域内の余白の要素（この場合イメージと表示する内側の余白）
borderプロパティは線のスタイル、太さ、色の要素

ということなのでこれらの設定を変更すると探していた画像の枠に変化が起こり、見つけたかった設定にたどり着いたことになります。

他のツールやサービスを使った探し方など

サイトをふらふらしている時に見つけ記憶に残っているのが
外部サービスで適当なULRを入力することで使われているスタイルシートのすべての要素をプルダウンメニューで選択し編こすることができ、疑似的に変更後のホームページの観覧ができるものがありました（サイトの名前、URLは忘れましたが・・・）

また、ブラウザのFirefoxのアドオンでCSSだけでなくhtmlや読み込んでいるスクリプトなどを細かくできるものもあったりする。

Firefoxのアドオン、firebug

他にもサイト解析などで便利なものはあるかもです。

No Comments

Posted in CSS, WordPressテーマ

ChocoThemeのデザイン、投稿記事タイトルのスタイルを統一してみる

21 5月

WordPressのテーマ、ChocoThemeのメインインデックスページでは投稿記事タイトルがh2タグで表示されているが、カテゴリやタグクラウドで表示された時の投稿記事のタイトルはh3タグで表示されている。

スタイルシートからするとデフォルトの状態では見た目の表示はかわらなかったが、なぜ異なるタグで書かれているのかは考えないことにする。
Afroはh3をスタイルシートで変更しているので見た目が変わっている。

ChocoThemeでは、メインインデックス（index.phpファイル）で使われているh2タグを基本として、変更するのはアーカイブ（archive.phpファイル）と検索結果（search.phpファイル）になる。
テーマによっては単一記事の投稿（single.phpファイル）やカテゴリーテンプレート（category.phpファイル）も修正ファイルとして考えるのを忘れずに。

タイトル表示を修正

変更する箇所の見つけ方は、基本的にどんなテーマでもテンプレートタグthe_title()をPHPで呼び出されているだろうし、テンプレートタグthe_contentよりも先に投稿記事タイトルが表示される。

テンプレートタグ – WordPress Codex 日本語版

ChocoThemeのindex.phpファイルで投稿記事タイトルの部分は

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

と、h2タグで表示されている。

archive.phpファイルとsearch.phpファイルでは

<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>

と、h3タグで表示されている。

どんなテーマでもhタグでタイトル表示部分が囲まれていると思うので、この場合h3タグからh2タグに変更するだけで終了になります。

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

テーマによっては<h3>から</h3>までの内容は異なります。

ChocoThemeのようにスタイルシートでh1タグからh6タグぐらいまで同じステータスで宣言されている場合もあるので、自身でスタイルシートを変更していた場合、こういった修正が必要になるテーマがあると思います。
h2タグとh3タグを同じスタイルで扱う場合はファイルの修正は必要なくスタイルシートの方を触るだけでいいとは思います。

2 Comments

Posted in WordPressテーマ

WordPressのChocoTheme、ナビゲーションの表示を日本語にする

01 5月

テーマ、ChocoThemeのナビゲーション部分のOlder EntriesやNewer Entriesを日本語に直してみる。

使われているページはindex.phpファイルとarchive.phpファイル。

たぶんほかのテーマもindex.phpファイルとarchive.phpファイルの編集になると思います。

index.phpファイルとarchive.phpをダウンロード

WordPress管理画面の外観、編集からindex.phpファイルやarchive.phpファイルを直接編集する場合は動作がおかしくなった時のために、ダウンロードかソース全体をメモ帳などに貼り付けるなどしておいたほうがいいです。

WordPressから直接編集する場合のパーミッションは606か646で大丈夫かと。

編集する文字を見つけるには、ブログであらかじめ文字を確認してるといいです。

ChocoThemeの場合は
Older Entries
と
Newer Entries
で、それぞれ過去のページ、最近のページと直すことにします。

index.phpファイル内で該当する文字を検索で探します。
あるいは
next_posts_linkとprevious_posts_linkが前後ページのリンクと位置づけられているテンプレートタグなので、このタグを探してもOKです。
テンプレートタグ参考サイト
テンプレートタグ – WordPress Codex 日本語版

index.phpファイルの編集

52行目からの

<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>

を

<div class="alignleft"><?php next_posts_link('&laquo; 過去のページ') ?></div>
<div class="alignright"><?php previous_posts_link('最近のページ &raquo;') ?></div>

に編集です。
赤文字が変更文字。

archive.phpファイルの編集

archive.phpファイルもindex.phpファイルと同じように
72行目からの

<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>

を

<div class="alignleft"><?php next_posts_link('&laquo; 過去のページ') ?></div>
<div class="alignright"><?php previous_posts_link('最近のページ &raquo;') ?></div>

っと編集。

WordPressのテーマ、WPTP-Chocolateを使っている時も同じような編集で記事を載せてるので参考に。

No Comments

WordPressのChocoThemeで英語を日本語に修正

30 4月

WordPressのテーマをWPTP-ChocolateからChocoThemeに変更したので

ChocoThemeの英語表記になっているコメント欄の部分をWPTP-Chocolateでもやったように日本語に変更してみる。

変更する文字は

Leave a Reply
Name (required)
Mail (will not be published) (required)
Website
Comment

おそらくコメント欄の文字に限らず、ほとんどのテーマで同じようなやり方で日本語の変更ができると思います。

修正したい文字を見つける

ブログにログインしていない状態で、自分でコメント欄を表示させる。

コメント欄で修正したい英語の文字をメモとかする。

ただ、画像として貼り付けられてるテーマが存在するかもしれないです。

その時は画像の差し替えだけで大丈夫なはず。

comments.phpファイルをダウンロード

編集するためにFTPソフトでcomments.phpファイルをダウンロードする。

AfroはWordPress管理画面の外観、編集でコメント (comments.php)のcomments.phpファイルを直接編集しましたが

直接編集する場合もcomments.phpファイルはバックアップしておいたほうがいいです。

ChocoThemeの場合のcomments.phpファイルの場所は
/wp-content/themes/chocothemeディレクトリ
赤の部分がテーマによって変わる。

直接編集する場合のパーミッションは606か646。

comments.phpファイルを修正する

修正する前にcomments.phpファイルはなるべくバックアップしておきましょう。

おそらくほとんどのテーマはcomments.phpファイルを編集するだけでだと思います。

メモしておいた文字を頼りにファイル内で編集する文字を見つける。

注意としてHTMLのクラスやタグの属性、PHPの関数名と間違えないように

class="field"やname="email"
こんなの
<?php echo esc_attr($comment_author); ?>
とかも
<　と　>　で囲まれている文字は対象外なので注意
>　の直後や　<　の直前にあるものが変更したい文字と考えで間違いないです。たぶん。

AfroはChocoThemeで以下のように変更してみた。

13行目

<h3>Leave a Reply</h3>
を
<h3>カキコをどうぞ</h3>

30行目

<label for="author">Name <?php if ($req) echo "(required)"; ?></label>
を
<label for="author">お名前 <?php if ($req) echo "(必要です)"; ?></label>

33行目

<label for="email">Mail (will not be published) <?php if ($req) echo "(required)"; ?></label>
を
<label for="email">あなたのメールアドレス (公開されません) <?php if ($req) echo "(必要です)"; ?></label>

36行目

<label for="url">Website</label>
を
<label for="url">あなたのホームページアドレス</label>

41行目

<label for="comment">Comment</label>
を
<label for="comment">ココにカキコして下さい</label>

No Comments

WordPress › ChocoTheme « Free WordPress Themes

WPTP-Chocolateの英語表記Similiar Topicsを日本語にする

20 4月

WordPressのテーマ、WPTP-Chocolateの英語表記に鳴っている部分で

Similiar Topicsを日本語に修正します。

修正するPHPファイルは単一記事の投稿のsingle.phpファイル。

後半部分にあるSimiliar Topicsを直すだけでOKっぽい。

<?php if ( $posts ) : ?>
<div class="post-related">
<h3>Similiar Topics</h3>
<ul>
<?php foreach ( $posts as $post ) : ?>
<li><a href="<?php the_permalink() ?>" title="<?php echo trim(str_replace("\n"," ",preg_replace('#<[^>]*?>#si','',get_the_excerpt()))) ?>"><?php if ( get_the_title() ){ the_title(); }else{ echo "Untitled"; } ?></a> (<?php the_time('F jS, Y') ?>)</li>
<?php endforeach // $posts as $post ?>

を、Afroは

<?php if ( $posts ) : ?>
<div class="post-related">
<h3>関連記事</h3>
<ul>
<?php foreach ( $posts as $post ) : ?>
<li><a href="<?php the_permalink() ?>" title="<?php echo trim(str_replace("\n"," ",preg_replace('#<[^>]*?>#si','',get_the_excerpt()))) ?>"><?php if ( get_the_title() ){ the_title(); }else{ echo "Untitled"; } ?></a> (<?php the_time('F jS, Y') ?>)</li>
<?php endforeach // $posts as $post ?>

とした。

WPTP-Chocolateではだいたい日本語にできた気もする。

あとやるとすれば、検索でみつからないとか、設定によっては見れなさそうなユーザー登録しないとコメントできないとかかな。

No Comments

Posted in このblogとAfro NamiHei

WordPressのテーマ、ChocoThemeがバージョンアップ

17 4月

ChocoTheme0.08にバージョンがアップしてました。

0.07をダウンロードして試しに使用してみたときはファイルがたらないためかエラーがでて

ダウンロード先を変えてインストールしてましたが、今回は

からダウンロードしたファイルをアップロードでテーマ切り替えができました。

FTPソフトで古いChocoThemeをディレクトリごと削除しアップロード。

No Comments

WordPressのテーマ、ChocoTheme

16 4月

WordPressのテーマでいいのを見つけました。

名前はChocoThemeですが外観は手帳って感じです。

WPTP-Chocolateもそうですが、ChocoThemeもあらかじめいくつかの機能がくっついてたり

あるプラグインを設置する前提で作られてる感じもします。

逆にシンプルなテーマはカスタマイズしやすいようなソースになってたり。

画像が細長いですが

ダウンロードサイトによってはファイルが足らないのかテーマ切り替えができないのもあるので注意。

ChocoThemeテーマのダウンロードサイトは下記から

ChocoTheme

解凍後にChocoフォルダーができその中に3つのフォルダーと1つのインターネットショートカットがあります。

FTPソフトを使ってchocothemeフォルダーを/wp-content/themesディレクトリにアップロード。

ChocoThemeテーマを有効化するとWordPress管理画面のメニューにChoco Optionsができます。

ChocoThemeテーマの設定

設定メニューは2つでGeneralとNavigationがある。

Generalオプション

Background Color（背景の色）
Background Image（背景に画像を使う場合の背景画像ファイル）
Background Repeat（背景画像の配置処理、一枚画像や繰り返しなど）
Header Script（ヘッダー部分に入れるスクリプトソースなど）
Footer Script（フッター部分に入るスクリプトソースなど）

Navigationオプション

Top navigation shows（トップページに表示させるページの指定？）
Exclude Pages（除外するページ）

試さずにChocoThemeテーマの表示を楽しんだだけなのでよくわからず・・・。
それほどややこしいことはないと思うのではぶいてしまいます。

オフィシャルなサイトからダウンロードした場合

下記のサイトはWordPressのオフィシャルサイトですが
WordPress › ChocoTheme « Free WordPress Themes
ここでダウンロードしたファイルを使うと

Warning: include_once(lib/theme-options/theme-options.php) [function.include-once]: failed to open stream: No such file or directory in /usr/local/www/htdocs/afrojapan/public_html/wp-content/themes/chocotheme/functions.php  on line 14

Warning: include_once() [function.include]: Failed opening 'lib/theme-options/theme-options.php' for inclusion (include_path='.:/usr/local/lib/php') in /usr/local/www/htdocs/afrojapan/public_html/wp-content/themes/chocotheme/functions.php on line 14

Fatal error: Class 'wp_option' not found in /usr/local/www/htdocs/afrojapan/public_html/wp-content/themes/chocotheme/options/theme-options.php on line 15

ってエラーが出て使用できない。
警告してるfunctions.phpファイルを見ると存在しないディレクトリのファイルにインクルード。

準備しないとだめなファイルがあるようで

ファイルが足らないようなのでダウンロードのファイルの中身に注意です。

2 Comments

WordPressのテーマ変更

19 2月

Afro的にはデフォルトのテーマのデザインは気に入ってはいるんですが、サイト、記事幅が狭い・・・スタイルをもう少し触りたいけど・・・思うように触れるほど技術がないためフリーなテンプレートを探してこようかと。

そろそろ固定して長く付き合えるテーマを。

WordPressワードプレスで記事の概要をdescriptionに設定する方法 | ブログマスターブログ
 テンプレートタグ – WordPress Codex 日本語版

ほしい要素としては

phpやスタイルシートのソースが分かりやすそう
2カラム、3カラム
画面が広く使われている

っで、見つけてきたのが

Simple Magazine (3 columns) 1.0 : Viktor Persson 作

なんかカレンダーがずれてます。3カラムでよさそうな。

Simple Organization 1.07 : Viktor Persson 作

2カラムですが

WPTP-Chocolate

触れるところがなさそう。すでに出来上がってて、おいしそうです。

これら3つ以上に使ってみたいと感じたのはなかったのでこの中から決める。

そして悩むこと1日。

チョコレート好きなのでChocolateにすることにしました。
デザインが既に決まっていると飽きが早いかもしれなく、すでにこのまま使用してる人もいるかもですが。

ソースを見る限りstyle.cssは分かりやすそうでindex.phpやsingle.phpファイルはどれも中身がtabで飛ばされてなく分かりづらいかも・・・。

テーマ変更前に確認しておきたいのがデフォルトテーマに貼り付けているタグ。

各サイトにタグ取りに行くのも面倒なのでエディターに整理して貼り付けておく。

管理画面の外観からテーマのページに行きWPTP-Chocolateを使用。

blogを確認してみたところレイアウトは崩れてはいないようでウィジェットに貼り付けているカウンター等も動いてるっぽいです。

FC2のサービス：アクセス解析
header.phpファイル

<body>

のすぐ後に追加。

FC2のサービス：拍手
メインインデックスのテンプレート
index.phpファイル

<div class="comment-count">

の直前に追加。

単一記事の投稿
single.phpファイル

<div>
<?php the_content(); ?>
</div>

の後に追加。

アーカイブ
archive.phpファイル

<div>
<div><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div>
</div>
</div>

の直前に追加です。

FC2の拍手管理画面に行き拍手管理設定の拍手送信を無制限にして、影響があってもいいような古い記事で試して上手くいってたので完了です。拍手送信の無制限を戻すのを忘れずに。

参考サイトは以下です

テーマを入れ替えて投稿記事を書いて分かったのが画像を貼り付けた時の画像と記事のレイアウトの関係がデフォルトの時と違う。
画像以下にある記事は画像の横へ回り込んでしまうのである。

それとHTMLモードで記事を書いてもタグが修正されて消えてしまう・・・。

スタイルシートかなにかに手を加えないと思い通りにならないかもしれないです。

あと、ページ上にあるわからない項目があるが徐々に直していくことにします。