AfroNamiHeiの箱

[ CSS ] pre でも改行を生かしたまま折り返す | Bowz::Notebook

オンラインCSSエディタたぬきのしっぽ

オンラインでCSSが編集できる・・・編集するだけならオンラインじゃなくてもソフトで可能です。

便利と言うところは視覚的によく、独自のセレクタも認識して編集できる点です。

編集したいCSSが使われているページのURLを入力するとCGIで呼ばれた対象のページとカスタマイズするためのページが開き編集したいセレクタを選び編集するとCGIで呼び出されたページに反映されるのでけっこう手軽に使えます。

これがあれば自分の好きなようにCSSをカスタマイズできそうです。

さらにサイトをうろうろしてるとpreタグに関していくつかのサイトを発見。

preタグでやりたかったことはスクロールバーの表示を無くし枠線やバックグラウンドカラーなどで飾りたいって感じです。

スクロールバーを無くすと文字がはみ出してしまうわけですが

スクロールを無くすと記事がはみ出す

はみ出さない方法がソースで載っていました。

ブラウザ依存でもあるようです。

また、CSSを編集する際の引用、参考サイトは以下です

hail2u.net – Weblog – pre要素へのスタイル指定
 preタグスタイルいろいろ CSS – Knowledge Database IT
[ CSS ] pre でも改行を生かしたまま折り返す | Bowz::Notebook

っで、AfroがWPTP-Chocolateのスタイルシートにあてたソースは

pre {
margin: 0px;
padding: 5px;
border-width: 2px 2px 2px 10px;
border-style: dashed dashed dashed solid;
border-color: rgb(204, 204, 204);
line-height: 1.3em; background-color: rgb(221, 221, 221);
color: rgb(0, 0, 0);
font-size: 12px;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7 */
white-space: pre-wrap;      /* CSS3 */
word-wrap: break-word;      /* IE 5.5+ */
}

です。

なかなかいいかもです。

はみ出しもなくなる

はみ出しはブラウザ依存のようなので

white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7 */
white-space: pre-wrap;      /* CSS3 */
word-wrap: break-word;      /* IE 5.5+ */

となるようです。

CSSファイルを編集したついでに1度は編集した投稿内の文字の大きさも・・・ブログを引越ししてからほったらかしだった文字の大きさ。

.post-contentのfont-sizeを13pxとした。

No Comments

WordPressの横型カレンダープラグイン – その2

09 3月

横型のカレンダー紹介でHorizontalCalendarを設置しましたが前回の投稿のやり方はindex.phpにソースを追加するやり方をしたのでソースが書き込まれてなかったカテゴリーやアーカイブなど別のページに飛べば当然表示されなくなる。

AfroNamiHeiの箱 : WordPressの横型カレンダープラグイン

関連するphpファイル全部を編集すればいいだけですが面倒のもあってプラグイン配布元がやってる通りやっぱりheader.phpファイルを編集し反映させてみます。

横型カレンダープラグイン for WordPress(WP2.3/2.5対応版) – The blog of H.Fujimoto

HorizontalCalendar配布サイトの設置方法はWordPressの標準テンプレートを例に説明してます。

標準のテンプレートだとheader.phpファイルの最後の方に追加すれば問題なく表示されますがWPTP-Chocolateテーマで追加するだけだと・・・。

背景画像に溶け込んで文字が見え難かったのでカレンダー部分は指定で反転させてます。

themesディレクトリにあるwptp-chocolateディレクトリのheader.phpにソースを追加です。

Afroはheader.phpファイルの最後にある/divタグの後ろに追加です。

スタイルシートはまだ使ってない状態だと文字もみえにくくヘッダーとボディ部分が分断されてて崩れてしまう。

これを修正するにはカレンダーにもボディと同じ画像を使いたい。
ボディ内の記事で使われてるdivタグのIDはcontentっぽいので使われてるソースをそのまま使ってみます。

IDのcontentの見つけ方はブログを表示してマウスの右クリックのメニューから「ソースを表示する」で見つけることができます。

