WEBとSEO

はまぞうブログのHTML&CSSカスタム作業の忘備録

2018年6月10日

はまぞうブログをいじる機会があり、改めて中途半端カスタム?の面倒くささを感じました(笑)

あまりやる機会も少なそうなので忘れないように、、はまぞうブログにおけるHTMLカスタムについての忘備録を。

今回ははまぞうブログでしたが、基本構造は「eしずおかブログ」も同じです。記事編集・ログイン画面やアップローダー画面もほぼ同じ構造になっています。

はまぞう|浜松市を中心とした静岡県西部(遠州)地域の情報ポータル

eしずおかブログ

 

はまぞうブログ、どこまでカスタムできるの?

テンプレート編集画面に入ると、HTMLとCSS、両方ともカスタムできるように入力欄が用意されています。

でもヘッダーが強制的に挿入される

ほぼすべてを編集できるようになっていますが、入力したHTMLの頭の部分に自動的に共通のブログツールバーのようなヘッダーが挿入されます。

header部分にて上記のスクリプトとHTML・CSSが読み込まれるようになっており、テンプレートの編集内容にかかわらず必ず挿入されます。

とはいえ、HTMLなのでCSSにて非表示は可能です。

ただ、無料プランでそのあたりを消していいのかどうか(広告表示を消してしまうことに)は未確認です。というか広告表示やブログの宣伝をかねての無料プランなのでおそらく駄目かと思います。

ブログ機能のための変数・関数もある程度選択可能

ブログ特有の変数・関数についての説明も一部してくれており、そこは親切です。

たとえば、ブログ更新日の場合、日付だけ、月だけ、年だけの、年月日表示、のような関数が用意されており、そこらへんのチョイスによるカスタムもある程度可能にしてくれています。

基本は既存のテンプレートをベースにカスタムするのが楽かと思います。

ただし、スマホ&タブレット&PC全てに対応した(レスポンシブ的な位置づけ?)万能的なテンプレートがあるのですが、そちらはカスタムのベースに使えませんでした。これをベースにカスタムは不可、とのことで編集用のソースを表示してくれません。

ですのでPC用、スマホ用、タブレット用、それぞれのテンプレートをそれぞれチョイスし、それをベースにカスタムすることになります。

 

はまぞうブログ(eしずおかブログ)のテンプレートについて

はまぞうブログのカスタム可能なテンプレートは下記の3つ。

  1. トップページ
  2. 記事ページ
  3. アーカイブページ

そして「各デバイス」ごとに上記のテンプレートを設定できます。

  1. PC用テンプレート
  2. スマートフォン用テンプレート
  3. タブレット端末用テンプレート

なので、フルカスタムをする場合には

PC用

  • トップページ
  • 記事ページ
  • アーカイブページ

スマートフォン用

  • トップページ
  • 記事ページ
  • アーカイブページ

タブレット用

  • トップページ
  • 記事ページ
  • アーカイブページ

 

すべてフルにカスタムする場合には、

3×3=9つ、合計9つのテンプレート(HTML&CSS)を作成することになります。

最低限PC用のページのみカスタムする場合でも(トップページ・記事ページ・アーカイブページ)と3箇所のカスタムが必要となります。

いずれもHTMLとCSSをログイン画面上にて登録(貼り付け)する必要があり、通常のWEB制作の感覚と比べると、ものすごくめんどくさいです。

しかもサイト全体のレスポンスがちょっと遅いのも悲しい

「はまぞうブログ」・「eしずおかブログ」の両方に共通して、サイト全体のレスポンスが遅めです・・・(;_;)

 

普通に記事を投稿しても、遅い・・・

閲覧する側として更新しても、遅い・・・

つまり、テンプレートにHTMLを貼り付けて更新しても、やっぱり遅い・・・

 

クリックしてから軽く2〜3秒、タイミングによりそれ以上、かかります。

たかが数秒ですが、ローカル環境や通常?のテスト環境で慣れているときっとイライラしますよ・・・

0.01秒のレスポンスがチューニングされているこのご時世・・・ローカル感は速度にも?!

そもそもですが編集する側はともかく、ブログとしてこのスピードはどうなの?!とは思います。

最低限のスピードでサクサク見れないブログなんて、WEBを見慣れた人なら内容はともかく、すぐに離脱したくなりそうです。

eしずおかブログもそうですが、特にはまぞうブログの方で顕著な遅さを感じる時がありました。もちろん、全体の処理量によって、アクセスする時間帯や日時によっても変動があると思います。

お、このブログ見てみよー、とクリックすると

一呼吸おいて、よっこらしょ!と表示される、table使ってる?と思わせるような一昔を感じるブログテンプレートたち(笑)

そんな感じで静岡や浜松のリアル&ローカルな情報が閲覧できるので、むしろ和みます。。

WEB上での地方回帰、なんでもかんでも東京のマネをしていちゃイカンのだ!!土地には土地のルールがあるんじゃ!!という意気込みすら感じる別世界なので、これはこれでいいのかも。

サイト自体はともかく、各ブロガーさんたちのブログ内容は本当にリアルで興味深い情報がもりだくさん。また長年続けておられる古株さんのアーカイブ欄に並ぶ年月からは、ローカルブログの根強い強さを感じます。

ちょっと話がそれましたが、ブログはちょっと遅いけど、緑茶でも飲んでのんびり待って!ということらしい。

はまぞうブログは、無料ブログですから

そう、本来は無料ブログサービスという位置づけです。そう、あくまで無料なので、、、遅いとかなんとか、そんな文句も言えないですけどね^^;

無料なら仕方ないか〜と納得した、そこのアナタ!

ちなみに有料プランとして月額2000円以上のプレミアムプランもございますよ。。

クライアントさんが使っておられましたが、、

有料プランでも、やっぱりですがここらへんの速度は変わりません(笑)

 

アップロード時の画像名について

前書きは無しでメモだけ。

ファイル名内に「ー:ハイフン」が2つ含まれる画像をアップロードすると、2つ目のハイフンが「h」という文字に変換される。

ハイフンがひとつだけなら問題なかった。

例えば

下記のファイル名をアップすると

「photo-dog-01.jpg」

「photo-dogh01.jpg」

となってしまう。

いろいろ試してはいませんが、ハイフン・アンダーバーともに一つなら問題なくアップロードできました。

仕様ですね(笑)

一昔前のインターフェイスでちょっとめんどくさい

また別の問題としてアップローダーがFLASHのため、毎回ダイアログがでるのがうっとうしいです。

毎回、FLASHではなく従来型(非FLASH)のアップローダーページへのリンクを押してページを開く必要があります。。

 

外部へのアクセス制限はなさそう

あとこれ、個人的には結構大きい要素だと思いますが、特に外部へのアクセス制限はありませんでした。

なので、場所さえ用意すればCSSなり画像なりをリンクとして参照できます。

楽天のようにそれも駄目!となるとかなり身動きが取れなくなりますので、当たり前かもしれませんが感謝です(笑)

制作段階ではCSSをテスト環境から引っ張るようにすれば、通常の制作と同じくストレスなく行えます。画像もしかり、最後に置き換えてしまえば、先のFLASHアップローダーでチマチマ作業する必要もありません。

むしろ、ごそっとCSSとテンプレートごとコピーして自分のテストサーバーであらかた仕込む(変数・関数以外)という荒業もありかも?

 

はまぞうブログのカスタム、またいつかね・・・

といろいろ書きましたが、自分の忘備録として、またはどなたかの参考になりましたでしょうか・・・

個人的にはこのブログカスタムは、あまりやりたくないなぁ・・・(;_;)

No tags for this post.

-WEBとSEO