2018-05-06

【WordPress】海外有料テーマ「Massive Dynamic」を使ってみました

WordPressの海外有料テーマ「Massive Dynamic」を使ってみました。
f:id:sntkk3:20180527195732p:plain

公式サイトはこちら↓
Massive Dynamic - Business WP Theme & Visual Website Builder
※　以下画像の「Try Free」からメールアドレスを登録すると、実際の操作感覚が体験ができます。

販売ページはこちら↓
Massive Dynamic - WordPress Website Builder by Pixflow | ThemeForest

f:id:sntkk3:20180527191611p:plain

デモはこちらで確認できます
youtu.be

こちらのテーマの特徴

デモ用ビデオを見ていただくと良く分かるのですが、
このテーマを使用すると、ドラッグ&ドロップ操作ですばやくWebサイトができてしまいます。
なので、コーディングの知識不要、
海外テーマなので説明が英語表記ですが、直感的に操作可能なので使用においてはほぼ問題なし、
WordPress初心者、Webサイト制作初心者には、ありがたいテーマの一つと言えます。

Webサイト部品がドラッグ&ドロップで簡単に設置・削除できる他、サイトのレイアウト・デザインは、予め用意されたテンプレートの選択で簡単に着せ替え可能です。

※リンク先を見るとお分かりいただけますが、
　66に及ぶオリジナルテンプレートが用意されています。
Massive Dynamic - Business WP Theme & Visual Website Builder

【補足情報】こちらのテーマの問題点

ドラッグ&ドロップだけでWebサイトが簡単にできてしまいとても便利な「Massive Dynamic」ですが、そのようなビルダー機能を実現するためにかなり特殊な構造となっており、動作がモッサリ、重たく感じることが度々あります。

また、iPad miniなどの一部機種でモバイル表示した場合、
ナビゲーションのメニュー項目が正常表示されないという現象が確認できました。

【不具合現象】
下図のように、メニューの項目が表示されたり、されなかったり、、、といった現象が発生。

画面1.
こちらは、メニュー項目が最後の一つを除いて表示されている
f:id:sntkk3:20180527200720p:plain

画面 2.
こちらは、メニューがかなり欠けて表示されている
f:id:sntkk3:20180527200625p:plain

なお、この不具合現象の一貫性、規則性は確認できませんでした。

上記現象の原因・解決策について

こうした現象発生時の原因や有効な解決策は特定できませんでしたが、おそらくは、メニューテキストの背景色が透明（background-color: transparent; ）となっていることによるバグではないかと思われました。

英語にはなりますがこちらのテーマにはサポートもあるので、
詳細はサポートに問い合わせてみようと思います。

最後に

上記のような一部機種での不具合も見受けられましたが、
全般的には大変便利で高機能なテーマであると言えます。

・海外テーマであること、
・有料であること、
という点はややハードルありかとは思いますが、
Webサイトのコーディングが苦手な方、スピーディーにプロ並みサイトを作りたい方には役立ちそう、というWordPressテーマでした。

以上、ご参考まで。

【参考】
CSSで背景画像を使用した際にその上の文字が消える件 | WEB制作会社マーキュリーシスコムスタッフBLOG : http://www.mercury-sys.com/blog/2007/04/css.html

2018-04-10

「Sourcetree」でGitデビューしました！

Webサービス

f:id:sntkk3:20180606232307p:plain

遅ればせながら、先日ようやくGitデビューしました。
ということで、以下、簡単ですが、Gitについてのご紹介です。

Gitとは

Gitとは、
分散型バージョン管理システム(※1)のことです。
プログラムのソースコード管理にとても便利な仕組みであるため、いまや、多くのプログラマーなど、システム開発に携わる人たちにとっては欠かせないツールになりつつあります。

(※1)
Gitのような分散型バージョン管理システムに対し、集中型のシステムとしては、Subversionがあります。
分散型は「リポジトリ」という変更履歴情報が複数並行で持てるのに対し、集中型は正とする変更履歴情報が常に一つしか持てないということです。
が、長くなるので、ここでは、敢えてその詳しい説明は割愛させていただきます。

Gitの機能・メリットとは？

Gitを使うと、ファイルの変更履歴を保存し、管理することができます。
これにより、例えば、

Webページを更新したらレイアウトが崩れてしまった
プログラムを更新したらバグってしまった

という時にも安心。
Git配下でファイルを(※)更新していれば、ただちに好きな更新時点にファイルの状態を戻すことができます。
※ソースコードが書かれたファイルに限らず、ドキュメントファイルにも使えます。なので、契約書やマニュアルの版管理にも役立ちますね。
つまり、ファイルにおいて、好きな時点を行き来することができる、
まさにタイムマシーンのような便利ツールです。
活用すれば、時間・労力も大いに削減できます。
なので、これは、使わないなんてもったいないですよね。

Gitは個人がローカルで使うのにも十分便利ですが、もちろんその特性からチーム開発に大いに役立ちます。
また、そのような場合に活用するのが、GitHubなどのWebホスティングサービスです。

GitHubとは

