GHETTO

ブログ全般のカスタマイズ方法、2018年アメブロカスタマイズの傾向、アメブロ事情、業者などを晒す辛口サイトです。

本ブログは、アメブロのカスタマイズなどの傾向について、淡々と述べています。GHOTTOが意味する通り「強制収容所」です。

オリジナルテーマ「ONIHITODE」を使用しています。本テーマは全文形式を一覧形式に変更します。
レスポンシブ対応しています。
尚、テーマストアでの公開予定はありません。この為、連絡頂ければ提供したいと考えています。

はてなブログProでないとHTMLタグ入力に制約がある

f:id:universal-zero:20180103164246p:plain

現象

編集モードを[見たままモード]にし、[HTML編集]で以下を入力した。
[編集みたまま]に切り替えた後、再度、[HTML編集]に切替えると、入力したタグが消える。

<i class="fa fa-wifi" aria-hidden="true"></i>

原因

お問い合わせいただきました HTML 編集タブにつきまして、ご入力いただきました内容によっては、 自動的に置換、補完されるため意図通りでのご利用ができない場合がございます。
もし、HTMLを書いたとおりに表示させたい場合には、 以下の「HTMLモード」での編集がいただける機能を、はてなブログProで提供いたしております。
はてなブログProのご利用については有料となりますが、こちらのご利用もあわせてご検討いただけましたら幸いです。
2018年1月18日

staff.hatenablog.com

対策

動作仕様。

テーマ「ZENO-TEAL」で検索ボタンの定義を見直す

f:id:universal-zero:20180110135356p:plain

現象

検索ボタンの領域が少し小さい。また擬似要素でアイコンフォントを重ねる際、z-indexを止め、pointer-events:noneを用いる。

f:id:universal-zero:20180117152534p:plain

原因

.search-module-button {
  height              : 2rem;
  z-index             : 2;
}

.search-form:after {
  height              : 2rem;
}

対策

.search-module-button {
  height              : 100%;
}

.search-form:after {
  pointer-events      : none;
}

アメブロは教えたガールが多い

f:id:universal-zero:20180107150133p:plain

はじめに

ameblo.jp

アメブロ界隈のセミナーの印象

https表示非対応に書かれているJavaScriptは、他人から知り得た情報に過ぎない。
アメブロ界隈は「教えたガール」が多い。
耳にしたことを単に口伝てに聞かせているだけ。
ある意味、イタコ。
職場で見せると「単に公民館でやる習い事と同じでしょ」と。
所詮、オバさん達の単なる座談会、寄り集まりにしか映らない。
場所が公民館でなく、スタバとか、今で言うインスタ映えする場所だったりするから、キラキラ感が強く見栄えだけは良いが。
IT企業での実務経験がなく、結局は素人。

ameblo.jp

↑掲載しているブログも、新デザイン1120px幅なのに、何でヘッダ幅が旧デザインの980pxよ。
セミナー受講者のデザインの修正請負ったが、今までアメブロ界隈で見たコードの中で悲惨。文字化けの上、コーディングエラーだらけ。 


ameblo.jp

↑カスタマイズも、他人が作ったツールを使ってCSS吐き出してお終いかよ。
コードの理解くらいして欲しいね。
カスタマイズも旧デザインって何時のネタよ。
これで金貰うから笑える。

 

ameblo.jp

↑これも何処かのコードのコピー。float解除に理解しているならcontentに文字入れねーだろ。これでWebデザイナー言うのは恥ずかしい。

.nav-body:after {
  display             : block;
  clear               : both;
  content             : ".";
  height              : 0;
  visibility          : hidden;
}

↓そこで習った一期生がまた伝え、同じコードで被害拡大。

ameblo.jp

まとめ

カスタマイズ言っているけど、こんなのばかり。
企業で働くプログラマ、新人が見てハズカシ過ぎだと呆れ。
金得たいなら、勉強してもらいたいね。
真っ当に、プログラミングし、デバッグで四苦八苦し、給与得るのがアホらしくなるわ。

アメブロの迷走するデザイナー

f:id:universal-zero:20180107150133p:plain

はじめに

ameblo.jp

提供したブログのCSS

以下のCSSを調べた結果を述べる。

