にほんブログ村 ブログブログ ブログノウハウへ にほんブログ村 ニュースブログ 面白ニュースへ にほんブログ村 地域生活(街) 中部ブログ 富士宮情報へ

スポンサーサイト


上記の広告は30日以上更新(記事投稿)のないブログに表示されています。  

Posted by スポンサーサイト at

2014年11月14日

レンタルのメールフォーム。

岳南ボウリングの会員登録に際し、「フォームズ」のメールフォームを使用してみました。

利用方法は簡単です。
ユーザー登録などは一切不要、メールアドレスを入力して次のステップに進みます。フォームから登録された案件はこのメールアドレスに届くことになります。メールアドレスは非公開なので迷惑メール防止にもなります。



スマホ対応のフォームも作成可能です。
作成終了後は発行された設置用タグをブログやホームページにコピペするだけです。ブログの表示幅に合わせてデザインをカスタマイズすることが出来ます。
»詳しくは「フォームズ」のページへ。

具体的な項目を作成していきます。
いろいろなパターンを決められます。以下は例です。
①必須入力にするか任意にするか。
必須入力にすると決めた項目が空白のままだと最後にエラーが出る仕組みになります。


②ラジオボタンによる選択肢にする。
1つだけ選択する形になります。
③チェックボックスによる選択肢にする。
当てはまるものを複数選択出来る形になります。
もう少し応用すると、「ある選択肢を選んだ場合のみ、新たな質問が追加される」ようにも出来ます。
「ボウリングの経験は?」の質問に対し、「あり(趣味として定期的に)」を選択した場合のみ「およそのAVEは?」という追加質問が出現することにお気づきでしょうか。


④文字数・行数制限のないコメント欄を作成する。
逆に「〇文字以上△文字以内」と制限することも出来ます。

なお、「アフィリエイト、やってみませんか?(1)」でも触れましたが、無料で使わせてくれるところは代わりのスポンサーがついているのであちこちに無関係な広告が表示されることは避けられません。広告を非表示にしたければ有料コースになります。

内容の修正はログインして行います。修正した内容はそのまま設置済みのページに反映されます。

上記以外にも複雑な項目の作成が可能です。便利な機能もまだ多数あり、私が今回は使用していないだけです。まずは「習うより慣れろ」ということで試しに使ってみるのが早いでしょう。

  


Posted by SemiPro(佐野進一) at 18:30Comments(0)ブログ

2014年05月18日

画像を「クリックで拡大」する方法。改良版

思い込みは怖いですね。
私は以前、こんな記事を書きました。
画像を「クリックで拡大」する方法。
画像を「クリックで拡大」する方法を教えて欲しいというリクエストが入ったので、記事にします。
私はよくボウリングのスコアを掲載する際、このようにしています。

(クリックで拡大)

これは特に難しいことではありません。画像をアップロードする際、表示方法を「サムネイル」にすればOKです。(アップロードするのは拡大表示したい大きいサイズの画像のほうです。)

ただし、そのままではサムネイル画像が小さなものになってしまいます。
このとき、投稿画面ではこのように表示されています。
<a href="//img01.i-ra.jp/usr/semipro
/tomo130131_large.jpg" target="_blank"><img src="//img01.i-ra.jp/usr/semipro
/tomo130131_large-s.jpg" width="100" alt="" ></a>
「tomo130131_large.jpg」というのが拡大表示後の大きい画像です。(これはあらかじめ分かりやすいように自分でつけておいた名前です。)
「tomo130131_large-s.jpg」というのは画像をアップロードする際に表示方法を「サムネイル」にするとブログ側で自動的に付けられる名前です。
そこでこの画像サイズを変更してみると・・・
<a href="//img01.i-ra.jp/usr/semipro
/tomo130131_large.jpg" target="_blank"><img src="//img01.i-ra.jp/usr/semipro
/tomo130131_large-s.jpg" width="400" alt="" ></a>