GitHubというサービスは、
Gitのバージョン管理情報をWeb上に保存して、ユーザー間で共有することができるサービスです。
f:id:sntkk3:20180606231912p:plain

公式サイト
https://github.co.jp/

以下サイトにGitHubに関する詳しい解説があります。
もしGitHubについてもっと詳しく知りたいという方は、ご参照ください。

今さら聞けない！GitHubの使い方【超初心者向け】 | TechAcademyマガジン :
https://techacademy.jp/magazine/6235

【5分でわかる】GitHubとは？概要やメリットを簡単解説！ | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト : https://www.sejuku.net/blog/7901

Sourcetreeとは

Git初心者でもGitを簡単・確実に操作できるGUIツールです。
f:id:sntkk3:20180503161957p:plain

公式サイト
ja.atlassian.com

Sourcetreeについては、後日改めてご紹介させていただこうと思います。

おススメGit入門

以下、GitゼロからGitを使いこなすようになるのに、おススメの情報です。

Webサイト

サルでもわかるGit入門〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ :
https://backlog.com/ja/git-tutorial/

今日からはじめるGitHub 〜初心者がGitをインストールして、プルリクできるようになるまでを解説 - エンジニアHub｜若手Webエンジニアのキャリアを考える！ : https://employment.en-japan.com/engineerhub/entry/2017/01/31/110000

オンライン学習

Schooで過去放送した録画授業ですが、現在も視聴可能です。
視聴には有料会員登録が必要ですが、Schooは本当に学べることが多いので、この機会に有料会員になるのも良いかもです。
schoo.jp

書籍

こちらは、上記Schooの授業で講師として登壇された湊川あい先生の著作です。漫画が多用されていて初心者にもとても優しい説明がオススメです。

わかばちゃんと学ぶ Git使い方入門〈GitHub、Bitbucket、SourceTree〉

著者 : 湊川あい

シーアンドアール研究所

発売日 : 2017-04-21

ブクログでレビューを見る»

ということで、本日は、分散型バージョン管理システム Gitについてのご紹介でした。

以上、ご参考まで。

2018-04-03

WordPressに追加したjQueryが効かない、その対処法は？

プログラミングプログラミング-JavaScript プログラミング-JavaScript-jQuery WordPress

f:id:sntkk3:20180417225503p:plain

先日作成したパラメータ引き継ぎスクリプトをWordPressにも流用しようとしたところ、まったく機能しない。
デバッグしてみるも、スルー。
コードは合っているはずなのに、なぜだろう？

ということで、原因と解決策を調べてみました。

ちなみに、先日のパラメータ引き継ぎスクリプトとは、こちらです。
times-diary.hatenablog.com

原因と解決策

原因

HTML/CSSサイトで使用しているjQueryをWordPress内でそのまま利用しようとすると、このようなエラーが発生するようです。

そして、それは、なぜかと言うと、
「WordPressでは、jQueryが通常使用する「$」という文字による関数名を未定義にしているため」とのこと。
その理由は、他のjavascriptライブラリとのコンフリクトを避けるための配慮からのよう。

解決策

WordPressにjQueryを記述した時、
jQueryがコンフリクトして動かなくなる、
そんな場合の対処法は、以下の通り、

「jQueryで使用する「$」部分をjQueryですべて置換する」

というものです。
これにより「jQuery」で始まる関数名が正しく認識され、
コードが実行されるようになるみたいです。

というこで、早速、先日のパラメータ引き継ぎスクリプトをWordPress用に書き換えました。
以下がそのコードになります。

jQuery(function(){
	jQuery('.url').click(function() {

	//aタグリンク先を取得
	var target_url = jQuery(this).attr("href");
	
	//パラメータを取得
	var str = retrieveGETqs();
	
	prm = decodeURIComponent(str);
	
	if (prm) {
    //target_urlに'？'を含む場合
      if (target_url.indexOf('?') != -1) {
    //追加パラメータの先頭文字列を'&'に置換
      jQuery('a.url').attr('href', target_url + '&' + prm);
        } else {
          jQuery('a.url').attr('href', target_url + '?' + prm);
                }
            }	
  })	
})

実際、上記のような書き換えにより、ちゃんと動くようになりました。

以上、ご参考まで。

【参考記事】
「WordpressでjQueryのコードが動かない」場合の対処方法 – 時にはWEBの話っ！ : https://blog.aroundit.net/wordpress-jquery/

2018-04-02

Scssコンパイル時のエラー「Invalid Windows-31J character」　原因と解決策は？

HTML/CSS HTML/CSS-Sass

f:id:sntkk3:20180417220059p:plain

「Invalid Windows-31J character」エラーって？

発生プロセス

Webページ追加に伴い、scssファイルを新規作成、
いつものようにコンパイルしようとしたところ、エラー発生。

症状

以下、その際 Sass プリプロセッサーである Koala で出力されたエラーメッセージです。

f:id:sntkk3:20180417213754p:plain

これによると、
「Invalid Windows-31J character」とあります。
どうも文字コードが正常に認識されていないっぽいです。

そしてこのエラー発生後、
それまで正常に読み込めていたスタイルも効かなくなり、ページはHTMLタグだけで表現されている状態に。