ameblo.jp

  • メニューバーを画面いっぱい帯を伸ばしたい。
    しかし、.skin-blogSubA.skin-blogSubBposition:relativeとなっている為、画面原点とならない。この為、.skin-bgHeaderの背景画像としている。
    画像を用いる必要がない。
  • リンク領域をtop:50pxとしているが、メニューバーの高さは51pxなので位置が間違っている。
  • ヘッダの配置をhover時、opacity:0.9としている。
    .skin-headerImageに定義すれば、hoverの定義は不要。ヘッダが透過するのは、好みでないが。
  • .skinTextColor.skinBaseTextColor.skinBlockは旧デザインのclassで不要。

修正前

/* メニューバー */
.skin-bgHeader {
  height              : 620px;
  background-image    : url("メニューバー背景画像URL");
  background-repeat   : repeat-x;
}

/* ヘッダ */
.skin-bgHeader>div {
  height              : 620px;
  background-image    : url("ヘッダ画像URL");
  background-position : 0 51px;
  background-repeat   : no-repeat;
}

.skin-bgHeader>div:hover {
  opacity             : 0.9;
  -ms-filter          : "alpha(opacity=90)";
  filter              : alpha( opacity=90);
}

.skin-bgHeader>div>a {
  height              : 570px;
  position            : absolute;
  width               : 1120px;
  top                 : 50px;
}

/* ブログタイトル・説明文 */
.skin-headerTitle {
  display             : none;
}

/* メニューバー */
#globalNav {
  text-align          : center;
  width               : 1120px;
  height              : 51px;
  position            : absolute;
  top                 : -735px;
  left                : 0px;
}

#globalNav ul {
  display             : inline-block;
  height              : 51px;
  list-style-type     : none;
  font-size           : 0px;
}

#globalNav ul li {
  display             : inline-block;
  height              : 36px;
  margin-right        : 45px;
  padding-top         : 16px;
  font-size           : 12px;
}

#globalNav ul li:last-child {
  margin-right        : 0;
}

#globalNav ul li a {
  line-height         : 100%;
  text-decoration     : none;
}

#globalNav ul li a {
  text-decoration     : none;
  color               : #fff;
}

#globalNav ul li a:link {
  text-decoration     : none;
  color               : #fff;
}

#globalNav ul li a:visited {
  text-decoration     : none;
  color               : #fff;
}

#globalNav ul li a:hove {
  text-decoration     : underline;
  color               : #dedede;
}

#globalNav ul li a:active {
  text-decoration     : underline;
  color               : #dedede;
}

/* サイドバー読者になる */
.skin-btnSidePrimary {
  background          : #8a0357!important;
  border              : 0;
}

/* 全体 */
.skinTextColor,
.skinBaseTextColor,
.skinBlock,
body {
  font-family           :"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
  font-feature-settings : "palt";
  color                 : #666;
}

修正後

/* ヘッダ */
.skin-bgHeader {
  padding             : 51px 0 0 0;
  background-color    : #f7f7f7;
}

.skin-headerImage {
  height              : 570px;
  background          : url("ヘッダ画像URL") no-repeat;
}

/* ブログタイトル・説明文 */
.skin-headerTitle {
  display             : none;
}

/* メニューバー */
#globalNav {
  background-color    : #890457;
  position            : absolute;
  top                 : -736px;
  left                : 0;
  padding             : 0 1920px;
  margin-left         : -1920px;
}

#globalNav ul {
  width               : 1120px;
  text-align          : center;
}

#globalNav ul li {
  display             : inline-block;
  margin-right        : 45px;
  line-height         : 51px;
  font-size           : 12px;
}

#globalNav ul li:last-child {
  margin-right        : 0;
}

#globalNav ul li a,
#globalNav ul li a:visited {
  text-decoration     : none;
  color               : #fff;
}

#globalNav ul li a:hover {
  text-decoration     : underline;
  color               : #dedede;
}

/* サイドバー読者になる */
.skin-btnSidePrimary {
  background          : #8a0357!important;
  border              : 0;
}

/* 全体 */
body {
  font-family           :"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
  color                 : #666;
}

提供したプロフィールのCSS

