普通のサラリーマンのiPhone日記 Rotating Header Image

css & php

(最終更新:2009年12月13日 21:19)

WordPressのcssやphpの一覧になります。頻繁に修正してるので備忘を込めて整理しておきます。バージョンUPをする時には、修正ファイルを必ずバックアップ取っておこう…。という自らへの戒めを込めて(;^ω^)

テーマ(PrimePress)
開く度にトップ画像が切り替わる点。サイドバーの幅が広く使い勝手が良さそうな点。これが気に入って採用しました。ただ、このテーマの作者様のファイル構成(phpやcss等)は、若干マニアックなところもあり、カスタマイズは逆に苦労してます…。

091115b_1

スタイルシート(style.css)の修正箇所
サイト全体のフォントを大きくしました。該当箇所を変更するだけで全体が変わります。こういう細かい部分の場所を探すには、FirefoxのFirebugというAdd-onが最適で、ここかな?と思った場所で要素を調査すれば、HTMLの場所や使ってるCSSの場所が特定できます。ちょ?便利です。

table, caption, tbody, tfoot, thead, tr, th, td 
{margin:0; padding:0; border:0; outline:0;
font-size:100.5%;
vertical-align:baseline; background:transparent;}

iPhone画像を2枚横並びに貼り付けた時にマージンを設定するようにしました。*で始まる部分は、IE用のマージンとしてます。IEだった場合にレイアウトが崩れるので…。

/*-----images*/
.entry-content img{max-width:100%; height:auto;
margin-right: 5px; *margin-right: 0px; }

コメントのフォントサイズを大きくしました。

.commentlist p {margin:1.4545em 5px 1.4545em 0;
font-size:1.2em;
line-height:1.5454; font-family: verdana, 
'Lucida Grande', arial, sans-serif; color:#333;}

投稿日時、筆者を表示する行のマージンをいじりました。

.entry-byline{color:#777; font:italic 1.1em 
'trebuchet ms', sans-serif;
margin-top: 7px; }

リストの左マージンをいじりました。

/*-----lists*/
.entry-content ul, .entry-content ol{
margin:0 0 1.5385em 15px;}

スタイルシート(custom.css)の修正箇所
箇条書きの画像をはてな時代の「レ」にする為に style.cssをいじろうとしたのですが、他のタグも影響を受けそうだったので、custom.cssに関係ある部分だけ追記しました。以下の事前準備としてcustom.cssファイルのある場所にli.gifをアップしました。

.entry-content ul li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(li.gif) no-repeat scroll 0 0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding-left:18px;
line-height:1.5;
margin-bottom 0.2em;}

メインインデックス(index.php)の修正箇所
記事タイトルにスターを付けました。事前にhatena starのプラグインを導入し、はてなIDのkeyをセット、更にタグ設定にh2とentry-titleを指定しておく必要があります。

<h2 class="entry-title">
<a href="<?php the_permalink(); ?>" rel="bookmark" 
title="Permalink to <?php the_title(); ?>">
<?php the_title(); ?></a>
</h2>

投稿日時、筆者の横に閲覧数、はてブボタン、ブクマ数を付けました。the_view()を記載されてるタグが閲覧数になります。事前にWP-PostViewsのプラグインを導入しておく必要があります。はてブボタンは、画像(append.gif)を自分のところに落としておいて指定します。ブクマ数は、まんまコピーでいけます。

<?php edit_post_link('Edit', '[', ']'); ?>
<?php if(function_exists('the_views')) 
{ the_views(); } ?> 
<a href="http://b.hatena.ne.jp/append?
<?php the_permalink(); ?>"><img width="16" height="12" 
title="このエントリーをはてなブックマークに追加" 
alt="このエントリーをはてなブックマークに追加" 
src="http://iphone-diary.com/wp-content/uploads/
2009/11/append.gif"/></a> 
<a href="http://b.hatena.ne.jp/entry/
<?php the_permalink(); ?>"><img 
src="http://b.hatena.ne.jp/entry/image/
<?php the_permalink(); ?>" alt="" /></a>
</div>

投稿日時の書式を変えました。

<span class="entry-date"><abbr class="updated" 
title="<?php the_time('Y-m-d\TH:i:sO'); ?>">
<?php the_time('Y年m月d日 H時i分'); ?></abbr></span>

記事の後ろに関連投稿を付けました。事前にSimilar Postsのプラグインを導入し、関連記事を探す比率等を設定しておく必要があります。