そこでこの「Invalid Windows-31J character」エラーの原因と解決方法を確認してみました。

確認結果

原因

追加scssファイルの先頭で文字コードを"utf-8"に指定していなかったため、scssファイルが正しく認識されず、正常にコンパイルされなかった模様。

「Invalid Windows-31J character」解決方法

新規作成したscssファイルの最初の一行に、

@charset "utf-8";

を追加し、再度保存。

これだけで、scssファイルが正常に読み込まれるようになり、スタイルに反映されました。

わかってみると何てことはないのですが、本当に些細な原因。
たった一行が原因で、それまでのスタイルが一切効かなくなっちゃたりするんですよね。
うん、勉強になりました。

以上、ご参考まで。

【参考記事】
Windows環境でStyleDoccoを使う際に発生する「Invalid Windows-31J character」の解決方法 - Change the World! : http://changesworlds.com/2014/11/how-to-resolve-the-invalid-windows-31j-character-with-styledocco-on-windows/

1行追加するだけ！CSSファイルが文字化けした時の対処法 | AUTOCODING MAGAZINE : https://autocoding.jp/magazine/1lineonly-cssfile-garbledcharacters/

cssが効かない場合のよくある、ありがちなミスと解決方法 | テクブロ : http://www.tecblo.com/other/1475.html

CSSが効かない・反映されないときの対処法まとめ : https://saruwakakun.com/html-css/wordpress/cant

2018-03-24

【Amazon タイムセール】Web制作参考書籍もお買い得 ( 3/25 23:59まで)

本

ただいま kindle書籍がお買い得です。
個人的には、やっぱり本は紙が好き。
ただ、セール中のkindle本、紙の書籍に比べて相当格安で購入できます♪
（紙書籍の半額以下のkindle書籍も多数あり）
それに電子書籍なら場所も取らないし、検索もできるのが利点！

この機会に気になる参考書籍をまとめ買いしてみては？

以下、私が注目したデザイン・Web制作関連書籍です。

デザインの教室手を動かして学ぶデザイントレーニング(CDROM付)

作者: 佐藤好彦
出版社/メーカー: エムディエヌコーポレーション
発売日: 2008/04/28
メディア: 大型本
購入: 46人クリック: 546回
この商品を含むブログ (20件) を見る

デザインの授業目で見て学ぶデザインの構成術

作者: 佐藤好彦
出版社/メーカー: エムディエヌコーポレーション（MdN）
発売日: 2016/08/05
メディア: Kindle版
この商品を含むブログを見る

デザイナーになる。伝えるレイアウト・色・文字のいちばん大切な基本

作者: 永井弘人
出版社/メーカー: エムディエヌコーポレーション（MdN）
発売日: 2015/09/17
メディア: Kindle版
この商品を含むブログを見る

フラットデザインの基本ルール Webクリエイティブ&アプリの新しい考え方。

作者: 佐藤好彦
出版社/メーカー: インプレス
発売日: 2013/11/28
メディア: Kindle版
この商品を含むブログ (1件) を見る

Webデザイン必携。　プロにまなぶ現場の制作ルール84

作者: 北村崇,浅野桜
出版社/メーカー: エムディエヌコーポレーション（MdN）
発売日: 2016/03/23
メディア: Kindle版
この商品を含むブログを見る

なるほどデザイン

作者: 筒井美希
出版社/メーカー: エムディエヌコーポレーション（MdN）
発売日: 2015/07/31
メディア: Kindle版
この商品を含むブログを見る

ロゴデザインの現場　事例で学ぶデザイン技法としてのブランディング

作者: 佐藤浩二,田中雄一郎,小野圭介
出版社/メーカー: エムディエヌコーポレーション（MdN）
発売日: 2016/05/31
メディア: Kindle版
この商品を含むブログを見る

たのしごとデザイン論

作者: カイシトモヤ
出版社/メーカー: エムディエヌコーポレーション（MdN）
発売日: 2016/12/15
メディア: Kindle版
この商品を含むブログを見る

色の事典色彩の基礎・配色・使い方

出版社/メーカー: 西東社
発売日: 2014/02/07
メディア: Kindle版
この商品を含むブログを見る

紙の本1620円に対し、破格の299円

沈黙のWebライティング ?Webマーケッターボーンの激闘?

作者: 松尾茂起
出版社/メーカー: エムディエヌコーポレーション（MdN）
発売日: 2016/11/01
メディア: Kindle版
この商品を含むブログを見る

沈黙のWebマーケティング −Webマーケッターボーンの逆襲− ディレクターズ・エディション

作者: 松尾茂起
出版社/メーカー: エムディエヌコーポレーション（MdN）
発売日: 2015/01/31
メディア: Kindle版
この商品を含むブログ (1件) を見る

どう書いたらいいの？！がなくなるWeb文章の書き方

作者: 下良果林
出版社/メーカー: ごきげんビジネス出版
発売日: 2017/07/26
メディア: Kindle版
この商品を含むブログを見る

マンガでわかるWebマーケティング改訂版 Webマーケッター瞳の挑戦!