ピンボケになってしまいましたね。
これは自動的に横幅100pxになっているサムネイル画像を無理に横幅400pxに伸ばしたからです。
私のようにあらかじめ横幅400pxの画像を掲載しておき、さらにクリックすると拡大表示されるようにするためには、掲載用の横幅400pxの画像も用意しておく必要があります。
私の場合は「tomo130131_small.jpg」としました。
つまりスコアシートをスキャンした画像を専用ソフトで加工して
クリック後、拡大表示用・・・「tomo130131_large.jpg」(横幅800px程度)
ブログ本文中で表示用・・・「tomo130131_small.jpg」(横幅400px)
の2種類を作成しておくということです。
これを別々にアップロードしておき、差し替えればOKです。
こうなります。
<a href="//img01.i-ra.jp/usr/semipro
/tomo130131_large.jpg" target="_blank"><img src="//img01.i-ra.jp/usr/semipro
/tomo130131_small.jpg" alt="" ></a>
私の場合は拡大表示せずに表示用画像だけでも何とか見えるように表示用の画像の横幅を400pxにしてありますが、その必要がないならば、手順はいたって簡単です。
サムネイルが横幅100pxで良い→アップロードの際に「サムネイル」を指定するだけ
無理に拡大してピンボケしても構わない→あとで数値を変更するだけ
です。
私のように「拡大表示にしたい」「拡大前の画像も鮮明なものにしたい」場合は2種類の画像をアップロードするために使用容量も増えますので注意して下さい。

私はこれまで、この方法しかないと思い込んでいました。

「やんちゃ爺のからくり村」のあんせるさんが同じようにHTMLにお詳しいのですが、昨日の記事の後に次のようなことを書かれていました。

※蛇足ですが、このページの様にサムネイル表示サイズを 320ピクセルなど 200ピクセル以上に設定すると..そのままではサムネイル“画像がボケてしまい ”見苦しくなるの”ですが、簡単な編集で 回避..クッキリさせる事が出来ます・・

私と同じ手法なのかそれとも異なる手法があるのか、興味がわいたので訊ねたところ、とんでもない思い違いをしていたことに気付きました。

実は、わざわざ「拡大前(表示用)の画像」を用意せずとも、拡大表示用の画像をサイズ指定して使い回せば良いだけだったのです。

(サムネイル指定した場合の投稿画面での表記)
<a href="//img01.i-ra.jp/usr/semipro
/tomo130131_large.jpg" target="_blank"><img src="//img01.i-ra.jp/usr/semipro
/tomo130131_large-s.jpg" width="100" alt="" ></a>

これを書き換えるわけですが、サムネイル指定した時に自動的に作成される縮小画像の「-s」を外して、代わりに望みのサイズに変更するだけで良いのです。
<a href="//img01.i-ra.jp/usr/semipro
/tomo130131_large.jpg" target="_blank"><img src="//img01.i-ra.jp/usr/semipro
/tomo130131_large.jpg" width="400" alt="" ></a>

要は画像のサイズを任意で変更する際、「小さい画像を大きく引き延ばすとピンボケになってしまう」が、「大きい画像を縮小させるだけなら表示に影響はない」ということです。

(例)サムネイル用に縮小されたこの画像(width="100")を

width="400"に引き延ばすと

このようにピンボケになってしまいます。

width="400"に加工してからアップした画像

拡大表示用の画像(width="900")を、アップロード後width="400"に変更表示した画像

ファイルが重くなるため、ブラウザによっては若干表示に時間がかかりますが、見比べても画質に影響はありません。
これで簡単に「クリックすると拡大表示されます」状態に出来ます。


現在、私は今後およそ3ヶ月間に渡り、「北山中学校・昭和54年度卒同窓会ブログ」において多くの写真をアップしようとしているところです。
すでに間違った(面倒な)手法で何枚かアップしてしまってありますが、早く気づいて良かったです。(汗)
あんせるさんに改めて感謝です。

移植後DAY319。

  


Posted by SemiPro(佐野進一) at 07:57Comments(2)ブログHTML

2014年04月15日

新規ブログ開設。

