カテゴリー別アーカイブ: WordPress

WordPress Twitter Bootstrap 1200pxは幅広すぎると思うとき

WordPressのテーマ「Twitter Bootstrap」は、大きなスクリーンで見たときのデフォルトは1200px。ブログとして使おうとしたらちと広いので調整。

htmlとか/wp-content/themes/bootstrap/css/bootstrap.min.css

このファイルの、727行あたりにある「@media (min-width:1200px)」から始まる記述をエスケープすると、でかいスクリーンでも980pxくらい(恐らく正確には979px)の表示になる模様。

横幅の変更、もっといい方法があったら教えてください。
ちなみに私はこの部分をエスケープしました。


/*@media (min-width:1200px){.row{margin-left:-30px;*zoom:1;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} [class*="span"]{float:left;margin-left:30px;} .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px;} .span12{width:1170px;} .span11{width:1070px;} .span10{width:970px;} .span9{width:870px;} .span8{width:770px;} .span7{width:670px;} .span6{width:570px;} .span5{width:470px;} .span4{width:370px;} .span3{width:270px;} .span2{width:170px;} .span1{width:70px;} .offset12{margin-left:1230px;} .offset11{margin-left:1130px;} .offset10{margin-left:1030px;} .offset9{margin-left:930px;} .offset8{margin-left:830px;} .offset7{margin-left:730px;} .offset6{margin-left:630px;} .offset5{margin-left:530px;} .offset4{margin-left:430px;} .offset3{margin-left:330px;} .offset2{margin-left:230px;} .offset1{margin-left:130px;} .row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";} .row-fluid:after{clear:both;} .row-fluid [class*="span"]{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.564102564%;*margin-left:2.510911074638298%;} .row-fluid [class*="span"]:first-child{margin-left:0;} .row-fluid .span12{width:100%;*width:99.94680851063829%;} .row-fluid .span11{width:91.45299145300001%;*width:91.3997999636383%;} .row-fluid .span10{width:82.905982906%;*width:82.8527914166383%;} .row-fluid .span9{width:74.358974359%;*width:74.30578286963829%;} .row-fluid .span8{width:65.81196581200001%;*width:65.7587743226383%;} .row-fluid .span7{width:57.264957265%;*width:57.2117657756383%;} .row-fluid .span6{width:48.717948718%;*width:48.6647572286383%;} .row-fluid .span5{width:40.170940171000005%;*width:40.117748681638304%;} .row-fluid .span4{width:31.623931624%;*width:31.5707401346383%;} .row-fluid .span3{width:23.076923077%;*width:23.0237315876383%;} .row-fluid .span2{width:14.529914530000001%;*width:14.4767230406383%;} .row-fluid .span1{width:5.982905983%;*width:5.929714493638298%;} input,textarea,.uneditable-input{margin-left:0;} input.span12, textarea.span12, .uneditable-input.span12{width:1160px;} input.span11, textarea.span11, .uneditable-input.span11{width:1060px;} input.span10, textarea.span10, .uneditable-input.span10{width:960px;} input.span9, textarea.span9, .uneditable-input.span9{width:860px;} input.span8, textarea.span8, .uneditable-input.span8{width:760px;} input.span7, textarea.span7, .uneditable-input.span7{width:660px;} input.span6, textarea.span6, .uneditable-input.span6{width:560px;} input.span5, textarea.span5, .uneditable-input.span5{width:460px;} input.span4, textarea.span4, .uneditable-input.span4{width:360px;} input.span3, textarea.span3, .uneditable-input.span3{width:260px;} input.span2, textarea.span2, .uneditable-input.span2{width:160px;} input.span1, textarea.span1, .uneditable-input.span1{width:60px;} .thumbnails{margin-left:-30px;} .thumbnails>li{margin-left:30px;} .row-fluid .thumbnails{margin-left:0;}}*/

WordPress バックアップ

WordPressのバックアップについてメモ。
以下の複数通りの方法で随時適時バックアップをとっておくのが望ましい。

● ツール> エクスポートでのバックアップ
● プラグインでのバックアップ
● phpMyAdmin でのバックアップ
● サーバー上のコンテンツのバックアップ(主に /wp-content 以下)

参考
WordPress フォーラム http://ja.forums.wordpress.org/
WordPress のバックアップ http://wpdocs.sourceforge.jp/WordPressのバックアップ

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 便利なエディタ

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

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

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

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

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

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

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

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=”http://www.coralreference.com/wp-content/uploads/2012/02/logo.png” width=”330″ height=”90″ /></a></span></h1>

これで完了。