作者: 村上佳代,ソウ,星井博文
出版社/メーカー: インプレス
発売日: 2017/02/17
メディア: Kindle版
この商品を含むブログを見る

入門SEOに効くWebライティング　サイトの価値を高める正しいコンテンツの作り方

作者: 宮嵜幸志,中島健治,石村浩延
出版社/メーカー: SBクリエイティブ
発売日: 2015/11/27
メディア: Kindle版
この商品を含むブログを見る

以上、ご参考まで。

2018-03-14

【JavaScript】パラメータ引き継ぎ用JSを作りました（第2弾）

プログラミングプログラミング-JavaScript

今日は、パラメータ引き継ぎ用のJavaScript第2弾を作成しました。

【関連記事】
times-diary.hatenablog.com

ちなみに、
パラメータとは？と思われた方は、
こちらの記事が参考になると思いますよ。↓
getパラメータ/クエリーストリングとは？ « アクセス解析Q＆Aフォーラム

今回の動作としては、以下の通りです。

パラメータ引き継ぎJS(2) の動作

ページ内の画像に設定したURL+パラメータを遷移先URLに自動設定する

具体的には、以下の流れとなります。

【動作の流れ】

（アクション）ユーザーはページ内の画層をクリック
（結　　果）　画像に設定されているリンク(aタグ内のURL)+パラメータを遷移先URLとしてリンク先ページが表示される。

【処理の流れ】

1. ページ内の画像に設定したリンクURLを取得
2. パラメータの値を取得
3. 上記1のリンクURL+上記2のパラメータの連結した値を作成
4. 上記3のURLをリンク先URLとしてページ移動、リンク先ページを表示

Demo
※デモページでの確認手順
1. デモページ表示時に、ブラウザのアドレスバーで表示されているURL末尾に、
「?q=12345」
のように仮パラメータを入力し、Enterで確定。
2. ページ内の画像をクリックします。
⇒ リンク先のアドレスバーに先程の仮パラメータが設定されていることが確認できます。
ちなみにこちらのデモの場合、実行した結果として遷移先で以下のように表示されます。
https://www.google.co.jp/?q=12345

コード

今回この機能実現のために実装したコードは以下の通りです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>パラメータ引き継ぎJS</title>

<!-- パラメータ引き継ぎ設定スクリプト　-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var prm;

function retrieveGETqs() {

	var query = window.location.search.substring(1);
	return query;
	 /* 引数がない時は処理しない */
	if (!query) return false;

}

$(function(){
	jQuery('.url').click(function() {

	//リンク先を取得
	var target_url = $(this).attr("href");
	
	//パラメータを取得
	var str = retrieveGETqs();
	prm = decodeURIComponent(str);
	
	if (prm) {
    //target_urlに'？'を含む場合
      if (target_url.indexOf('?') != -1) {
    //追加パラメータの先頭文字列を'&'に置換
      $('a.url').attr('href', target_url + '&' + prm);
        } else {
          $('a.url').attr('href', target_url + '?' + prm);
                }
            }	
  })	
})

;//# sourceURL=foobar.js
// JavaScript Document
</script>
<!-- パラメータ引き継ぎ設定スクリプト-->
</head>

<body>
<a class="url" href="http://google.co.jp"><img src="（画像のパス）" alt=""></a>
</body>
</html>

以上、ご参考まで。

2018-03-12

CSSで実装するタブメニュー (3)

HTML/CSS-CSS3 プログラミングプログラミング-JavaScript

f:id:sntkk3:20180321150313p:plain

今日は以下記事を参考にさせていただき、少しアレンジしてCSS + JS で実装するタブメニューを作ってみました。

[ 参考記事 ]
coliss.com

今回Demoに実装したコードは、以下の通りです。

[ HTML ]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tub</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>タブメニュー</h1>
<div class="box">
  <ul class="tabrow">
    <li class="selected"><a id ="tub_1" href="#tab_a">タブ1</a></li>
    <li><a id="tub_2" href="#tab_b">タブ2</a></li>
    <li><a id="tub_3" href="#tab_c">タブ3</a></li>
  </ul>
</div>
<div id="tab_a" class="content"> 
  <!--コンテンツA--> 
  <h2>猫</h2>
  <img src="img/neko.jpg" alt="猫">
</div>
<div id="tab_b" class="content"> 
  <!--コンテンツB--> 
  <h2>犬</h2>
  <img src="img/inu.jpg" alt="犬">
</div>
<div id="tab_c" class="content"> 
  <!--コンテンツC--> 
  <h2>鳥</h2>
  <img src="img/tori.jpg" alt="鳥">
</div>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<script>
$(".tabrow>li").click(function(e) {
  e.preventDefault();
  $(".tabrow>li").removeClass("selected");
  $(this).addClass("selected");
  var idname = e.target.id;
  
  $('.content').css('display', 'none');
  if(idname=="tub_1") {
	$('#tab_a').css('display', 'block');  
    $('#tab_b').css('display', 'none');
	$('#tab_c').css('display', 'none');
  } else if (idname=="tub_2") {
	$('#tab_b').css('display', 'block');  
  } else if (idname=="tub_3") {
	$('#tab_c').css('display', 'block');  
  }
});
</script>
</body>
</html>