現在、この「HP-advanceどっとこむ」の他、「追いかけます。イベントならば、どこまでも。」「岳南ボウリング」を開設していますが、もう一つ「北山中学校・昭和54年度卒同窓会ブログ」を開設しました。
「清水中305同窓会ブログ」を参考に、今年の8月に実施を予定している同窓会に向けての案内ページと近況報告、実施後の写真掲載などに使用するためで、期間限定になります。容量もそれほど要らないので、使用中のIDを分割して割り振ります。

ヘッダーの画像は私たちが在籍していた当時の木造校舎です。



  


Posted by SemiPro(佐野進一) at 21:22Comments(0)ブログ

2014年03月18日

お気に入りの整理。

サイドバーに貼ってあるブログパーツの「BlogPeople - ブログ情報ポータル・ブログランキング -」を整理しました。



このブログにもサイドバーに「お気に入り」を置くことが出来るプラグインはありますが、こちらは自分が登録した順番に表示されるだけで、登録順序に気を使ったり、整理も大変です。現在使用中のブログパーツは最新更新されたブログが常に上位にくるので、登録する順序に気を使わずに済みます。

まずは、最近新たに訪問を始めたブログを追加です。
「ぐるぐる伊豆ブログ」
「和洋菓子 光月堂~お菓子な おかしな?ブログ~」
「CHISE VOCAL SCHOOL」
「ブログについていろいろ試してみるためのブログ」
など。

これまでに登録してあるブログのタイトルの修正。いつのまにか変わっていることに気づかないまま放置していたものも結構ありました。
「とんかつとフライ定食・宴会自慢の堀うち(富士宮市)」
「平成の寺子屋 秀峰キッズスクール」
「★富士山パワースポット 茶工房ちゃーみぃ」
など。

「引っ越しました」というブログの差し替え。たいていは写真の容量がいっぱいになったからという理由での新規ID登録による引き継ぎで旧ブログは二度と更新されないことが多いようです。
更新状況の表示だけでなく、お気に入り登録も兼ねておきたいため、旧ブログも残しておくべきかどうか迷います。(※)
「いぬの部屋 『キャンディ』 2」
「マグのwedding」
など。

いつのまにか存在しなくなった(あるいは非公開に切り替わっている)ブログの削除。
休止宣言をして更新をストップしているブログ、長らく更新されていないブログもどうするか悩むところです。(※)

チェックの結果まだ登録していなかったブログを発見したり、同じブロガーさんの所持ブログが実は複数あることに気づかずにいて追加したなどのこともあり、最終的に50件ほど増えました。まだ見落としがあるかもしれません。
まだ交流が浅いが、足あとをよくつけてくれる(記事を読みにきてくれる)、Facebookでは友達になったなど、微妙な関係の方もいます。「私のブログが登録されていない」という方がいましたら遠慮なく申し出て下さい。

なお、これまでは6時間以内に更新されたブログはマークで挟み、最新更新ブログであるほど上位表示されるようにしていましたが、この時間幅を24時間以内に変更しました。最終更新から24時間以上経過するとマークは消え、徐々に下へ追いやられていきます。
(※)145件ほど登録しましたが、表示形式の詳細設定に
表示するリンクサイト数
「2.リンクの表示順」で設定した表示リンク順の上位いくつまでを表示するかを設定します。何も設定していないときは登録しているリンクサイトがすべて表示されます。」
という設定項目があったので、全部ではなく上位100までとしました。これにより「登録はされているが、記事は更新されない」ブログは自然と非表示になります。
一部、更新されているはずなのに上がってこないブログがあるようです。PING通知システムの都合上、予約投稿などは反映されないかもしれません。設定が正しく反映されないこともたまにあるようなのでしばらくお待ち下さい。

移植後DAY258。


  


Posted by SemiPro(佐野進一) at 17:31Comments(2)ブログ

2014年03月06日

完成!今回は劇的大改造です。


この画像は本記事とは関係ありません。(笑)

(before)

(after)

(キャプチャ画像の作成は「HeartRails Capture」を利用しています。)

