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

WordPressの絵文字を無効化・・・

当ブログのお客様は以前からお気づきかもしれないが、WordPressのバージョンを4.2に更新してから、「♂♀」の表示が絵文字化されていたのだ・・・。当然medaichiも「あれっ? 自動変換されてらあ~」と気づいてはいたのですが「まぁ、化けるわけじゃなし、まっ、いいっか・・・」と放置WW

ご存知のようにmedaichiは万事適当で大雑把なのだが、一方で仕事は趣味的なので「♂♀」と書くたびに「イラッ」とするわけで・・・。重い腰をあげてネットで絵文字を無効化するコードを探すと、はい、簡単に見つかりました。早速、functions.phpに書き足すと、ちゃんと無効化されて問題解決~・・・、って、投稿画面バグッてるし・・・、ツールバー逝ってるし・・・。ん~、なんかグダグダの予感が・・・

プラグインからでも良さそうなんだが、面倒なので会社員時代の友人に電話したら「2行書き足してみ・・・」ということで以下の2行をfunctions.phpに書き足してみた・・・

でもってあっさり解決。なんでうまくいかなかったのか聞くと、「Word Pressと相性の悪いコードやったかもな、お前にはわからんやろ~W」と明快で身も蓋もないお返事W まっ良いけど「餅は餅屋~」ってことですね。

投稿画像の大きな画像が開くようにしてみた。

120512medaichi_00重ねてのblogネタ恐縮ですが、お気づきの方もおられたと思いますが、blogを揚げてしばらく投稿画像をクリックしても画像を開くことができませんでした。medaichiが使っているテンプレートの「twentytwelve」デフォルトでは開かないみたいです。リンク張って別ウィンドウで開くのもつまらないですしね。

華麗な(W) Photoblogを目標にしたのにこれじゃいかんというので、Wordpress標準の方法でトライしてみると、まぁ開くのですがコメント欄にくっついてきます。「画像開いたんだから、さあ、コメント書かんかい~」モード全開で、押しつけがましい事この上ないのでパス・・・。先輩方のBlogみたいに、ページ上のサムネイル画像をクリックで拡大表示できるJavaScriptの画像表示できんものかなあと・・・。あの、クリックすると画像がウニ~ッて開くやつです。

調べてみると、lightboxというプラグインを追加するとできるとのこと、試しにメジャーなのをいくつかダウンロードして試してみるがどうもうまくうごきません。functions.php書き換えたり色々やってもダメで煮詰まっちゃいました。

友人に相談するとmedaichiが試したいくつかは、日本語化とかその他高機能なものですがコンフリクトしやすいらしく「簡単なのでいいなら『wp-lytbox』試してみ・・・」と。wp-lytebox たいていの環境で動作してくれるとのことでした。

動いちゃいましたね・・・。ということで煮詰まって焦げ付き始めたmedaichiのお悩みもスッキリ。野鳥以外の解説用画像なんかはリンク先の変更で開かないようにできるし、投稿画像かウニ~ッと開けばいいというmedaichiのニーズにはぴったりです。Closeの✖ボタンもついてるし、画像以外の場所をクリックすれば閉じてくれます。上のメダイチドリ君画像で試してみてください。

見てのとおり、ヘッダ画像のカスタマイズとか、blogの余白を削ったり、行間を詰めたりとか、できることから色々触ってますが、本サイトもそうですが、medaichiは素人の見様見真似で、行き当たりばったりもええとこなんで、ここら辺のコメントは勘弁ねがいます(W)

ファビコン作りに挑戦してみた その2

ファビコンは、軽いgifや透過情報を含むpngでも表示されるのですが、IE(インターネット・エクスプローラー)はサポートされていませんから表示されないとのことでした。IEをお使いの方は、まだまだおられますから、medaichiは、.icoで作ることにしました。

まずPhotoshopなどで背景を透過させたPNG形式の16px×16pxと32px×32pxの画像2枚を制作します。pngで作るのは、medaichiの様な隅の丸い角丸方型や丸型のファビコンだと、透過情報の入ったpingでないと隅っこが白い正方形になってしまうからです。

画像を用意したら、ファビコンファイルの.icoに変換し無ければなりません。「ファビコン 」で検索すると、無料で変換してくれるサイトがたくさん出てきますが、medaichiはこのサイトにお世話になりました。

