Home > 3月, 2014

2014.03.28

NextGEN Gallery (2.0.x系)のCSSカスタマイズ(singlepicの角丸化)

当サイトで画像を投稿に取り付ける場合はNextGEN Galleryのsinglepic機能を利用しています。

 

貼り付ける画像サイズも任意に指定できたりなにかと便利ですが、背景が白の画像を取り付けた場合、ページ背景と同化してしまい画像との境目が良くわからなくなります。

なのでNextGEN Gallery のカスタムCSSをいじってイメージの枠線(bordar)の設定と、ついでに写真の角丸化も行ってみました。

 

なお、NextGEN GalleryはVersion1.9x系とVersion2.x系ではカスタムCSSの取り扱いが異なります。

ここではVersion2.0.x系をベースにご紹介します。

 

Version2.0系のカスタムCSSは  サイトURL/wp-content/ngg_style/nggallery.css を編集することで指定できます。

直接CSSファイルをアップロードしても良いのですが、Galley > Other Options > Style メニューとたどっていくと、カスタムCSSの編集画面にたどり着きます。

 

ファイルアップロードすることなく / プラグインの組込みCSSと独立してカスタマイズできるのはなかなか便利です。

 

今回は枠線の追加と角丸化がメインですが、まずテストでborder設定を行ってみると微妙にイメージにオフセットが掛かっているようなので、出力されたページのソースを探っていると、singlpic専用CSSからpaddingが出力されていることがわかりました。

class名=.ngg-singlepic

CSS=URL/wp-contect/plugins/nextge-gallery/products/photocrati-nextgen/modules/nextgen-basic-singlepic/static/nextgen-basic-singlepic.css にてpadding:4px; が設定されている。

よって、カスタムCSSを記述する際このclassに対してpaddingを再設定したうえで写真枠(border-radius)で角丸化。

また写真全体の書式で設定されているClass名=.ngg-gallery-singlepic-imageについてはpaddingで余白を挿入して角丸枠の追加をCSSを設定します。

/*
CSS Name: Default Styles
Description: NextGEN Default Gallery Stylesheet
Author: Photocrati Media
Version: 2.12
This stylesheet is provided to allow users the ability of overriding the 
default styles for all display types
*/

/* イメージ全体枠の枠線表示と角丸化*/
.ngg-gallery-singlepic-image{
        border: solid 2px #d8e0e0;
        padding: 4px 4px 4px 4px;
        border-radius: 12px;       /* CSS3 */
        -webkit-border-radius: 12px;  /* Webkit */
        -moz-border-radius: 12px;     /* Mozilla */

    }

/* イメージ本体の角丸化
padding:0px;はプラグイン内部で指定されているCSSを矯正するため
*/
.ngg-singlepic{
        padding: 0px;
        border-radius: 8px;           /* CSS3 */
        -webkit-border-radius: 8px;   /* Webkit */
        -moz-border-radius: 8px;      /* Mozilla */
    }
 

 

ちょっと変わった試みとしては、写真本体の角丸化と枠線も同様に角丸化を指定しています。

写真本体は枠線の内側にありますので、角丸指定を8pxに、枠線は余白分も考慮して12pxの角丸を指定しています。

 

ではでは

2014.03.24

WEBサーバーの入れ替え完了

仮想環境の話ですが先日から時間を見つけて準備していた新しい仮想WEBサーバーがセットアップ完了したので先ほど入れ替えしました。

 

最初にセットアップしたWEBサーバーは、仮想環境に割り振ったリソースがCPUコア=1 / メモリ=1GBだったので、WordPressを動作させるにはちょっと重く、同時アクセスが20もくるとCPU=100% / メモリを使い切るという状態であったので、CPUコア=2 / メモリ=2GBに増やしマルチプロセス/スレッドが効率よく動作するようセットアップ。

ローカルネットワーク内で動作確認し特に問題なしであったため、外部からの接続フロントエンドであるリバースプロキシ設定を差し替えて、現在新しいほうのWEBサーバーで運用開始です。

 

リソースが増えたことでかなり処理能力が上がりました。

同時接続も3-4倍は処理できるようになったでしょうか?

詳細のベンチマーク・チューニングはこれからですが、まずは新しいサーバーで稼動実績を積んで行こうと思います。

インストール・セットアップ詳細についてはまた後日。

まずはサーバー入れ替え稼動の報告でした。

2014.03.23

「アナと雪の女王」を観てきました。

映像でもストーリーでも音楽でもハマった人続出といわれている、ディズニー長編アニメーション映画「アナと雪の女王」をAEON CINEMA明石にて観てきました。

 

もともと妻が最初に映画館(AEON CINEMA明石)で鑑賞。 続いて子ども達が鑑賞。

「これはイイよ!!」という妻の勧めもあり、最後に私(と二回目の鑑賞となる娘)が観ることになりました。

ネタばれになるのでストーリーそのものは書けませんが、全編フルCGの美しい映像はすばらしく、特に氷の透明感の表現したグラフィックは息をのむ出来栄えです。 流石世界最先端のプロのCG映像です。

 

本編はジャンルとしてはミュージカルアニメにカテゴライズされる作品で、ストーリーとともに随所に挿入歌が盛り込まれるため音楽も非常に重要。