[ CSS ]

@charset "utf-8";
img {
	width: 50%;
}
/*タブ*/
.tabrow {
	text-align: center;
	list-style: none;
	line-height: 24px;
	margin-top: 50px;
	padding: 0;
	width: 100%;
}
.tabrow li {
	border: 1px solid #aaa;
	background: #ececec;
	display: inline-block;
	margin: 0 10px;
	padding: 10px;
	width: 250px;
}
.tabrow li.selected {
	background: #fff;
	color: #000;
}
.tabrow {
	position: relative;
}
.tabrow:after {
	bottom: 0;
	border-bottom: 1px solid #aaa;
	content: "";
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 1;
}
.tabrow:before {
	z-index: 1;
}
.tabrow li {
	position: relative;
	z-index: 0;
}
.tabrow li.selected {
	border-bottom-color: #fff;
	z-index: 2;
}
.tabrow li:before, .tabrow li:after {
	bottom: -1px;
	content: " ";
	height: 6px;
	position: absolute;
	width: 6px;
}
.tabrow li:before {
	left: -6px;
}
.tabrow li:after {
	right: -6px;
}
.tabrow li:after, .tabrow li:before {
	border: 1px solid #aaa;
}
.tabrow li {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.tabrow li:before {
	border-bottom-right-radius: 6px;
	border-width: 0 1px 1px 0;
}
.tabrow li:after {
	border-bottom-left-radius: 6px;
	border-width: 0 0 1px 1px;
}
.tabrow li:before {
	box-shadow: 2px 2px 0 #ececec;
}
.tabrow li:after {
	box-shadow: -2px 2px 0 #ececec;
}
.tabrow li.selected:before {
	box-shadow: 2px 2px 0 #fff;
}
.tabrow li.selected:after {
	box-shadow: -2px 2px 0 #fff;
}
#tab_a {
	display: block;
}
.content {
	display: none;
	padding: 32px;
}
div.col-md-4 > p {
	margin-top: 15px;
	text-align: left;
}
.col-md-4 {
	overflow: auto;
}

Demo

[ 補足説明 ]
タブクリックにより画面内でページを切り替えるため、JavaScriptを使用しています。

以上、ご参考まで。

2018-03-09

今見ているサイトをTwitterで即シェアできるChrome拡張機能「JustTweetボタン」

ブラウザブラウザ-Chrome ブラウザ-Chrome-Chrome拡張

f:id:sntkk3:20180321214325p:plain
JustTweetボタン

今日は、こちらのChromeアドオンをご紹介いたします。

この拡張機能を使うと、
見ているページにTwitterシェアボタンがない場合でも即シェアできます。

たとえばこんな感じで。
f:id:sntkk3:20180321215642p:plain

使い方は、これだけ
1. こちらの拡張機能をChromeウェブストアでダウンロード
ダウンロードはこちらから

2. シェアしたいページを表示

3. ブラウザアドレスバー右横に表示される「JustTweetボタン」アイコンボタンをクリックしてツイート実行
f:id:sntkk3:20180321220109p:plain

以上のように、機能としては、見ているページをそのまま即ツイートするためだけの機能。
シンプルで使いやすい、あるとちょっとした一手間が省ける便利機能です。

Twitterでシェアすることが多い方は、ぜひ使われてみては？

以上、ご参考まで。

2018-02-20

【WordPress】"Powered by STINGER" が消せない問題 (StingerPlus2)

WordPress WordPress-テーマ

f:id:sntkk3:20180221225153p:plain

WPテーマ「StingerPlus2」でWordPressサイトを作ってみたところ、ページフッター箇所のクレジットが消せなくて困るという問題が発生。
f:id:sntkk3:20180221223649p:plain

↓ こんな感じでクレジット表記が。。。

<p class="copyr" data-copyr="">Copyright© "サイト名" ,  2018 All&ensp;Rights Reserved Powered by <a href="http://manualstinger.com/cr" rel="nofollow">STINGER</a>.</p>

で、この問題、結果的には、以下方法で解決しました。

[ PHP ]
st-footer-content.php に以下一行を追記

<p>Copyright© <?php echo esc_attr( get_bloginfo( 'name' ) ); ?> , 2017 All Rights Reserved.</p>

st-footer-content.php　全文

<!-- フッターのメインコンテンツ -->
	<h3 class="footerlogo">
	<!-- ロゴ又はブログ名 -->
	<?php if ( !is_home() || !is_front_page() ) { ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
	<?php } ?>

			<?php if  ( get_option( 'st_logo_image' ) && (st_headerfooter_logo()) ): //ヘッダーロゴ画像があり併用する時 ?>
				<img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" >
			<?php else: //ロゴ画像が無い時 ?>
				<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
			<?php endif; ?>

	<?php if ( !is_home() || !is_front_page() ) { ?>
		</a>
	<?php } ?>
	</h3>

	<p>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'description' ); ?></a>
	</p>