これまでブログのヘッダー画像をFacebook風にしていました。横幅は微妙に広げてあります。
»私のFacebookページはコチラ。
そろそろまた変更しようかなと思っていたのですが、今回はヘッダー画像はFacebook風のまま、メインコンテンツの部分も極力似せてしまおうということにしました。朝から奮闘し、1日で仕上げました。
これまでの3カラムから2カラムにし、サイドバーの幅を広げました。これで横300pxのアフィリエイトバナーも設置出来ます。本文は幅468pxのバナーが入れば十分なのでこれまで通りの幅にしてありますが、記事本文の文字サイズを大きくしました。フッターのコピーライト表記なども大きくしてあります。

  


Posted by SemiPro(佐野進一) at 17:51Comments(0)ブログ

2013年12月18日

次はどんなデザインに。

このブログを開始した当初は、ホームページと同じデザインにしていました。



こちらがホームページ「HP-advanceどっとこむ」



次にFacebook風にしてみました。(現在)



»私のFacebookページはコチラ。

(サムネイル画像の作成は「HeartRails Capture」を利用しています。)



今度はどんな感じにしてみようかな。

と考えているうちに、新規ブログ開設の企画が持ち上がりました。しばらくはこちらの構想を練ることにしますので、当ブログのデザイン変更はおあずけです。自身の年賀状作成にも取りかからなくてはならないので、記事更新もしばらくお休みするかもしれません。

只今、イーラ・ボウリング岳南支部の参加表明受付中です。
(»詳細は「イーラ・ボウリング岳南支部発足。(1)」、参加表明はオーナーメールへ。)

移植後DAY168。  


Posted by SemiPro(佐野進一) at 09:42Comments(0)ブログ

2013年06月02日

不可解な検索キーワードでご来訪。


写真の一番右が、今話題の野島はるなさんです。

**************************************************

今日も血小板と赤血球の輸血です。同時にアレルギー止めも点滴に入れているので、無事に終わりそうです。

昼食は、ご飯(180g、ふりかけ付き)、中華五目煮(豚肉、イカ、白菜、きくらげ、人参、筍、うずら卵)、ごま豆腐(だしわり醤油付き)、さつまいもの甘煮、メロン。



今朝の記事をアップしたあと何気に管理画面TOPを見たら訪問者数(PV数ではなくユニーク数)がすでにいつもの1日分に達していました。足あとのついているブロガーさんはわずかに5名ほど。検索キーワードを見ると、今月はまだ1日終わっただけですが相変わらず「野島はるな」がダントツ、その他にも「野島はるな ボウリング」、「野島はるな nhk」「ボウリング nhk杯 47回 結果」など関連する複合キーワードが多数。これでイーラ・ランキングがまた上がったら、はるな様様ですね。ハートどきどき でもその後は爆発的に伸びているわけでもなさそうです・・・。顔07
そんな中「数寄屋建設 リフォーム失敗 欠陥住宅」という、私がどれ一つとしてタグどころか文章中にも使った覚えがないキーワード検索でここにたどり着いた人が2名いたようです。アクセス元はほとんどがブックマークやイーラのトップページでそこからは割り出し不可能。試しにこれを検索窓にコピペして私のブログが出るのか試しましたが、最後まで出ませんでした。そこに現れたブログを開いてみると、やはり記事内容は無関係ですがサイドバーに設置してある「キーワードTOP10」といったようなブログパーツを見ると同じものが1位に。あるいは無料でブログを使うかわりに掲載しているGoogle広告などが一時的にヒットしていたのかもしれません。

イーラ・パークのアクセスランキングは本日22位ですが、「がん・ガン・癌スーパーリンク」のアクセスランキングが不調です。
←「いいね!」して下さる方、どうせならこっちクリックして!
1つの端末からは1日1回のみ有効ですので、本日すでにクリックしていただいた方(本日の記事中のアンケートに回答していただいた方も含む)は不要です。別窓またはタブで開いたページはそのまま閉じて下さい。  


Posted by SemiPro(佐野進一) at 12:46Comments(0)ブログ白血病

2013年05月22日

過去記事リストをスッキリさせる技。

本日は病室から本業(ブログカスタマイズ)でお送りします。

