上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
家族で参加しているウチのサッカークラブチームのHP
ワタシが作成・管理をしています

HPはWordPressというシステムで作成しており、
この春までcatch everestというライセンスフリーの
テーマを使用していました。作成時(2年半くらい前)に
採用した理由は、、、

1.レスポンスデザイン(画面の大きさで表示形態が変わる)ではない。
2.トップページの画像スライダーやらの仕様がわかりやすい。

という感じでした。

しかしその後、ネット環境がスマホの普及で劇的に
変化したのとクラブ運営の関係で今回モデルチェンジを
しようという話になった。その理由は、、、

1.レスポンスデザインが主流に変化した。
2.スポンサーバナーを掲載したい。

以上2点。

1.については、2014当時はスマホも普及はしていましたが
2016現在くらいの「誰でもスマホを持っている」状況ではなく、
まだレスポンシブデザイン(PCとスマホで表示が変わる)への
閲覧者の慣れが一般的ではありませんでした。
しかし2年経って大きく変わり、今では「閲覧の大多数が
スマホ(もしくはタブレット?)」になったのと、レスポンシブ
デザインのHPもかなり普及しており、閲覧されるみなさんも
相当操作になれてきたかなと感じています。

2.については、クラブの運営に関する歳入の拡大をスタッフ間で
話し合っていた際に、協賛企業様のスポンサーバナーの導入を
採用したことによります。


今回大きかったのは特に2.で、catch everestで
「どーやったらバナー設置できるかな〜」とあーだこーだと
調べていたのですが、調べれば調べるほど

catch everestをいじって
なんとかするのには無理がある


ということに気づいた(笑)

その結果、バナー設置できるフリーテーマを調べていたところ
到達した答えがcolor magというテーマ。

で、見つけたこちらのサイトの説明を参考に
なんとか作成し、クラブスタッフの了承を得て5月から
モデルチェンジしています。

なんでもそうですけど、社会の変化に対応していかないと
取り残され、最終的には淘汰されていきますね。

