JavaScript

データフォーマットを英語表記にする

var dateFormat = function(str) {
  var dateTimeArr = str.split('T');
  var ymdArr = dateTimeArr[0].split('-');
  var y = ymdArr[0];
  var m = Number(ymdArr[1]) - 1;
  var d = ymdArr[2];
  var sepTime = dateTimeArr[1];
  var resTime = sepTime.replace('Z', '').split(/¥+|¥-/)[0].split(/:/g);
  var h = resTime[0];
  var min = resTime[1];
  var sec = '00';
  var dateAttr = new Date(y, m, d, h, min, sec);
  var year = dateAttr.getFullYear();
  var monthAtrr = dateAttr.getMonth() ;
  var mNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var month = mNames[monthAtrr] ;
  var day = dateAttr.getDate();
  format_date = month + "¥u00a0" + day + ", " + year ;
  return format_date;
};

いろいろ試してみたらできました。
ですが、半角スペースを「¥u00a0」=「 」で表記していいものか疑問が残ります。
Unicodeの半角スペースを出力するユニコードエスケープは2種類あるらしいので、どちらも試してみたらこっちの方が上手くいきましたのでこのままにしておきます。
こちらの記事を参考しました。
createTextNodeで半角スペースを入れたい…

テンプレート

JUGEMテンプレート「Cunning」

screenshot-Cunning

仕様

サイドバー右側固定で、スクロールバーが表示されます。
サイドバーの項目は折りたたみ式になってます。(クッキー機能を採用しているので、更新しても表示された状態が保存されます)
ページ下部に最新記事の画像が6件表示されます。
レスポンシブ対応です。タブレット、スマホからでもご覧頂けます。
メニュー、SNSリンクは各自設定して頂くと機能します。
LoveボタンはjQueryスクリプトが重複するため導入してません。

注意

CSSが複雑なので背景色(#fafafa)は変更しない方がいいと思います。

動作確認

OS / デバイス: Windows10 / iPhone6
system-requirement

表示サンプル

各タグの表示サンプルはこちら。どのテンプレートもだいたい同じです。
当テンプレートで使える独自クラスはこちら

利用規約

.スタマイズはご自由にどうぞ。
個人、商用共にお使い頂けます。
サポートは時間の許す限り対応させて頂きます。
 ただし、○○を作って欲しいなどのご依頼、自己都合による質問等はご遠慮願います。
づテンプレートは、個人の趣味で制作したものです。
 テンプレートを利用したことによるトラブルや損失、損害に対して一切の責任を負い兼ねます。

Continue Reading
カスタマイズ

メニューの設定方法

menu-signboard当テンプレートにはメニューを設けているのですが、変更、増減方法を書きたいと思います。(今更ですが・・)
テンプレートに使用してあるメニューはだいたい下記のように表記されています。

<!-- メニューの設定 #を任意URLに、Menuを任意テキストに変更 -->
<nav id="global-nav">
<ul>
<li><a href="./">Home</a></li>
<li><a href="./?pid=1">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</nav>
<!-- メニューここまで -->

まずは変更方法から。ガイダンスに従い#を任意URLに、Menuを任意テキストに変更します。
例えば、私のサイトはテンプレートをメインに活動しているので

<!-- メニューの設定 #を任意URLに、Menuを任意テキストに変更 -->
<nav id="global-nav">
<ul>
<li><a href="./">Home</a></li>
<li><a href="./?pid=1">About</a></li>
<li><a href="./?eid=2">Contact</a></li>
<li><a href="./?cid=3">Template</a></li>
<li><a href="./?cid=4">Diary</a></li>
</ul>
</nav>
<!-- メニューここまで -->

という風に改変できます。
「#」の部分は、リンクしたいカテゴリのURLを記述するといいでしょう。URLは「./?cid=カテゴリID」になると思います。
特に、カテゴリでなくても個別ページのURLでメニューを構成してもいいかもしれません。その場合は「./?eid=投稿ID」になりますね。

次に増減方法。
<li>〜</li>で囲まれた部分を追記ないし削除して下さい。
しかし、メニューの数があんまり多すぎると、デザインが崩れてしまうかもしれないので6、7個が丁度いいと思います。

ソーシャルアイコンも同じように増減可能ですので試してみて下さい。

カスタマイズ

strong要素とem要素の見た目を変える方法

computer-typing 当テンプレートでは、strong要素を使うと黄色の蛍光ペンでマーカーをひいたような感じになります。
サンプル
また、em要素は赤字に色付けされます。
サンプル

strong要素は、コンテンツに対して強い重要性を表すテキストに使用し、em要素は、コンテンツの強勢(アクセント)強調するテキストに使用します。
それらの用途を考え、以上のデザインを指定したわけですが、デフォルトの形(単なる太字とイタリック体)が望ましいという方のために、変更方法をお教え致します。

Continue Reading
不具合報告

テンプレート「Masonry」にて"Feb"が表示されない件について

「Masonry」にて、またまた不具合が見付かりました。ほんとに何度もすみません・・
記事投稿日の2月だけ表示されないというものになります。
改善方法は簡単です。スタイルシート編集にて中ほどにあります

.month02:before {
  content: "Feb;
}

この部分に

.month02:before {
  content: "Feb";
}

「"」ダブルクオテーションを追加して下さい。

このテンプレートせっかく、JUGEMおすすめブログの方で紹介して頂いたのに、ミスが多くて本当に申し訳ないです・・
ミスが多い原因は、おそらくTeraPadというテキストエディターを使い手打ちで作業しているからだと思います。
専用のHTMLエディターソフトを使えば、コード整合性のチェック機能があるので、ケアレスミスも軽減されると思うのですが・・
テキストエディタ「Atom」も使えますが、このエディダ「EUC-JP」の文字コードに対応してないらしく、JUGEM テンプレート制作には不向きなんです。
こんな感じなので、どのホームページビルダーを使えばいいか悩ましいところです。
おすすめのホームページビルダーがあれば教えて下されば幸いです。