昨日のいずのくにブログ村の参加者の方がサイドバーにある過去記事リストをスッキリ表示させる方法について触れられており、これについて知りたい方もいらっしゃるようなので、その設定方法をまとめておきます。

まず、ブログを始めた際の初期設定の状態ではこんなふうになっている方が多いと思います。(サイドバーへ非表示にしている場合を除きます)



まだ記事数が少ない方はこの部分が短いので気にならないでしょうが、ブログを何年も続けているとこの部分が縦に長くなってしまって大変見づらくなります。そこでこれをプルダウン表示させる方法に切り替えます。

まずは例によって管理画面TOPから「ブログの設定」→「ブログ環境設定」を選んで下さい。



「表示内容の設定」タブを選択します。



少し下の方へスクロールさせると「アーカイブ表示」という欄があります。



これが1番目の「月別リスト」になっていると、最初に表示されたようなダラーンとした表示になってしまいます。


2番目の「月別プルダウン」に設定した場合です。表示はこのようになります。



そして▼をクリックするとこうなります。



これでもブログ歴が長い方はまだちょっと見づらいですね。


オススメなのが3番目の「年別プルダウン」です。最初の表示はこうなります。



そして例えば2012年の記事を探したい場合はその右側の▼をクリックして



2013年の記事を探すなら



このように表示させて該当する月をクリックすればOKです。その月の記事のみが最新(最後)の方から順に表示されます。

設定を変えたあとは、最後に必ず一番下にある「更新」ボタンをクリックして保存して下さい。


  続きを読む


Posted by SemiPro(佐野進一) at 15:30Comments(4)ブログ白血病

2013年05月22日

文字サイズを少し大きくしました。

このブログの本文の文字サイズを12px(ピクセル)から14pxに変更しました。また行間も1.7em(1em=1文字分の幅)にしました。これらは「追いかけます。イベントならばどこまでも。」と同じ設定です。以前から少し小さくて読みづらいかな・・・と気になってはいたのですが、なかなか直す気になりませんでした。
というのは、古い記事は今までの文字サイズに合わせて1行が収まるように、さらに1行おきに改行して書いていたからです。今回の変更により1行がうまく収まりきらずおかしなところで改行されているような形になっているかもしれません。あまりにも読みづらくなっている記事があればご指摘下さい。

なお、昨日のいずのくにブログ村出席者の方の記事で「過去記事リストの表示方法の変更」について触れられており、他にも知りたい方がいらっしゃるようなので、このあとカスタマイズの方法をアップ致します。

*****************************************************

昼食は、ちらし寿司(160g)、薩摩芋のレモン煮、清汁(蒲鉾、青菜)、りんごとカルピスゼリー。



今回はセット食にざるうどんがあり、少し迷いました。昨日からご飯が進まなくなり、うどんにするべきだったと思っていましたが(その時点では変更間に合わず)、酢飯にガリがちょうど良い口直しになり完食出来ました。薩摩芋はレモン煮というのはちょっと・・・。普通に焼き芋が食べたいです。


  続きを読む


Posted by SemiPro(佐野進一) at 12:34Comments(2)ブログ白血病

2013年03月07日

Facebook風にしてみました。

これまで、自身のホームページとヘッダー部分のデザインを同じにし、

メニューボタンもリンクさせてきました。

これまでのブログ「HP-advanceどっとこむ」。



こちらがホームページ「HP-advanceどっとこむ」



(サムネイル画像は「HeartRails Capture」を利用しています。)



今回、少しデザインを変えてみようと思い立ち、Facebook風にしてみました。

※変化していない方は、F5キーを押して最新情報に更新して下さい。

そのため、Facebookのヘッダー写真も改めて差し替えました。

ほぼ同じアングルですが、以前のものは640万画素のコンパクトデジカメで撮影、

現在のものは最近1600万画素のネオ一眼(Finepix)で撮影し直したものです。



>>私のFacebookページはコチラ。

飽きたら、また戻すか、あるいはまた別のデザインを考えます。  


Posted by SemiPro(佐野進一) at 09:06Comments(2)ブログ