#JUGEM のブログを #ホームページ に見えるようにカスタムしてみました。
なかなかハマるシステムで面白かったです。
私が得意なのはBloggerなのですが、話もらったときには、すでにJUGEMでブログは作ったと明るく言われ…、今の時代、ブログ=ホームページなんだと説明。 で、見てみたところ、Gooはどうしようもなかったのですが
Jugemは上の画像を見てもわかるように、外部リンクのJQueryも使えるみたいで、わりと自由度が高く、カスタムできることを確認しました(さすがはパペポのシステム!)。
もうたぶん、JUGEMを頼まれることなんてないと思うけど、メモとして紹介します。
こちらにテスト中です(pcのみ)
まず、トップページとトップページ以外の書き換えは、
CSSでbody#inde がホームページになり、
記事単独は body#eid で、 それ以外がなし。ということです。
カレンダーをクリックしたり、カテゴリーでの表示は IDは、なしになり、続きを読むの前だけが表示され、コメントがなくなるようです。
cssで、すべて操作するというシンプル設定です。
それで、フリースペースというのが5個設定できますので、こちらも
<!-- BEGIN freespace1 -->
{freespace_title1}
{freespace_contents1}
<!-- END freespace1 -->
と入れるだけです。 タイトル入れないで本文だけで使えば、いろいろかっこよくトップページにのみ表示することができます。
メニュー部分のhtmlで使ってもいいですね。
ホームのメニューも #index#menu#home とかで 見せないようにするなどするとかなりいじれます。
後、1ページに1つつづ記事を入れるようにして、ホームページらしく見せたいのですが、
無料版だと2つめの記事に広告が出るみたいでして、それを消す(本番運用にはもちろん有料でやりますよ)
デザイン見るのにうざいのでテスト版は上記で消してみました。その気になったら、完全カスタムできるような仕様のようです。
有料版になったら2個目を消すは消さないと逆に記事が消えちゃいますので注意です。
自分のページのリンクを削除するのは、このように書くといいそうです。 この自分のリンク消すというのは、超便利なのですが、細かく読んでないのですが、なぜか定番のFancyBoxの最新のとはぶつかるので、古いのを使いました。
こういうJSを使う場合は、GoogleSiteを使って無料のデータスペースに保存して通常は使いますが、本家にリンクしてしまうこともあります。
ツイッターカード、および、FACE BOOKにJUGEMを対応させる…
そして、さらに各記事に…
というのを、HTMLバージョンに書き込みます
これで、ブログの設定や、
ここにある、タグを使うことで、簡単に表示できるのですが、Twitterは、どうしてもタイトルとか自由にいじれませんでしたので、ここのを使いました。 ↓をエントリーの最後に追加し、トップページは非表示にするCSSを設定します。
新春メッセージ https://t.co/vgzg7UI9oP— さいき ゆみ (脱原発20年) (@yumisaiki) 2017年1月17日
↑ こんな感じから…。
こんな感じになりました↓
— さいき ゆみ (脱原発20年) (@yumisaiki) 2017年4月1日ただし、フェイスブックはこのままです。
これ、何とかならんかなと思いますけどねぇ… ただツイッターしたら、フェイスブックに反映する人も多いので… かなりこれで拡散力は高まると思います。
後、スマホ版は、見やすい?感じのテンプレートしか使えない仕様になっております。
これがPC版を見るというボタンがあるのに、スマホ版にもどすというのがありませんで、調べたところキャッシュを取るというボタンをつけたらよいと。
上記のようにボタンをつけました。
一応、PC版では、横のコラムを消して軽くレスポンシブ対応させました。
スマートスクロールボタンをつけました。
背景を一部全面に使い、背景でスライダーできる「BgSwitcher」というのを採用しました。 header 部分に他のページは 背景画像は、noneで指定しているので、 body#index header をその下に CSS設定する時に、背景を1枚は指定しておかないと動かないから注意です。
スマホ用の標準テンプレートについてですが…
スマートフォンのカスタムもいろいろ情報があります。 アンドロイドのChromeで view-sorce: とアドレスに打つとスマホでソースが見えるというのは、考えたら当たり前だったのですが、思いつきませんでした!
画像の横幅は355PXくらいですが、あえて倍に作ってwidthで指定して見せるとキレイに見えるようです。
で、スマホもjQuery をフリースペースに書き込むと、いろんなカスタムが可能なようです。
とりあえず、いい感じのテンプレートの下のメニューがなぜかarchiveとか英語になっているのは操作性が悪いのと、JUGEMのお勧め記事を消しました。
ぐっと今風になったと思います! 兵庫本部のも作らせてほしい!
というわけで、兵庫9区きくち憲之さんをよろしくお願いします!
— さいき ゆみ (脱原発20年) (@yumisaiki) 2017年1月18日
JUGEMの感想
Bloggeの方が、完全に色とかコンパネで操作できるので、直観的に季節に応じて雰囲気をお客様が変えたり、理論的にウジェットに制限もなくカスタム度は高いです。が、それのせいか、やはり挙動が物によっては重くなります。JUGEMは大変軽く表示も比較的早いと思いました。有料版が広告がなくなりますが、それも300円税別 とかなりお安い方かと思います。
自分のアフィリエイトなんかも貼れますし、ドメインでも運用できるようです。
なかなか、いいなと思いました。
JUGEMをカスタムしてのホームページのご用命お待ちしてます! たぶん安いよw
もう、中国の仕事が、最初の話では全然暇だよ!と言うのに、Amazonの規約変更とかでむっちゃ忙しく、ノイローゼになるほどでして…
たぶん、そのストレスで円形脱毛症になったんじゃないかなと思っています。
本当に、夫の介護をしながら、家で好きな感じでできるなあと思っていましたが、
小遣い程度で、まぁ仕事あるある。 ま、ベンチャーやってたので、気持ちもわかるんだけど
なかなか、ネットショッピング難しいなと思うことばかりですよ。
でも、確かに面白い。 私が入って売り上げは…まあまあよくなったと思うのですが…
あまりに安いので、これは損だと思うようになり、せっかくなので、さびついている中国語の勉強をしています。チャットもグーグルで翻訳しながら中国語を使うようにしていますが、
本当に若い子が親切にいろいろ教えてくれて、楽しい。
チャットはいけますが、電話は全然通じないですw 同じにしゃべってるつもりなのですけど…
ま、私が中国語をマスターしても、
いったい、何の役に立つかなと思うのですが、
いつか、中国に旅行に行きたいです。
Googleの翻訳は発音もわかるのがいいですね。
たぶん、そのストレスで円形脱毛症になったんじゃないかなと思っています。
本当に、夫の介護をしながら、家で好きな感じでできるなあと思っていましたが、
小遣い程度で、まぁ仕事あるある。 ま、ベンチャーやってたので、気持ちもわかるんだけど
なかなか、ネットショッピング難しいなと思うことばかりですよ。
でも、確かに面白い。 私が入って売り上げは…まあまあよくなったと思うのですが…
あまりに安いので、これは損だと思うようになり、せっかくなので、さびついている中国語の勉強をしています。チャットもグーグルで翻訳しながら中国語を使うようにしていますが、
本当に若い子が親切にいろいろ教えてくれて、楽しい。
チャットはいけますが、電話は全然通じないですw 同じにしゃべってるつもりなのですけど…
ま、私が中国語をマスターしても、
いったい、何の役に立つかなと思うのですが、
いつか、中国に旅行に行きたいです。
Googleの翻訳は発音もわかるのがいいですね。
0 コメント :
コメントを投稿
コメントありがとうございます。