2017.10.11 Wed

コーディング時の手助けに！お役立ちサイトリンク集

こんにちは。ジーニアスウェブ増田です。
最近朝と夜が冷えてくる季節になってきましたよね…
昼間は半袖でもちょうどいいのですが、夜になると寒かったりして、体温が冷えて風を引いてしまうかたもいらっしゃる時期かと思います。
かくいう私も、秋冬モノの服をあまり持ち合わせていないため、そろそろ買っていかないと本格的に凍えてしまう日が来てしまいそうです。

さて、今回はいつもの投稿と趣向を変えて、1つの題材を説明する記事ではなく、私自身が仕事を通してHTMLコーディングやWordpressを触っていく中で、参考にしたサイトを幾つか紹介していきたいと思います。

目次／このページでわかること

皆さんはコーディングをする時、id名やclass名を設定すると思います。
内容の英訳をgoogle翻訳で調べたりしている方も多いのではないでしょうか？
こちらのサイトでも、google翻訳と同じように日本語を英語に自動で変換してくれます。
「それじゃ別にgoogle翻訳でもいいじゃん！」
という方もいらっしゃるかもしれません。しかしこのサイトは、よりclassの命名に特化した変換サイトです。
例えば「見出し　サンプル」のように空白をいれて検索すると
「heading_sample」
のように、そのままclass名として利用できるような形で出力されてでて来る分、ちょっとだけでも作業の時間を短縮できるのではないかと個人的には感じています。
サイトはこちらです。
https://codic.jp/engine

googlemapの見た目をカスタマイズをしたい

サイト制作の際、googlemapを使用されることはないでしょうか？そのgooglemapの見た目を変更できるサイトがこちらのサイトです。
サイトに行くとこのような画面になると思います。

左側の設定欄で表示したい地図の位置、サイズ、デザインテーマを決める事ができます。
制作されているサイトの雰囲気に合わせてgooglemapの見た目を変更したいと考えている方は使ってみてはいかがでしょうか？

サイトリンク
https://ezmap.co/

ホバー時の動きを参考にしたい時

サイトを制作していく中でこだわりたいのは、リンクボタンにマウス(カーソル)が乗った時の動きですよね！
デザイナーさん、コーダーの方のどちらもここにはこだわりたいという方も多いのではないでしょうか？
下記のサイトでは、様々なホバー時のデザインをサンプルソースと共に掲載しているサイトになります。ここからお気に入りの動きを探す。もしくは実装するための参考にしてみてはいかがでしょうか？

サイトリンク
https://web-bruno.com/css-hover-design/

サイドバーに記事一覧（プラグイン）で実装したい場合

ここからしたはWordPress関連の内容になってきます。
WordPressで作業をしていると、サイドバーに記事一覧を表示させる事も多いと思います。
その表示は設定自体は割りと簡単で、文字のみのリンクであれば、WordPress初心者の方でも比較的簡単に表示させることが可能です。ただ、記事内で使用している画像をサムネイルとして表示させたいとなると、少しなれないと時間がかかってしまうものだと思います。
状況にもよると思いますが、記事の画像を簡単にサムネイル付きで表示させてくれるプラグインがございますのでこちらでご紹介致します。
プラグインをインストールし、少し設定するだけで、ブログなどでも簡単にサムネイル付きリンクが作れてしまいます！
サイト内に3つ程リンクが貼られていますので、好みや用途に応じて使用してみて下さい。

サイトリンク
http://hublog.biz/bwpb/3-plugins-for-latest-posting-on-widget/

いかがでしょうか？
私自身サイトを制作する際、自分では分からないことも多くその都度調べては実装を試みています。
今回はその調べる時間を少しでも短縮出来ればと思い、私が参考にしているサイトのリンクをご紹介させていただきました。
これからもまた沢山調べていく中で、皆さんに共有したいことをどんどん紹介していこうと思います。
それでは今回はこれで失礼致します。

WRITER／この記事を書いた人

増田

a-blogやWordPressを使用したサイト制作に携わっています。もっといろんなCMSを扱えるようになれるよう勉強中です。