Webデザイン

Webサイト高速化

ウェブ制作やSEOも解決!アイコンWebフォントLigature SymbolsはLINE・はてブも使えるよ

ブログやウェブサイト制作では、アイコン用にWebフォントの活用も増えてます。今回はSEOデメリットやRetina対応も解決できるフリーの「Ligature Symbols」の使い方を共有します。日本語対応でLINEやはてブもあります。
Webデザイン

追尾型の固定スクロールの適切な解除でサイドバー下方部も見せる方法

ブログなどでサイドバーのスクロールを固定して、自動追尾/追従させるのをよく見かけます。今回は画面の狭いディスプレイでも、サイドバー下端まで見れるように固定を解除する方法を紹介します。
SNS対策/SMO/RSS

コピペでOK!ソーシャルボタン設置と追尾方法。プラグイン不要

ブログ・サイトにソーシャルボタンを自力で設置する方法です。いま流行りのスクロールを固定(追尾)する設定方法も紹介します。WordPressの場合はプラグインが不要になりますよ。
Webデザイン

【WordPress】新テーマデザインで96点達成!SEO対策・軽量化など7つの特徴をさらします

このブログのPC・タブレットで表示されるデザインを大幅に変更しました。今回は新テーマデザインの特徴や制作で気をつけた点などについて、全体像を紹介したいと思います。WordPress以外でも参考にしてください。
Webデザイン

jQueryのautopagerで次ページを画面遷移なしで自動読込みする方法

jQueryプラグインautopagerを使うと、ツイッターなどでも導入されているAJAX機能を簡単に実装できます。ページ最後で次が画面遷移なしで自動読込みされるアレです。私もスマホデザインに応用したので設置方法を紹介します。
Webデザイン

CSSのmicro clearfix最新版!親要素からはみ出さない方法も

最近のブログやサイトは2カラム、3カラムが主流です。カラム分けはCSSでfloatを使っている場合が多いです。しかしfloatの解除忘れでは不具合が発生する場合があります。それを解消するのがclearfixです。
Webデザイン

スタイルシート/CSSの優先順位について解説!Webデザインに生かそう

スタイルシート(CSS)ついては覚えたつもりなのに、久しぶりに更新しようとすると反映されなかったりします。原因の多くは優先順位を考慮していないからです。今回はCSSの優先順位をわかりやすく共有します。
Webデザイン

Googleアドセンスが表示されない!jQueryが動かない!原因は…

今日の午後、ふと自分のブログを見てみたら、jQueryやJavaScriptが動いていないのを発見しました。Google Adsenseが表示されてない箇所もあります。すぐ原因はつきとめたのですが、対策は1つではダメでした。
Webデザイン

jQueryで簡単設置!ページ先頭,トップへ戻るボタンの高機能な設定方法

ブログ画面の右下にページの先頭(トップ)へ戻るボタンを設置しました。フワッと現れ、移動は加速スクロールします。画面幅が狭まると邪魔にならないようフェードアウトします。こんな多機能ボタンの簡単設置方法です。
Webデザイン

コピペでOK!スムーススクロールでページ内リンクやトップへ移動!#なしで

記事が長い場合、目次やページ先頭「#」へのページ内リンクはとても便利です。しかもスムーズスクロールで移動すれば動きもわかりやすいし気持ち良い。今回はJavaScriptのプラグインを使わずに実現する方法です。
Webデザイン

【Web制作】人気記事一覧をサイドバー固定して自動追尾する方法

最近よく見かけるブログでのサイドバーの自動追尾(スクロールを固定)。ブログ運営側としてはサイドバーを空白にしなくて良いので効率化をはかれるし、見てほしい記事をアピールできて便利です。その設置方法を解説します。
Webデザイン

【Web制作】見出し・引用・リストのデザインでサイト好感度アップ!人とGoogleに

ブログ記事の中の見出し、リスト、引用などは視覚効果により文章をわかりやすくします。これは人間にとってだけでなくGoogleなどの検索エンジンにとっても内容を解析しやすくします。今回は見出し、リスト、引用の作り方を公開します。
Webデザイン

【Web制作】HTML5タグとCSS3のIE6-8対策方法!FacebookのOGP対応も

ブログやサイトを作成する時に今も悩ましいのがIE(Internet Explorer)など旧タイプのブラウザ対策。特にIE8からはそれなりのアクセスがあるため放置できません。今回はHTML5とCSS3のIE対策について考えてみました。
Webデザイン

【Web制作】5分で作成!読者をひきつけるアイキャッチやスクショ編集方法

ブログは内容が一番大切ですが、文章を説明するためやイメージしやすいようにアイキャッチ画像や写真などを掲載した方が読者に優しいと思います。今回は私が実践してる画像の簡単な編集・加工方法を共有します。
Webデザイン

【Web制作】カテゴリーとタグの違いと使い分ける4つのルール

ブログ記事のカテゴリーやタグの使い分けはSEO対策のためにも、ブログを開設してなるべく早い時期に決定すべきです。今回は親カテゴリーやタグの違い・分類方法について考えてみたので共有したいと思います。
Webデザイン

WordPress Popular Postsプラグインでサムネイル付き人気記事一覧を表示する方法

ブログに人気記事一覧をつけると、偶然訪問してくれた人に他の記事を自然におすすめできます。WordPressプラグイン「Popular Posts」は記事の後やサイドバーに人気記事一覧をサムネイル付きで表示できる便利プラグインです。
Webデザイン

【Web制作】ツイッターが投稿日時を相対表記にする2つの理由!私も採用

日時の相対表記(「10分前に投稿」など)はツイッターやFacebookなどのSNS・Webアプリではおなじみになってきました。私もホームのプチリニューアルで記事の作成日を相対表記にしてみました。今回はその理由を共有します。
Webデザイン

【Web制作】新ドメイン取得方法とサービス業者の選定

新しくブログを作成するにあたりドメインを取得しました。その方法を解説します。なぜアメブロやFC2などの無料ブログを選ばなかったのか。なぜドメインを取得した方が良いのかという点については別の記事で書くかも。