2019年10月03日

pomu.meの代わりになりそうなペライチを使ってみる・その2

前回・pomu.meの代わりになりそうなペライチを使ってみる・その1の続きです。

サービス終了するpomu.meで作っていたような、私がやっているブログやSNSをまとめたページ
一言でまとめるならリンク集を作るために、
似たようなページが作れるらしいペライチに登録してみたのが前回。

登録と触り方の説明(チュートリアル)までは終えたので、今回は続きから。
pomu.meで作ったページの代わりになるようなページを作っていきます。


続きはまた今度…なんて分割せずにこの記事1つで終わらせていますので
『なんかこのページ長いな…ペライチって難しいのかな』と思われるかもしれませんが
画像をいっぱい貼って、文章でも説明を入れているから長い記事になってるだけであり
実際に触ってみるとすっごく簡単です。

テンプレート選び→出てくる説明に軽く目を通す→編集
という流れでやっていきますので
もし読みたい項目が決まっている方は、下のショートカットを使って飛ばしていただければ。

編集作業を始めるところまで飛ぶ
メインの作業・パーツの配置を始めるところまで飛ぶ
SNSリンクとヘッダーの設定を始めるところまで飛ぶ


一番の理想は、
私が使っている格安スマホの回線でも重く感じにくいページを作ること。
wifi環境にいない時でも動作確認がしやすくしたいです。


ペライチの作成はPCで行っておりますので、
ところどころスクショが大きくなっております。
できる限り調整はしておりますが、スマホ版とはちょっと違うところがあるかもしれません。

表示が小さいだけなので、
拡大して見てみたくなったらクリックorタップで大きい画像を出せます。






*----------*


新しいページの作成は

ペライチその2.jpg

ログイン直後の画面で、右のほうにある
赤紫色のボタンから始めます。


最初は、編集していくもとになる基本のデザイン・テンプレート選び。

私が登録した時点では、
有料のもの・無料のもの合わせて57件ありました。

無料のテンプレートだけでも32種類あるのでかなり迷いましたが、

ある程度形ができているテンプレート・サービス紹介(シンプル)
どんな形にするか全て自分で決めて作っていく・ブランク
の2択まで絞り

ペライチその1.jpg

ブランクで作っていくのを選びました。


登録時に、有料プランが一定期間無料で使える特典が付いている方は
その期間内に作成するページ数に気を付けないといけません。

無料プランであるスタートプランで公開できるページの上限は1つなので
期間が切れたら、最終更新日が古いものから順に非公開になってしまいます…。

人を紹介したら、公開できるページ数が最大10ページまで増えるみたいなので
公開したいページ数を増やしたいけれど、有料プランを使うかどうかは迷っちゃう…という方は
試しにこの招待キャンペーンを使うといいかもですね。


有料プランは、ページ数を増やす以外にもできることがあって
独自ドメインを設定できるとか、有料プランでしか使えない機能もあり
ここで書いちゃうと、ただでさえ長い記事がさらに長くなっちゃうので
料金プランの案内・各プランでできることの一覧が載っているページをどうぞ。

『気に入ったテンプレートが有料のものだった…』
『使ってみたい機能が有料プラン限定だった……』
って方は、
金額がご自分の予算の範囲内であれば有料で利用してみるのがいいかと。



*----------*


少しずれた話を戻して…

私は無料テンプレートのブランクで作ることにしたので、ブランクを選択すると

ペライチその3.jpg

『このテンプレートにはバージョンアップした履歴がある』というような説明が出てきます。

しっかりと見たほうがいいのはこの次に出てくる画面なのですが
こちらの画面も、このテンプレートでできることの説明の1つではあるので
かるーく目を通すといいかと。

大事なのはこちらです。

ペライチその4.jpg

編集画面に移動してから表示されるこの画面は、
ペライチでできることの簡単な説明と、説明動画へのリンク。
文字や画像での説明より、実際に動かしてるところを見るほうが分かりやすい!って方は
動画を見てみるのがいいと思います。


*----------*