次の2年後にはどうなっていることやら。。。(-_-;

なんとか頑張ります p(^-^;
スポンサーサイト
ウチのサッカーチームホームページを作成し管理しています

ちょいちょい(遅いですが)更新しているのですけど、使用している
wordpressの無料テーマであるCatch Everestのバージョンアップが
結構な頻度であります。

その都度カスタマイズ処理をかけています。
正直メンドクサイっちゃあメンドクサイのですが、
意識的に機会のあるたびに手をかけるように
しています。というのは

永いこと触らないでいた結果
サッパリわからなくなった
なんてことに
ならないように、FTPも含めて意図的にいじるよう
自分に習慣づけている感じです。



とは言いつつも、ホームページの更新は若干遅め。
これも意図を持っていて、ブログやfacebookでの経験から

更新を最初から飛ばすと後でキツくなる
のがよくわかっています(笑)
ただでさえ当初からネタ切れ気味ですからね(^-^;


さて、話は戻ってCatch Everestのバージョンアップ。
最近バージョンが1.5になりました。

どのバージョンアップのタイミングで
変わったかはちょっと不明ですけど、
スライドショーに使用する画像が
自動的に適正サイズに変換される
という機能
が備わったようです。

つまりコチラのサイトでは「推奨サイズ1140×450ピクセル」とあることから
いままではそのサイズに自分で画像処理したモノをアップしなければ
ならなかったのが、アイキャッチ画像に設定したデータを自動的に
画像処理してくれるようになった、ということですね。


どういうことか、と具体的に説明すると。。。

P3192567.jpg
コレが元データです。コレを記事のアイキャッチ画像に設定すると、

P3192567_after.jpg
この↑画像上下の白い網掛け部分が自動的にカットの
加工をされてスライドショーに表示されるようになりました。

FTPで確認したところ、加工後のカットされたデータが
サーバー内部に保存されていました。ということは
スライドショーの表示プログラムが変更になったのではなく、
自動的に最適化画像処理のプログラムが組まれたようです。


1798580_588332404614297_2025069205115049390_n.jpg
どのくらいカットされるのかを計算してみたところ、
通常の写真のサイズだとおおむね上下各々高さの20%ぶんが
カットされるようですね。

ただ、予想ですけども画像の縦横比が約2:3ではないデータを
使った場合は、恐らく違うカット比になる事と思います。


スライドショーに使いたい画像については、
その事前の処理に注意が必要そうです。
この前、ウチのサッカーのクラブチームの
ホームページをつくりました

その後運営しているのですけど、ひとつ気になっていたことが。。。

post_author_before.jpg
更新していく投稿ページに、初期の設定では「投稿者」が
表示されてしまうのです。

ブログ型とはいえホームページなので、これだと
「なんだ、ブログじゃん」となってしまい
オフィシャル感を低下させてしまうような気がします。(>_<)

またこの「投稿者」、実はイコールwordpressのログイン名だったり
しまして、それを公開しているというのはwebのセキュリティの観点からも
当然好ましくありません。

以上の理由でなんとか表示させないようにカスタマイズしようと
イロイロ調べたのですけども、Catch Everestのカスタマイズ情報については
コレがハッキリ言ってネット上にほとんど存在しなく。。。orz



ま、無いものはしゃあない。自分で調べて試します。(^-^;



・・・なわけでイロイロ試したワケなのですが、
いかんせんワタシは素人。一度大事故を起こしかけました(笑)


というのは、「おそらくこのヘンだろう」とアタリをつけた
文字列を検出して、消そうと思った部分を選択して削除し[更新]をかけて
ホームページを開いたところ、
ホームページを全く開けない
という現象が発生。


・・・???!!!。。。(・o・;


ニブいワタシにも流石に
「コレは絶対ヤバい」
ピンと来させる(オッと、コレは北海道弁ですね♪)
現象が発生しました。(^-^;



、、、事態の深刻さにドキドキしつつも(笑)
サーバーに直接ログインし、念のため取っておいた
バックアップファイルをFTPで書き換えて、さらに
緊張しつつホームページを開いてみたところ。。。



なんとか現状復旧 b(^-^)



イヤー、マジでアブなかった。。。



みなさん。ファイルをイジるときはバックアップ必須ですよ!
(アタリマエ〜♪ 笑)





さて、そんな中参考にしてみたコチラは、テーマは違いますけども
なんとなく雰囲気がわかります。
よーするに「Posted on」の文字列を含むphpファイルを探し出し、
「by ○○」のリンクが関連付けられている部分を削除すれば
イケるのではないか?とアテをつけました。

それを踏まえて各phpファイル内の「posted」を探したところ、、、
あった! template-tags.php の内部にありました b(^-^)

post_author_delete.png
前記の大失敗を踏まえてヤらかしても復活できるように
データをいったん保存し(笑)、画像内の
選択部分を削除して更新して様子見。。。


post_author_after.jpg
おぉ!!成功です♪



・・・て感じでなんとかカッコ良くするために
イロイロとカスタマイズ処理してきて、だいたい良いセンまで
完成しましたけれども、ここまでやってみてわかったのは
スタイリッシュなサイトを構築するのに必要なものを考えたとき、
結局のところ思うのが

要は画像・素材勝負なんだな、ということです。

イイ画像・素材(ウチの場合は写真ですね)を沢山集め、
その中から特にいいモノを選択し、そしてそれを画像処理して
いかにイイ感じの素材にするか。

イイ画像・素材が揃っていれば、あとはそれを
並べるだけでもソコソコいけそうな感じです。


ただワタシは、カメラに関しては機材も技術もセンスも
完全にアレなことから(笑)あまり手を伸ばすのは
控えようと考えています。(^-^;

写真を提供してくれる方はスタッフや友人に
何人かいらっしゃることから、そちらに期待です♪

何もかも一人ってんじゃパンクしちゃいますので、
如何に分業するか、ってコトかもしれないですね(笑)
ウチのクラブチームのHPをつくっています

ワードプレスのテーマも決まったことから
カスタマイズして熟成していきます。


カスタマイズ その1 フォント

font-before.jpg
(スライドショーの切り替え途中を取り込んだため
 なんだかスゴイ画像になってしまいました...^-^;)
これはウィンドウズの画面で、フォントをいじるbeforeです。
まぁコレでも悪くはないんだけどなんだか味気ない。。。

少しでもオシャレにしたいので検討しますが、端末に頼るような
あまりにもマニアックなフォントは「どの端末からも正確に表示」
というリニューアルの目的から逸れてしまいます。
なので共通フォントから選び、英語はcourierに、
日本語はメイリオにすることにしました。
フォント_CSS
こんな感じ↑にコチラを参考に、テーマの編集で
スタイルシートのfont-familyに、左から優先されるとのことなので、
リストの左にcourier,メイリオ,を追加します。

font-Courier.jpg
ふむ。イイ感じになりました♪


カスタマイズその2 フォーム設置

チームへの連絡の敷居を少しでも下げるため(笑)入力フォームを設置します。
Contact Form 7というプラグインを導入し、
有効化してからつくった固定ページに貼付けるだけ。

form.jpg
できました♪
試しに送信してみると成功。
次に進みます。


カスタマイズその3 カレンダー設置

チームのスケジュールの広報のため、カレンダーを設置します。
これもAll-in-One Event Calendarというプラグインを導入。

schedule.jpg
ちょっと扱いがアレですけど、とりあえずコレで行こうと思います。
そのうちもっといいプラグインが見つかったら切り替えるかも。


カスタマイズその4 スライドショー

コレはちょっと困りました。というのは、コチラを参考に
固定ページをスライドショーさせようとしたら、投稿ページだと
スライドできるのですが固定ページだとできなかったのです。

さんざん考えた挙句に思いついたのが、
「投稿ページしかスライドショーできないのなら、
 固定ページと同じ内容の投稿ページをつくればいいじゃん」という
安易な答え(笑) でもしゃあないんです、それしか答えが
浮かばなかったので。。。(^-^;

その結果、ウマいことスライドショーが出来ました(笑)
次いきます♪


カスタマイズその5 フッター

採用を決めたテーマCatch Everestのフッターはデフォルトでは
footer_before.jpg(デモサイトから)
こんな感じにテーマ名が表示されます。

クラブのホームページのオフィシャル感を強化するため、
不要部分を削除します。

footer.jpg
コチラのサイトを参考に、こんな感じに
フッター部分のソースを修正し、、、

footer_after.jpg
できました♪



カスタマイズその6 タイルギャラリー

デモサイトのギャラリーがカッコイイなと思っていました。
Facebookとかでもよく見るスタイルのモノで、調べていくと
どうやら「タイルギャラリー」というものだそうで、
SlimJetpackというプラグインがあるらしい。早速導入します。

gallery.jpg
おぉ、、、なかなかイイ感じ(^-^)


あとはコチラを参考に背景にも画像を差し込んで
ひととおりのカスタマイズ完了。


・・・てな感じで完成したホームページがコチラ。
NSS.jp.net
NSS 北湘南サッカースクール
です。
ご関心のある方はご覧いただけると嬉しいですね。(^-^;


自分のマニアックな性分からイヤな予感はしていましたけど(笑)、
結局やっぱりスタイルシートを解析していじるところまで手を出して
しまいました(-o-; なんとか必要最小限に留めましたが。。。(^-^;


なかなかイイ勉強になりました。
挑戦してみて良かったと思います♪
ウチのチームのホームページを
リニューアルしています。

ブログdeホームページパクり参考にサイトを構築したのですが、
トップページの画像の領域が綺麗に収まらないという障害
どうしても解決できませんでした。



・・・ここであきらめが早いのが取り柄のワタシは(笑)
あまり拘らずにサッサとテンプレート(ワードプレスでは
『テーマ』と言うのだそうです)の変更を決断しました。
幸いなことに、ここまでの勉強でボンヤリとwordpressの構造が
わかってきていたので、このへんのハードルは低くなっています(^-^;

そんな感じでイロイロ探っていたところ、サイコーのサイトを発見!

テーマタンクさんです♪


こちらのサイトはテーマを紹介しっぱなしではなく、各テーマの
設定方法だとかについてもとても丁寧に掲載してくれているので、
ワタシのような素人には最適だと思います。
そしてココでジャンルを「ビジネス」で絞り「Customizr」という
テーマの説明を読んでいたところ、なんと
動画で各種設定の操作方法を説明しています!
さっそく飛びついてまるっきりパクることにします(笑)

hp_customizr.jpg
てことでしばらく「Customizr」で頑張ったワケなのですが、
フィーチャードエリア(注目記事)のサムネイル画像の
表示の設定だとか、細々とした点がうまくいきませんでした。

またスマホでの表示を考えた「レスポンシブデザイン」の導入も、
閲覧の際は慣れるとイイけどウチのオクサマの意見によると
固定表示の方が逆に見やすいというアドバイスを受けた。


実際によく閲覧するのが保護者の方であったりクラブ生だったり
なんだろうな、ということを考えると確かに説得力があったので
早速その意見を採用し、再度他にいいテーマがないか探します。



・・・そして選んだのが「Catch Everest」というテーマ。
有料版と無料版があるみたいですけど、もちろん無料版です (^-^)

こちらのテーマはレスポンシブデザインをon/offを設定で
切り替えることが可能です。
注目記事の画像設定も簡単だし、背景画像も設定できる。

てなわけでこのテーマを採用し、カスタマイズして
より完成度の高いホームページをつくっていくことにします。

以上、テーマ決定まで回り道しましたが、まぁでも
必要な回り道だったなと思いますね。何の前準備もなしに
イキナリ「Catch Everest」を採用してイジるってのは、
テーマタンクの説明を読んでもワードプレス初心者には
ハードルが少し高すぎると思います。


HP完成までもう少しです♪

つづく。。。(^-^;
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。