tag:blogger.com,1999:blog-10326602403429717272024-03-05T16:34:46.340+09:00明日やろうはバカヤロー 【自戒】WEBコンテンツ制作・運営 コンチャネンタル企画のブログです。<br><br>
ホームページ: <a href="http://conchanental.jp/">http://conchanental.jp/</a><br><br>
WEB制作関連の備忘録や、個人的に思ったことなどを記します。<br>
もし誰かの役に立つのであれば、こんなに嬉しいことはありません。<br><br>
ちなみに、ブログタイトルは私自身への戒めの言葉です。Anonymoushttp://www.blogger.com/profile/03571520714016973691noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-1032660240342971727.post-57496802984210794642013-10-11T15:52:00.000+09:002013-10-11T15:55:33.035+09:00震災から2年7ヶ月【おもい(想い・思い)】コンチャネンタル企画は宮城県多賀城市で事業を行っているので、震災関連の事も触れてみたいと思います。<br />
個人的な感情も多く含まれているので、私的な意見としてとらえていただければ幸いです。<br />
<br />
<hr />
<br />
本日で震災から2年7ヶ月が経ちました。<br />
<br />
特にきりのいい節目という訳ではないので、マスコミが取り上げることも少ないでしょう。<br />
<br />
マスコミが取り上げないということは、復興は進んでいる or 完了していると被災地以外の方は思われるかもしれませんが、実際は復興どころか復旧すらしていません。<br />
<br />
<span style="color: red;"><b>瓦礫の片付けが済んでサラ地になっているだけ</b></span>です。<br />
<br />
そのサラ地に住んでいた方々は、仮設住宅で先の見通しもたたずに暮らしています。<br />
<br />
今まで住んでいた場所に家を再建したくても、自治体が津波被害にあった土地をかさ上げするのか、集団移転するのか方針を決めあぐね、「住民の判断を尊重する」と言いながら保留し続けているため、建築許可もおりないようです。<br />
<br />
どんどん時間が経つにつれ住民の意見も多様化してくるので、さらに時間が掛かってしまうという悪循環。<br />
<br />
むしろ、時間を引き延ばすことで忘れさせようとか、言い方は悪いですが、高齢者の方にはいなくなってもらおうとしている様にさえ感じます。<br />
<br />
<br />
このように復興が停滞しているような状況は、見た目の変化として感じられないため、マスコミも話題として取り上げずらいのでしょう。<br />
<br />
マスコミ自体も暗い話題からは目を背けているように感じます。<br />
<br />
2020年のオリンピックが東京に決まったことで、何か明るい希望のようなものが出てきているように感じますが、東日本大震災の被災者の現状は何も希望を感じられません。<br />
<br />
むしろ、明るい話題に隠れ忘れられてしまうことにより、被災者のモチベーションも低下していくのではないでしょうか?<br />
<br />
テレビ局は夕方のニュースでデパ地下特集をするくらいなら、被災地や被災者をもう少し取り上げてもらいたいものです。<br />
<br />
<br />
復興で最も必要なことは被災者自身の「やる気」だと思います。<br />
<br />
しかし、被災者自身だけではモチベーションを上げることは簡単ではありません。<br />
<br />
特に東北人は(自分も含めて)悲観的、内向的な性格な方が多い気がします。<br />
<br />
ですが、「情」や「恩」には大いに感謝し、必死に報いようとします。<br />
<br />
「応援してるよ」とか「いつも気にしているよ」ということが伝わることで、復興へのモチベーションは上がると思います。<br />
<br />
<br />
私からお願いしたいことは、ぜひ<span style="color: red;"><b>直接被災地に足を運んび、見て、感じて下さい</b></span>。<br />
<br />
そして、その感想をいろいろな所に発信していただきたいです。<br />
<br />
メディアはなんでも構わないですし、友達に話をするだけでも構いません。<br />
<br />
良い感想、悪い感想、人によりいろいろと感じるコトは違うと思いますが、それも含めて発信していただき、そこに生活している人がいるということを伝えていただきたいです。<br />
<br />
そうすることで、被災者は「忘れられてない!」と再認識し、モチベーションにも繋がると思います。<br />
<br />
<br />
そして、被災地に沢山の人が集まるようになる、その時に「復興した」と言えるのではないでしょうか?<br />
<br />
<hr />
<br />
…私自身も発信し続けないと、ですね。<br />
<br />Anonymoushttp://www.blogger.com/profile/03571520714016973691noreply@blogger.com0tag:blogger.com,1999:blog-1032660240342971727.post-79967008678889391482013-10-09T21:42:00.000+09:002013-10-10T16:02:26.627+09:00マウス操作 【パソコン初心者】「そこで画像をクリックして・・・」<br />
<br />
「その状態で右クリックを・・・」<br />
<br />
マウスの当たり前の操作です。<br />
パソコンを少しでも扱える方なら、聞いただけで簡単に理解いただけると思いますが、ある時、始めたばかりの初心者の方が「???」となってしまっている状況に遭遇しました。<br />
PC無しの生活は考えられない私にとってはかなりビックリな出来事でした。<br />
しかし考えてみれば、なんの知識も無ければ、「クリック」という言葉に対して「???」となるのは当然ですよね。<br />
<br />
ということで、初心を忘れないため&初心者に教える際の備忘録として記しておきます。<br />
<br />
<br />
<hr />
<br />
<br />
<br />
<b>一般的なマウスの各部名称</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBBDqRWYlf3EB8mRxvPCg6tvRdV7ECTUtLd_brAJjcFzreyR6jWt5-k-wor7U1uB9rHAPQvFmRo5yLo28VlAzxoaW8t-o2oGGNTXEKbwFXeBC0OeLdETHOk6R7f_M-oUgu0MhqcCu8iCvv/s1600/mouse.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBBDqRWYlf3EB8mRxvPCg6tvRdV7ECTUtLd_brAJjcFzreyR6jWt5-k-wor7U1uB9rHAPQvFmRo5yLo28VlAzxoaW8t-o2oGGNTXEKbwFXeBC0OeLdETHOk6R7f_M-oUgu0MhqcCu8iCvv/s1600/mouse.png" /></a></div>
<br />
<b>マウス操作の用語</b><br />
<br />
<b><span style="color: red;">「クリック(シングルクリック)」</span></b><br />
→ 左クリックを1回、「カチッ」と押すことを言います。<br />
<br />
<span style="color: red;"><b>「ダブルクリック」</b></span><br />
→ 左クリックを2回、「カチカチッ」と押すことを言います。<br />
<br />
<span style="color: red;"><b>「右クリック」</b></span><br />
→ 右クリックを1回、「カチッ」と押すことを言います。<br />
<br />
<br />
上の説明で「カチッ」と押すとは、「カ」で押して、「チ」で離すことを表してます。<br />
その「カチッ」の長さを初心者の方に説明するのが難しく、なかなか伝わりにくかったので、動画にしてみました。<br />
音と映像で「カチッ」を体感してください。<br />
<br />
<div style="text-align: center;">
<b><span style="color: red;">クリック(シングルクリック)</span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/kI8WYMYWeMU?feature=player_embedded' frameborder='0'></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b style="color: red; text-align: start;">ダブルクリック</b></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/cDjhzOHJoZU?feature=player_embedded' frameborder='0'></iframe></div>
<br />
いかがでしょうか?<br />
パソコンの設定しだいで「カチッ」の長さの判定は変更できるのですが、何も変更を加えていなければ、動画のような「カチッ」のタイミングでクリックしたと判定されます。<br />
<br />
クリックの「カチッ」を理解できましたら、以下の操作を覚えましょう。<br />
<b><span style="color: red;"><br /></span></b>
<b><span style="color: red;">「ドラッグ」</span></b><br />
→ 左クリックを1回、「カッ」と押した状態のままマウスを移動し、目的の場所へ移動したら、「チッ」と左クリックを離すことを言います。<br />
<br />
<br />
以上の操作をマスターすれば、パソコンはより楽しくなりますよ。<br />
<br />Anonymoushttp://www.blogger.com/profile/03571520714016973691noreply@blogger.com0tag:blogger.com,1999:blog-1032660240342971727.post-90242397385708226732013-10-08T12:47:00.001+09:002013-10-15T12:15:29.099+09:00手抜きボタン作成 【HTML / CSS】まず、<a>にdisplay:inline-blockを指定します。<br />
<br />
html<br />
<pre class="brush: xml;"><a>ボタンサンプル</a></pre>
<br />
css<br />
<pre class="brush: css;">a {
padding: 8px 16px;
display: inline-block;
background-color: rgb(204,255,204);
}
</pre>
<div style="text-align: center;">
<br />
表示例<br />
↓<br />
<a href="http://conchanental.blogspot.com/" style="background-color: #ccffcc; display: inline-block; padding: 8px 16px; text-decoration: none;">ボタンサンプル</a><br />
<br />
<div style="text-align: left;">
これに、borderやbackground-imageなどをcssで指定すればボタン風になりますが、手抜きボタンの作成がテーマなのでそんなことはしません。</div>
<div style="text-align: left;">
<a>を<button>で囲みます。</div>
<div style="text-align: left;">
ポイントは<span style="color: red;"><b><button>のpaddingを”0”にする</b></span>ところです。<br />
また、<a>のbackground-colorを無しにするか、透過色にすることで<button>自体のマウスオーバーの効果が損なわれません。<br />
良い感じで手が抜けますw</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: start;">
html</div>
<pre class="brush: xml;"><button><a>ボタンサンプル</a></button></pre>
<div style="text-align: start;">
<br /></div>
<div style="text-align: start;">
css</div>
<pre class="brush: css;">button {
padding: 0;
}
a {
padding: 8px 16px;
display: inline-block;
background-color: none;
}</pre>
<div style="text-align: left;">
</div>
<div style="text-align: center;">
</div>
<br />
表示例<br />
↓<br />
<button style="padding: 0;"><a href="http://conchanental.blogspot.com/" style="background-color: none; display: inline-block; padding: 8px 16px; text-decoration: none;">ボタンサンプル</a></button><br />
<br />
<div style="text-align: left;">
ただ、重大な欠点があります。</div>
<div style="text-align: left;">
それは、</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="color: red;"><b>「ブラウザによってボタンの形状が変わっていしまう!」</b></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
という点です。</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
ですので、私は<form>内でのリンクボタン等で使用しております。</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<br />
<div style="text-align: left;">
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'MS PGothic'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<br /></div>
</div>Anonymoushttp://www.blogger.com/profile/03571520714016973691noreply@blogger.com0tag:blogger.com,1999:blog-1032660240342971727.post-44083287971245448592013-10-08T01:15:00.000+09:002013-10-10T16:03:26.909+09:00Inline Naviの使用方法 【WordPressプラグイン】<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVNx6eZa10H22KuQ0FUcla6hxd45CanFuCVLGm5TBzzKjQS29s7kC7dDHPiqpMI5EZSwNHd8mhQfxtb1Dy2l3YxRF4f7RvTZeCfzyNsGwqiBSvLnGYv41FrC7aZNHV8e01GH5v0agRG2AE/s1600/info_inlin_navi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVNx6eZa10H22KuQ0FUcla6hxd45CanFuCVLGm5TBzzKjQS29s7kC7dDHPiqpMI5EZSwNHd8mhQfxtb1Dy2l3YxRF4f7RvTZeCfzyNsGwqiBSvLnGYv41FrC7aZNHV8e01GH5v0agRG2AE/s320/info_inlin_navi.png" width="320" /></a></div>
<br />
<a href="http://www.blogger.com/blogger.g?blogID=1032660240342971727" style="color: #111133; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS P Gothic', sans-serif; font-size: 16px; line-height: 20px;"><br /></a>
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;">Inline Naviは子ページの内容を親ページにタブ切替で表示するWordPressプラグインです。</span></span><span style="color: #111133; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS P Gothic', sans-serif; line-height: 20px;">実際の表示は<a href="http://conchanental.jp/price/">こちら</a>をご確認下さい。</span><br />
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;"><br /></span></span>
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;">・利用方法</span></span><br />
<ol>
<li><span style="color: #111133; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS P Gothic', sans-serif; line-height: 20px;"><a href="http://wordpress.org/plugins/inline-navi/">こちら</a>からプラグインをダウンロード</span></li>
<li><span style="color: #111133; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS P Gothic', sans-serif; line-height: 20px;">解凍し、WordPressのpluginsディレクトリにアップロード</span></li>
<li><span style="color: #111133; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS P Gothic', sans-serif; line-height: 20px;">WordPressの管理画面から Inline Navi を有効化</span></li>
<li><span style="color: #111133; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS P Gothic', sans-serif; line-height: 20px;">子ページを表示したい固定ページにショートコード</span><span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS P Gothic', sans-serif; line-height: 20px;"><span style="color: red;"><b>[inline_navi]</b></span></span><span style="color: #111133; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS P Gothic', sans-serif; line-height: 20px;">を記述</span></li>
</ol>
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;"><br /></span></span>
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;">・各種設定</span></span><br />
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;"><br /></span></span><span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="color: red; line-height: 20px;"><b>[inline_navi ajax='on']</b></span></span><br />
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;">→Ajaxリクエストを有効化</span></span><br />
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;"><br /></span></span><span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="color: red; line-height: 20px;"><b>[inline_navi position='bottom']</b></span></span><br />
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;">→タブ表示位置を子ページの内容の下部に移動</span></span><br />
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;"><br /></span></span>
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;"><br /></span></span>
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;">・免責事項</span></span><br />
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;"><br /></span></span>
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;">上記のWordPressプラグインは自由にご利用いただけます。</span></span><br />
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;">配布・転載は自由ですが、コメントフォームよりご一報いただければ幸いです。</span></span><br />
<span style="color: #111133; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, MS Pゴシック, MS P Gothic, sans-serif;"><span style="line-height: 20px;">当プラグインの利用によって生じた損害、直接的または間接的損害に対し、コンチャネンタル企画は一切の責任を負いません。</span></span><br />
<ol style="color: #111133; display: inline-block; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS P Gothic', sans-serif; font-size: 16px; line-height: 20px; margin: 0px;">
</ol>
Anonymoushttp://www.blogger.com/profile/03571520714016973691noreply@blogger.com0