あ、ちなみにスタイルシートはプラグインサイトで紹介されてるコードをそのまま使い直してます。

#wp-calendar-horizontal {
float: left;
width: 922px;
background: url(images/content.jpg) repeat-y;
position: relative;
margin : 0;
padding : 3px 0;
text-align : center;
}

赤い部分が追加ソース。

上手く画像がハマッたので後は位置と文字の色ぐらい。

フォントや色で似合いそうなものを・・・

Afroは以下のようにスタイルシートを編集。

themesディレクトリにあるwptp-chocolateディレクトリのstyle.cssファイルの一番最後に追加。

#wp-calendar-horizontal {
float: left;
width: 922px;
background: url(images/content.jpg) repeat-y;
position: relative;
margin : 0;
padding : 3px 0;
font-family: Comic Sans MS, Impact, sans-serif;
text-align : center;
font-size: 18px;
}
#wp-calendar-horizontal a:hover {
color : #ffffff;
text-decoration : underline overline;
background-color : #393328;
}
#wp-calendar-horizontal .saturday,
#wp-calendar-horizontal .saturday a {
color : #0000ff;
}
#wp-calendar-horizontal .sunday,
#wp-calendar-horizontal .sunday a {
color : #ff0000;
}
#today {
background-color : #debb87;
border : 1px solid #ff9900;
}
#wp-calendar-horizontal a:link {
background: #f3f3f3;
color: #666666;
}

後は徐々に少しずつ直していくことにする。

前回の投稿ですでにスタイルシートを編集してる人は注意

引用、参考サイトは以下です

横型カレンダープラグイン for WordPress(WP2.3/2.5対応版) – The blog of H.Fujimoto

No Comments

Posted in WordPressプラグイン, このblogとAfro NamiHei

WordPressの横型カレンダープラグイン

05 3月

ブログのカレンダーで見かけるのは7×4、5のマスになったタイプ。

たまに見かけるカレンダータイプで横型や縦型がWordPressのプラグインでないか探して見ました。

それが見つかればサイドバーの節約にもなるし。

デザイン的に合うならそれを使いたいと・・・。

No Comments

Posted in WordPressプラグイン, このblogとAfro NamiHei

外部サービスのあし＠を設置

03 3月

3月2日にあし＠が数時間のメンテナンスダウンしてました。

あし＠とはコミュニティツールの1つでブログに貼っておくと訪れたあし＠ユーザーの最新の履歴がわかるといったものです。

観覧者からもこの履歴は見れるのでこういったツールはアクセスアップには結構威力を発揮します。
また、簡単なアクセス解析も付いていたり今回でRSSに対応するようになったりと便利な機能もありおすすめなさービスの１つ。

No Comments

Posted in このblogとAfro NamiHei, 外部サービス

WordPress – WPTP-Chocolateのコメント欄の英語を日本語に

23 2月

WPTP-Chocolateのコメント欄を日本語に直します。
日本語にしないと見づらいし。
なるべく日本語に直していきたいと思ってたのですぐに変えれそうなコメント欄を編集します。

編集するファイルはcomments.phpです。

本来のWPTP-Chocolateは

変更場所は
NO USER COMMENTED IN THIS POST
Leave A Reply
Username:
Email Address :
Website:
Leave your thought here:
の6箇所。

ソースを見るとNO USER COMMENTED IN THIS POSTはコメントされた人数によって3つのメッセージに変化するようです。

<h5><?php comments_number('NO USER', 'ONE USER', '% USER' );?> COMMENTED IN THIS POST</h5><div class="subscribes">Subscribes to the post <?php comments_rss_link('Comment Rss'); ?> or Leave A <a href="<?php trackback_url() ?>">Trackback</a></div>

コメントが無ければNO USER、コメントが1人ならONE USERが使われそれ以上になると% USERになるみたいです。
% USERの%はおそらくコメントの人数が入る。

