「WordPress」カテゴリーアーカイブ

WordPressでフォント変更

2015年10月15日 sikino コメントする

WordPressでフォントを変更したい！

WordPressのテーマはtwentyfourteenとtwentyfifteenを想定しています。
この2つの場合は、
style.cssに

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-family: "Noto Sans Japanese", sans-serif;
}

を記述すればokです。
Webフォントなので、このフォントをインストールしていなくてもウェブページはこのフォントで表示されます。
この場合、フォントをNoto Sans Japaneseに変更します。

Noto Sans Japaneseは個人的にお勧めです。メイリオよりも好きです。

デフォルトのフォントと比較してみます。

個人のパソコンにこのフォント(Noto Sans CJK)をインストールしたい場合は↓のリンクから辿っていってください。
Noto Sans CJK -Google Noto Fonts

Noto Sans JapaneseはNoto Snas CJKの中に入っています。
CJKはChinese, Japanese, Koreaの頭文字らしいです。

WordPress

jetpack、人気の投稿とページのサムネ変更

2015年5月3日 sikino コメントする

Jetpackのwidgetである”人気の投稿とページ”を利用して右側の人気のページを表示させているわけですが、サムネイルが小さいのです。

サムネイルを変更するためにやることは、

テーマのfunctions.phpに追加
cssに追加

です。

functions.phpに追加

How to change the size of the thumbnails in the Top Posts widgetによると、
まず、使っているテーマのfunctions.phpに以下の文を追記します。

function jeherve_custom_thumb_size( $get_image_options ) {
$get_image_options['avatar_size'] = 600;

return $get_image_options;
}
add_filter( 'jetpack_top_posts_widget_image_options', 'jeherve_custom_thumb_size' );

CSSに追加①

次にCSS編集のプラグインに

.widget_top-posts .widgets-list-layout-blavatar {
width: 40%;
max-width: 600px;
}

を追記します。
こうすればサムネイルの大きさが大きくなります。

CSSに追加②

僕だけかもしれませんが、リンクがこんな風に変わってしまいました。

これを解決するためにはCSS編集用のプラグインに

.widgets-list-layout-links {
float: right;
width: 55%;
}

を追記すればいいです。

サムネイル画像を切り取りではなく、縦横比にしたり、サムネイルを横長にしたりしたいと思いましたが、変更方法は分かりません。調べても出てこないです。

WordPress

アイキャッチ画像を横幅いっぱいに広げる

2015年4月5日 sikino コメントする

アイキャッチ画像を画面いっぱいに広げたい！

以前右サイドバーの縮小とメインエリアの拡張によって中央のコンテンツエリアを広げました。
そうしたら弊害が生まれたんです。
エリアを広げることに成功しましたが、アイキャッチ画像がコンテンツエリアの領域いっぱいに広がらなかったんです。

上のアイキャッチ画像中の青線はコンテンツエリアの領域を示しています。

これがモヤモヤしていたので調べて直してみました。
WPのテーマはTwenty fourteenです。

変更するファイルはfunction.phpです。
style.cssではないです。

やること

function.phpファイルの中に、

// Enable support for Post Thumbnails, and declare two sizes.
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 672, 372, true );
add_image_size( 'twentyfourteen-full-width', 1038, 576, true );

という部分があると思います。ここのset_post_thumbnail_size()を変更し、

// Enable support for Post Thumbnails, and declare two sizes.
add_theme_support( 'post-thumbnails' );
//set_post_thumbnail_size( 672, 372, true );
set_post_thumbnail_size( 1038, 519, false );
add_image_size( 'twentyfourteen-full-width', 1038, 576, true );

と記述します。この記述をしたうえで、アイキャッチ画像を再びアップロードすれば横幅いっぱいに広がるようになります。

ここからは補足と関数set_post_thumbnail_sizeの説明です。

補足と関数set_post_thumbnail_sizeの説明

上で何をしたのか、説明をします。
デフォルトの

set_post_thumbnail_size( 672, 372, true );

の意味は、アイキャッチ画像のサイズを
横 672px
縦 372px
の大きさで画像をトリミングする(true)
という意味になっています(テンプレートタグ/the post thumbnail)。

これのせいで強制的に横幅672pxに変更され、幅が開いてしまっていたのです。しかも勝手にトリミングされるので用意した画像通りの出力がされないのです。
これを解決するために変更します。

