2010.04.17
テーマ「koikikukan3」の投稿記事タイトル部のCSSは以下の黒いコードで指定されています。
タイトルの前にアイコンを設置するには青いコード部分を書き込んで「たいとる前の罫線」を以下の様にコメントアウトします。
/* title of entry */
.entry-header {
margin: 15px 0 0; /* 上、左右、下*/
padding-left: 10px; /* たいとる左の空き*/
/*border-left: 3px solid #999; /* たいとる前の罫線*/
color: #444;
font-size: 125%; /* たいとる文字サイズ*/
font-weight: bold; /* たいとる文字スタイル*/
background-image: url("http://画像を設置したディレクトリ/画像名.gif "); /* 画像のURL*/
background-repeat: no-repeat;/* no-repeat */
background-position: left;/* 背景画像の位置 */
}
以上で投稿記事タイトルの前にアイコンを設置する事は出来ましたが、タイトル文字が長く2行になってしまった場合は下の画像の様にアイコンが2行の天地中央に来てしまい不都合です。
という事で「CSSにアイコン設置」は取りやめ(上記コードの青い部分のコードは削除)
index.php、single.php、page.php、archive.phpの4種のテンプレートの投稿記事タイトル部分に以下の青い部分の様にコードを書き込みアイコン表示します。
<h2 class="entry-header" id="post-<?php the_ID(); ?
>"><img src="http://画像を設置したディレクトリ/画像名.gif"
alt="アイコン" height="25" width="25" />
<a href="<?php the_permalink() ?>" rel="bookmark"
title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h2>
各テンプレートにより多少コードが違いますが各テンプレートの<h2>〜</h2>のコードの位置を確認しアイコンのコードを設置して下さい。
この場合、アイコンと記事タイトルの位置関係が揃ってない場合があります。 そんな時は以下のようにCSSの記事タイトル指示部分を以下のように「えんとりーたいとるアイコン 」の青い部分を書き込んで調整して下さい。
/* えんとりーたいとるtitle of entry */
.entry-header {
margin: 0px 0px 0px 0px;/* 15px 0px 0px 0px 本文との間を下げる*/
padding: 0px 0px 0px 0px; /* ボーダーとタイトルの空き*/
}
/* えんとりーたいとるアイコン */
.entry-header img{
margin: 0px 0px -5px 0px;/* アイコンの上下位置 */
padding: 0px 7px 0px 0px;/* アイコンとタイトル間の空き */
}
このようにするとindex.php、single.php、page.php、archive.phpの4種のテンプレートごとに異なるアイコンの表示も可能になります。
当サイトで使用しているアイコンは「
牛飼いとアイコンの部屋」のFreeGraphicsにある「
ぶちもの」にあるアイコンを使用させて頂いています。
2010.04.14
ネットサイトを印刷する場合、必要ない情報(ヘッダー、ナビゲーション、サイドバー、コメント、コメント投稿欄、等)も印刷されてしまいます。
僕の場合は個別ページの本文のみの印刷で十分かと思い印刷用のスタイルシートを用意する事にしました。
使用テーマのstyle.cssをダウンロードしファイル名をprint.cssという名前に変更アップロードします。
ダッシュボード⇨外観⇨テーマの編集 から
右サイドバー、style.cssの上の行にprint.cssが表示されるのでそれをクリックし編集します。
1. 不必要な項目の、classやidに「display: none;」を書き込む。 2. 文字色を黒、背景を白に設定する 3. テーマファイルのheader.phpに以下のコードを書き込む。 私の場合はheader.phpの以下のコード
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”all” />
の下に書き込みました。
<link rel=”stylesheet” type=”text/css” media=”print” href=”<?php bloginfo(’stylesheet_directory’); ?>/print.css” />
4. サイトを表示し印刷プレビューで「display: none;」を書き込んだclassやidが印刷されない様になっているかを確認。
参考:’Bir Design’ 印刷用スタイルシートとプラグイン
2010.04.10
知り合いから当サイト「身延の風」が開かれなくなったとの連絡を受け早速,ググッてみました。
自分でWindowsで確認した所、やはり同じ症状です。しかし
、
、
、
等で確認したところ”Internet Explorer”以外ならばきちんと表示されます。
息子に聞くと「そんなのは10年も前からあるよ!」ということです。
(1)Internet Explorer 7 でエラー メッセージ “Internet Explorer ではこのページは表示できません” が表示される
(2)IE8で表示できないサイトがあります
(3)Internet Explorer 見ることができないサイトがある
(4)Internet Explorer で特定のページが表示できない場合の対処方法 (Windows XP)
取りあえずセキュリティを低レベルにしたところ「身延の風」は開く様になりましたが、まだ情報バーに以下のコメントが表示されます。
※1「セキュリティ保護のため、このサイトによる、このコンピューターへの ActiveX コントロールのインストールが Internet Explorer により阻止されました。オプションを表示するには、ここをクリックしてください。」
※2 「Web ページにより ActiveX コントロールがインストールされようとして、Internet Explorer でブロックされました。ActiveX コントロールをインストールする場合は、情報バー、[インストール] の順にクリックします。ActiveX コントロールはコンピューターに危険をもたらす可能性があるので、ActiveX コントロールをインストールすることに決める前に、その発行元が信頼できることを確認してください。
このコメントを表示されないようにするにはトップに動画を使用しないという事でサイドバーのYOU TUBEを外しました。 次に、お客様に書き込み安いかと設置していた「apeboard」という掲示板スクリプト CGI を外しました。
要するにInternet Explorer はスパムが非常に多いため「個人サイト」にはセキュリティーをきつくしアクセス出来ないようにしている様です。
MAC使いの僕からみると、マイクロソフトはWorld Wodeなインターネットから新しい技術を導入しているサイトには「セキュリティーレベルの事を知らないお客様はアクセス出来なくてよい!」という方向でシェアを守っているように思われます。
ここで繰り返します。全てのサイトにアクセスする必要がありとお考えのお客さまは
、
、
、
等”Internet Explorer”以外のブラウザを一つでもダウンロードしてご利用下さい。(アイコンをクリックしてみて下さい、ダウンロードサイトに入る事が出来ます。)
子供達のように各サイトを見て良いか悪いかの判断が出来ない場合は大手サイトのみが見えれば十分でしょうが、成人にしてみれば「セキュリティーレベル」に勝手にアクセス範囲を決められるのはなんとも”うざったい”と思いますがいかがでしょう?。
それにしてもExplorerは文字が細い、行間がつまりぎみというのは見にくいですね!。
2010.03.18
いくつかのコメントが投稿された場合デフォルトでは上から下へ古いコメントから新しいコメントへと表示され当サイト「コメ ント投稿欄を利用して掲示板を作る。」の様に掲示板の場合等は新しいコメントは上に来て欲しいですね。
ダッシュボード→設定→ディスカッションの「他のコメント設定」で「[新しい]コメントを各ページのトップに表示する」で変更出来るかと考えていましたが当サイトではそれが出来まあせん。
編集画面にある
comments.phpに
<?php foreach ($comments as $comment) : ?>
というコードがありますがこれを
<?php foreach (array_reverse($comments) as $comment) : ?>
に変更する事で新しいコメントを上に表示出来る様になりました。
参考:コメントを昇順/降順で表示
ページメニューのリストはサイドバーかヘッダーに以下のコードで記述されています。
<?php wp_list_pages(‘title_li=’); ?>の上か下の行に
<li><a href=”http://www.example.com”>外部サイト</a></li>
を記述します。
当サイトの場合ページメニューはヘッダーにありますので、そこに上記コードを記述しています。
具体的表示は当サイトのヘッダーナビにある「google翻訳」のような形になります。