<!--規定クレジット削除後対応として、ここに一行追記-->    
<p>Copyright© <?php echo esc_attr( get_bloginfo( 'name' ) ); ?> , 2017 All Rights Reserved.</p> 
		<?php get_template_part( 'st-header-widget' ); //電話番号とヘッダー用ウィジェット ?>

[ CSS ]

/*コピーライト非表示
--------------------------------*/
.copyr {
  display: none;
}

そして、この解決策を得るにあたり、参考にさせていただいたのは以下の記事です。

参考記事：
【簡単】STINGER PLUS2の「Powered by STINGER」をCSSとPHPへの追記だけで消す方法 | カキタクナッタラ : https://www.d-3.site/entry/2017/11/17/060000
www.d-3.site

結果、規定クレジット表記が無事消えました。

「StingerPlus2」について

ところで、「StingerPlus2」とは、
SEO対策がバッチリ施されたWordPress用テーマです。
なので、アフィリエイト用サイトなどに人気のようです。

ダウンロードはこちらから ↓
wp-fun.com

それにしても、この問題、
最初、「そんなの簡単でしょ？」と思って臨んだわりに、苦労しました。
このクレジット表記の該当箇所が見つからなくて。

なので、ググってみたら
themes/stingerplus/js/base.js
で削除するって方法がいくつかありましたが、私が使っている StingerPlus2には該当しなくて。。。

参考記事
【STINGER PLUS+】フッターの"powered by STINGER"を編集・削除する方法 - RE13B.net

数時間格闘の後、前述「でででーさん」の記事を参考に、ようやく解決。
でででーさん、情報提供ありがとうございました。

2018-02-16

便利なテキスト比較ツール　「difff デュフフ」のご紹介

Webアプリ

本日は、便利なテキスト比較オンラインツール　「difff デュフフ」をご紹介させていただきます。

f:id:sntkk3:20180430121720p:plain

公式サイト：
difff《ﾃﾞｭﾌﾌ》

このツールは、2004年からあり、私も数年前から愛用させていただいております。
ブラウザでサクッと手軽に使え、必要なら、一時的にサーバー保存してメンバー間で情報共有もできるというスグレモノです。

使い方

1. 以下公式サイトにアクセスします。

公式サイト：
difff《ﾃﾞｭﾌﾌ》

2. 左右のウインドウに比較したいテキストを入力して「比較する」ボタンをクリックします。
f:id:sntkk3:20180430121838p:plain

3. 比較結果が表示されます。
f:id:sntkk3:20180430132235p:plain

4. 必要に応じて、サーバー上に結果を保存します。

f:id:sntkk3:20180430132506p:plain

比較結果は、サーバー上に保存して3日間公開することも可能、
チームで共有できるので便利ですよね。

以上、ご参考まで。

2018-02-10

【はてなブログカスタマイズ】階層型グローバルメニューを設置してみました

はてなブログはてなブログ-カスタマイズ

f:id:sntkk3:20180210140626p:plain

階層型グローバルメニュー設置

本はてなブログに階層型グローバルメニューを設置してみました。
実装にあたりましては、こちらのゆきひーさんのブログ記事を参考にさせていただきました。
www.yukihy.com

ゆきひーさん、
大変参考になりました。
情報のご提供感謝です。(*^^*)

コード

こちらの機能実現にあたり追加したコードは以下の通りです。

[HTML]

<link type="text/css" rel="stylesheet" href="http://hatena.wackwack.net/v1.1/css/fulldisplay.min.css"/>
<!-- ナビゲーションバー -->
<div id="menu">
<div id="menu-inner">
    <div id="btn-content">
        <span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span>
    </div>
    <ul id="menu-content">
        <li>
            <a href="http://times-diary.hatenablog.com">ホーム<i class="blogicon-chevron-down"></i></a>
           
        </li>
        <li>
            <a href="http://times-diary.hatenablog.com">Web制作<i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="http://times-diary.hatenablog.com/archive/category/%E5%8F%97%E8%AC%9B%E3%83%8E%E3%83%BC%E3%83%88">Web制作科受講ノート</a></li>
               
            </ul>
        </li>
        <li>
            <a href="http://times-diary.hatenablog.com/Link">リンク集<i class="blogicon-chevron-down"></i></a>
           
        </li>
        <li>
            <a href="http://times-diary.hatenablog.com/contact_form">お問い合わせ<i class="blogicon-chevron-down"></i></a>
           
        </li>
    </ul>
</div>
</div>
<div style="clear:both"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var menuBtn = $("#menu-btn"),
        menuContent = $("#menu-content");
    menuBtn.click(function(){
        menuContent.slideToggle();
    });
    $(window).resize(function(){
        var win = $(window).width(),
            p = 960;//19
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>

[CSS]

/*****グローバルメニュー****/
#menu{
    width: 100%;
    margin: 10px auto;
    background: #63b7e0;/*７*/
}
#menu-inner{
    width: 100%;/*１*/
    height: 40px;/*２*/
    margin: 0 auto;
    background: #63b7e0;/*８*/
}
#menu-btn{display: none;}
#menu-content{
    padding-left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    list-style-type: none;
}
#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
}
#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    padding-left: 15px;/*３*/
    padding-right: 15px;/*３*/
    line-height: 40px;/*２*/
    background: #63b7e0;/*９*/
    color: #fff;/*10*/
    font-size: 70%;
    text-decoration: none;
    z-index: 2;
}
#menu-content > li > a:hover{
    background: #007bc1;/*11*/
    color: #fff;/*12*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*２階層目*/
