Googleアカウントの作成方法を画像つきでご紹介します

Posted 2019年3月29日 by デザイナースタッフ

Googleアカウントを作成するメリット

無料で様々なサービスが受けられます。
Ｇメールが使用可能、Googleビジネスに登録できる、YouTubeなどのサインインがグーグルアカウントでできるなど・・・
ここではサービスのことは特に書きませんが、とにかく凄まじく便利です。
お一つ持っておくと、とにかく便利。
複数作成可能なので、仕事用、個人用と私は分けています。

Googleアカウントの作成方法

作成するURLへ飛ぶ

https://accounts.google.com/signup
ここからグーグルアカウントを作成します。

名前・お好きなアドレス・好きなパスワードを記入

ここで性・名、お好きなメールアドレス・パスワードを記入します。アドレスとパスワードは絶対に覚えておくかメモを残すようにしてくださいね。

「次へ」をクリック

自分の電話番号を記入

私は携帯番号をいれました。自分で連絡の取れる番号を記入してくださいね。

「次へ」をクリック

確認コードが届く

携帯に「G-0000000」という確認コードが届くので数字の部分を打ち込んでください。

「確認」をクリック

自分の生年月日を記入

生年月日・性別を選択してください。（メールアドレスは省略可とのことなので記入しませんでした）

「次へ」をクリック

番号の活用するかしないか

ここは後からでも設定できるのでとりあえずスキップします。

「スキップ」をクリック

プライバシーポリシーと異様規約に同意する

内容をスススと読んで同意するを選択します。

「同意する」をクリック

登録完了

ようこそ！の文字が出てきます。登録完了です。

「次へ」をクリック

個々設定画面が出てきます。

アカウント情報の設定画面になります。おつかれさまでした。こちらは後で設定できますので時間があるときにゆっくりしていただければと思います。

アカウントが右上に現れる。

私達から見て右上に画像のように９ヶの正方形と丸い画像がでてきます。（画像はすでにプロフィール写真を変えていますね・・・。）これはこのブラウザをこのアカウントでログインして閲覧している状態になります。

様々なサービスが受けられます

９ヶの正方形をクリックすると色々なサービスが受けられますよ。ここについてはまたブログで書きたいと思います。

補足のログイン方法

GoogleはCookieが残っていればログイン情報を自動で取得して出してくれます。でも出てこない場合があるといけないので、Googleのアドレス（●●●●@gmail.com）と最初に設定したパスワードはしっかり覚えておくと安心ですね。

タクソノミー付きカスタム投稿タイプのタームをリンク付きでループ処理する手順メモ

Posted 2019年3月9日 by デザイナースタッフ

タクソノミー付きのカスタム投稿タイプを作ってtermをループしてリンクを貼る時の一連のメモ。
メモったので掲載します。

１．タクソノミー付きのカスタム投稿タイプをつくる

function.php　にタクソノミー付きのカスタム投稿タイプを作る

<?php
// --------------------
// タクソノミー付きカスタム投稿タイプ
// --------------------
add_action( 'init', 'create_post_type_taxonomy' ); 
function create_post_type_taxonomy() {
  register_post_type(
    'taxonomy',
    array(
      'label' => 'タクソノミー',
      'labels' => array(
        'name' => 'タクソノミー', //管理画面に表示されるラベル
        'singular_name' => 'タクソノミー' //このカスタム投稿の識別名
        ),
      'public' => true,
      'menu_position' => 5,
      'has_archive' => true,
      'supports' => array('title','editor','thumbnail','excerpt','custom-fields')
    )
  );
  // 投稿タイプにカスタムタクソノミーを追加
  register_taxonomy(
    'taxonomy_category', // タクソノミーのslugアンダーバーのみ使用できる
    'taxonomy',                 // 属する投稿タイプ
    array(
      'hierarchical' => true,
      'update_count_callback' => '_update_post_term_count',
      'label' => 'カテゴリ', //タクソノミー
      'singular_label' => 'ALL', //タクソノミー
      'public' => true,
      'show_ui' => true
    )
  );
}
?>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<?php

// --------------------

// タクソノミー付きカスタム投稿タイプ

// --------------------

add_action( 'init', 'create_post_type_taxonomy' );

