Koala 2.2.0にアップデートするとエラーが発生
以前ご紹介したSass編集用 GUIツール、Koala について、
ここ最近頻繁にアップデートを促すメッセージが表示されるようになったため、更新をしてみました。
しかし、
その結果、最新版 2.2.0 バージョンでエラーが続出することに。
「一体どうなっているのか？」
ということで、調べてみました。
Koala最新版(ver.2.2.0)へアップデートすると発生するコンパイル時のエンコードエラーの原因 | WEMO : http://wemo.tech/522
Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation. : http://koala-app.com/?language=ja_jp
Koala 2.2.0 にしてみたら、エラー続出
私の場合、エラーの現象としては、
(1) インストールエラー
(2) コンパイルエラー
コンパイルエラーの結果、既存のstyle.cssが真っ白に！
該当ファイルのバックアップは取ってあったため、あわててファイルを元に戻しました。
結局 Koala 自体も以前の2.0.4バージョンに戻すことで、問題は再現せず、解決した模様。
ということで、今日の教訓、
- アップグレード実行前のバックアップは必須。
- ソフトのアップグレードは慎重に。
でした。
以上、ご参考まで。
[ 関連記事 ]
times-diary.hatenablog.com
Webクリエイター向け求人充実の今がチャンス！Web業界に転職しよう
私がWeb制作科に通っていた2014年頃、クラスの半分以上の生徒はWeb業界には就職しないという残念な状況がありました。
その主な理由は、
- そもそも有効求人があまり多くない
- ゆえに、スクール卒を採用する企業が少ない
- スクール卒求職者への採用条件が非常に厳しい(給与が低すぎる)
(※実務経験なしの求職者に提示される報酬は、その多くが1,000円程/時だったと記憶しています。)
という点にありました。
なので、せっかくWeb業界への転職をめざし、Web制作を学びにきた多くの生徒にとっては、現実的にWeb業界に転職したくてもできないという現実が立ちはだかっていました。
最低でも2年程度の実務経験さえあれば、条件は飛躍的に良くなる。
にもかかわらず、まず経験を積ませてもらえない、という現実。
厳しい条件を呑んでWeb業界に就職できるのは、親元暮らしの自宅生か、扶養されてる主婦とかじゃないと、という状況だったんですよね。
それが、この2017年に入り、その状況は目に見えて変わってきつつあります。
有効求人数は一気に増え、クリエイティブ求職者への条件は以前と比べ物にならないくらい良くなっています。
たとえば、
- 「スクール卒可」求人の増加
- 業務未経験、経験浅め可案件でもその多くが時給 1,600円以上
といった具合。
ということで、
- 今Web制作を学んでいてこれからWeb業界に就職希望の方、
- すでにWeb業界で相当の低条件で就業している転職希望の方
の双方にとって、今はより良い条件での転職のチャンス時期と言えます。
とはいえ、経験浅めの求職者は、何かと苦戦します。
希望の転職を叶えるためには、転職エージェントの力を活用することが成功のための重要な秘訣です。
そこで、以下、クリエイティブ業に特化した転職エージェントを集めてみました。
個人、個人、エージェントとの相性もあります。
まずは、いくつかのエージェントに登録・相談して、自分に合った転職エージェントを見つけてみることをオススメします。
【クリエイティブ業界求職者向け 転職エージェント一覧】
| エージェント名 | 求人数 | 特徴 | 対象 | 所在地 |
| テンプスタッフ・クリエイティブ (テンプスタッフ・クリエイティブ株式会社) |
220,000件 | 出版・広告・広報・映像・ゲーム等クリエイティブ職の総合人材サービス | 詳細不明 | 東京都港区 |
| マイナビ クリエイティブ (株式会社マイナビワークス) |
詳細不明 | Web・IT・ゲーム業界専門の転職支援サービス | 20代・30代 | 東京都新宿区 |
| Geekly (株式会社ギークリー) |
6000件以上 | IT業界、web業界やゲーム業界特化型キャリアコンサルティング 転職希望者のスキルや経験、職種経験をもとに、多角的分析によるマッチングを実現 |
20代・30代・40代・50代 | 東京都渋谷区 |
マスメディアン (株式会社マスメディアン) |
詳細不明 | 広告・Web・マスコミ職種を専門 特化型キャリアコンサルティング 4万人超の転職支援実績 |
詳細不明 | 東京都港区 |
Tech Stars Agent (株式会社Branding_Engineer) |
2,000件以上 | IT・WEB・ゲーム業界を専門とした業界特化型エージェント エンジニア経験のあるコンサルタントのみ担当！ 転職だけでなく、独立支援も |
20代・30代が中心 | 東京都渋谷区 |
| サポタント (サポタント株式会社) |
詳細不明 | Web/EC専門転職支援サービス Web専門教育制度も充実 |
40代以上の方にも | 東京都港区 |
| クリーク･アンド･リバー (株式会社クリーク･アンド･リバー社) |
詳細不明 | クリエイティブ業界特化型エージェント |
詳細不明 | 東京都千代田区 |
WordPressを手動で任意のバージョンにアップグレードする方法
たまに、WordPressを最新版ではなく「この特定のバージョンにしたい」ってことがあります。
あるいは、環境によっては自動アップデートでは更新できない場合とか。
実際私も今日そんな場面に遭遇し、手動アップデートを実行することになりました。
ということで、今日は、
WordPressを手動で任意のバージョンにアップ(ダウン)グレードする方法について、お伝えします。
【WordPress手動アップデート手順】
事前準備：
1. アップデート前に現在のWordPressのバックアップを取っておく。
2. 更新するバージョンを以下より入手しておく。
(入手した圧縮ファイルはローカルの適当な場所に展開しておきましょう)
日本語 « リリース — WordPress :
https://ja.wordpress.org/releases/
ja.wordpress.org
作業手順：
1. プラグインを停止
2. ファイルを差し替え
3. 差し替え作業完了後、対象WordPress管理画面にアクセス
2. ファイルを差し替え
2.1. 更新対象となる現在のファイル・フォルダを削除
現在のWordPress環境にFTPで接続、
以下ファイル・フォルダ以外を削除します。
さらに、上記で残した「wp-content」フォルダから、「languages」フォルダを削除します。
※2.0.x からアップグレードする場合には、「cache」フォルダも削除
2.2. 任意バージョンの以下ファイル・フォルダをアップロード
- languagesフォルダ (wp-contentフォルダ内)
- wp-adminフォルダ
- wp-includesフォルダ
- その他、前述2.1.で残したコアファイル以外のファイル一式
3. 差し替え作業完了後、対象WordPress管理画面にアクセス
データベースの更新を求められるので、実行します。
以上で無事完了です。
なお、この手順については、以下参考記事を参考にさせていただきました。
特に、以下、kotoriさんの記事がわかりやすくてとっても参考になります。
kotori-blog.com
ただ、私の今回の実行時、katoriさんの記事にあった以下ファイルについても、差し替えの必要がありましたので捕捉にてご報告しておきます。
・wp-config-sample.php
※最初上記ファイルは存在しなくても影響ないのかと思って削除、新しいアップロード用コアファイルからもアップロードしないで済まそうとしたのですが、WordPressから必要である旨のメッセージが表示されましたため、こちらも改めてアップロードしました。
以上、ご参考まで。
【参考記事】
WordPress のアップグレード/詳細 - WordPress Codex 日本語版
タブメニュー(2) (jQueryとCSSで実装する超シンプルタブを作ってみました)
下記記事を参考にさせていただき、超シンプルタブメニューをページに実装してみました。
【参考記事】
超シンプルなjQueryタブメニューの実装方法 - クルマ好きの幸福論 : https://hayakawayuki.com/4518
超シンプルなjQueryタブメニューの実装方法 - ハヤカワの充足
とにかく、本当にシンプルなのが良いですね。
div構造になっている複雑な作りのコンテンツを埋め込むのには向かないと思いますが、そうでない場合にはこちらのタブメニューはとっても使いやすくて良いと思います。
ページにタブメニューの埋め込みを検討されている方は、ぜひ利用してみてはいかがでしょうか。
以下、ソースとなります。
《HTML》
<!-- タブメニュー --> <ul id="tab-menu"> <li class="active">タブ1</li> <li>タブ2</li> <li>タブ3</li> </ul> <!-- タブの中身 --> <div id="tab-box"> <div class="active">タブ1の中身</div> <div>タブ2の中身</div> <div>タブ3の中身</div> </div>
《CSS》
<style> /* タブメニュー */ #tab-menu { list-style: none; } #tab-menu li { display: inline-block; padding: 5px 25px; background: #eee; } #tab-menu li.active { background: #000; color: #fff; } /* タブの中身 */ #tab-box { padding: 25px; border: 5px solid #000; } #tab-box div { display: none; } #tab-box div.active { display: block; } </style>
《jQuery》
<script>
$(function(){
$('#tab-menu li').on('click', function(){
if($(this).not('active')){
// タブメニュー
$(this).addClass('active').siblings('li').removeClass('active');
// タブの中身
var index = $('#tab-menu li').index(this);
$('#tab-box div').eq(index).addClass('active').siblings('div').removeClass('active');
}
});
});
</script>以上、ご参考まで。
【関連記事】
times-diary.hatenablog.com
コーディング不要！簡単操作でプロ並みBootstrapサイトが作成できる「Mobirise」
ドラッグ & ドロップと簡単設定だけでBootstrapサイトが作成できる「Mobirise」
公式サイト
Free Website Builder Software : https://mobirise.com
mobirise.com
Bootstrapのここ最近のテーマをチェックしていたところ、偶然こちらのツールを発見。
なんだか興味深いので、早速ダウンロードして使ってみました。
同一ページ 別タブ内アンカーリンクへの移動実現方法
同一ページ内の異なるタブ内アンカーリンクに移動するには
通常、アンカーリンク(同一ページ内)への移動は、以下の方法(アンカーリンク先要素に付けたID名をhrefに設定するだけ)で可能です。
<li><a href="#ID名">リンクテキスト</a></li>
しかし、アンカーリンク先が他のタブ内だったりすると機能せず、目的の場所に移動できないという問題が。
これを解決し、何とか目的のアンカーリンク先に移動できないものか、
今日はその方法を確認してみました。
[前提]
ここで対象とするタブは、先日の以下記事内でご紹介したタブであることを前提とします。
times-diary.hatenablog.com
【解決方法】
JavaScriptで目的のタブ移動する処理を追加することで、この希望動作が実現できることを確認しました。
[手順]
1. JavaScriptで以下OnLinkClick関数を追記(bodyタグ終了直前)
2. a タグ内に上記OnLinkClick関数を呼び出すコードを追記
1. JavaScriptで以下OnLinkClick関数を追記(bodyタグ終了直前)
[コード例]
<script language="javascript" type="text/javascript"> function OnLinkClick(a_name) { var elements = document.getElementsByName( "tab-radios" ) ; elements[1].checked = true ; } </script>
2. a タグ内に上記OnLinkClick関数を呼び出すコードを追記
[コード例]
<li><a href="#ID名" onClick="OnLinkClick();">リンクテキスト</a></li>
[解説]
今回のように、リンク元とリンク先が別のタブに存在する場合、
通常の方法では目的地のタブが選択された状態にならず、目的の場所にフォーカスが移りません。
タブを超えてアンカーリンク先への移動を可能にするためには、その前に目的のタブを選択した状態を作る必要があります。
そこで、この動作をJavaScriptを使って実現します。
タブの各要素(タブA～タブC)の識別について
今回ここではタブをラジオボタンで作っているため、
タブA～タブCを表すラジオボタンの要素には、
「tab-radios」
というクラスを指定しています。
上記JavaScriptコードでは、
「tab-radios」の結果がelements に代入されることになるので、elementsの各要素、
elements[0] ⇒ タブA
elements[1] ⇒ タブB
elements[2] ⇒ タブC
となります。
今回の場合、アンカーリンク先がタブB内にあるものとすると、
タブB = elements[1]
となり、
elements[1].checked = true ;
とすることで、タブBを選択した状態を実現します。
a タグに onClick="OnLinkClick(); を追記することで、
JavaScriptで別途記述した OnLinkClick関数の処理を呼び出します。
これにより、aタグのリンク箇所クリック時、
目的のタブが選択され、該当箇所にフォーカス移動が実現します。
※上記Demoで使用したBootstrapテンプレートは、以下となります。
Nitro Free Website Template Using Bootstrap 3 - FreeHTML5.co
以上、別のタブ内アンカーリンク先への移動実現方法でした。
ご参考まで。
【参考記事】
リンクのクリック時にJavaScriptを実行する - リンクのonClickの実装 - JavaScript プログラミング
リファラ (REFERRER) 制御方法を確認しました
リファラ (REFERRER) 制御方法を確認しました
こちらについてご説明する前に、「リファラって何？」という方のために、以下ご説明いたします。
リファラ (REFERRER) とは？
どこから現在のページに来ているか、ユーザーのアクセス元を示す情報のことです。
※リファラ情報取得のため、リンク先ページでも取得用の設定が必要です(後述にて別途説明)
【参考サイト】
そのため、サイト運営者にとっては、
「自サイトに訪れているユーザーはどんな人たちか？」
需要、傾向を知るのに役立つ情報となります。
しかし、その一方で、リンク元サイトとしては、
「セキュリティ上の理由などにより、リファラを制御(リンク先で非表示に)したい」
という場合も生じてきます。
今回の私もそういった理由により、リファラ制御の実現方法を調べてみました。
後述にてその種類、確認結果をシェアさせていただきますが、まずはその前にリファラの取得方法について
参照先(リンク先)ページにてリファラ情報を取得する方法としては、以下となります。
リファラ取得方法
参照先ページでのリファラ取得方法について、
ページ headタグ内に以下スクリプトを記述することで、リファラ情報を取得・表示することができます。
<SCRIPT LANGUAGE="JavaScript"> <!-- document.write('URL：' + document.referrer); //--> </SCRIPT>
では、次に、リファラ制御に有効と言われていた各種方法と、実際の確認結果をご報告いたします。
リファラ制御方法の種類・確認結果
各種方法
1. a要素にtarget="_blank"を設定 (参照元がWordPressの時のみ有効)
記述例：
<a href="http:test/index.html" target="_blank">
2. a要素にrel=noreferrerを設定
記述例：
<a href="http:test/index.html" rel=noreferrer>
3. a要素にreferrerpolicy="no-referrer"を設定
記述例：
<a href="http:test/index.html" referrerpolicy="no-referrer">
4. 中間ページからのリダイレクト(HTMLでリダイレクト)
5. 中間ページからのリダイレクト(JavaScriptでリダイレクト)
6. 短縮URLでリンク先を指定
7. meta name="referrer" content="no-referrer"をheadタグ内に記述
記述例：
<meta name="referrer" content="no-referrer">
確認結果
[前提] 確認時のブラウザにはChromeを使用
a. 通常のHTMLページの場合
| No | 方法 | リンク | リファラ表示結果 |
| 1 | target_blank | 次のページにジャンプ | 表示される |
| 2 | no refferer | 次のページにジャンプ | 表示されない |
| 3 | referrerpolicy | 次のページにジャンプ | 表示されない |
| 4 | HTMLでリダイレクト | 次のページにジャンプ | 中間ページURLが表示される |
| 5 | JavaScriptでリダイレクト | 次のページにジャンプ | 中間ページURLが表示される |
| 6 | 短縮URL | 次のページにジャンプ | 表示される |
| 7 | meta name="referrer"※ | 次のページからご確認ください | 表示されない |
※以下をheadタグ内に記述する方法です。
<meta name="referrer" content="no-referrer">
b. WordPressページの場合
| No | 方法 | リファラ表示結果 |
| 1 | target_blank ※2 | 表示されない |
| 2 | no refferer | 表示されない |
| 3 | referrerpolicy | 表示されない |
| 4 | HTMLでリダイレクト | 中間ページURLが表示される |
| 5 | JavaScriptでリダイレクト | 中間ページURLが表示される |
| 6 | 短縮URL | 表示される |
※2 WordPressの場合、セキュリティ上の機能により、
外部リンクに「target=”_blank”(リンクを新しいタブで開く)」を設定すると、そのリンクには「rel=”noopener noreferrer”」属性が自動的に付加されるという性質があるようです。そのため、参照元がWordPress内記事の場合、外部リンクを新しいタブで開く設定をするだけで、リファラ情報を制御することができます。
【参考記事】
nelog.jp
WordPressページからのリファラ制御確認用デモはこちらです。
以上、各種リファラ制御方法と確認結果のご報告でした。
上記によりすべての制御方法を網羅しているわけではありませんが、ご参考いただけたら幸いです。
【参考サイト】
qiita.com
CSSで実装する タブ機能
[jQuery不要] ラジオボタン + CSSで出来る タブ機能
以下記事を参考に、Webページにタブ機能を設置してみました。
【参考記事】
qiita.com
上記にてご紹介いただいたコードで、
おかげさまで思った通りのタブができました。
と喜んだのも束の間、一つ問題が発覚。
バリデーション(HTMLの構文チェックのことです※)をしてみたところ、
以下のような構文エラーが。
The element main must not appear as a descendant of the article element.
A document must not include more than one visible main element.
※バリデーションには以下サイトを利用しました
validator.w3.org
原因は、ソースコードにて複数のmainタグがarticleタグの子要素になっていたこと(mainタグって1つのページ内に1回しか使用できないんですよね)。
ということで、mainタグの部分を新たなclassに置き換えて以下のように修正しました。
[html] サンプルコード
<!-- TAB CONTROLLERS --> <input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked> <input id="panel-2-ctrl" class="panel-radios" type="radio" name="tab-radios"> <input id="panel-3-ctrl" class="panel-radios" type="radio" name="tab-radios"> <!-- TABS LIST --> <ul id="tabs-list"> <!-- MENU TOGGLE --> <li id="li-for-panel-1"> <label class="panel-label" for="panel-1-ctrl">タブA</label> </li> <!--INLINE-BLOCK FIX--> <li id="li-for-panel-2"> <label class="panel-label" for="panel-2-ctrl">タブB</label> </li> <!--INLINE-BLOCK FIX--> <li id="li-for-panel-3"> <label class="panel-label" for="panel-3-ctrl">タブCについて</label> </li> <!--INLINE-BLOCK FIX--> </ul> <!-- THE PANELS --> <article id="panels"> <div class="container"> <section id="panel-1"> <div class="panel_group"> <div class="tbl_box"> <table class="tb" cellpadding="0" cellspacing="0" border="1"> <tr valign="top"> <th valign="top">項目1</th> <td valign="top"> <ul> <li><a href="#p_sales" onClick="OnLinkClick(p_sales);">リスト1</a></li> <li><a href="#sales" onClick="OnLinkClick(sales);">リスト2</a></li> <li><a href="#clerk" onClick="OnLinkClick(clerk);">リスト3</a></li> <li><a href="#w_designer" onClick="OnLinkClick(w_designer);">リスト4</a></li> </ul> </td> </tr>
[css]
/*********************/ /*タブメニュー /*********************/ label.panel-label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: block; width: 100%; color: #bdc3c7; cursor: pointer; background-color: #ecf0f1; -webkit-transition-property: background-color, color; transition-property: background-color, color; -webkit-transition-duration: 200ms; transition-duration: 200ms; } label.panel-label:hover { color: #003399; } #panels { background-color: white; } #panels .container { margin: 0 auto; width: 90%; } #panels section header label.panel-label { padding: 12px 24px; box-sizing: border-box; } #panels section > div { box-sizing: border-box; max-height: 0; opacity: 0; -webkit-transition: opacity 600ms; transition: opacity 600ms; overflow-y: hidden; } #panel-1-ctrl:checked ~ #panels #panel-1 > div { max-height: initial; opacity: 1; padding: 20px 24px; } #panel-2-ctrl:checked ~ #panels #panel-2 div { max-height: initial; opacity: 1; padding: 20px 24px; } #panel-3-ctrl:checked ~ #panels #panel-3 div { max-height: initial; opacity: 1; padding: 48px 24px; } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 { pointer-events: none; cursor: default; -webkit-transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0); box-shadow: none; border-right: none; } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1.last { border-right: 1px solid transparent; } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li { border-left: 1px solid #dfdfdf; } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label { background-color: white; color: #003399; padding-top: 12px; /*padding-top: 24px;*/ } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label::after { height: 6px; } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 { pointer-events: none; cursor: default; -webkit-transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0); box-shadow: none; border-right: none; } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2.last { border-right: 1px solid transparent; } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li { border-left: 1px solid #dfdfdf; } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label { background-color: white; color: #003399; padding-top: 12px; } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label::after { height: 6px; } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 { pointer-events: none; cursor: default; -webkit-transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0); box-shadow: none; border-right: none; } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3.last { border-right: 1px solid transparent; } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li { border-left: 1px solid #dfdfdf; } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label { background-color: white; color: #003399; padding-top: 12px; } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after { height: 6px; } ul#tabs-list { display: flex; list-style: none; text-align: center; border-bottom: 1px solid #dfdfdf; margin: 0; padding: 0; } ul#tabs-list li { text-align: center; font-size: 0.875em; width: 25%; box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05); border-right: 1px solid #dfdfdf; position: relative; } ul#tabs-list li:hover { -webkit-transition: none; transition: none; border-right: none; } ul#tabs-list li:hover.last { border-right: 1px solid transparent; } ul#tabs-list li:hover + li { border-left: 1px solid #dfdfdf; } ul#tabs-list li label.panel-label { position: relative; padding: 12px 0; font-size: 1.4em; } ul#tabs-list li label.panel-label::after { content: ""; position: absolute; width: 100%; left: 0; bottom: 100%; background-color: #003399; height: 0; -webkit-transition-property: height; transition-property: height; -webkit-transition-duration: 200ms; transition-duration: 200ms; } ul#tabs-list li label.panel-label:hover { padding-top: 12px; } ul#tabs-list li label.panel-label:hover::after { height: 6px; } .panel_group { margin: 0 auto; } .panel-radios { display: none; } .panel_group p { line-height: 1.8; } #li-for-panel-3, #li-for-panel-2, #li-for-panel-3 { padding-bottom: 0; }
以上で晴れてエラーも解決、
思い通りのタブができました。
【参考記事】
おススメ Div要素 丸ごと スライド可能なスライダー 「Swiper」
jQuery不要の高機能スライダー 「Swiper」を実装してみました
今日は、ページ内の要素丸ごとスライド可能な高機能スライダー、「Swiper」をご紹介いたします。
Swiperのダウンロードはこちらから可能です。
Swiperの使用に至ったキッカケ
見出しやボタン等の要素丸ごとスライドするのに最適なスライダーを探していて、Swiperに辿り着きました。
Div要素ごとのスライドは、bxSliderで可能という情報が多くあったため、最初は私自身にとって使い慣れたbxSliderで対応しようとしました。
しかし、実際試してみるとなぜか上手く動作しない…
そこでbxSliderに替わる高機能スライダーとして発見したのが、この「Swiper」でした。
Swiperの特徴、利点としては、以下の通りです。
Swiperの良いところ
※オプションのパラメータ設定については、こちらのページにて詳細が確認できます。
また、実際の動作については、公式サイトのこちらのページにて確認できます。
デモをご覧いただくと、非常に多様な表現が可能であることがお分かりいただけると思います。
ご参考までに、
以下、Bootstrapのテンプレートを使用して作成した私自身のデモページです。
Demo
※今回上記Demoで使用しているBootstrapテンプレートは以下となります。
startbootstrap.com
では、次に、Swiperの基本的な使い方についてです。
Swiperの基本的な使い方
[手順]
1. 公式サイトから、ファイル一式をダウンロード
2. swiper.js、swiper.cssを配置
3. htmlファイルに下記ソース要領でコンテンツ部分を記述
4. htmlファイルに下記ソース要領でjavascriptコードを追記
1. 公式サイトから、ファイル一式をダウンロード
Swiperのダウンロードはこちらからどうぞ
2. swiper.js、swiper.cssを配置
以下headタグ内に記述(ファイルの場所は適宜変更ください)
<link rel="stylesheet" href="swiper.min.css"> <script src="swiper.min.js"></script>
3. htmlファイルに下記ソース要領でコンテンツ部分を記述
《html》
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">スライド(1)のコンテンツを挿入</div> <div class="swiper-slide">スライド(2)のコンテンツを挿入</div> <div class="swiper-slide">スライド(3)のコンテンツを挿入</div> </div> </div>
4. htmlファイルに下記ソース要領でjavascriptコードを追記
以下bodyタグ終了直前に記述
《javascript》
var swiper; $(window).load(function() { swiper = new Swiper('.swiper-container', { // ここにオプションを記述 }); });
実装のための手順としては以上となります。
本日は、簡単、便利、高機能スライダー、「Swiper」のご紹介でした。
サイトにスライダーを実装したいと思われる際には、
ぜひお試しあれ。
【参考記事】
on-ze.com
swiper.js使ってみたからそのオプションについて – なんかいろいろデザインする人 :
http://reiwinn-web.net/2016/11/30/swiper-js-01/
jQuery無しで動く！「swiper」がとても便利 | ホームページ制作 大阪｜株式会社I.M.D :
https://www.imd-net.com/blog/2016/05/31-235955/
【WordPress】超簡単 記事内に吹き出し会話を挿入してみました
こんな感じで、WordPresの記事に吹き出し会話を作成してみました。
WordPress記事での吹き出し会話
以前から度々見かけて実装してみたいと思っていた吹き出し形式のコンテンツ。
調べてみると、専用プラグインとして、以下「Speech bubble (ふきだしプラグイン)」が定番のようですが、
・最終更新が2年前であることが懸念点、
・できればブラグインを使わずに済ませたいという点
でインストールを躊躇、
ja.wordpress.org
そんな中、プラグインなしで実現可能との方法をご紹介いただいている以下記事を発見。
thk.kanzae.net
吹き出し会話挿入用コード
この機能の実現には、以下のコードを追記します。
《functions.php》
以下コードを追記
/*------------------------------------------------------------
吹き出し挿入用
-------------------------------------------------------------*/
// 左からの吹き出し
add_shortcode( 'baloon-line-left', function( $atts, $content = null ) {
$before = '<div class="balloon"><div class="balloon-img-left">';
if( isset( $atts['img'] ) ) {
$before .= '<figure><img src="' . $atts['img'] . '" width="60" height="60" alt="';
$before .= isset( $atts['caption'] ) ? $atts['caption'] : '';
$before .= '" /></figure>';
}
if( isset( $atts['caption'] ) ) {
$before .= '<span class="balloon-img-caption">' . $atts['caption'] .'</span>';
}
$before .= '</div><div class="balloon-left-line">';
$after = '</div></div>';
return $before . $content . $after;
});
// 右からの吹き出し
add_shortcode( 'baloon-line-right', function( $atts, $content = null ) {
$before = '<div class="balloon"><div class="balloon-img-right">';
if( isset( $atts['img'] ) ) {
$before .= '<figure><img src="' . $atts['img'] . '" width="60" height="60" alt="';
$before .= isset( $atts['caption'] ) ? $atts['caption'] : '';
$before .= '" /></figure>';
}
if( isset( $atts['caption'] ) ) {
$before .= '<span class="balloon-img-caption">' . $atts['caption'] .'</span>';
}
$before .= '</div><div class="balloon-right-line">';
$after = '</div></div>';
return $before . $content . $after;
});
《css》
以下cssで吹き出し箇所にスタイルを設定します(好みに応じて適宜変更)
/*------------------------------------------------------------ 吹き出し用スタイル -------------------------------------------------------------*/ .balloon { margin-bottom: 40px; } .balloon figure { width: 60px; height: 60px; } .balloon-img-left { float: left; } .balloon-img-right { float: right; } .balloon-img-left figure { margin: 0 auto 0 0; } .balloon-img-right figure { margin: 0 0 0 auto; } .balloon img { width: 100%; height: 100%; margin: 0; } .balloon-img-caption { padding: 5px 0 0; white-space: nowrap; font-size: 12px; } div[class^="balloon-"] { padding: 10px; position: relative; border-radius: 12px; } div[class^="balloon-img"] { padding: 0; text-align: center; } div[class^="balloon-left"] { margin-left: 80px; } div[class^="balloon-right"] { margin-right: 80px; } .balloon p { margin: 0 0 20px; } .balloon p:last-child { margin-bottom: 0; } div[class^="balloon-left-"]::before, div[class^="balloon-right-"]::before, div[class^="balloon-left-"]::after, div[class^="balloon-right-"]::after { position: absolute; content: ''; border: 10px solid transparent; top: 12px; } div[class^="balloon-left-"]::before, div[class^="balloon-left-"]::after { left: -20px; } div[class^="balloon-right-"]::before, div[class^="balloon-right-"]::after { right: -20px; } div.balloon::after, div.balloon::before { clear: both; content: ''; display: block; } /* 吹き出しの背景色 (左) */ div.balloon-left-line { background: #e4e8eb; } div.balloon-left-line::before, div.balloon-left-line::after { border-right: 12px solid #e4e8eb; } /* 吹き出しの背景色 (右) */ div.balloon-right-line { background: #bef18c; } div.balloon-right-line::before, div.balloon-right-line::after { border-left: 12px solid #bef18c; }
《記事内での挿入方法》
挿入したい場所には、以下要領でショートコードを設定します。
[baloon-line-left img="左画像URL" caption="左画像下文字"]人物Aのコメント内容[/baloon-line-left] [baloon-line-right img="右画像URL" caption="右画像下文字"]人物Bのコメント内容[/baloon-line-right]
「これはありがたい！」と早速試してみたところ、見事、ほぼ期待通りの吹き出しが！
これで、晴れてLINEやFacebookメッセンジャーのような吹き出し会話が記事内に挿入できました。
上記コードを挿入するだけで、プラグインなしでもらくらく吹き出しが挿入できます。
ぜひお試しあれ。
【参考記事】
WordPress でライン風の吹き出しを作るショートコード（プラグインなし） | Thought is free :
https://thk.kanzae.net/net/wordpress/t6908/
チュートリアル動画作成に使えるか!? Windows 10 意外な標準機能
意外なWindows 10標準機能 Xboxアプリでデスクトップ動画作成
Xboxアプリとは？
MicrosoftのXboxと言えば、やはりゲーム、
日頃ゲームをされる方はきっとご存知のはず。
本来の目的は、Windows10上で、Xboxゲームを楽しむための機能。
ゲームの様子を録画するために実装されていたようですが、縁がなかったため、まったくこの存在に気づきませんでした。
この機能を発見したきっかけ
ユーザーさんへの説明用にチュートリアル動画を作成したいと思い、デスクトップ上のソフト操作を録画するための良いツールはないかと探しはじめたのが、この意外な標準機能に気付いたきっかけでした。
チュートリアルとは？
チュートリアルとは、アプリケーションソフトなどの基本的な操作方法を覚えるための教材のことである。
上記、以下記事より引用させていただいております。
http://www.sophia-it.com/content/チュートリアル
この機能の使い方
[Win]+[G] キーでこの機能が起動します。
録画開始ボタンをクリックすると画面操作を録画することができます。
使ってみた結果
Q. この機能は、チュートリアル動画作成に使えるか？
A. △ 機能的にちょっと不充分。場合により使えるかも。画質はイマイチです。
今回この機能を試すにあたり、やったこと
1. Excel上でVisualBasicエディタのマクロ作成、
2. Chromeブラウザのデベロッパーツールでスマホエミュレーションを使用、
上記2つの操作をXboxアプリで録画してみました。
が、
1.は、VisualBasicエディタでのウインドウが録画されない
2.は、ブラウザ上での右クリック時メニューが録画されない
といった結果となりました。
ご参考までに、以下、上記 2. の実際の録画結果です。
youtu.be
音声もキャプションも入れてない状態なのでこれでは分かりづらいと思いますが、ここでの操作内容としては以下の通りです。
=============================================
[操作内容] Chromeブラウザのデベロッパーツールでスマホエミュレーションを実行
1. ChromeブラウザでYahooトップページを表示
2. ショートカットキー [Ctrl]+[Shift]+[I]キーでデベロッパーツールを起動
3. 「Toggle Device Toolbar」アイコンをクリック
4. 画面上部のデバイス選択肢から、「iPhone6」を選択
5. 画面表示サイズを100%に変更
6. [F5]キーでブラウザを更新
→ YahooのiPhone6用ページが表示されました
=============================================
どうも、この機能で録画可能なのは、主たるウインドウでの操作のみのようです。
そういう意味で、ユーザー向けチュートリアル動画の作成には、機能的に不充分。とは言え、操作内容・条件・工夫次第では、まったく使えないというわけでもありません。
なお、録画結果は、mp4形式でPC内に保存されるため、ご覧のように、Youtubeに簡単にアップすることも可能です。
mp4動画なので、録画映像はPC上で「Media Player」「映画 & TV」アプリ等で再生可能です。
アイデア次第では、応用した使い方ができそうです。
以上、ご参考まで。
参考記事
【WordPress】WordPressサイトアドレスを間違って設定してしまった場合の対応
WordPressサイトアドレスを間違って設定してしまった場合の対応
今日は、WordPressでサイトアドレスが間違って設定されてしまったという問題が発生した場合の対応方法について確認してみました。
実際今回身近で起きた問題
httpサイトのサイトアドレス設定で、間違って httpsのアドレスを設定してしまい、その結果、サイトにアクセスできなくなるという問題が起きました。
(正) http
(誤) https
⇒ 管理画面にアクセスできなくなる
WordPressでサイトアドレスを誤設定してしまった場合の対応方法
WordPressでサイトアドレスを誤設定してしまった場合の対応方法としては、以下2通りの方法があるようです。
1) wp-config.php による修正 (※下記注意点参照)
2) MySQLデータベースでの修正
【参考記事】
wordpress.siyouyo.com
注意点：
wp-config.php 変更時、おそらく属性の変更が必要
[属性の変更について]
サーバー上のwp-config.phpを上書きするためには、オーナーの書込権限を許可するように以下変更が必要です。
FFFTPでの例
1. 属性を確認 (オーナーに書き込み権限がない状態)
2. 属性を変更 (オーナーの書き込み権限を有効にする)
ただ、今回のように、
httpサイトを間違ってhttpsにしてしまった場合、
前述 1) の wp-config.php では修正できませんでした。
(上記対応を行った場合、サイトでの記事閲覧は可能になりましたが、依然管理画面へのログインはできません。)
そのため、2)のMySQLデータベースから直接サイトアドレス修正という方法を試してみました。
手順は、以下の通りです。
[手順]
1. サーバーの「phpMyAdmin」にログイン
2. 該当WordPressのデータベースをクリック
3. wp接頭辞_optionsをクリック
4. option_nameの「siteurl」を確認
5. 上記のoption_valueを確認
(option_valueは間違って設定された値となっているはずです。ここを正しいサイトアドレスに修正します。)
6. 「siteurl」の編集画面でoption_valueに正しいアドレスを設定し直し、「実行する」ボタンをクリック
修正手順は以上となります。
[結果]
この方法で無事元通り、晴れて管理画面からログインできるようになりました。
[教訓]
WordPressでのサイトアドレス修正は慎重にすべし。
「思わずエントリーしたくなるリクルートサイト 2018」 まとめ
[2017年版] 思わず引き込まれる採用情報Webページ 2018
思わず引き込まれる各社リクルートサイト(2018)、
以下、57 55サイト(2017.9.16 2サイトを追加)をご紹介いたします。
さすがの広告代理店 採用情報ページ
博報堂
求職者に向けての熱いコピー、
シングルカラム、アコーディオンによる、ページ縦、横の活かし方、
魅せる先輩社員のプロフィール、
など、
使いやすさ、見やすさ、コンテンツの充実度への配慮も充分、
デザイン、コンテンツともに素晴らしいリクルートページだと思いました。
朝日広告社
その他、リクルートページ
avex group holdings
Wiz（ワイズ）
オロ
CROOZ(クルーズ)
ビーワークス
HIROKEN
KEIO
住商メタレックス
トゥモローゲート
Atrae
アチーブメント
ダイアモンドヘッド
Cygames
いえらぶGROUP
VOYAGE GROUP
GEEK PICTURES GROUP
AbemaTV
リスペクト
まとめ
各社なかなか凝っていて、見てて楽しいサイトばかりです。
・シングルカラム
・動画
・アニメーション
によるサイトが多いのもここ最近の特徴ですね。
【WordPress】XSERVERでのSSL設定は超簡単
WordPressサイトにSSL設定を導入してみました
SSLって？
ブラウザのアドレスバーで以下のように表示されるページのことです。
ページをSSL化(セキュリティ的に強化される)することで、SEO的に有利になる(検索エンジンで表示してもらいやすくなる)と言われています。
XSERVERでは、サイトへのSSL設定がこんなに簡単、
以下、手順をご紹介いたします。
XSERVERでのSSL設定手順
1. サーバーパネルにログインします。
www.xserver.ne.jp
3. ドメイン選択画面
対象ドメインの「選択する」をクリックします。
4. 「独自SSL設定の追加」タブを選択
5. 「独自SSL設定を追加する(確定)」ボタンをクリックします。
SSL新規取得申請中です…
といったメッセージが表示され、ここから 1時間ほど待ちます。
サーバーパネルでの申請・設定は以上で完了です。
(SSL設定申請後の流れ)
ここからは、先程の設定・申請から1時間ほど経過した後の作業となります。
1. 再びXSERVERのSSL設定(前述手順2.～3.の設定画面)を確認すると、以下のように独自SSLアドレスの記載がありますので、このリンクから対象サイトにアクセスしてみます。
2. 管理画面にログインして、
ダッシュボード 「一般」>「設定」をクリックします。
3. 「WordPress アドレス (URL)」「サイトアドレス (URL)」のアドレスを「https://～」に変更し「変更を保存」します。
4. 試しに記事を作成すると、ちゃんと「https://～」と表示されました。
以上で独自SSLのための設定完了です。
【Chrome拡張】Local版 CodePenのようなエディタツール、「Web Maker」を使ってみました
Chrome拡張「Web Maker」の機能・特徴について
Chrome 「Web Maker」とは？
webmakerapp.com
Local版 CodePen的Webエディタ
Chrome拡張機能のWebエディタ、使い勝手はCodePenに似ています。
CodePen(※)同様、ソースコードの結果がブラウザでその場で確認できます。
コーディング時に通常たどる、
html、css、js の各ファイルをエディタソフトで作成・保存
↓
結果をブラウザで逐次表示して確認
といった手間が省け、コーディングのスピードが格段に上がることが期待できます。
CodePenと違い、自身のブラウザ内(ローカル環境)で利用できるのがメリット、
ネットワークに接続してないくてもコード結果がプレビューできる、
Local版 CodePenのような存在です。
便利な機能
1) ファイルエクスポート機能
入力した内容は、htmlファイルとして出力可能です。
2) プレビュー結果のスクリーンショット機能
プレビュー結果を pngファイルで生成・保存できます。
こんな感じでスクリーンショット画像が作られます。
3) CodePenとの連携機能
「Edit on CodePen」機能により、「Web Maker」で入力した結果がそのままCodePenに反映される点が便利です。
この機能により、Localの「Web Maker」でいったん作成・保存しておいたコードを、後から、CodePenで編集・公開するといったこともできますね。
※CodePenとは？
8/30付の以下記事をご参照ください。
times-diary.hatenablog.com
まとめ
Web制作のお役立ちツールとして、ぜひインストールしておきたい Chrome拡張ツールの一つだと思いました。