#menu-content > li > ul.second-content{
    visibility: hidden;
    position: absolute;
    top: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    z-index: -1;
}
#menu-content > li:hover > ul.second-content{
    visibility: visible;
    top: 40px;/*2*/
    z-index: 1;
    transition: all .3s;
}
#menu-content > li > ul.second-content > li{
    text-align: center;
    width: 200px;/*４*/
    height: 40px;/*５*/
}
#menu-content > li > ul.second-content > li > a{
    display: block;
    line-height: 40px;/*５*/
    background: #63b7e0;/*13*/
    color: #fff;/*14*/
    font-size: 70%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #007bc1;/*15*/
    color: #fff;/*16*/
}
/*******トグルメニュ*********/
@media screen and (max-width:960px){/*19*/
#menu-inner{
    width: 100%;
    height: auto;
}
#btn-content{text-align: right;}/*20*/
#menu-btn{
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    background: #007bc1;/*17*/
    color: #fff;/*18*/
    font-size: 70%;
}
#menu-content{
    display: none;
    width: 100%;
}
#menu-content > li{
    width: 100%;
    height: 40px;/*６*/
    float: none;
}
#menu-content > li > a{
    width: 100%;
    line-height: 40px;/*６*/
    padding: 0;
    text-decoration: none;
}
/*２階層目*/
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
}

こちらの方法により、おかげさまでとっても簡単に思い通りの階層型グローバルメニューが設置できました。

階層メニューで記事内容を整理することができて便利♪
ということで、こちら、オススメです。

よろしければ、皆さまもどうぞ。

以上、ご参考まで。

2018-02-09

【お得情報】無料商用利用可能フォント(2/26まで)

PR情報/ニュース PR情報/ニュース-セール/無料 PR情報/ニュース-セール/無料-Web素材

これはお得ですね～♪

情報発信元は、コリスさん！
コリスさん、いつも有益な情報をありがとうございます！

まだの人はお忘れなく！

これは嬉しい！Webデザインや同人誌に使える有料フォント約11,000円分が期間限定で無料ダウンロードできますhttps://t.co/oo9slTS01H pic.twitter.com/i992D0lcm5
— コリス (@colisscom) 2018年2月1日

そしてこちらは上記への反響ツイート、

以下、オオカワラチェリーさんのツイートより

2/26まで！(@colisscom さんより)

個人でも商用でも利用可能なフォントが！

約11000円👉＼0円／

おしゃれ系、可愛い系、かっこいい系とか幅広くて使い所多そう🤔🤔

海外のサイトだけど、詳しく説明がここに書かれてるからすんなりできそう〜！
早くダウンロードしよ🏃💨https://t.co/6rJrWC0vjB
— オオカワラチェリー (@cherry_bobon) 2018年2月9日

オオカワラチェリーさん、情報提供ありがとうございます。

※ツイート発信者様へ
　ツイートのご紹介に問題があるようであれば、お知らせにより削除させていただきます。
　その際には、本ブログお問い合わせフォームにてお知らせくださいませ。

2018-02-04

はてなブログにメールフォームを設置してみました

はてなブログはてなブログ-カスタマイズ WEBデザイン Webデザイン-機能 Webデザイン-機能-メールフォーム

はてなブログにメールフォームを設置してみました。
今回メールフォームに使用したのは、忍者ツールズです。

以下、その手順をお伝えいたします。

忍者ツールズメールフォーム設置方法

1. 忍者ツールズにログインします。

2. メニューから、「その他」-「メールフォーム」-「ツールを作成する」をクリックします。
f:id:sntkk3:20180128215118p:plain

3. 必要事項を入力し「作成する」ボタンをクリックします。
f:id:sntkk3:20180128214704p:plain
①ツールの名前
②利用規約(同意のチェック)
③画像認証

4. メールフォーム作成完了
f:id:sntkk3:20180128214902p:plain
「はてなメールフォーム」リンクをクリックします。

5. メールフォーム設置タグをコピーします。
f:id:sntkk3:20180128215807p:plain

6. はてなブログの設置希望場所にこのタグを貼り付けます。
　今回の私の場合、お問い合わせフォーム専用に固定ページを作成し、先程のタグを貼り付けました。

以上、ご参考まで。

2018-02-03

【はてなブログカスタマイズ】メニューバーを設置しました

はてなブログはてなブログ-カスタマイズ

f:id:sntkk3:20180204193450p:plain

本はてなブログをカスタマイズ、
ヘッダにグローバルメニューを設置してみました。

はてなブロググローバルメニュー設置

コードは以下の通りです。

[html]
以下HTMLを管理画面「デザイン」>「カスタマイズ」>「ヘッダ」の「タイトル下」に入力します。