主題歌「Let It Go」では全26ヶ国語に翻訳されて収録され、各国吹き替え版として公開されています。

今回おとよは吹き替え版を見ましたので、劇中挿入歌は日本語版(歌=松たか子さん)です。

海外でもこの日本語吹き替え版の歌はかなり評判よく、本家Let It Goと同じキーで熱唱されすばらしいと賞賛されています。

 

特に曲後半からの今までの生活からの決別と自分らしさを求めることを決意する悲壮感漂う歌唱はこの映画を象徴するもの。 ディズニーではエルサは当初悪役として設定されていたようですが、この歌により彼女を悪役ではなく悲運のヒロインとして描かれるきっかけとなったそう。

確かにディズニーではプリンセスが二人主演となる映画は今まで存在したことがなく、それだけこの姉妹のキャラクターはどちらも欠けることが出来ない重要なキャラクターとして仕上がったということなのかもしれません。

 

オリジナル特別映像(公式より)

 

日本語版特別映像(公式より)

 

そして、随所で味のある演技でストーリーに緩急・笑いを提供している雪だるまのオラフは非常に人間臭く、そしてコミカル。

個性的な各キャラクターの魅力は歌の力をより感じることが出来る映画館で観るのがもっとも良いのですが、DVD/BDでも映画の良さは伝わるかと思います。

まだ観たことが無いという方、機会がありましたらいかがですか?

 

ちなみにおとよは個人的に夏が似合うクールな男に憧れる!?雪だるまのオラフがお気に入りです。

 

2014.03.22

丸源ラーメン 明石店に行ってきました。

「肉そば」で有名な丸源商店・丸源ラーメン。

兵庫では大久保にある明石店のみが営業しています。

以前一度食べに訪れたことがあるのですが、blogアップするのは初めてです。

 

お店の写真(ごめんなさい、撮り忘れました)

 

店内はテーブル席が豊富で、家族客が気軽に入れる・楽しめるように配慮されています。

ラーメンは少し甘みのある醤油ラーメンが売りで、麺の固さもお好みで「カタメ」「バリカタ」「ハリガネ」「粉落とし」と選ぶことが出来ます。意外に醤油ラーメン店でこの麺のバリエーションというのは珍しいのではないでしょうか?

多くの場合は豚骨ラーメンの場合かと思います。

 

 

今回注文したのは「野菜肉そば」と「鉄板チャーハン」のセットと、餃子。

 

鉄板チャーハンは熱々の鉄板に溶きたまごがジュウジュウ焼かれながら運ばれてきます。

手早く卵とチャーハンを混ぜるのが美味しさのコツ。

 

餃子はラーメン専門店の餃子にしては大きめサイズだと思います。

くせの無い味で、いくらでも食べられる感じです。

息子もうまいうまいとパクついていました。

 

メインの肉そばはそのまま食べても美味しいのですが、テーブルには色々な薬味がありますので、この薬味を加えながら味を変えつつ楽しむのがよいかと思います。 特に「にんにくパンチ」と容器に書かれたフライにんにくを細かく顆粒状に砕かれた薬味が良い感じです。

たっぷりめにパラパラと振りかけて食べると、甘めの醤油スープがしっかりしたパンチのある味に変わります。

 

ラーメン専門店は家族連れで入るには様々な制約があって入りにくい店舗も多いですが、ここは子どもでも食べやすいメニューも豊富で、小学生には塗り絵を描くとデザートがサービスされたり、かなり家族客が入りやすいように配慮されているかと思います。

 

2014.03.18

WordPressの自動更新機能をOFFに

WordPressはVer.3.7から自動更新機能が実装されましたね。

私は3.6から飛び石で3.8にアップデートしたので、3.8→3.8.1でこの自動更新機能を体感したわけですが、今コミュニティの方でVer.3.9β版のテストが実施中の案内がダッシュボードに掲載されているのを知り、自動更新機能をOFFにしました。

 

理由は簡単、リアルタイムなアップデートはリスクを伴うからです。

WordPress自体が新たなバグを生む可能性、後から追従してくるプラグインが対応するまでのタイムラグに加えて、プラグインがバグる可能性。

正直、テストサイトで動作確認を終えるまでは怖くて使えません。

もちろん、セキュリティのことを考えれば何年もアップデートせずに放置するのは良くないです。

適時アップデートしないとサイトの危険度が増していくのは当然です。

しかしこの間、あるプラグインで3.8.1対応の際に細かなバグが発生して修正に1ヶ月ほど要した事例からも、リアルタイムな最新は必ずしも正は限りません。 サーバー本体を組んでOSを自らインストールしているとより痛感することで、オープンソースコミュニティソフトウェアを利用する上でのメリットとデメリットの間(はざま)ともいえます。

 

どちらのスタンスを取るかは管理者のポリシーにも依存しますので、これは誰にでも推奨できることではありません。

あくまで自己責任・自己管理で実施が原則です。(これもオープンソースの原則ですね)

 

ちなみに、自動アップデートを無効にする方法は至って簡単。

wp-config.php ファイルに以下の1行を追加するだけです。

 

define( ‘AUTOMATIC_UPDATER_DISABLED’, true );

 

ではでは。

 

 

1 / 3123