なので考えた文書によっては<?php comments_number(‘NO USER’, ‘ONE USER’, ‘% USER’ );?>とCOMMENTED IN THIS POSTをひっくり返す必要がありそうです。

っで修正したソースが

<h5>この記事のコメント<?php comments_number('はありません', 'に1人のカキコあります', 'に % 人のカキコあります' );?></h5>
<div class="subscribes">Subscribes to the post <?php comments_rss_link('Comment Rss'); ?> or Leave A <a href="<?php trackback_url() ?>">Trackback</a></div>

です。

次に入力欄の文字を日本語に

1.

編集するファイルは同じくcomments.phpで入力欄はソースの下の方にあります。

Leave A Replyをコメントを下さいみたいな文書に。

<h5>Leave A Reply</h5>
<div class="comment-separate"></div>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="comment-fox">

2.

Username:、Email Address :、Website:はそれぞれ名前、メール、ウェブサイトURL。

<?php if (!$user_ID) : ?>
Username:
<p><input name="author" type="text" class="t-box" value="<?php echo $comment_author; ?>" /></p>
Email Address :
<p><input name="email" type="text" class="t-box" value="<?php echo $comment_author_email; ?>" /></p>
Website:
<p><input name="url" type="text" class="t-box" value="<?php echo $comment_author_url; ?>" /></p>
<?php endif; ?>

3.

Leave your thought here:はこの欄に書き込んでくださいみたいな。

Leave your thought here:
<p><textarea name="comment" cols="50%" rows="8" id="comment-area"></textarea></p>
<p><input name="submit" type="image" value="Submit" src="<?php bloginfo('stylesheet_directory'); ?>/images/com-button.gif" alt="post my comment" /><input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p>

1.

変更後のソースは

<h5>カキコをどうぞ</h5>
<div class="comment-separate"></div>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="comment-fox">

2.

文字は好きなように

<?php if (!$user_ID) : ?>
お名前 :
<p><input name="author" type="text" class="t-box" value="<?php echo $comment_author; ?>" /></p>
あなたのメールアドレス :
<p><input name="email" type="text" class="t-box" value="<?php echo $comment_author_email; ?>" /></p>
あなたのホームページ :
<p><input name="url" type="text" class="t-box" value="<?php echo $comment_author_url; ?>" /></p>
<?php endif; ?>

3.

コメントフォーム

ココにカキコして下さい :
<p><textarea name="comment" cols="50%" rows="8" id="comment-area"></textarea></p>
<p><input name="submit" type="image" value="Submit" src="<?php bloginfo('stylesheet_directory'); ?>/images/com-button.gif" alt="post my comment" /><input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p>

とそれぞれ変更しました。

っで日本語にされたコメント欄

コメントが1人の場合

コメントが2人以上の場合

これでコメントはだいたいOKだと思います。

RSSとトラックバックも変えようかと思ったんですがいいかなと思い。

No Comments

WordPress – WPTP-Chocolateのコメントページにトラックバック表示

23 2月

テーマを変更してから直したいところがいくつかある。文字の大きさや英語表記など。
少しずつでもすすめて結果を書き残しておこうと思います。

デフォルトの時にもやったコメントページにトラックバックをフォームに表示させる。

これを“WPTP-Chocolate”にも適用します。

WordPressでTrackback URLのボックスを表示 | Tech de Go
WordPressでトラックバックURLを表示する – blog.yuco.net

外観でテーマの編集をするファイルはcomments.phpです。

<h5><?php comments_number('NO USER', 'ONE USER', '% USER' );?> COMMENTED IN THIS POST</h5><div class="subscribes">Subscribes to the post <?php comments_rss_link('Comment Rss'); ?> or Leave A <a href="<?php trackback_url() ?>">Trackback</a></div>

と

<div class="post-block"></div>

の間に

<h4>トラックバックURL</h4>
<div><input onfocus="this.select()" readonly="readonly" rows=1 size="100%" value="<?php trackback_url() ?>"></div>

