トンマナ

昨日「トンマナ」と書いてしまいました。

トンマナとはトーン&マナーです。

サイトなどの広告やデザインや制作において
雰囲気やコンセプトに一貫性を持たせることを意味します。

一人称で英語なら「I」でも日本語だと

オラ  = 悟空
オレ様 = ジャイアン 
拙者  = 忍者ハットリくん

一人称だけでトンマナ決まります。ブログもトンマナありますし、
プログラムもある程度あります。そんな専門用語もどんどん書いていきます。

来週。

slickでスライダー画像部分とテキストの切り離し

slickでスライダー画像部分とテキストの切り離す方法です。

スライダー部分は単純な画像スライドで、その画像に対するテキストなどはフェードインで表示させたい場合など、
表示のさせ方は別々で連動させたい場合などに使えます。

slickGoToで指定したスライドの番号に飛ばすことができます。
これを利用して、例えば3番目に飛ばしたい場合は下記のようになります。

そこで連動させたい要素の数を「var index = $thumb.index(this);」で取得し
前の記述の「3」のところに「index」を入れて下記のようにします。

■HTML

■JS

カスタムフィールドの値で投稿一覧をソートする

Advanced Custom Fieldsなどで作成したキーに入力された内容で、
表示させる、投稿一覧の順を並べ替えることができます。

例)Advanced Custom Fieldsでpriceというフィールドをつくり、投稿一覧で、投稿日時順ではなく、価格順に降順で表示させたい場合
$args = array();に以下の記述を追加することで実現可能です。

xサーバーでphpをhtmlで動作させる

静的htmlでwpの新着などを表示させるとき、wordpressの関数を外部から使うには、wp-load.phpをインクルードすればよいですが、
htmlファイルでphpを動作させる場合は、.htaccessの設定も必要です。

実際に読み込むにはheadの一番上に、インクルード用の記述をして、

PHPを拡張子.htmlのファイル内で動作させるため。.htaccessに以下を記述します。

WordPressの固定ページのURLに.htmlをつける

静的HTMLサイトからWordPressへのリニューアル時や、wordpressと共存させる場合などに、
.htmlの拡張子が付いたり付かなかったりバラバラになることがあります。

そのような場合、
function.phpに下記を記述すれば固定ページのurlの末尾に.htmlの拡張子を付与することができます。

サイトのURLを統一したいとき使える方法です。

WordPress ログイン画面をカスタマイズ

WordPressではログイン画面のレイアウト変更など設定を自由に変更可能です。

基本的にfunction.phpにログイン画面でCSSの指定が効くように記述するだけです。

Styleにロゴに対する設定をするだけでも、ログイン画面に見栄えをオリジナルに設定が可能ですし、
背景の変更も可能なので、サイトにオリジナリティを出したい時に設定しておきたいですね

画像をテキスト化してくれるサービス

画像に記載されている文字をテキストとして抽出してくれるサービスの紹介です。

Online OCR

会員登録なしで利用でき、46ヶ国語に対応しています。

書き出し形式は以下の3つです。

・Microsoft Excel
・Microsoft Word
・プレーンテキスト

画像の解像度に左右されたり、文字が間違って抽出される部分はありますが、
長文など時間がかかりそうな手打ち作業よりも、ちょっとした修正だけで、書き出せるので、
画像の文字起こしなど時間のかかりそうな作業の場合すごく役立ちそうですね

gnaviにカスタム投稿記事リストを表示

gnaviなどにカスタムカテゴリーで作成した記事をリストで表示させる方法です。

使用場面の例では、
「product」というカスタム投稿で、商品情報などが登録された記事を投稿する場合や
スタッフ紹介など人物の登録をしてリストでスタッフ一覧を表示させたい場合などです。

‘numberposts’の-1(-1で全件表示)の数字を変更すれば、好きな数を新しい順から引っ張ってくることが可能です。
post_type’ => ‘product’,には任意で作詞したカスタム投稿名、単に投稿ならpostで指定可能です。

Urlのアンカー#idを取得する

外部リンク先のアンカー(#id)でスクロールや特定の処理をさせたい場合、
Url末尾にある#idの値を取得することで、可能になります。

簡単にシェアボタンを設置する方法

twitterやfacebookのオリジナルのシェアボタンを簡単に作成する方法です。

画像をそのままシェアボタンに設定したい場合、aタグで設定することで簡単に設定が可能です。