月別アーカイブ: 2012年2月

WordPress 便利なエディタ

WordPressを使ったブログで、お客様が投稿の文字の大きさを変えられたいとのこと。
標準のエディタではフォント変更ができない仕様らしいのでプラグインを導入。フォントサイズの指定だけでなく、tableやh1、h2などのタグを簡単に入れられるようになるとっても便利なプラグイン。

http://wordpress.org/extend/plugins/tinymce-advanced/

●上記ページでプラグインをダウンロード

●解凍、「tinymce-advanced」というフォルダごと、ブログを運用しているサーバの「/wp-content/plugins」にアップロード

●WordPressの管理画面、「プラグイン」で「tinymce-advanced」を有効化

以上で完了。
今回、なぜか「有効化」を2回クリックしないと有効化されなかったのがちょっと不思議だったけれども無事エディタが使えるようになったのでよしとする。

このエディタにはいわゆる絵文字のようなものも含まれているけれども、例えばfacebookでは全然認識してくれなかったりするので、汎用性は低いものかもしれず、多用は望ましくない可能性あり。

コピーライトの年数を自動で変更する

コピーライトの年数部分に下記スクリプトを入れる。
<script>var nowdate = new Date();document.write(nowdate.getFullYear());</script>

・応用1
Copyright <script>var nowdate = new Date();document.write(nowdate.getFullYear());</script> 会社名 All rights reserved.
Copyright 2012 会社名 All rights reserved.

・応用2
Copyright 1991-<script>var nowdate = new Date();document.write(nowdate.getFullYear());</script> 会社名 All rights reserved.
Copyright 1991-2012 会社名 All rights reserved.

最新の年数が入っていると、ちゃんと管理されているサイトだなぁという印象ですよね。

WordPress 日本語のセットを入れる

日本語表示キレイに見せたいのでよく当社で利用する日本語のセットを記述する。
Global（style.css 300行目あたり）のfontを変更

/* =Global
———————————————– */

body, input, textarea {
color: #373737;
font: 14px  “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro W3”, “メイリオ”, Meiryo, “ＭＳ Ｐゴシック”, Helvetica, Arial, Verdana, sans-serif;
font-weight: 300;
line-height: 1.625;
}

オリジナルは
font: 15px “Helvetica Neue”, Helvetica, Arial, sans-serif;

バージョン3.4.1

WordPress 記事のタイトル文字の色やサイズ変更

トップページも個々の記事ページも「style.css」の中の下記赤文字部分です。

■トップページの記事タイトル部分（730行目あたり）

/* =Content
———————————————– */
.entry-title {
    clear: both;
    color: #222;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5em;
    padding-bottom: .3em;
    padding-top: 15px;
}

オリジナル
clear: both;
color: #222;
font-size: 26px;
font-weight: bold;
line-height: 1.5em;
padding-bottom: .3em;
padding-top: 15px;

■個々の記事ページ（1100行目あたり）

/* Singular content styles for Posts and Pages */

.singular .entry-title {
    color: #000;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5em;
}

オリジナル
color: #000;
font-size: 36px;
font-weight: bold;
line-height: 48px;

バージョン3.4.1

WordPress タイトル文字を任意の画像ロゴに変更しセンター位置へ

以前、文字から画像の変更しましたものをセンター位置に持っていく方法。

style.cssとheader.phpを変更します。

■stye.css

header記述部分に
#site-title-logo {
    width: 330px; /* ロゴの高さ */
    height: 90px;  /* ロゴの横幅 */
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

■header.php

<h1 id=”site-title-logo”><span><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><img src=”https://www.coralreference.com/wp-content/uploads/2012/02/logo.png” width=”330″ height=”90″ /></a></span></h1>

これで完了。

ソースコードにコメント入れる。ソースをコメントアウトにする方法

■HTMLの場合

<!– コメントアウト –>
<!–
コメントを複数行
可能になります
–>

■CSSの場合

/* コメントアウト */
/*
コメントを複数行
可能になります
*/

■PHP、JavaScriptの場合

// この行だけのコメント、コメントアウト
/*
コメントを複数行
可能になります
*/

■PHP、Wordpressの場合

<?php /* ?>
コメントや使用しないコードを消す
<?php */ ?>

WordPress タイトル文字を任意の画像ロゴに変更する

wordpress

style.cssとheader.phpを少し変えてやれば可能。

まず、ロゴの画像（今回はlogo.png）を「メディア」から「新規追加」する。
その時にファイルのURLをコピーしておく。
https://www.coralreference.com/wp-content/uploads/2012/02/logo.png

次に「外観」「テーマの編集」で「style.css」「header.php」を変更する。

■style.css
ヘッダー部分に下記を追加

/* =Header
———————————————– */
#site-title-logo {
width: 330px; /* ロゴの高さ */
height: 90px;  /* ロゴの横幅 */
text-align: left;
margin-top: 40px;  /* ロゴの上スペース */
margin-bottom: 40px;  /* ロゴの下スペース */　　
}

を追加する

■header.php
元
<hgroup>
<h1 id=”site-title”><span><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></span></h1>
<h2 id=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
</hgroup>

変更
<hgroup>
<h1 id=”site-title-logo“><span><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><img src=”https://www.coralreference.com/wp-content/uploads/2012/02/logo.png” width=”330” height=”90” /></a></span></h1>
</hgroup>

wordpress

以上で変更されます。