function create_post_type_taxonomy() {

register_post_type(

'taxonomy',

array(

'label' => 'タクソノミー',

'labels' => array(

'name' => 'タクソノミー', //管理画面に表示されるラベル

'singular_name' => 'タクソノミー' //このカスタム投稿の識別名

),

'public' => true,

'menu_position' => 5,

'has_archive' => true,

'supports' => array('title','editor','thumbnail','excerpt','custom-fields')

)

);

// 投稿タイプにカスタムタクソノミーを追加

register_taxonomy(

'taxonomy_category', // タクソノミーのslugアンダーバーのみ使用できる

'taxonomy', // 属する投稿タイプ

array(

'hierarchical' => true,

'update_count_callback' => '_update_post_term_count',

'label' => 'カテゴリ', //タクソノミー

'singular_label' => 'ALL', //タクソノミー

'public' => true,

'show_ui' => true

)

);

}

?>

２．タームを決める

WordPressのタクソノミーの親・子タームを決めていく。

【例】
親：tax01　子：tax01-01 tax01-02
親：tax02　子：tax02-01 tax02-02

３．タクソノミーのアーカイブとシングルの専用ページをフォルダに作る

専用でなければ、archives.php・single.phpでも出すことが可能。
タクソノミーのアーカイブのイメージは、色々なtermが一覧で全て表示されているアーカイブページという感じ。
タクソノミーアーカイブページを専用でつくるのであれば、
archive-カスタム投稿名.php
singe-カスタム投稿名.php

となるので、
今回タクソノミー名はtaxonomyなので

archive-taxonomy.php
single-taxonomy.php
となる。

４．カスタムタクソノミーのアーカイブ専用ページをフォルダに作る

専用でなければ、archives.php・single.phpでも出すことが可能。
カスタムタクソノミーのアーカイブのイメージは、１つのタームの一覧のアーカイブページという感じ。

カスタムタクソノミーアーカイブページは
taxonomy-タクソノミー名-ターム名.php（カスタムタクソノミーの指定したターム名のみに反映される）
taxonomy-タクソノミー名.php（カスタムタクソノミーカテゴリ全てに反映される）

今回カスタムタクソノミー名はtaxonomy_categoryなので

taxonomy-taxonomy_category-tax01.php
taxonomy-taxonomy_category.php
となる

５．テスト投稿

テスト投稿。選択するタームを変えて３件くらいテスト。

６．パーマリンクを更新する

忘れがち。404 not foundしないように、ちゃんとパーマリンクを更新します。

７．タームの色々を取得する方法を見ておく

色々取得できます。確認用。