<?php wp_link_pages('before=<p><strong>
' . __('Pages:') . '</strong>&after=</p>'); ?>
<h3>Similar Posts:</h3>
<?php similar_posts(); ?>
</div>

単一記事投稿(single.php)の修正箇所
メインインデックス(index.php)との違いは、記事タイトルをリンクにするか否かくらいです。後は全く一緒にしておいてindex.phpを修正したら、同時にsingle.phpも修正するように運用してます。

記事タイトルにスターを付けました。事前にhatena starのプラグインを導入し、はてなIDのkeyをセット、更にタグ設定にh2とentry-titleを指定しておく必要があります。

<h2 class="entry-title">
<?php the_title(); ?>
<a href="<?php the_permalink(); ?>" rel="bookmark" 
title="Permalink to <?php the_title(); ?>"></a>
</h2>

投稿日時、筆者の横に閲覧数、はてブボタン、ブクマ数を付けました。the_view()を記載されてるタグが閲覧数になります。事前にWP-PostViewsのプラグインを導入しておく必要があります。はてブボタンは、画像(append.gif)を自分のところに落としておいて指定します。ブクマ数は、まんまコピーでいけます。

  • 場所はindex.phpと一緒です。

投稿日時の書式を変えました。

  • 場所はindex.phpと一緒です。

記事の後ろに関連投稿を付けました。事前にSimilar Postsのプラグインを導入し、関連記事を探す比率等を設定しておく必要があります。

  • 場所はindex.phpと一緒です。

コメント欄の修正箇所
メールアドレスが必須なのを外していますが、もしかしたらスパム関係で害が出るとも限らないので、暫く様子見してます。外し方は、MySQLのwp-optionsののrequire_name_emailのフラグを0にすればOKです。

WPtouch(iPhoneテーマ)の修正箇所
WPtouchで使ってるcssやphpは、管理画面では触れないのでFTPでファイルを探して修正する必要があります。「/plugins/wptouch/themes/default」この場所にcssやphpが固まってるので好みにメンテします。

iPhoneでスクリーンショットを2枚並べて表示させるようにしています。WPtouchは頻繁にアップデートされるんですが、style.cssを修正すれば大丈夫な時もあれば、style-compressed.cssを修正しないと駄目な時もあり、良く分からんので、ふたつとも修正することにしました。style-compressed.cssは、style.cssの改行とか空白とかを除いたファイルなんですが、同じ内容のファイルなんで下記と同じように修正すればOKっす。

以下、AppBankさんのWPtouch記事を参考にしています。

.mainentry img, .pageentry img, ol.commentlist li img {
max-width: 100%; height: auto; }
#singlentry img {
width: auto;
max-width: 100% !important;
max-height: 194px !important;
margin-right:10px;
margin-bottom:6px; }

index.phpやsingle.phpもいじってます。タイトル横に閲覧数、はてブボタン、ブクマ数、関連投稿を表示させるようにしました。タグ自体は、先に説明したPrimePressのindex.php等と一緒です。ここまでくれば慣れでいます。

  • タグはPrimePressのタグと一緒。タイトル横に設定してます。

最後、修正したファイルをまとめて列挙しておきます。

  • /themes/primepress/style.css
  • /themes/primepress/index.php
  • /themes/primepress/single.php
  • /plugins/wptouch/themes/default/style.css
  • /plugins/wptouch/themes/default/style-compressed.css
  • /plugins/wptouch/themes/default/index.php
  • /plugins/wptouch/themes/default/single.php

上記は今後も変わるかも知れませんので最新版をサイトページに保持しておくことにしました。css & phpタブになります。

-

タグ: css, php, WordPress

3 Comments

  1. [...] で最新版をサイトページに保持しておくことにしました。php & cssタブになります。 [...]

  2. [...] <追記> この記事を見て頂いた「普通のサラリーマンのiPhone日記」の hiro45jp さんが、「css & php」と言う記事で「タイトルに関して、改行されるのは嫌だったのでJavaScriptを修正して28文字より大きいならば、強制的にタイトルを切るようにしています。」と言う事で修正を教えて頂きました。 私の場合は、サイドバーの幅が狭いので「var strlen = 28;」を「var strlen = 16;」に変更して使わさせて頂いています。 [...]

  3. [...] 普通のサラリーマンのiPhone日記さんが、 [...]

コメントをどうぞ

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>