ここまでが長くなりましたが、ようやく編集作業を始めます。

編集画面に最初から出ているパーツ(末尾に載せるフッタ向けのものかな)に

ペライチその5.jpg

自分のメールアドレスが出ていたので、

ペライチその6.jpg

まずはここを修正しました。


ここから先の編集作業で大事なのが、こまめに保存すること。

ペライチその7.jpg

左側に出ているメニューの左上、
保存するの項目です。

これを押して、こまめに保存しておけば
間違えて画面消しちゃったり、急に他のことやらなきゃいけなくなっても

ペライチその8.jpg

保存したところから続けることができます。
うっかり消してしまった時に何も保存されてなかったので、
ここまでたどり着いたら一度保存したほうがいいです。


*----------*


ここからはメインの作業・パーツの配置です。

画面に出てる【+】マークを押して、ブロック追加をしようとすると

ペライチその9.jpg

できることがいっぱい出てきます。

こんなにあると、どれを選べばいいのか迷ってしまうので
私は先にこれをやることにしました。

ペライチその10.jpg

pomu.meで言うなら、リンクの下に文章を書き添えていた方が多かったと思いますが
あれにあたるパーツです。

上から順に作るのではなく、まずは自分にとって触りやすそうなパーツを先に置いて
自分の中にあるイメージを形にしていくことを優先しました。

ペライチその11.jpg

出てきたパーツをクリックorタップして

ペライチその12.jpg

チュートリアルでやった通り、文字を編集します。
文字入力以外に、色を変えたり大きさを変えたり
もっと難しいこともできますが
今はpomu.meの代わりのものを作ることからブレずにやっていくのでこのままです。

これで、

ペライチその13.jpg

シンプルだけど分かりやすい、リンク先の説明用パーツを作りました。
次はリンクを繋げるパーツを作ります。

*----------*


pomu.meでは楕円形のとこがリンクボタンになっていたので
似たような形をしているこちらを選びます。

ペライチその14.jpg

大きさが4つあり、全部並べると

ペライチその15.jpg

かなり違いがあるのが分かります。

私の中でのイメージに近いのは、4つのうち上から2番目の大きさだったので
【ラウンドボタン(大)】を選びました。

ペライチその16.jpg

編集は、画面に表示される【表示テキスト】【リンク先の設定】のみ。
まず形だけ作りたいので色は後回しにしていますが、まとめて編集しておきたい方はここで一緒にやると楽です。

ペライチその17.jpg

リンクボタン+リンクの説明ができました。

*----------*

あとはこれを、繋げたいリンクの数だけ繰り返します。
(SNS関連は専用ボタンを使うので無理にここでやらなくていいですよ)

リンクを先に並べるか、文字を全部入れてからか
上から順にやっていくかはそれぞれの自由。
やりやすいと思った順番でやるのがいいです。

これは私が自分で作ってたページに似せて作っているので
リンクボタン周辺の説明を入れない主義でやっていた方は、もちろん無しでもいいかと。


入れたいリンクと説明を入れ終わった状態がこちら。

ペライチその18.jpg

次は、後回しにしていたSNSリンクとヘッダーの設定です。
先ほどボタンの項目で見かけたものを使います。

ペライチその19.jpg

すでに、ここに見えている中に使っていないものがありますが

ペライチその20.jpg

配置後に簡単に消せるので大丈夫です。
消したいボタンの右上にある×を押したら消えました。

SNSのリンク向けのボタンデザインは複数あるので、

ペライチその21.jpg

自分の作りたいページのイメージに合うものを選べます。

アイコンを設定したら、このボタンから飛ばしたいSNSのURLを入力し

ペライチその22.jpg

リンクを設定し終えた状態がこちら。

ペライチその23.jpg

この辺まで来たら、まだ保存してない方はいったん保存したほうがいいです。


最後にヘッダー。
pomu.meで表示されていたのはヘッダー・アイコン・プロフィールでしたね。

