ポートフォリオを作りたい方へ。wordpressで自分だけのギャラリーを作る方法を紹介します。Lensカメラと写真の話題を中心に、運営者の好きなものや場所を紹介していくブログです。Galleryホームブログポートフォリオを作りたい方へ。wordpressで自分だけのギャラリーを作る方法を紹介します。2018/4/22こんにちわ!写真大好きナカザト(nakaken0907)です。前回の記事に引き続き、ブログについて書いていきます。上手いかどうかはともかく、僕は写真を撮るのがメチャクチャ好きです。三大欲求の次くらいに写真欲求が来ますね。写真欲求ってなんだって感じですけどね。写真が好き過ぎてカメラの会社に転職することになったというのは、以前の記事で書きました。【迷っているあなたへ】好きを仕事にする覚悟とは。意を決して僕が転職を決めた理由について書いてみます。撮った写真はどうしても自分の好きな見せ方でいろんな人に披露したい。SNSはやっぱり自分自身のスペースではないし、フォロワー数とかいいね数とか気になっちゃう。自分の好きな写真を、自分の好きな見せ方で紹介したい!それがブログをやっているモチベーションでもあります。いうことで、今回はWordPressでフォトギャラリーを作ったのでちょっと紹介させて下さい!そして作り方も紹介します!作ったフォトギャラリーURL:http://lens-blog.jp/gallerytop/色々と試行錯誤したのですが、結果的にはこんな感じです。見て見てください!自分なりにはかなり満足してて、何度も何度も見返してますw自分で言うのもなんですがキモイですねwこだわりポイントは3つです。写真を限界までデカく見せること可能な限り余白をなくすこと写真を画面遷移なくたくさん見れること自分がどんな写真撮ってるか分かってほしいし、そこに集中して欲しいのでなるべく隙間なく写真を敷き詰めたい。それから、せっかく見にきて頂いたからには楽しんで欲しいので、なるべくたくさんの写真を画面遷移なく載せたかったのです。構成ギャラリーの構成は下記のようになっていて、とってもシンプルな作りです。1ギャラリートップ2ギャラリーページ(カテゴリ毎)隙間なく写真が敷き詰められるようになっているので、PCで見ると縦長の写真がとんでもなく大きいですがw、それはそれでいいかなーと思ってます。カテゴリは今後少しづつ増やしていく予定です。作るにあたっての前提ここから作り方を書きますが、予めお伝えすると僕はブログとかhtmlとかCSSとかPHPはど素人です。PHPのことは何一つ知りませんwなにそれ出版社?くらいの知識レベルです。そのためかなりイレギュラーな作り方をしているでしょうし、ご法度なこともやってるかもしれません。したらいいよ!というのがありましたら優しめに頂けると嬉しいです(^^)あと、使っているWordPressのテーマはsimplicityです。他のテーマのことは分かりませんごめんなさい!でも同じようなことはどのテーマでも出来るはず。全体の作業手順はこんな感じでした。Slider3で、ギャラリートップのスライドを作るギャラリートップを固定ページで作る(プラグインのID入れるだけ)ギャラリーページを固定ページで作る(ひたすら写真貼るだけ)固定ページのCSSを書き換える(ひたすらマージンを消す)ブログからリンクさせる知識のない自分で調べて作っていたらめっちゃ時間かかりましたが、よく知ってる人なら一瞬で出来るんだと思います汗。このブログ通りやれば、10分でできるんでは?と思っています。それでは早速1つ目から行きます!1.固定ページのテンプレ(php)を作るwordpressの場合、「投稿(記事ページ)」とは全く別の「固定ページ」というものが作れるようになっています。これは通常の記事から独立したページであり、独自のデザインにすることもできます。具体的には、プロフィールページや問い合わせページのようなものに使うことが多いようです。今回はこの「固定ページ」を利用してギャラリーを作成しました。僕の場合はブログのヘッダーもフッターも全て無くし、極力シンプルなデザインにしたかったんです。文章と写真がセットになっている通常の記事と違って、ギャラリーは写真だけを見せるページにしたかったんですね。ギャラリー用のテンプレートを作ります。そのためにご自身のサーバーから投稿ページのテンプレートをダウンロードします。あれば、single-page.phpというのがそれです。サーバーの中でwp→wp-admin→wp-content→themesとフォルダを下った先のテンプレート名直下(僕であれば「simplicity」というフォルダ直下)の中に、記事ページのテーマが入っています。投稿ページのテンプレートの中には、関連記事だったり、アイキャッチだったり、様々なパーツを呼び出す記述が入っています。今回作りたいギャラリーには本文以外いらないのでheader・記事本文・footerを残して後は全て消します。本当はヘッダーもフッターもいらないのですが、これらを消すと表示不具合が出てしまいました。そのため仕方なく残しておきます。(どなたかやり方ご存知でしたら無知な僕に教えていただけると...)そうやって編集したPHPに、下記の記載を追加します。すげー!ここまでいったら任意のアルファベットの名前をつけて保存。拡張子は.phpのままです。これを2ファイル分(トップ用と、ギャラリー内用)作ります。2.サーバーにアップ先ほど作った2つのPHPファイルを、自身のサーバーにアップします。先ほどのテーマ名直下のフォルダにいれるんですね。3proというプラグインを購入。他のスライダーを使ったことないですが、これマジで最強です。自分好みに簡単にカスタマイズできるので、楽し過ぎて永遠に触ってられます。無料版でも色々いじれるんですが...僕がやりたかった、ページ開いたら全画面で写真がデーンと表示される「Fullpage」のは有料版にしか機能です。横幅いっぱいに広がる「Fullwidth」というテンプレは無料版にもある(Lensのトップページの画像がそれです)のですが、それだと画面サイズによって縦が余ったり足りなかったりするので上手くいきませんでした。CSSもいじってみたけど上手くいかず。無料で使ってみて、いいなと思ったら有料版買ったらいいかと!といっても有料版もたったの25ドルなので、飲み会1回我慢したらお釣りが来ます。導入したプラグインでギャラリートップを作っていきます。英語なので使い方がよく分からないのですが、直感的で分かりやすいUIなので適当に弄ったりググれば何とかなります。devices』という部分で、PCだけに表示・スマホだけに表示など出し分け設定もできます。背景画像を選び、テキストやボタンを置いて行き、位置や色を調整します。導入の際には、このコードをテキストエリアなどに入れるだけ。ちなみに一つのスライドでデバイスによる出しわけも出来るのですが、僕の場合はPCとスマホでちょくちょく画像差し替えたり最適化したいので2種類のスライドを用意しました。5.ギャラリートップを作るまずはギャラリートップを作ります。固定ページを新規作成して、本文には先ほどのスライダーのタグのみ入れます。右側のテンプレ選択で、先ほど作ったテンプレを選びます。僕の場合はPCとスマホでIDを分けているので2つのIDを入力していますが、1つであれば1つだけでもちろんOK。6.ギャラリーページを作る続いてギャラリーページを作っていきます。これはもう、お好みにしていただければと!写真をペタペタ貼っていきまして、トップと同様に右側で作ったテンプレートを選びます。ギャラリーもやることはこれだけ。7.CSSを書き換える最後の行程です。最後にCSSをいじって完成です!!やったことは、ヘッダーとフッターを消し、マージンを取り除く作業です。ソースコードなのにキャプチャでごめんなさい!!!汚いコードでごめんなさい!とにかく余白を消しまくる作業です。消えなくて苦労しました...。display:noneは多用するとSEO的にあまりよくないという話も聞きます(よく知りませんが)...ご利用する場合には自己責任でお願いします!ごめんなさい無責任かつ無知でーー!8.メニューにリンクを貼るこれで見た目が全て出来上がりました!リンクはどこに貼ってもよいのですが、僕の場合はブログのメニューに表示させました。これで一通り完成!!最後にいやぁ、自分でPHP用意してCSSをガシガシいじるのは初めての経験でした。どこにmargin:0をきかせればを模索するのがやたらと時間かかって死にそうになったという笑。自分だけのギャラリーが出来上がるはメッチャ嬉しいですね!!もう一回いいますが下記がギャラリーなのでぜひアクセスしていただけたら泣いて喜びますよ!笑URL:http://lens-blog.jp/gallerytop/今後もっと色々とブログ変えていこうと思います!いやぁもっとPHPをいじれるようになりたいなーーー!勉強します。シェアいただけたらうれしいです。フォローいただけたら更にうれしいです。Nakazato平日は写真関連の企業に勤め、週末は写真を撮ってます。詳細なプロフィールはこちら。【2018年】今年撮った桜の写真をさらしていきます!ブログのUI変えました!参考にした記事、使ったプラグインなど紹介します。CENTRALで朝活してみましたブログ始めて1年。った桜の写真を淡々とあげてみる【迷っているあなたへ】好きを仕事にする覚悟とは。意を決して僕が転職を決めた理由について書いてみます。Post安産祈願で鬼子母神堂へ。-京成線四ツ木駅周辺の河川敷-大好きが止まらない。淡い色合いが生むノスタルジックな描写。f/1.4Sカメラをハンズフリーで持ち歩く。Post淡い色合いが生むノスタルジックな描写。-人と一緒に撮影すると、写真がもっと好きになる沖縄の空気に癒されながら陶器を楽しむ。読谷山焼陶器市に行ってきました!安産祈願で鬼子母神堂へ。