作成者別アーカイブ: miyakawa

concrete5 Not Found Page変更

簡単に文章のみを追加する。

/concrete/single_types 内の「page_not_found.php」を変更

これが元
1、<?php     defined(‘C5_EXECUTE’) or die(“Access Denied.”); ?>
2、<h1><?php    echo t(‘Page Not Found’)?></h1>
3、<?php    echo t(‘No page could be found at this address.’)?>
4、<?php     if (is_object($c)) { ?>
5、    <br/><br/>
6、    <?php     $a = new Area(“Main”); $a->display($c); ?>
7、<?php     } ?>
8、<br/><br/>
9、<a href=”<?php    echo DIR_REL?>/”><?php    echo t(‘Back to Home’)?></a>.

上記をこのように変更

1、<?php     defined(‘C5_EXECUTE’) or die(“Access Denied.”); ?>
2、<h1><?php    echo t(‘Page Not Found’)?></h1>
3、<?php    echo t(‘No page could be found at this address.’)?>
4、<?php  ?>
5、<br/><br/><br/>
6、<p>当サイトは <strong>2012年7月20日にリニューアルオープン</strong>致しました。</p>
7、<p><a href=”<?php echo BASE_URL ?>/”>こちらのトップページ</a>よりアクセスし直して下さい。</p>
8、<p>ブックマークなどでこのページをご覧の方は再度ご登録をお願い致します。 </p>
9、<?php  ?>
10、<?php     if (is_object($c)) { ?>
11、    <br/>
12、    <?php     $a = new Area(“Main”); $a->display($c); ?>
13、<?php     } ?>
14、<br/><br/>
15、<a href=”<?php    echo DIR_REL?>/”><?php    echo t(‘Back to Home’)?></a>.

赤字が追加した部分。(数字、は無視して)
これをアップすればOK。くれぐれも元ファイルはバックアップしておくようにする。

環境バージョン5.4.2.2

レスポンシブ・ウェブデザインのすすめ -Google

昨日Googleからのブログにこんな内容の記事がアップされた。

タイトル「Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」

■要約(Googleより抜粋)
1. レスポンシブ・ウェブデザインを使用しているサイト、すなわち、すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Google の推奨する設定方法となります。
2. すべてのデバイスに対し単一の URL で、ユーザーエージェントに応じてデスクトップ用かモバイル用かなどを判断して動的に異なる HTML と CSS を提供するサイト。
3. モバイル用のサイトとデスクトップ用のサイトを別々に構築しているサイト。

当社が昨年より進めてきたレスポンシブデザイン対応がGoogleも推奨する方法だということは、サイトの企画制作において重要なファクターだ。
確かにレスポンシブデザインでリニューアルしたクライアントさんは検索結果も上がっている。サイトを使う人・見る人の利便性が向上することを重視しているということだと思う。

http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html

 

レスポンシブデザインの構築参考サイト

レスポンシブデザインを勉強するのには、参考になるサイトを徹底的に分析することから始めます。分析して行く中で自分が分りやすく社内でも使いやすいものを選び勉強会を開きスキルを上げて行きます。
沢山ある参考サイトの中でとてもよく出来ていて、テンプレートとして利用もできるサイトです。

http://www.getskeleton.com/

http://foundation.zurb.com/

http://twitter.github.com/bootstrap/

スマートフォンのズーム機能 viewport設定

iPhoneやAndroidのズーム機能を使えるようにする場合のviewportの設定のHTML記述。
<head>にviewport設定を記述します。

<!– 画面をズームできるように設定 –>
<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=yes”>

<!– 画面をズームできないように設定 –>
<meta name=”viewport” content=”width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no” />

Concrete5 C5R
ズームできない
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
ズームできる
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

WordPress 投稿日の「投稿日」を英語にする

 

 

 

 

 

 

 

「functions.php」の564行目あたりを変更

変更前
function twentyeleven_posted_on() {
printf( __( ‘<span>Posted on </span><a href=”%1$s” title=”%2$s” rel=”bookmark”><time datetime=”%3$s” pubdate>%4$s</time></a><span> <span> by </span> <span><a href=”%5$s” title=”%6$s” rel=”author”>%7$s</a></span></span>’, ‘twentyeleven’ ),

変更後
function twentyeleven_posted_on() {
printf( __( ‘<span>Posted : </span><a href=”%1$s” title=”%2$s” rel=”bookmark”><time datetime=”%3$s” pubdate>%4$s</time></a><span> <span> by </span> <span><a href=”%5$s” title=”%6$s” rel=”author”>%7$s</a></span></span>’, ‘twentyeleven’ ),

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

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

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

body, input, textarea {
color: #373737;
font: 14px  “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro W3”, “メイリオ”, Meiryo, “MS Pゴシック”, 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>

これで完了。