ヘッダーにアイコンを被せるのは難しそうなので、
ヘッダー画像+アイコン・プロフィールを同じ列に表示させるパーツの2つで作ってみます。

使う項目はこちら。

ペライチその24.jpg

ヘッダー部分には画像/動画の【画像(横幅フルサイズ)】

ペライチその25.jpg

アイコン+プロフィールのところには文章+画像の【左画像】

ヘッダー部分は、画像を自分が使いたいものに入れ替える以外で特に触りませんが、
もう1つのパーツは

ペライチその26.jpg

この中から使わないものを、×を押して消していきます。

ペライチその27.jpg

さっぱりさせました。


最初に書いたとおり、パソコンから編集しておりますが
良い感じの画像はほとんどスマホに入っているので
とりあえず仮置きだけしておくことにしました。

編集を選んで【画像をアップロード】を選択。
だいたいのwebサイトでよくある方法と同じで、フォルダから画像を選びます。

ペライチその28.jpg

名古屋ふらんすで身内が買ってくれた、美味しいタルトです。
画像が大きいので【リサイズ】とやらを試してみます。
仮置きといえど、しばらくはこのままだから
その間にも格安スマホの回線でも不便に感じない軽さのページにしたいので。

ペライチその29.jpg

とりあえず半分の50%でいいかな…と
感覚でリサイズを指定し、画像を設定してみます。

ペライチその30.jpg

こうなりました。
ついでなので、同じやり方でヘッダー画像も変えてみましょう。

ペライチその31.jpg

こっちはかき氷にしました。
去年何件か食べたのですが、記録に残す余裕がなかったので書いていません…。
来年はまたどこか食べに行きたいものです。


画像は仮置きですが、一応は作り終えたので
最後に保存します。

これを忘れるとここまでのものが全て消えるので、絶対に保存しましょう。
いくら簡単にできるといえど、作ったものがなくなっちゃうのは悲しいですからね(´・ω・`)


*----------*


ざっとではありますが、やるべきことはやったので
このページを公開するための最後の手順に入ります。

左側のメニュー、今押したばかりの【保存する】の隣にある【公開する】を押します。

ペライチその32.jpg

いくつかの項目に関して、やり残しがないかどうか聞かれますので
『これはやっておきたい』と思ったことはやりましょう。

私は最初の項目【ページのタイトル・URL決め】だけやりました。

ペライチその33.jpg

URLの一番最後の文字列を自分で設定できるようなので、ランダムじゃなく分かりやすいものに。
タイトルは、リンク集として使うのでこうしました。


*----------*


…と、画像と文章で説明しながら書いたら
ページ内でジャンプさせる機能を付けたくらい、かなり長くなりましたが

ペライチその34.jpg

pomu.meで作っていたような
自分がやっている活動をまとめたリンク集ページができました!


できたページはこちら。
使っているうちに、画像や細かいところのデザインなどをカスタマイズしそうだから
この手順で作った時点のものを画像で貼りますね。

ペライチその35.jpg

まずはpomu.meの代わりを作るという目的は達成できたので
今はここまでで満足です。

実際のページを見たい方向けに、リンクも置いておきますね。

碧乃のーと@活動案内

前述のとおり、今後デザインを変えていく予定なので
時期によっては上の画像と同一のものでは無くなっている可能性があります。








*----------*


これを書きながらやっていたので時間がかかっていますが
書かずにやっていたら1時間程度で作れていたと思います。
どんなことができるか知っている状態でならもっと早いかな。

操作が思ってたより簡単だったから
今回みたく、やりたいことが明確なら迷わなさそうですし。
最短3分というのも、慣れたらそのくらいでできそうだなと思えました♪

私のようにpomu.meの代わりを探している方や、似たようなページが作れるサービスを使ってみたい方は
お手軽にページ作成ができるペライチを使ってみてはいかがでしょうか?






またなにかやってみた時はこちらに書きますね。
画像の差し替えをスマホでやるのは早めにやりたいです…。

posted by 碧乃 at 21:47| Comment(0) | ブログ関連 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
コチラをクリックしてください