フリースペースにわざわざ<style>で記述している。
別サービスの為、メール送付されたコードを依頼者が埋め込むのだと思うが。
ブログとプロフィールページでclassは重ならない。
この為、ブログのCSS編集ファイルに記述し、それを@importさせた方が双方楽だと思う。

  • コーディングにエラーがある。(★)
  • #wideContentsAreaに高さを定義している。この為、#ambFooterの領域が#contentsAreaと重ってしまっている。

修正前

/* 全体 */
body {
  font-family         : "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", sans-serif!important;
  line-height         : 1.6!important;
}

/* プロフィール、ブログ、ピグの部屋 */
#wideContentsArea {
  background-image    : url("メニューバー背景画像URL");
  height              : 696px;
  background-repeat   : repeat-x!important;
}

#header {
  margin-bottom       : 0!important;
  height              : 41px!important;
  width               : 1120px!important;
}

#header #navList {
  float               : none!important;
  display             : inline-block!important;
}

#header #navList .last {
  padding-right       : 0!important;
}

#header ul li {
  float               : none!important;
  display             : inline-block!important;
}

/* ニックネーム */
#header h1 {
  color               : #000;
  font-size           : 18px;
  font-weight         : bold;
  float               : left;
  position            : absolute;
  top                 : 685px;
  padding-left        : 70px;
  display             : none!important;
}

#header #navList {
  color               : #ccc!important;
  font-weight         : normal;
  margin-top          : 4px;
}

#header #navList a {
  text-decoration     : none;
  color               : #ccc!important;
}

#header #navList a:link {
  text-decoration     : none;
  color               : #ccc!important;
}

#header #navList a:visited {
  text-decoration     : none;
  color               : #ccc!important;
}

#header #navList a:hover {
  text-decoration     : none;
  color               : #fff!important;
}

#header #navList a:active {
  text-decoration     : none;
  color               : #fff!important;
}

#header h1 a {
  text-decoration     : none;
  color               : #000!important;
}

#header h1 a:link {
  text-decoration     : none;
  color               : #000!important;
}

#header h1 a:visited {
  text-decoration     : none;
  color               : #000!important;
}

#header h1 a:hover {
  text-decoration     : none;
  color               : #ccc!important;
}

#header h1 a:active {
  text-decoration     : nonecolor: #000!important;/*★*/
}

/* ヘッダ */
#contentsArea {
  width               : 980px!important;
  padding             : 696px 70px 0 70px!important;
  background          : url("ヘッダ画像URL") no-repeat!important;
}

/* 左エリア */
#leftArea {
  width               : 300px!important;
  font-size           : 14px!important;
}

/* プロフィール */
/* 自己紹介 */
/* マイプロフィール */
#profData h2,
#myMessage h2,
#profileList h2 {
  font-weight         : bold!important;
  font-size           : 14px!important;
  color               : #666!important;
}

#profileList h3 {
  color               : #666!important;
}

/* 右エリア */
#rightArea {
  width               : 650px!important;
  font-size           : 16px!important;
}

.subTitle {
  padding             : 0!important;
  background-color    : transparent!important;
}

.subTitle h2 {
  width               : 650px!important;
  border-bottom       : 1px solid #e5e5e5!important;
  margin-bottom       : 24px!important;
  padding-bottom      : 13px!important;
  font-size           : 20px!important;
  color               : #333!important;
}

/* フリースペース */
#freeArea {
  padding             : 0!important;
  margin-bottom       : 60px!important;
}

/* アメンバー */
/* ブログ */
/* グルっぽ */
#amember_div,
#blog_div,
#guruppoArea {
  margin              : 24px 0 24px 0!important;
  padding             : 0!important;
}

/* 引用符 */
blockquote {
  margin-left         : 1em;
  border              : 8px solid #efefef;
  border-radius       : 8px;
  padding             : 20px;
}

修正後

/* 全体 */
body {
  font-family         : "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", sans-serif!important;
  line-height         : 1.6!important;
}

/* プロフィール、ブログ、ピグの部屋 */
#header {
  position          : relative;
  width             : 100%!important;
  background        : #f7f7f7 url("ヘッダ画像URL") center bottom no-repeat!important;
  padding           : 0 0 570px 0;
  margin            : 0;
  border-bottom     : 1px solid rgba(0, 0, 0, 0.2);
  overflow          : visible;
}

#header:before {
  content             : "";
  display             : block;
  position            : absolute;
  bottom              : -75px;
  width               : 100%;
  border-top          : 1px solid rgba(0, 0, 0, 0.2);
}