を追加します。
h4タグのトラックバックURLの文字やinputタグのsize=”100%”などは好みに変えます。

トラックバックURL

参考サイト

1 Comment

WordPressのテーマWPTP-Chocolateのスタイルシート編集で文字の大きさとか

22 2月

WPTP-Chocolateテーマを使っていて早いとこ編集したいと思っていたのが文字の大きさと<code>タグでした。

投稿の文字の大きさが微妙に小さく感じていて「これって目が疲れそう・・・」
<code>タグは記事内でこれはプログラムのソースですってのを表現する時に使いますがこれもまた目が痛くなるような・・・。

スタイルシートを触ればすぐ直るだろう的な感じでさっそくやってみます。

編集するstyle.cssファイルです。このファイルを触るためにどこの定義を変更すればいいか調べます。
Afroのやり方としては

自分のblogで右クリックメニューからページのソースを表示させます。
そのページの記事の最初の文書をソースから検索します。
直前に使われているクラスやIDを見つける。

そのページの最初のほうの文書

このページで右クリックのメニューからソースを表示する。

そのページの表示したソース

ソースの中で同じ文書を見つける

アクセス解析タグを追加する時に気づいたのがの前に<div class=”post-content”>がある。
これがこの記事のスタイルを決定している定義文でクラスのpost-contentをstyle.cssから探すことになる。

このやり方が普通なのかどうかわからないですが。

<code>タグもこの方法で見つけるとクラスpost-content codeが司っていることが分かる。
マウスを重ねると反転するように変わるのはクラスpost-content code:hoverが表現を決定している。

style.cssからpost-contentを見つける

外見から編集に行きstyle.cssを開き見つけると

.post-content {
margin: 0px;
padding: 0px 0px 2em;
float: left;
width: 99%;
font-size: 11px;
line-height: 20px;
color: #2C281F;
}

となっている。触るのは文字の大きさなのでfont-sizeの値である11pxを変更する。
Afroは12pxで様子を見ることにした。

そのすぐ下のほうに

.post-content code {
font-family: Calibri, Tahoma, "Trebuchet MS";
font-size: 13px;
color: #FFFFFF;
background: #534A3B;
border-right: 5px solid #000000;
border-left: 5px solid #000000;
}

を見つけることができる。
文字の色ではなくて後ろの色を変更したいのでbackgroundの値である#534A3Bを変更。
Afroは#a89f8fをした。

マウスを重ねた時のpost-content code:hoverの変更は今回はしていない。

これで保存して終了です。

1 Comment

WordPress – WPTP-Chocolateの編集

21 2月

アクセス解析タグを追加する時に気づいたのが。

header.phpファイルをみるとmeta情報が埋ってません。blogからソースを見ても同じです。
SEO的にも埋めておいた方がいいとのことで。

header.phpファイル

<meta name="description" content="" />

を

<?php if ( is_single() ) { // 単独記事ページの場合 ?>
<?php if ($post->post_excerpt){ ?>
<meta name="description" content="<?php bloginfo('description'); ?><?php wp_title(' : '); ?> : <? echo $post->post_excerpt; ?>" />
<?php } else {
$summary = strip_tags($post->post_content);
$summary = str_replace("n", "", $summary);
$summary = mb_substr($summary, 0, 80). "…"; ?>
<meta name="description" content="<?php bloginfo('description'); ?><?php wp_title(' : '); ?> : <?php echo $summary; ?>" />
<?php } ?>
<?php } else { // 単独記事ページ以外の場合 ?>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<? } ?>

に変更。

それと、キーワードもいくつか入れておきます。
これはheader.phpファイルに直接書き込みました。

<meta name="keywords" content="キーワード,キーワード,キーワード" />

のキーワードの部分を好きにいれます。

まだまだ手を付けたいところがありますが、とりあえずここまで。

No Comments

Posted in WordPressSEO対策, WordPressテーマ, このblogとAfro NamiHei

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モードで記事を書いてもタグが修正されて消えてしまう・・・。

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

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