はてなブックマーク

今回は、CSSだけでサイドバーを固定する方法を紹介します。 コンテンツをスクロールすると、サイドバーの一部が途中から追従する動きは、ブログなど2カラムのサイトではよく使われています。 頻繁に使われるので、実装方法を覚えてきましょう。 サイドバーの下部にあるエリアが、スクロールに追従するようになります。 昔はJavaScriptを駆使して実装していましたが、今ではCSSだけでできるようになりました。 HTML bodyやヘッダー、フッターのHTMLは省略します。 <div class="wrapper"> <main class="main"></main> <aside class="sidebar"> <div class="widget"></div> <div class="widget widget--sticky"></div> </aside> </div> 以下のCSSで、.

RSSフィードの送信がなくとも、HTMLに変更があったら自動でメールが届くコードを作りました。 ブログで古い情報を載せたままにするのが嫌なので、定期的に公式サイトの情報を確認できるようにするためです。 いちいちサイトを確認しないでも、ページの更新があった時だけ自動で通知されれば便利だと思います。 フォルダ構成は以下のような感じ。site-check.phpの処理が実行されると、sourceフォルダにテキストファイルが生成されます。 PHPコード <?php $check_site_array = array( 'hoge' => '監視したページのURL', // hoge.txtというテキストが自動で書き出される 'fuga' => '監視したページのURL' // fuga.txtというテキストが自動で書き出される ); // 更新通知先メールアドレス $mail_address =

（background-attachment: fixed;を利用しているので、iOSでは使えないです…） 実装方法 まず、塗が白い画像と黒い画像を二つ用意します。 HTML HTMLは割とシンプルです。 <div class="wrapper"> <section class="section bg-white"> <!-- コンテンツ --> </section> <section class="section bg-black"> <!-- コンテンツ --> </section> <a href="" class="twitter-button"></a> </div> .section { position: relative; } .bg-white { background-color: #fff; } .bg-black { background-color: #000;

こんにちは。 今回はjQueryを使わずに、JavaScriptだけでページの一番上に戻るボタンを実装します。 ページ内リンクのようにパッと戻るのではなく、スルスルと滑らかにスクロールさせます。 正直スクロールの操作はjQuery結構便利ですが、読み込み時間がかかるので使いたくないですね。 ということで素のJavaScriptで実装します。 demo コード HTML <button class="scroll-top" id="js-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></button> Font Awesome アイコンが読み込まれている前提です。ここは画像なり文字なりに置き換えてもかまいません。 ボタンはbutton要素でマークアップします。 CSS .scroll-top { position: fi

今回は、ブログ運営をするのにおすすめしたいWordPressテーマを紹介します。 私自身、WordPressのテーマを開発しており、ある程度テーマには精通しています。 今回紹介するテーマは、全て利用した上でおすすめをしています。 ブログ向けのWordPressテーマをお探しの方は是非参考にしてください。 テーマは有料と無料どちらがおすすめ？ テーマには有料のものと無料のものがあります。 無料のテーマはお金がかからないというメリットがある反面、デザインと機能を両立させたものがほとんどありません。 デザインにこだわりがない、機能さえよければ良いのであれば、無料でも問題はありませんが、デザインにもこだわりたいのであれば有料がおすすめです。 また、無料テーマは更新が止まってしまうことも多いです。 現在頻繁に更新されている有名な無料テーマは、「Cocoon」くらいで、他は更新が止まっています。 長く

今回は、WordPressで会員サイトを作成できるプラグイン「WP-Members」の紹介です。 WP-Members 会員サイト制作というとかなりハードルが高そうですが、このプラグインを使うと簡単に作成することができます（セキュリティはしっかりしてね！！）。 会員限定の記事を公開したいという、会員限定サイトにしたいなどあれば試してみて下さい。 使い方 プラグイン→「新規追加」で「wp-members」で検索してインストール、有効化して下さい。 「フィールド」から入力項目や必須項目を選択。デフォルトにない項目を追加することもできます。 会員登録後にユーザーに送られるメールの設定もできます。 会員登録ページを生成するには、以下のショートコード。 [wp-members page="register"] 記事内に以下のショートコードで、ログインページを簡単に作成できます。 [wp-member

今回は、クリックするとボタンがにゅっと出てくるトグルボタンを実装します。 このブログでもウィンドウサイズが狭くなると、フォローボタンがトグルボタンに収納されます。 JavaScriptを使わずに、CSSだけで実装できます。 実装方法 それではまず、HTML。 <div class="in-out"> <input type="checkbox" id="in-out-checkbox"> <label for="in-out-checkbox" class="in-out-label"> <span class="tate"></span> <span class="yoko"></span> </label> <button type="button" class="button1">1</button> <button type="button" class="button2">2</

「WEBデザインの勉強をしたいけど、何から手を付けて良いのは分からない」 そんな人のために、今回はWEBデザインが学べる学校・スクールをまとめました。 前半は、オンラインで学べるスクールを紹介していきます。 後半は、学校に通って学ぶタイプのスクールを紹介します。 それぞれのスクールには特徴がありますので、それらが分かるようにまとめています。 WEBデザインが学べるオンラインスクール まずは自宅にいながらWEBデザインを学べるオンラインスクールの紹介です。 「昼間に時間がとれない」「学べる時間が不定期だ」という人にはオンラインスクールはおすすめです。 オンラインスクールは比較的受講料が安く、受講するハードルが低いのも魅力です。 TechAcademy 現役のプロが制作・開発を徹底サポート。第一線で活躍する現役プロが実務経験を元にマンツーマンでサポートしてくれます。 しっかりとした実務経験があ

WEBデザイナーやエンジニアの方向けの転職サービスを紹介します。 転職サイトといえば、マイナビ転職やリクナビNEXTが有名ですね。これらは基本的に求人の掲載のみですが、今回は専任の転職エージェントがついてくれるサービスを中心に紹介していきます。 そして、WEB・IT系に強い転職サービスをチョイスしました。IT・WEBに特化しているので、その分野における転職ノウハウが蓄積されているので安心感がありますね。 もし転職を考えているようでしたら、目を通してみて下さい。 転職を考えていないという人も、転職活動してみると意外に評価高くて年収アップ狙えちゃうかも？

今回は、SEOとWordPressテーマの関係について解説していきます。 WordPressでメディアやブログを始める際、テーマによってSEOに強い弱いはあるのか気になるかと思います。 この記事では、SEOに強いWordPressテーマは存在するのか、そしてどのテーマを選ぶべきなのかを解説します。 これを読めばSEOとWordPressテーマの関係が理解できると思います。 SEOとは？ SEOは「Search Engine Optimization」の略で、検索エンジン最適化を意味します。 SEOを行うことで、Googleなどの検索サイトにおいて上位に表示されやすくなります。 SEO施策は簡単なものではなく、「これをやったら検索上位になる」という明確な正解があるわけではありません。 とはいえ、ある程度効果が見込める施策はあるので、それらを最低限行なっておきましょう。 検索結果を決定する要因

私は28歳の時にWebデザイナーに転職してWeb業界でのキャリアをスタートさせました。 この記事では、私が28歳の時に未経験から独学でWebデザイナーに転職した方法を紹介しています。 効率的な勉強方法や習得すべきスキル、転職活動のコツなど、Webデザイナーを目指している人におすすめの内容になっています。 また、今はWebデザイナーを採用する立場になっているので、「こんな人を採用したい」という視点も加わっています。 28歳（当時）の未経験がWebデザイナーに転職 Webデザイナーになるまでは、Webデザインどころか、デザインの仕事やプログラミング、Web関係の仕事すらやったことがありませんでした。 最初からデザインのセンスがあったわけでもなく、今見るとWebデザインの勉強を始めた頃作ったサイトは酷いものでした…。 Webデザイナーなどクリエイティブ業界では28歳で未経験はかなり少数なんです。