#header #navList {
  float               : none!important;
  margin              : 0;
  padding             : 0;
  background-color    : #890457;
  line-height         : 51px;
  font-weight         : normal;
  color               : #ccc!important;
}

#header #navList a,
#header #navList a:visited {
  text-decoration     : none;
  color               : #ccc!important;
}

#header #navList a:hover {
  text-decoration     : none;
  color               : #fff!important;
}

#header #navList .last {
  padding-right       : 0!important;
}

#header ul li {
  float               : none!important;
  display             : inline-block!important;
}

/* ニックネーム */
#header h1 {
  display             : none!important;
}

/* コンテンツ */
#contentsArea {
  width               : 980px!important;
  padding             : 113px 70px 0 70px!important;
}

/* 左エリア */
#leftArea {
  width               : 300px!important;
  font-size           : 14px!important;
}

/* プロフィール */
/* 自己紹介 */
/* マイプロフィール */
#profData h2,
#myMessage h2,
#profileList h2 {
  font-weight         : bold!important;
  font-size           : 14px!important;
  color               : #666!important;
}

#profileList h3 {
  color               : #666!important;
}

/* 右エリア */
#rightArea {
  width               : 650px!important;
  font-size           : 16px!important;
}

.subTitle {
  padding             : 0!important;
  background-color    : transparent!important;
}

.subTitle h2 {
  width               : 650px!important;
  margin-bottom       : 24px!important;
  border-bottom       : 1px solid #e5e5e5!important;
  padding-bottom      : 13px!important;
  font-size           : 20px!important;
  color               : #333!important;
}

/* フリースペース */
#freeArea {
  margin-bottom       : 60px!important;
  padding             : 0!important;
}

/* アメンバー */
/* ブログ */
/* グルっぽ */
#amember_div,
#blog_div,
#guruppoArea {
  margin              : 24px 0 24px 0!important;
  padding             : 0!important;
}

/* 引用符 */
blockquote {
  margin-left         : 1em;
  border              : 8px solid #efefef;
  border-radius       : 8px;
  padding             : 20px;
}

金を得ることに迷走

graphicpark.org

  2カラム・メニュー左 2カラム・メニュー右 3カラム・右ワイドメニュー 3カラム・左ワイドメニュー 3カラム・右メニュー
スタンダード 926円 926円 926円 926円 926円
リスト 926円 926円 926円 926円 926円
タイル 926円 926円 - - -

CSS自体は大したことない。
メニューバー(フリースペース)を配置した際、サイドA、サイドBの何れで、原点が異なる。1行だけ変更するだけ、提供メニュー分けはどうかと思う。
アメブロボトムズは分からないので、違うものと思い依頼する。
本コードを見て、ヘッダーと「読者になる」ボタン、メニューバーのみ。
多分、リスト、タイルのCSSは未定義でデフォルト定義のままだと思うが。
ある意味、商売上手か。

アメブロ提供のCSS編集用テンプレートは、スタンダード、リスト、タイル、レイアウトに関係なく全て同じCSS

経歴は意味をなさない

せめてThe W3C CSS Validation Serviceでコーディングチェックくらいはすべき。
経歴記すが、会社組織ならチームで企業サイトを作成し、チーム・組織の中で、何処のポジションだったのかが問題
成果は、一個人ではないのだから、書き並べても余り意味をなさない。
その経歴で、コーディングミス、チェックを疎かにする行為はあり得ない。

まとめ

サービス内容と価格を見ると、アメブロ界隈のどこぞのコピーの集大成や、WordPressの設定だけでクソ高い金額を請求する業者に比べ、かなり良心的
今回、調査しfont-feature-settings:"palt"を初めて知り得た。
ただWindowsの場合、メイリオでは無効と言うこともあり、不要では。
Macの標準フォントでの効果は分からないが。
あと、focus、active定義の必要性を感じない。

saruwakakun.com

www.bricoleur.co.jp

オリジナルテーマ「ONIHITODE」を作成

f:id:universal-zero:20180114194443p:plain

紹介

本ブログはオリジナルテーマ「ONIHITODE」を使用。

  • 全文形式をカード形式で表示。
  • レシポンシブに対応し表示。
  • ソースコードの可読性が良く、容易に改善可能。

