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

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

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のスクリーンキャプチャー機能で画像として保存し切り抜いたものです。けっこう感じ変わりますよね。

 

 

野鳥園のblogを作ってみるお話の2

medaichi_00

blog作るにあたって、ひとつだけこだわった事がありました。それは、medaichiが写真を撮って投稿するのは、まぁ、当たり前として、blogの利用者さんにもコメント欄を利用して写真を送れるようにしておこうということでした。感覚的には、管理人室で写真を見せ合ってああでもないこうでもないとおしゃべりするような感じがでてきたらいいなと思ったからです。

先に、既成のテンプレートを使用したといいましたが、”twentytwelve” には、コメント欄に画像をUPする機能は付いていません。そこで探してきたのがComment imageというプラグイン(おまけの機能みたいなものか・・・)です。このプラグインをインストールして、サーバーのWrdpressのホルダーにup、管理画面から有効化すれば、コメント欄から画像を投稿できるらしいんです。そんな簡単にいくんだろうかと思いましたが、先の「大阪南港野鳥園website管理人室」という投稿のコメントらんに、そこらの画像をtest投稿、ちょっと設定をいじったらすんなりと投稿できました。コメント欄を開けないと見られませんけどね。

コメントの送信ボタンの下にファイルを選択というボタンが表示されています。クリックして投稿画像を選んでいただくだけですが、jpegだけです。サムネイルで幅600pixで表示されますが、画像をクリックすれば元画像が開きますから、1200pix以内にリサイズして投稿願います。

あとは、カレンダーを入れて、だいたい思っていたスタイルに近づいてきました。少しずつでもよくしていきますのでよろしくお付き合いください。

野鳥園のblogを作ってみるお話の1

さて、blog作成に挑戦・・・って、んなことやったことないし・・・。無料のblogって検索すると、まぁ、誰でも簡単に作れそうですが、これってCMがくっついてくるんですねえ。ショッピングサイトとか・・・、教育上好ましくない(W)サイトとか・・・。有料なら付かんみたいですが、予算の少ないNPOなもんで、お金使うと理事長に怒られそうだし、あれこれオプション付けるとさらに料金が加算されるようです。

結局、野鳥園のサイトを置いてるサーバー(レンタルサーバーだけど)に、インストールして揚げるしかないという結論に。野鳥やデジスコ業界の先輩のblogを参考にさせてもらうと、なんかWordpressというアプリがよさそうなんで入れてみました。medaichiは、何だかんだいってサイト管理人をやっているので、おかげさまで、けっこうすんなりとUP出来ました。後は、いっぱいあるテンプレートみたいなものの中から好きなスタイルをインストールすれば良いみたいです。

尊敬する先輩のblogのスタイル(テーマというらしい)をパクらせてもらおうと検索・・・、何故か出てきません。仕方がないので無茶苦茶たくさんあるテーマを検索して、なんかそれらしいフォトブログみたいな、カッコいい名前のテーマをインストールしてみました。後はこれらをカスタマイズして、ブログサイトをでっちあげればいいってことなんですが、便利で簡単・・・ってことは逆にできないこともいっぱいあるみたいですね。

結局、カッコいいテーマでも、外国の作者のがほとんどのようで日本語表記が不十分で、なんか使いにくそうです。困ったときはデフォルトに・・・、wordpress日本語版デフォルトの”twentytwelve”というテーマをチョイスすることにしました。