set_post_thumbnail_size( 1038, 519, false )
としました。これの意味は
アイキャッチ画像のサイズを
横 1038px
縦 519px
の大きさになるまで画像をリサイズする(false)
という意味です。
リサイズといっても縦横比は固定されたままのリサイズになります。
例えば横2000px,縦500pxの画像を用意てアップロードしたら、設定したサイズまで縦、横を満たすよう変更されます。
この場合は縦幅はすでに満たされているため、横幅が1038pxになるまで縮小されるという意味です。

上の条件で横幅いっぱいに表示されるためには、
横：縦 = 2 : 1
よりも横長で、横幅1038px以上の画像ならばOKということです。

参考

複数サイズのサムネイル（アイキャッチ画像）を表示させる方法

WordPress

HTMLで行間をちょっとだけ開ける?

2015年4月2日 sikino コメントする

HTMLで行間を半行開けたい！
そう思ったのが始まりでした。が！
無理らしいです。CSSでやらないといけないみたいです。
まず、通常の改行<br />によって開けると、
———————–
AAA
AAA

AAA

AAA
AAA
———————–
のようにかなりの幅が開いてしまいます。これを
———————–
AAA
AAA
AAA
AAA
AAA
———————–
のように開けます。

ここでやっているのは半行開けるのではなく、行に２倍の広さを持たせて、その中央に文字を書く、ということを行っているのです。

すなわち、
<br /> AAA <br />
によって改行をあけるのではなく、
<span style=”line-height:200%;”>AAA</span>
と書くことです。

イメージとしては

な感じです。

WordPress

エディタの設定(WordPress)

2015年4月2日 sikino コメントする

WordPressのテキストエディタ画面での設定です。
ここでは
HTML Editor Syntax Highlighter
というプラグイン(Version: 1.6.5)を使っていることを想定します。
このエディタでボタンによってhtmlの文が挿入できるのですが、よく使うコマンドがありません。それを追加、削除しようというのが本稿の目的となります。

新しいボタンを追加、いらないボタンを削除、ボタンサイズを変えるには２つのファイルを変更する必要があります。

html-editor-syntax-highlighter/lib/hesh.min.css

のだいたい1700文字目くらいに、