<?php
$terms = get_terms( ’カスタムタクソノミーの分類名');
foreach ( $terms as $term ){
echo $term->name; //名前
echo $term->slug; //スラッグ
echo $term->description; //説明
echo $term->term_id; //タームID
echo $term->parent; //親のID取得、自分が親の場合は0
echo get_term_link($term->slug, 'カスタムタクソノミーの分類名'); //タームのリンク
}
?>

1

2

3

4

5

6

7

8

9

10

11

<?php

$terms = get_terms( ’カスタムタクソノミーの分類名');

foreach ( $terms as $term ){

echo $term->name; //名前

echo $term->slug; //スラッグ

echo $term->description; //説明

echo $term->term_id; //タームID

echo $term->parent; //親のID取得、自分が親の場合は0

echo get_term_link($term->slug, 'カスタムタクソノミーの分類名'); //タームのリンク

}

?>

８．選択されたタームをリンクしてループさせる

archives-taxonomy.phpへ記述。

<?php
  $taxonomy = get_post_taxonomies()[0]; // タクソノミーの名前を取得して指定
?>
<div>
  <?php if( $term->name != null): // カテゴリがあれば表示
  $terms = get_the_terms($post->ID, $taxonomy);
  foreach($terms as $term): //複数のターム名をリンク表示 ?>
    <div class="mr-1" style="background-color: #e8e8e8;">
      <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>"><?php echo $term->name; ?></a>
    </div>
  <?php endforeach; endif; ?>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

<?php

$taxonomy = get_post_taxonomies()[0]; // タクソノミーの名前を取得して指定

?>

<div>

<?php if( $term->name != null): // カテゴリがあれば表示

$terms = get_the_terms($post->ID, $taxonomy);

foreach($terms as $term): //複数のターム名をリンク表示 ?>

<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>"><?php echo $term->name; ?></a>

</div>

<?php endforeach; endif; ?>

</div>

PHPとHTMLとSCSSだけで少し複雑な画像っぽい表を作る

Posted 2018年8月20日 by デザイナースタッフ

お久しぶりです。ネイビーモバイルです。
お盆にお休みを私はいただきましたので、何か書きたいと思います。
ただいまネイビーモバイルでも製作中の複雑っぽい表を製作していますので近いものを掲載したいと思います。

先程の画像の様に左から右、下がって右から左とになる表を製作します。

デスクトップ画面

数字はこうなります。

スマホ画面

ちゃんと携帯サイズでレスポンシブで縦１列になるように書いていきます。

※今回はさっくり書いてあります。本番の製作ではもうちょっときれいに書きます。

html/php

<?php
$list = array();
$list[0][title] = ‘タイトル１’;
$list[0][text] = ‘テキストテキスト１’;
$list[0][img] = ‘img-1’;

$list[1][title] = ‘タイトル２’;
$list[1][text] = ‘テキストテキスト２’;
$list[1][img] = ‘img-2’;

$list[2][title] = ‘タイトル３’;
$list[2][text] = ‘テキストテキスト３’;
$list[2][img] = ‘img-3’;

$list[3][title] = ‘タイトル４’;
$list[3][text] = ‘テキストテキスト４’;
$list[3][img] = ‘img-4’;

$list[4][title] = ‘タイトル５’;
$list[4][text] = ‘テキストテキスト５’;
$list[4][img] = ‘img-5’;

$list[5][title] = ‘タイトル６’;
$list[5][text] = ‘テキストテキスト６’;
$list[5][img] = ‘img-6’;

$list[6][title] = ‘タイトル７’;
$list[6][text] = ‘テキストテキスト７’;
$list[6][img] = ‘img-7’;

$list[7][title] = ‘タイトル８’;
$list[7][text] = ‘テキストテキスト８’;
$list[7][img] = ‘img-8’;
?>

<!– Forward icon by Icons8 –>
<svg xmlns=”http://www.w3.org/2000/svg”; xmlns:xlink=”http://www.w3.org/1999/xlink”; version=”1.0″ x=”0px” y=”0px” viewBox=”0 0 512 512″ class=”icon icons8-Forward” ><path d=”M256 171V85l171 171-171 171v-86H85V171h171z”></path></svg>
</div>
<img class=”img” alt=”<?php echo $list[$i][title]; ?>” src=”img/test/<?php echo $list[$i][img]; ?>.jpg”;>
<h3 class=”h3-item”><?php echo $list[$i][title]; ?></h3>
<div class=”font-s”><?php echo $list[$i][text]; ?></div>
</div>
</section>

<?php endfor; ?>
</article>

</section>
</article>

scss

// --------------------
// コンテナ幅
// --------------------

.cont{
	width: 100%;
	max-width: 1280px;
	padding-left: 32px;
	padding-right: 32px;
	margin-left: auto;
	margin-right: auto;
}

// --------------------
// 文字
// --------------------

.h3-item{
  font-size: 20px;
  margin-top: 8px;
  margin-bottom: 16px;
}


.font-s{
  font-size: 14px;
}

// --------------------
// flex要素
// --------------------

.flex {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -16px;
}


.col3{
  width: 25%;
  min-width: 25%;
	padding: 0 16px 32px 16px;

  @media screen and (max-width: 480px){
    //480px以下で４並びを１並びにする
    display: block;
    width: 100%;
  }
}

// --------------------
// 表全体のカラー
// --------------------

.bg-img{
  background: #a8d2f1;
}

// --------------------
// 画像の幅指定
// --------------------
//表いっぱいに広げるため
.img{
	max-width: 100%;
	height: auto;
	display: block;
}


// --------------------
// ソリューションのマス
// --------------------
.o-cell{
  &amp;__section{
    @media screen and (min-width: 480px){
    //480以上で下段4~7は右から左になり、480px以下で１列縦並びなので下段の順番通りに戻す。
      &amp;--4{ order: 3; }
      &amp;--5{ order: 2; }
      &amp;--6{ order: 1; }
      &amp;--7{ order: 0; }
    }
  }

  &amp;__body{
    position: relative;
    padding: 18px;
  }
}


// --------------------
// 矢印
// --------------------

.o-cell-arrow{
  position: absolute;
  top: calc(50% - 18px);
  height: 36px;
  width: 36px;

  .icon{
    //iconpharm.comさんのhtml用SVGアイコン
    fill: #4b7fa5;
    display: block;
    height: inherit;
    width: inherit;
  }
}

.o-cell-arrow--0,
.o-cell-arrow--1,
.o-cell-arrow--2{
  right: -36px;
  @media screen and (max-width: 480px){
    top:inherit;
    right: calc(50% - 18px);
    bottom: -36px !important;
    transform: rotate(90deg);
  }
}

.o-cell-arrow--3{
  top: inherit;
  bottom: -36px;
  left: calc(50% - 18px);
  transform: rotate(90deg);
}

.o-cell-arrow--4,
.o-cell-arrow--5,
.o-cell-arrow--6{
  left: -36px;
  transform: rotate(180deg);

  @media screen and (max-width: 480px){
    top:inherit;
    left: calc(50% - 18px);
    bottom: -36px !important;
    transform: rotate(90deg);
  }
}

.o-cell-arrow--7{
  display: none;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

// --------------------

// コンテナ幅

// --------------------

.cont{

width: 100%;

max-width: 1280px;

padding-left: 32px;

padding-right: 32px;

margin-left: auto;

margin-right: auto;

}

// --------------------

// 文字

// --------------------

.h3-item{

font-size: 20px;

margin-top: 8px;

margin-bottom: 16px;

}

.font-s{

font-size: 14px;

}

// --------------------

// flex要素

// --------------------

.flex {

display: flex;

flex-wrap: wrap;

margin: 0 -16px;

}

.col3{

width: 25%;

min-width: 25%;

padding: 0 16px 32px 16px;

@media screen and (max-width: 480px){

//480px以下で４並びを１並びにする

display: block;

width: 100%;

}

// --------------------

// 表全体のカラー

// --------------------

.bg-img{

background: #a8d2f1;

}

// --------------------

// 画像の幅指定

// --------------------

//表いっぱいに広げるため

.img{

max-width: 100%;

height: auto;

display: block;

}

// --------------------

// ソリューションのマス

// --------------------

.o-cell{

&__section{

@media screen and (min-width: 480px){

//480以上で下段4~7は右から左になり、480px以下で１列縦並びなので下段の順番通りに戻す。

&--4{ order: 3; }

&--5{ order: 2; }

&--6{ order: 1; }

&--7{ order: 0; }

}

&__body{

position: relative;

padding: 18px;

}

// --------------------

// 矢印

// --------------------

.o-cell-arrow{

position: absolute;

top: calc(50% - 18px);

height: 36px;

width: 36px;

.icon{

//iconpharm.comさんのhtml用SVGアイコン

fill: #4b7fa5;

display: block;

height: inherit;

width: inherit;

}

.o-cell-arrow--0,

.o-cell-arrow--1,

.o-cell-arrow--2{

right: -36px;

@media screen and (max-width: 480px){

top:inherit;

right: calc(50% - 18px);

bottom: -36px !important;

transform: rotate(90deg);

}

.o-cell-arrow--3{

top: inherit;

bottom: -36px;

left: calc(50% - 18px);

transform: rotate(90deg);

}

.o-cell-arrow--4,

.o-cell-arrow--5,

.o-cell-arrow--6{

left: -36px;

transform: rotate(180deg);

@media screen and (max-width: 480px){

top:inherit;

left: calc(50% - 18px);

bottom: -36px !important;

transform: rotate(90deg);

}

.o-cell-arrow--7{

display: none;

}

あとがき

phpでカラムをループさせています。ナンバーもループで自動で取得できます。flexを使った表作りでorderで順番を替えています。

矢印のSVGアイコンはiconpharm様

ネイビーモバイルより。

南山大学のアイセックという学生団体に所属する方との交流

Posted 2017年12月28日 by エンジニア

少し前になりますが、南山大学のアイセックという学生団体に所属する方にお越しいただきました。
アイセック・ジャパンは126の国と地域で活動する世界最大級の学生組織で、海外インターンシップ事業を運営する学生団体です。

海外に学生を送るというインターンシップの話や、
現在の国内企業がどんな仕事をしているのかという話など多岐にわたる内容でお話させていただきました。
WEB製作に関連する話題にもおよび、WEBマーケティングや魅力的なキャッチコピーを考える手法などをお話させていただきました。
現役の学生による活発な活動を目の当たりにすることができ、非常に貴重な体験ができたと思います。

また、なぜ弊社にこんな話が舞い込んだのかわかりませんが、当社もいよいよ企業っぽくなってきたなーと感慨深いものがあります。
思えば、小さな規模から初めた当社に仕事に関するもの以外のお問い合わせがくるなんて日がくるとは思ってもみませんでした。
お問い合わせをいただいた時に、南山大学という名前を聞いて、大学がうちに何の用だろうと思ったものです。

今後もこのようなお問い合わせや要件にも積極的にお答えしていこうと考えていますので、
機会があればご遠慮無くお問い合わせください。

ホームページ制作で格安サービスを開始しました。標準サービスもさらに明確化しました。

Posted 2017年7月12日 by デザイナースタッフ

髪の毛がウネウネしてて梅雨は大変ですね。

あまり天気が思わしくないそんな中、
やっとヤツが出来上がりました。そう、あのプランが・・・！

ネイビーモバイルのホームページ制作で、WordPressの制作を開始しました。

名古屋・西尾・豊田・岡崎の三河地区ほか全国でも対応しています。

リーズナブル制作はじめました。

・更新機能なし
49,800円

・更新機能あり
78,900円

そして今なら・・・

・更新機能あり
~~78,900円~~　→　49,800円

かなりお値段頑張りました(^O^)

標準機能

スマートフォン対応（レスポンシブ）
スマートフォンのホーム画面アイコン
favicon（ブラウザのアイコン）
トップページのスライドショー
画像のアニメーション表示
オリジナルデザイン
お問い合わせフォーム
サイトポリシー・プライバシーポリシー
アクセス解析（Googleアナリティクス）
地図（GoogleMap導入）
サーチコンソール（Google・Yahoo登録）
Googleアカウント取得
htmlの最適化・構造化
OGP（SNSシェア設定）
SNSボタン設置（LINE・Facebook・Twitter・Google+等）
標準サーバー管理
メールアドレスの発行
独自ドメインの取得
運用サポート
コンテンツ制作サポート
SEO

が標準でつきます。
もちろん本来のスタンダート制作でもつきます。
（スタンダート制作だっともっとやれることが増えます）

気になる方へ

リーズナブル制作は
ホームページが欲しいけどどこに頼んだらいいか分からない方、
制作料金を抑えたい方、
制作における話し合いをざっくり削りたい方向けになっていると思います。

この制作はまだ本サイトの制作料金ページで発表できてないのですが、
すぐにホームページでも詳細をお載せいたします。
制作数に限りがございますので、
迷われている方はネイビーモバイルお問い合わせまでご連絡ください。

なぜこんなに安いのか怪しいなと思われている方、
でも気になる方、
それにはしっかりとした理由がありますので
メールもお電話でもお待ちしております。
（ちゃんと制作料金ページにもお載せしますね）

パソコン購入を考えている初心者さんに伝えたいこと

Posted 2017年7月3日 by デザイナースタッフ

近年スマートフォンが普及し、パソコン自体の需要が減っていますが、
パソコンも持っておくと便利だなぁと、皆さん感じていると思います。
iPodなどの音楽プレイヤーに曲を入れたい。
家族の思い出ムービーを残しておきたい。
画像や自作イラストを編集したい。
パソコンゲームがやりたい。
様々な理由があると思います。

パソコンの購入をお考えの方、でもパソコンについてあまり詳しくなくて、
何を基準として購入したらいいかわからない方、
この記事で少しでも見てよかったと思っていただければ幸いです。

そこで、これだけ知っておけば、パソコン選びに失敗しないことを教えたいと思います。
※OSはmacではなく、Windowsとします。

CPU・メモリ・容量

よくスペックは？？と聞かれたときに出てくる３つの言葉です。
これだけ抑えておけばよっぽど大丈夫です。

CPU

CUPの主な種類は
Corei3
Corei5
Corei7
が一般的です。
この数字が大きければ大きいほど、処理速度が上がります。
同時に値段が高くなることも忘れずに。
corei5あれば問題なくスムーズに動きます。

メモリ

2GB
4GB
8GB

これも数字が大きければ大きいほど色々なアプリを同時に動かせる数が増えると思って下さい。
よっぽど4GBで足ります。

容量

HDD　250GB
HDD　500GB
HDD　1TB
あたりが一般的です。
パソコンに動画や写真を保存しておける容量だと思って下さい。
これも数字が上がるに連れてお値段が・・・(T_T)
これも500GBで一般的には足りますが、
大量に動画を保存したいとなる1TB欲しくなるところはあります。
外付けHDDもありますが、250GBだとちょっと少ないかな。

スペックまとめ

CPU 　 Corei5
メモリ 4GB
HDD 　500GB
で問題ないと思います。

デスクトップorノート

ノートパソコンでも問題ないです。

前まではデスクトップでないと重くて動かないと言われていましたが、
今ノートパソコンが進化していて、デスクトップに比べてもそこほど支障がないくらい動きます。
持ち運びも便利です。
外出はもちろん、いつもは自部屋でパソコンをいじっているけれど、
たまにはリビングでなんてことも出来ます。

でも・・・
パソコンゲームをするならデスクトップが良いとされます。
キレイな画質が良いのであればグラフィックボードも良いのを検討して下さい。（グラフィックボードについては割愛）

家電量販店orネット通販

初心者さんであれば、家電量販店をおすすめします。

ネットはなかなか勇気がでないかなぁと思うので。
お店のサポートもあるし、実際見れるので安心感はあります。

春モデルが出たときに前のモデルを買うとか、性能はほぼほぼ変わりませんので、前のモデルを買うとお安くゲットできます。
ただネット通販のがもっと安いなぁとは思いますが。

パソコンメーカーによって、要らないアプリケーションとかザクザクはいってるので要らない容量をくっている感じは否めないですが、何かやるにあたってそこ程支障はありません。

お店の人がすべて把握している訳ではないので、
上記で書いたスペック（CPU・メモリ・容量）は自分の欲しいもの選んで下さい(^^)

どのメーカーが一番いいか

有名メーカー様でこれが1番いい！なんてコトは無く、あまり変わり無いと思います。
見た目で気に入ったとか、外見のビジュアルが少し気になったパソコンがあれば、
その型式でレビューを見たりすると色々分かります。

タッチ操作対応orタッチ操作非対応

近年のノートパソコンは、画面をタッチするだけでパソコン操作ができる機種が増えてきていますが、
実際の所スムーズか。と言われるとそうでもありません。
私は結局マウスを使っています。
マウスの方が動作がスムーズに動きますので、
マウス操作でいいのであれば

タッチ操作非対応でも問題ないと思います。

その分お値段もお安くなります。

Officeをつける

会社や学校で使うWord・Excel・PowerPointのことです。
この３つは会社で使うのであれば付けておくと便利です。

CDドライブ非対応のモノもある

昔のノートパソコンでしたら、パソコン自体にCDを挿入できるCDドライブが内蔵されていましたが、
パソコンの軽量化や、ダウンロードの普及でCDドライブがついてないことが多々あります。
（私はてっきりついてると思いこんでて急いで外付けのCDドライブを購入しました＾＾；）
もしお好みのパソコンにCDドライブが付いていなかったら、同時に外付けのCDドライブも購入してください。

こんな感じでまとめてみました。ほかにも参考になるブログが沢山ありますので、
そちらもぜひ読んでみて下さい＾＾
電話でどんなパソコンが良いか聞いてきたことを思い出して記事にしてみました。
あの子は何を買ったのかなぁ。

西尾市の市街地に近い場所に生息する自然のホタルを探索

Posted 2017年7月3日 by エンジニア

西尾市の市街地近郊に自然に生息するホタル探索

夜なのに暑いですね。
暑いので冷たい飲み物を買いに近くの自動販売機へ行ったんです。

当たりくじ付きの自動販売機…

「当たったら共感を生むコンテンツだな」

なんて冗談で思ったんです。
当社のホームページにも書いてあるので、当たったらブログネタにちょうどいいかもってね。

まさかの…

当たった(´Д` )

コーヒーを買って当たったのにコーヒーをもらってしまい、少し後悔。

ま、うれしいので早速、投稿許可を得てブログにネタとして投下させていただきました。
ところで、夜外にでてきたのは冷たい飲み物でもなく、自動販売機のくじ運を試したかったわけでもありません。
今年も夏の風物詩を楽しめるか散策しに来たのです。

本題のホタル探索へ

そう、ホタル。
愛知県でホタルといえば岡崎市のゲンジボタルが三河地方では有名ですが、西尾市にもホタルは沢山います。

西尾市のホタルと言えば、平原の滝近くの平原ゲンジボタルの里で、毎年6月にホタルまつりを開催しています。

ただ、そうではなく、平原ゲンジボタルの里とは遠く離れた西尾市内ととある場所に生息してるホタルが目的です。
普通に県道の幹線道路の脇で、地元の方でもここにホタルが生息しているなんてほとんど知らないというような場所。
そういうところで、こっそりと自然のホタルを鑑賞するのを毎年の楽しみにしています。

で、今年もいました。
ホッとしました。

わずか2〜3匹ですが、ホタルいました。
ホタルまで遠くて写真も撮れないのですが、今年も無事に生息が確認できただけで満足です。

自動販売機で当たりも引いたし、今日はなんだかお目出度い気分です。
母さん、今日は赤飯だ！

保存

岡崎と書かず岡﨑でtitle・descriptionを書いていたことに気づきました

Posted 2017年6月28日 by デザイナースタッフ

こんばんわネイビーモバイルスタッフです。

タイトルが一見何を言ってる？？
という感じですが・・・そうカンジ、漢字が間違っていました。

昨日の夜発覚したこと。

metaタグのtitleとdescriptionがGoogleの検索エンジンでのっかってくるのですが、
一向に岡崎のキーワードに上がって来ない・・・？

と思ったら「﨑」違いでした。

今ではちゃんと直して無事掲載されましたよ。

この名字が嫌だと嘆く尾崎さんでした。

コンソールでnull is not an object (evaluating ‘　.insertBefore’)　が出た時の対処法

Posted 2017年6月10日 by デザイナースタッフ

こんにちわネイビーモバイルのスタッフです。

昼はじわじわ暑いですが、夜はまだまだ寒いですね。

UNIQLOのTシャツの任天堂コラボのお陰でTシャツが増えました。

さてさて

普段jQueryを使っているのですが、

java sprictで書いていたときに、まんまとドツボにはまってしまいました。

スペルも何も間違えがないのに

ある書き方をしてしまうと
まったくjavasprictが反映しないという現象です。

<実行されない例＞

&lt;body&gt;

 &lt;script&gt;

  var aaa = document.getElementById('aaa');
  aaa.innerHTML = '&lt;h2&gt;こんにちは&lt;/h2&gt;';
  aaa.style.backgroundColor = '#000000';
  aaa.style.fontSize = '24px';
  aaa.style.color = '#ffffff';

  var first = document.createElement('div');
  first.setAttribute('id', 'first');
  first.innerHTML = '&lt;p&gt;こんばんわ&lt;/p&gt;';
  aaa.insertBefore(first, null);
 &lt;/script&gt;

 

 <strong>&lt;div id="aaa"&gt;おはよう&lt;/div&gt;</strong>

&lt;/body&gt;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<body>

var aaa = document.getElementById('aaa');

aaa.innerHTML = '<h2>こんにちは</h2>';

aaa.style.backgroundColor = '#000000';

aaa.style.fontSize = '24px';

aaa.style.color = '#ffffff';

var first = document.createElement('div');

first.setAttribute('id', 'first');

first.innerHTML = '<p>こんばんわ</p>';

aaa.insertBefore(first, null);

</script>

</body>

ぴ・・・ぴくりとも反応しない。

コンソールで確認すると

null is not an object (evaluating ‘　.insertBefore’)

・・・

.insertBeforeが取得できていないとエラーがでました。

ちゃんと指定しているのになんで・・・？

かれこれ一時間くらい悩んでしまいました。
なんとも単純なミスでコトは解決いたしました。

！わかったこと
JavaSprictは<html>の下に<script></script>置かないと実行されない。

<実行される例＞

&lt;body&gt;

<strong> &lt;div id="aaa"&gt;おはよう&lt;/div&gt;</strong>

 &lt;script&gt;

  var aaa = document.getElementById('aaa');
  aaa.innerHTML = '&lt;h1&gt;こんにちは&lt;/h1&gt;';
  aaa.style.backgroundColor = '#000000';
  aaa.style.fontSize = '30px';
  aaa.style.color = '#ffffff';

  var first = document.createElement('div');
  first.setAttribute('id', 'aaa');
  first.innerHTML = '&lt;p&gt;こんばんわ&lt;/p&gt;';
  aaa.insertBefore(aaa, null);
 
 &lt;/script&gt;

&lt;/body&gt;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<body>

var aaa = document.getElementById('aaa');

aaa.innerHTML = '<h1>こんにちは</h1>';

aaa.style.backgroundColor = '#000000';

aaa.style.fontSize = '30px';

aaa.style.color = '#ffffff';

var first = document.createElement('div');

first.setAttribute('id', 'aaa');

first.innerHTML = '<p>こんばんわ</p>';

aaa.insertBefore(aaa, null);

</script>

</body>

なんともお恥ずかしいミスですね。

対処法は<sprict>とhtmlを逆にしただけです。

javaSprictはhtmlを読み込んでからでないと実行されないんですね。
これがjQueryであれば $function(){} のおかげで先に読み込んでも実行されるんですね。

一字一句スペルまで確認したのに間違えは<sprict></sprict>とhtmlを書く位置だったんですね。
この小一時間もんもんとした時間は無駄でなかったでしょう。もうこれから絶対ミスしないですもんね。

iPhoneで下の要素がスクロールされないレスポンシブ対応のヘッダーメニュー

Posted 2017年6月10日 by エンジニア

新しいヘッダーが完成しました。
レスポンシブデザインを採用しているため、PCの大きなモニターにも、スマートフォンの小さなスクリーンにも対応します。

iPhoneでドロワーの下にある要素がスクロールしない

主な特徴として、iOS特有の重ねた要素をスクロールさせると下の要素が反応してしまう症状を解決しています。絶対にスクロールが乱れずレイアウトも崩れない…と思います。

デスクトップ用のデザイン

ドロップダウンメニューを利用できます。ドロップダウンはメガメニューにもなります。メニューのリンクはマウスホバーにもクリックにも対応しているため実用性も高くなっています。

モバイル用のデザイン

ハンバーガーメニューだけのシンプルなデザインです。ロゴとボタンは少しスクロールすると隠れて、少し下にスクロールするとまたロゴとボタンが現れます。

ドロワーのデザイン

左サイドからスルッとアニメーションして開きます。
メニューを開くと高さが自動的に変わりますがスクロールも崩れません。

実際の動きを確認するには当社のホームページをご覧ください。

http://navymobile.co.jp

ホームページ制作でこのメニューを採用していただくこともできます。
詳しくはお問い合わせください。

Googleアカウントを作成するメリット

Googleアカウントの作成方法

作成するURLへ飛ぶ

名前・お好きなアドレス・好きなパスワードを記入

自分の電話番号を記入

確認コードが届く

自分の生年月日を記入

番号の活用するかしないか

プライバシーポリシーと異様規約に同意する

登録完了

個々設定画面が出てきます。

アカウントが右上に現れる。

様々なサービスが受けられます

補足のログイン方法

１．タクソノミー付きのカスタム投稿タイプをつくる

２．タームを決める

３．タクソノミーのアーカイブとシングルの専用ページをフォルダに作る

４．カスタムタクソノミーのアーカイブ専用ページをフォルダに作る

５．テスト投稿

６．パーマリンクを更新する

７．タームの色々を取得する方法を見ておく

８．選択されたタームをリンクしてループさせる

デスクトップ画面

スマホ画面

html/php

scss

あとがき

リーズナブル制作はじめました。

標準機能

気になる方へ

CPU・メモリ・容量

CPU

メモリ

容量

スペックまとめ

デスクトップorノート

家電量販店orネット通販

どのメーカーが一番いいか

タッチ操作対応orタッチ操作非対応

Officeをつける

CDドライブ非対応のモノもある

西尾市の市街地近郊に自然に生息するホタル探索

本題のホタル探索へ

ある書き方をしてしまうと まったくjavasprictが反映しないという現象です。

<実行されない例＞

！わかったこと JavaSprictは<html>の下に<script></script>置かないと実行されない。

<実行される例＞

対処法は<sprict>とhtmlを逆にしただけです。

iPhoneでドロワーの下にある要素がスクロールしない

デスクトップ用のデザイン

モバイル用のデザイン

ドロワーのデザイン

最近の投稿

アーカイブ

カテゴリー

メタ情報

ある書き方をしてしまうと
まったくjavasprictが反映しないという現象です。

！わかったこと
JavaSprictは<html>の下に<script></script>置かないと実行されない。