テーマの名前の由来

以下のデザインを参考に作っており、サンゴの大敵のオニヒトデが由来。

saruwakakun.design

設定

  • トップページの表示形式は「全文形式」。
  • 記事を書くアイキャッチ画像を設定要。
  • トップページのサムネイルは記事の先頭画像を表示。
  • 記事に画像がない場合、ブログトップは、標準の「はてなブログ」のアイキャッチ画像を表示。
[設定] > [詳細設定] > [アイキャッチ画像]の設定は不要。
設定した場合、サイドバーとブログトップのサムネイルが異なる。

制約

年月日の一覧など不要と思えるリンクは無効に。

突然、首がYOSHIKIみたいになってしまった

f:id:universal-zero:20180114003319p:plain

はじめに

www.joa.or.jp

日常のことは書かないようにと思ったが、余りにも突然の出来事なので、記録として記してみようかと。
2018年1月7日に寝違えて発祥。

通院

2018年1月13日に耐えれなくなり、近所の総合病院へ。
寝違えたにしては、左上腕三頭筋が筋肉痛のようにクソ痛い上、左親指、人差し指に痺れがあり。
かなりヤバくね?!
整形外科を受診し、即MRIと首周りのレントゲン撮影を。
MRIは初めてだったが、CTに比べ結構狭く、スキャンする音が結構煩く。
閉所恐怖症を和らげる為か、ヘッドホンで音楽を聞かされ。
何かよー分からんが、溶接マスクみたいな物を被され20分程、スキャンを。
その後、レントゲンで首周りを正面、側面と撮影。

検査結果

洒落にならん。
MRIの断面図見たら、頚椎の6番目が狭くなり、どうも神経根を圧迫していると。
狭窄は徐々にだが、発祥は突然とはね。
帰宅してネットで調べると、ズバリそのものの記事多数。
まるでTV番組「スーパードクターズ」に出てくる症例に。
参ったわ。
まだ利き腕でない左腕で良かったが、これが右腕じゃ、仕事にならん。

処置

首の負担軽減の為に頚椎カラーを巻く羽目に。
この装具が15,000円と見た目に比べ高く。
装具屋に代金払った後、区役所に請求すると還付できるみたいだが。
救いは冬と言うこと、夏なら蒸れて堪らんわ。
それに、汗とか汚れると嫌なのでBigiのバンダナを巻き。
あと薬が処方され。

  • ロキソプロフェンNa錠
  • レバヌピド錠
  • リリカOD錠

感想

些か、首にメスは怖いわ。
3ヶ月経過しても緩和されない場合、専門医「品川志匠会病院」にセカンドオピニオンを頼もうかと。
手術となった場合、切開の大きさに伴う術後の経過、入院期間が気になるし。
緩和しても根治した訳でないから、PCに向かう時、姿勢が悪いので気を付けないと。
昨年、体調を崩しジムに行かなくなったので、首周りだけでなく、筋肉が落ちたのも要因か。
その上、PCに向かう時間が多かったので、尚更だ。
首痛めてジムでウェイトは大丈夫か気になるが、プールで少し身体を馴染ませてからか。

経過報告

日付 症状
2018年1月14日 薬のお陰か、昨日に比べ左上腕の痛みが軽減。
首自体の痛みが緩和され。
2018年1月14日 気になり、専門医にメールしてみた。
後で気付いたが別の病院へ異動し、メールが届くか気になったが心強い返信が来た。
2年前、ジムでショルダープレスして同じように左上腕に痛みが出たが、今思えば筋肉痛でなかったかも知れない。
2018年1月17日 病院へ行き、装具代を業者に支払いに。装具代は別途保険適用で割戻しとなる為、説明を聞き区役所で処理を。
通院時より大分痛みが消え、作業に支障はないが、長時間だと肩こりのような症状が。

テーマ「ZENO-TEAL」でアニメーション時アイコンフォントの表示が崩れる

f:id:universal-zero:20180110135356p:plain

現象

iPhone7で表示した際、hoverの時、アイコンフォントのアニメーション表示が崩れる。

  • アニメーションの残像が残る。
  • 意図しない領域でアイコンフォントが途切れる。

f:id:universal-zero:20180118194600p:plain

.recent-entries-item {
  overflow            : hidden;
}

原因