C=function(){if(!r){var e={com:[""],dw:['<span style="displaywidth">',"</span>"],nw:['<span style="normalwidth">',"</span>"],tex:["[latex]","[/latex]"],code:['<code lang="fortran">',"</code>"],li:["<li>","</li>"],ol:["<ol>","</ol>"],ul:["<ul>","</ul>"],img:['<img src="$" alt="','">',"Enter the URL of the image"],del:["<del>","</del>"],link:['<a href="$">',"</a>","Enter the destination URL"],blue:['<span style="color:blue">',"</span>"],red:['<span style="color:red;">',"</span>"],h5:["<h5>","</h5>"],h3:["<h3>","</h3>"],h2:["<h2>","</h2>"],h1:["<h1>","</h1>"],i:["<em>","</em>"],b:["<strong>","</strong>"]}

という部分があります。この部分を追加編集をすることでボタンに反映されます。
上のは変更後になっています。

html-editor-syntax-highlighter/lib/hesh.min.js

の中の5900字あたりに

input.cm_ed_button{display:inline-block!important}

という部分があるかと思います。これを

input.cm_ed_button{width:32px;display:inline-block!important}

のように編集します。
widthを変えることでボタンの幅を変更できます。

上の二つの変更を行うと、

というようなボタンの配置になります。

WordPress

WordPressでgnuplotを使えるようにする

2015年2月15日 sikino コメントする

これは便利！
プラグインを入れることでWordPressでgnuplotが使えます。

使うプラグインは『GNUPlot』というものです。
GNUPlot wordpress plugin v1.1に詳しい説明があります。

プラグイン→新規追加でGNUPlotを導入し、有効化します。
その後サーバーへアクセスし、“wp-content”ディレクトリの中に”cache”という名前のディレクトリを作ります(wp-content/cache)。
これでできるはず。
間違って
wp-content/plugins/gnuplot-wordpress-plugin/
や
wp-content/plugins/
にディレクトリを作らないように注意しましょう。

使う際は
[gplot]ここにコマンド[/gplot]
として書いてあげればokです。
どうやらデータをプロットすることはできないようです。
Responses to “GNUPlot wordpress plugin v1.1”でのやり取りを見ると、

4. aneubau Says:
February 13th, 2009 at 8:41 am

Is it possible to load data from a file on the server with this plugin ?
5. Mohamed Ibrahim Says:
February 13th, 2009 at 11:05 pm

No its not. I run an edited version of GNUPlot. If you found a way, let me know :)

というやり取りがありました。5.で回答しているのがこのプラグインの製作者です。
製作者自体はデータを読み込むことを想定して作っているわけではないが、もしかしたら読み込ませる方法があるのかも。という回答をしています。

また、生成されたgnuplotの画像のデータはディレクトリcache内に残るようなので定期的に消すべきでしょう。
間違って、試しに生成された画像も残るようです。

僕がサーバーの容量を圧迫し始めたら消すので、このページを編集する人は失敗とか気にしないでねミ
また、サイズはset size 0.8,0.5などを用いて小さく変えるほうがいいと思います。
以下は
[gplot]
set size 0.5,0.3
set xr[-3:3]
set yr[-1:1]
plot sin(x)
[/gplot]

とした時の表示です↓

[gplot]
set size 0.5,0.3
set xr[-3:3]
set yr[-1:1]
plot sin(x)
[/gplot]

リーマン面だってこの通り!!
[gplot]
set view 60,240,1,1
set size 0.8,0.5
i={0,1}
set parametric
set isosamples 70
set xlabel “x axis”
set ylabel “y axis”
set zlabel “z axis”
unset sur
set palette defined(0″#00008b”,1″#2ca9e1″,2″#38b48b”,3″#ffff00″,4″#eb6101″,5″#c9171e”)
set ticslevel 0
set pm3d
set pm3d depthorder
set zr[-2.5:2.5]
splot u*cos(v),u*sin(v),real(sqrt(u)*exp(i*0.5*v))
[/gplot]

set view 60,240,1,1
set size 0.8,0.5
i={0,1} #虚数単位iの定義
set parametric #媒介変数を使いますという宣言
set isosamples 70 #描写するときに70点使用します
set xlabel "x axis" #x軸の名前
set ylabel "y axis" #y軸の名前
set zlabel "z axis" #z軸の名前
unset sur #表面の線を見えなくする
set palette defined(0"#00008b",1"#2ca9e1",2"#38b48b",3"#ffff00",4"#eb6101",5"#c9171e")
#カラーマップの変更
set ticslevel 0 #z軸の下をxy平面に一致させる
set pm3d #pm3dを使います
set pm3d depthorder #3dプロット時の陰面処理
set view equal xy #x軸とy軸のメモリ間隔を一致させる
set zr[-2.5:2.5]
splot u*cos(v),u*sin(v),real(sqrt(u)*exp(i*0.5*v))

WordPress

右サイドバーの縮小とメインエリアの拡張

2015年2月12日 sikino コメントする

WordPressのテーマ『twentyfourteen』において、style.cssの11.0 Media Queriesにある↓の部分を変更することで右側のサイドバーの領域を狭めることができます。中央のメインコンテンツエリアを広げることができます。

右側のサイドバーを狭めるのは、下の.content-sidebar{…}だけを変えればいいです。

これを変えるだけではもともとのサイドバー領域の余白部分が増え、サイドバーのコンテンツ領域が狭まるだけです。
中央のメインコンテンツエリアのコンテンツ領域を増やすためには下の.site-content{…}の変更をしたうえで、
サイトをカスタマイズするためのプラグイン『Fourteen Extended』を使用して、
テーマのカスタマイズ→TwentyFourteen Content Options→で474となっている値を874にすればOKです。

@media screen and (min-width: 1008px) {
.search-box-wrapper {
padding-left: 182px;
}

.main-content {
float: left;
}

.site-content {
/*margin-right: 29.04761904%; 変更前*/
margin-right: 15.0%; /*変更後*/
margin-left: 182px;
}

.site-content .entry-header {
margin-top: 0;
}

.site-content .has-post-thumbnail .entry-header {
margin-top: 0;
}

.content-sidebar {
/*margin-left: -29.04761904%; 変更前*/
/*width: 29.04761904%; 変更前*/
margin-left: -20.00%; /*変更後*/
width: 20.00%; /*変更後*/
}

WordPress