<!-- ナビゲーションバー -->
<div id="menubar">
 <ul>
 <li><a href="http://times-diary.hatenablog.com/" title="ホーム" >ホーム</a></li>
 <li><a href="http://times-diary.hatenablog.com/" class="has-child" title="Web制作">Web制作</a></li>
 <li><a href="http://times-diary.hatenablog.com/my_notes" class="has-child"  title="リンク集">リンク集</a></li>
 <li><a href="http://times-diary.hatenablog.com/contact_form" title="お問い合わせ">お問い合わせ</a></li>
 </ul>
</div>

[css]
以下CSSを管理画面「デザイン」>「カスタマイズ」の「デザインCSS」に入力します。

 <!-- メニューバー -->
#manubar{
 width:100%; }
#menubar ul{
 display:table;
 width:100%;
 margin: 0; 
 padding: 0;
 background-color: #FFFFFF; }
#menubar li{
 display: table-cell;
 width:20%;
 padding:0;
 background-color: #63b7e0; }
#menubar li a{
 display: block;
 margin:0 auto;
 padding:5px;
 border: 1px solid #FFFFFF;
 text-decoration: none;
 color: #FFFFFF;
 text-align: center;
 font-size: 18px; }
#menubar li a:hover{
 background-color: #007bc1; }
 
 #blog-title {
   padding-bottom: 10px;
 }

なお、こちらの実現にあたりましては、以下記事を参考にさせていただきました ^^
情報提供、心より感謝いたします。

参考記事

pomeyama.hatenablog.com

以上、ご参考まで。

2018-01-29

【Bootstrap】無料で使えるBootstrapビルダー「Pingendo」のご紹介

フレームワークフレームワーク-Bootstrap Webアプリ Webアプリ-Webサイトビルダー

f:id:sntkk3:20180218190938p:plain

今日は、Bootstrap4 ベースのビルダー「Pingendo 」をご紹介します。

このツールを使うことで、プロトタイプ用のWebサイトがサクサク作れますので、オススメです。
作業は部品選択などの直感的操作で進められますし、スタイリッシュなサイトがあっという間に完成しますよ。
ぜひお試しあれ。

では、以下よりその使い方をご紹介します。

Pingendo 使い方

1. 公式サイトの以下URLページよりデスクトップアプリをダウンロードします。
公式サイトダウンロード元：
https://pingendo.com/download.html https://pingendo.com/download.html
pingendo.com

2. ダウンロードしたアプリケーションをインストールします。

3. 以下URLページよりテンプレートを選択します。
https://templates.pingendo.com/https://pingendo.com/download.html
templates.pingendo.com

4. 「Open in Desktop 」ボタンをクリックします。

5. デスクトップアプリのメニューより、[ Open File ] をクリック、該当のテンプレートファイルを選択します。
⇒　選択したテンプレートからプロジェクトが作成され、エディタ画面が表示されます。

あとは、自身の希望するデザインに合わせて、
テンプレートのデザインに変更(画像、テキスト、スタイルなど)を加えていきます。

画面左側ナビゲーションパネルから希望の部品を選択したり、右側のパネルで詳細を設定したりして、完成させていきます。

たとえば、
以下はナビゲーションバーを追加する場合です。

f:id:sntkk3:20180218192637p:plain

左側のナビゲーションパネルからリンクアイコンをクリックします。
f:id:sntkk3:20180218192803p:plain

ナビゲーションバーの部品を選択し、画面の配置したい場所にドラッグします。
f:id:sntkk3:20180218192830p:plain

画面上部にナビゲーションバーが追加されました。
f:id:sntkk3:20180218193000p:plain

ナビゲーションバー上のボタンやテキストなど、細かい設定を右側のナビゲーションパネルで設定します。
f:id:sntkk3:20180218193107p:plain

一通り変更が完了したら「保存」ボタンで保存したうえ、終了します。

なお、「保存」ボタンは画面最上部(背景が水色の領域)の一番左側にあります。
作業しながら、こまめに保存していきましょう。

また、「保存」ボタンの右隣に「プレビュー」ボタンがあります。完成イメージを確認したい時「プレビュー」でどうぞ。
f:id:sntkk3:20180218193308p:plain

「Pingendo 」は、エディタでHTML、CSSのコード編集が可能なところも、優れものだと思います。

以上、非常に簡単ではありますが、Bootstrap4 ベースのビルダー「Pingendo 」のご紹介でした。

ご参考まで。

こちらのテーマの特徴

【補足情報】こちらのテーマの問題点

上記現象の原因・解決策について

最後に

Gitとは

Gitの機能・メリットとは？

GitHubとは

Sourcetreeとは

おススメGit入門

Webサイト

オンライン学習

書籍

原因と解決策

原因

解決策

「Invalid Windows-31J character」 エラーって？

発生プロセス

症状

確認結果

原因

「Invalid Windows-31J character」解決方法

パラメータ引き継ぎJS(2) の動作

【動作の流れ】

【処理の流れ】

コード

使い方

階層型グローバルメニュー設置

コード

忍者ツールズメールフォーム設置方法

はてなブログ グローバルメニュー設置

参考記事

Pingendo 使い方

「Invalid Windows-31J character」エラーって？

はてなブロググローバルメニュー設置