▶http://ao-system.net/favicon/index.php

screenshot_c

使い方はとても簡単、左側の16×16用画像と、32×32用画像の2か所で画像を選択すると右側の様に2個のアイコンが表示されます。後はダウンロードボタンを押してダウンロード、medaichiの場合は、このブログも、野鳥園のサイトも同じレンタルサーバにありますから、サーバのルートディレクトリ(一番上のディレクトリ)にアップロードするだけで両方ともファビコンが表示されました。これはこれで簡単なんですが、サイトとブログで違う画像のファビコンを使う場合は、サーバ内の別のデータベースにblogを置かなければならなくなるみたいで、これはこれで面倒なことになるかもしれませんね(W)  多分やらんと思います。

ファビコン作りに挑戦してみた その1

screenshot_a

ファビコン: favorite icon(フェイバリット・アイコン:お気に入りアイコン)というものがあるらしいのだが、薄学非才の管理人は、寡聞にしてしりませんでした。上のPCのスクリーンショットにあるような、Google Chromeなどのブラウザのアドレスバーに出るアイコンのことで、ブックマークのアイコンにも使われますよね。そういえば以前から、商用サイトとかブックマークに登録するとオリジナルのアイコンがついてくるのはしってましたが「カッコいいけど有料?」ぐらいしか思ってませんでした。どうやら、自作して簡単にアップロードできるらしいんで挑戦してみることに・・・

screenshot_b

なんでも16×16pixと32×32pixの2種類作っておくのが一般的らしいが、「サイトのショートカットなんか普通デスクトップに置いたりしないよな~」とは思いつつ、まあ作ってみることに。最初はいつも使っている野鳥園のシンボルマークでいいかとおもっていました。ちなみに、この、波の上をトウネン等の小型のシギが飛んでいる野鳥園のシンボルマークですが、medaichiがデザインしたものですから、勝手に使って加工してもデザイナーさんが怒鳴り込んでくる心配はありません(W)

ところが単純にリサイズすると、ぼんやりしてなんだかわからないものに・・・。仕方がないので新たに角丸四角形のシンプルなデザインを作って試してみました。なんとか行けそうですが、まだ、ぼんやりした所をクッキリと修正しました。後は、pingで保存して、ファビコンファイルに変換し、サーバのルートディレクトリーにアップロードするだけでOKだそうです。

blogのfontを変更してみる。

ms_meiryo

blogをあちこち触っていて、まあ、だいたいイメージ通りになってきたけど、なんか違和感が・・・。blogデフォルトのfont(文字のスタイル)が、野鳥園のサイトで使用しているものと異なるのが原因と気づきました。野鳥園のサイトで使用しているfontは「メイリオ」です。管理画面からスタイルシートを開いてみると以下の記述が

/* =Basic structure
————————————————————– */

/* Body, links, basics */
html {
font-size: 87.5%;
}
body {
font-size: 14px;
font-size: 1rem;
font-family: Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: #444;
}
body.custom-font-enabled {
font-family: “Open Sans“, Helvetica, Arial, sans-serif;
}

実際にはMSゴシックとか代替フォントが表示されていると思うのですが、上の赤色で表示されたメインフォント”Open Sans”を”メイリオ”に書き換えてみると、あっさりと変更完了して、しっくりと収まりました。今回はフォントのサイズと色には手をつけていませんが、スタイルシートから変更可能と思われます。

余談ですがMSゴシックとか MSPゴシックとか、昔からPCやってる方にはおなじみのフォントなんですが。モニターの性能とかPCの文字表示がそれほど良くなかった時代に、モニター上での読みやすさ優先で作られた古いフォントなので、プリントした時の美しさは無論のこと、モニター上ですら「なんかゴツゴツして正直すっきり感にかけるなあ・・・」という感じがぬぐえませんよね。

medaichiもサイト書いてるとき、当初はデフォルトのMSゴシックを疑うことなく使っていましたが、今は基本「メイリオ」を使っています。ネットのGoogleChromeの設定も「メイリオ」に変更しています。

冒頭の画像は2種類のフォントを、webサイトに表示してみてChromeのスクリーンキャプチャー機能で画像として保存し切り抜いたものです。けっこう感じ変わりますよね。