【疲れた】HP上部の「ヘッダー画像」を変更しました。PC版7案、モバイル版4案と、Photoshop作業で私とたけPグッタリ(笑)。もう寝てもいいですか・・・

こんにちは。部長ナビ(@nabi_1080)です

疲れました。今日はアップしなきゃいけない記事がたくさんあったんですけど、無理です。やめておきます。アップしてもあと1つです。もう今日は子供達と遊んで、早く寝ることにします。

あやかぜはちなみに、出張で県外に飛行機で旅立っていきました・・・。

スポンサーリンク

たけPの一言から始まった

元々は、SLPRO Xが「ウォーターマーク」に対応したところから話が始まります

SLPRO Xでモブログ!iPhoneからWordPressを更新する方法!
SLPRO Xでモブログ!iPhoneからWordPressを更新する方法!
SLPRO X野郎の部長ナビ(@nabi_1080)だぜ! iPhone 6s Plusからのブログ更新はハッキリ言って現実的では無いと思...

このアプリが最近のアップデートで、ウォーターマークに対応しました。これは何かというと、「勝手によそで写真を使われないように、端っこに薄く自分のマークを入れる」というもので、私も右下に「nabi1080」というウォーターマークを入れています。コレについては後でアプリの使い方をまとめますね

このnabi1080も、たけPが作ってくれました。で、SLPRO Xで使おうと思ったら、「正方形のみ対応」ということで、たけPに聞いたら、使ってるアプリの関係で無理と言われ、その時に「犬の絵使ったら?」と言われたのです。

ユニバーサル授業研究会発表のご褒美はやっぱり天一!
ユニバーサル授業研究会発表のご褒美はやっぱり天一!
こんにちは。部長ナビ(@nabi_1080)です 無事に、ユニバーサル授業研究会が終わりました! 詳細は別記事で書きます。 ご褒美はや...

この記事で使われているウォーターマークがSLPRO Xで使うために作った私の書いた「犬」の絵ですね。

次は、トップページのタイトルへ飛び火

たけPは、「トップページのアイコンも犬にしたら〜」なんて言ってきたので、頑張って作りました

【iPad Air 2+Jot Touch+Draw+MacBook Pro+Photoshop】トップページのロゴ画像を手書きで作ろう!
【iPad Air 2+Jot Touch+Draw+MacBook Pro+Photoshop】トップページのロゴ画像を手書きで作ろう!
こんにちは。部長ナビ(@nabi_1080)です さて、トップページ上のロゴが手書きに変わりました。ええ。たけPが「犬にしたら?」という事を...

スゲー頑張ったよ。俺は頑張ったよ。1時間半もかけたよ

突然画像が送られてきた

たけPから、LINEで突然画像が送られてきました。それがコレ

S__11919375

これです。

で、これをトップページの上にある灰色の部分に入れて見たら、全く縦の幅が入らないことがわかり、しかも、犬の絵とかぶることもわかりました

縦の幅や色々や制限をたけPに伝えてしばらく経つと、次が送られてきました

職人、たけPの作品が続々と

PC版第2案

S__11919381

コレが、第2案です。微妙に周りに余白があるので、Photoshopで余白を削除して保存し直し、アップして確認すると言うことをずっとやりました

PC版第3案

S__11919392

縦を細くしてくれと言ったらコレが来ました。スゴいよね。レスポンスが早い

PC版第4案

S__11919408

タイトルが入りました

この段階で、私はタイトルとキャッチフレーズを「display:none」で消しまして、コレで行こうと最初は思いました

が、Twitterでも書きましたが、これ、全部画像なので、クリックしてもトップページに戻らないんですよ。ダメじゃん・・・。ってことで、画像無しバージョンで、私がトップページに戻るロゴをPhotoshopで3分で作りました

俺の作ったロゴ(Photoshop3分)

logoheader

これですね。コレを作りました。コレをクリックするとトップページに戻ります。あっという間に出来ます。Photoshop最強ですな

PC版第5案

S__11919420

第2案と比べて、下の写真が細かくなったものが来ました。良く、この構成が思いつくよね。スゴいよ。でも、コレ、上半分くらいしか入らなくてボツ

モバイル版第1案

S__11919422

モバイルは、PCと違って、表示が「横幅に合わせて、縦幅も自動縮小」と言う事が分かりました。PC版は下が切り取られますが、モバイルは縮小です。ですので、ロゴとのバランスを取って縦幅を変えたものを注文して送られてきた第1案がコレ

コレ、結構良いかなと思ったんですが、ロゴと結構かぶったりして、もう少しスッキリした感じで注文しました

モバイル版第2案

S__11919423

これ、縦長なんですけど、コレをモバイルで表示すると縦が入りきらなくて、上の段しか表示されないことがわかりました。っつーか、たけPは、俺の18歳の写真が好きなんだよね(笑)。どこに需要があるのかわからんが、グイグイ推してきます(笑)

モバイル案第3案

S__11919424

コレも上下、どちらかの段しか入らなくて断念しました。良い感じなんですけどね。この辺から、段々私もたけPもわかってきます

モバイル版第4案

S__11919429

コレで決まりです。今のモバイル版、おわかりですか?

この「下の段」なんです。下の段だけをPhotoshopで切り取ってアップして使ってます。縦幅バッチリです。やるなたけP。お疲れ!モバイル終了!後は、PC版だ!

もう、何時間やってるかわかりません(笑)

PC版第6案

S__11919439

結局、1段にしてもらいました。ゴチャゴチャするので、スッキリした方が良いかと言うことで、たけPに頑張ってもらいましたが、「なんで18歳のオレが入ってるのよ(笑)」って言ったら、すぐに修正してくれました。ゴメンなたけP(笑)

PC版第7案

S__11919443

はい。コレが今表示されているヘッダー画像です。PCと、タブレットがこの表示になります。

真ん中をゆっきーの手紙に変えてくれました

お陰様で非常に素晴らしい見た目のトップページになったのでは無いかと思います

最後のたけPのLINEは「疲れた・・・」で、その後は既読がつきません(笑)。酒飲んでると思います(笑)。

俺も疲れた・・・。

今日はあやかぜの出張に伴う子供の宿題対応と、対話型アクティブラーニングの資料、DVDを5件発送(ユニバーサル授業研究会のまとめをA4で3枚作った・・・)というのを同時進行しながら、コレもやってました。

見ての通り、余白がかなりあるので、Photoshopで取り込んで、切り取って、保存し直してWordPressでアップして、縦幅調整して、みたいなことをずっとやってました。マジ疲れた・・・。

でも、お陰様で良い感じで出来ましたので、たけPには感謝です。

皆さんいかがでしょうか?たけPへのお疲れメッセージもお待ちしておりますね〜

今後とも、部長ナビのページをヨロシク〜

スポンサーリンク

この記事をシェアする!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索