不明。アイコンフォント幅が期待と異なる。

暫定対策

変更前

.urllist-item::before {
  content               : '\f006';
  font-family           : blogicon;
}

変更後

アイコンフォントをFontawesomeに変更する。

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
.urllist-item::before {
  content               : '\f054';
  font-family           : fontawesome;
}

テーマ「ZENO-TEAL」で検索ボタンの定義に問題がある

f:id:universal-zero:20180110135356p:plain

現象

iPhone7で表示した際、検索ボタンの周りに半透明なボタンが表示される。

f:id:universal-zero:20180113184450p:plain

原因

検索ボタンが透過率0.1の為、半透明のボタンが表示される。

.search-module-button {
  background          : rgba(255,255,255,0.1);
}

対策

検索ボタンを透明にする。

.search-module-button {
  background          : transparent;
}

はてなブログのmeta descriptionは「続きを読む」までしか自動設定されない

f:id:universal-zero:20180103164246p:plain

現象

以下のように記事を入力した。

<p><img src="画像"/></p>
<p><!-- more --></p>
<h3>はじめに</h3>
<p>このブログはオリジナルテーマ「Onihitode」を使用しています。</p>

この時、編集画面の「記事概要」が空白のままとなり、本文が反映されない。結果、og:descriptionは以下のように記事タイトルのみとなる。

<meta property="og:description" content="記事タイトル - ブログ名" />

原因

記事入力した際、「続きを読む」の前までが、og:descriptionに反映される。

対策

「続きを読む」を妥当な場所に入力し直すか、人手で「記事の概要」を入力する。

はてなブログの感想

f:id:universal-zero:20180107165314p:plain

はじめに

はてなブログを1週間利用し、アメブロと比較した感想を述べる。

他ブログサービスの比較

サービス PC スマートフォン サイト内検索
HTML CSS JavaScript CSS JavaScript
アメブロ × × × ×
excite × × ×
はてなブログ ×
Ameba Ownd ×

レスポンシブデザイン対応。

[デザイン] > [カスタマイズ] > [スマートフォン] > [詳細設定] > レスポンシブデザインをチェック
[デザイン] > [カスタマイズ] > [デザインCSS]に以下のコード追加
/* Responsive: yes */

以下の件、2018年1月19日に回復し検索可能。

Google検索で以下となり検索不可。
Unauthorized access to internal API. Please refer to https://support.google.com/customsearch/answer/4542055
2018年1月1日

良い点

  • ヘッダ、記事上、記事下、サイドバー、フッタと自由文が入力でき、アメブロのように毎回、記事に入力する必要がない。
  • CSSスマートフォンにも反映できる。
  • ひとつのIDで無料3個、有料10個ブログを持てる。
  • 各自が実用的な無料テーマを配布しており、わざわざお金を出して作る必要がない。

悪い点

  • 無料の場合、公告が多い。
  • シンタックスハイライトが標準で備わっているが、はてな記法Markdownモードでしか使えない。この時、HTML編集が利用できない。

感想

管理画面はダッシュボードと言われ、一見、WordPressの簡略版と思えてしまう。
ブログサービスである以上、雛形が存在し、要素構成が異なるだけで、何らCSSを記述する上で変わりない
昨今、一覧形式が提供され、ブログトップのclassを見て、全文形式をリストに見せる必要もなく。
スマートフォンにもデザイン反映できる為、表示デバイスに合わせ、デザインを変更し、結構楽しめる。

配布している人気テーマのソースコードを見たが、可読性が悪が、特に凄いと言うこともなく。
しかしテーマ全体で、アメブロのカスタマイズ業者が有料で行なった内容より、質が高いと言える。
また、アメブロと明らかに異なる点は、WordPressを意識したように、外観だけでなく、囲み枠、噴出しなど、記事に装飾する点にポイントを置き提供している。
アメブロのように未だ要素配置にflexを用いず、floatを用い苦心惨憺している様はない。

利用ユーザもアメブロのように囲み枠とかではなく、色々調べ活用し、試行錯誤して改善している点が大きく異なる。
逆に言えば、アメブロユーザはPC初心者が多く、アメブロ内に閉じ過ぎ。
カスタマイズレッスン8,000円/時間とかうたってる業者がいるが、何が学べるのか?謎サービスだ。