taccuma note

Atomのオススメ拡張5 autocomplete-paths編

Atomのautocomplete-paths

GitHub製のテキストエディタAtomを使っているとき、例えばhtmlファイルに画像を挿入するさいに・・・普通だとパスの補完が効かないので、画像ファイルのパスを手打ちで入力しないといけません。これがものすごく面倒だし、打ち間違いもありえるので・・・そんなときのためにautocomplete-pathsというパッケージ(拡張機能)をいれましょう。

続きを読む

[CSS]文字列の折り返し、word-break: break-allの使いどころ

文字列が親要素よりはみ出す状態

こんな風に親要素から文字列がはみ出したことありませんか?普通はあんまり親要素から文字列はみ出さないんですよね。でもだからといって油断していると知らないうちにはみ出してますよ。はみ出し禁止です。

この記事では親要素から子要素の文字列がはみ出す、文字列の折り返しが上手くいってないときの対処法としてworld-break: break-allの使いどころをご紹介します。

続きを読む

Googleのモバイル検索上で「スマホ対応」が表示されないときの対処法

モバイル版Google検索結果画面

WordPressのテーマをこれから自分で作成する人は、モバイルフレンドリーであることが大切です。モバイルフレンドリーとは、スマートフォンなどの携帯端末でも見やすいサイトである・・・ということ。Googleではモバイルフレンドリーなサイトになるためには、レスポンシブデザインを推奨しています。

なぜモバイルフレンドリーであることが大切なのかといえば、Googleがモバイル端末上でのGoogle検索において、モバイルフレンドリーなサイトを優遇しはじめたからです。スマートフォンでGoogle検索をしたときに、検索結果に「スマホ対応」というラベルが表示されてるサイトを見たことがあると思いますが、「スマホ対応」というラベルがついたサイトはもれなくモバイルフレンドリーなサイトということで、レスポンシブデザインだったり、モバイル向けに最適化されたスタイルが適用されているサイトということです。

通常、レスポンシブデザインで作成したテーマを有効化させれば・・・自動的に「スマホ対応」というラベルがつくと思いますが、まれになかなか「スマホ対応」というラベルが検索結果につかない場合があるそうで・・・僕の場合もなかなかスマホ対応というラベルがつきませんでした。今回の記事ではレスポンシブなテーマを作成して、モバイルフレンドリーテストに合格したのにもかかわらず、なかなかモバイル検索上に「スマホ対応」のラベルがつかない場合の対処法をご紹介します。

続きを読む

他のサイトからiframeタグで自分のサイトを読み込ませない方法

iframeのサンプル

自分のブログ内にiframeで自分のブログを呼び出した

いま見ているページに、別のページをインラインで読み込むには・・・iframeタグを使えば可能なんですが、iframeタグで別サイトをまるまる自サイト内に取り込む行為はマナー違反も甚だしいので、基本やってはいけないと思ってます。

この記事では、自分のサイトを他のサイトからiframeタグで読み込ませない方法をご紹介します。

続きを読む

AkismetのAPIキーの有効期限が切れたら・・・

Akismetの有効期限切れ画面

Akismetというのはスパムコメントから自分のブログを守ってくれるプラグインのことなんですが、久しぶりにAkismetの設定画面を覗いたら・・・こんな表示が出てました。AkismetのAPIキーに有効期限なんてあるんですね。ということで、この記事では、もしAPIキーの有効期限切れですよってこんな感じの警告画面が出たときの対処法を。

続きを読む

モバイルフレンドリーテストを受けてみました

モバイルフレンドリーテスト

以前に一度でもこのサイトに訪問してくれたことがある人ならお気づきかと思いますが、WordPressのテーマをレスポンシブ対応にしました。WordPressのテーマを作り始めて3作目、はじめてのレスポンシブ(なんちゃって見切り発車版)です。

はじめてレスポンシブ対応のテーマを自作したので、モバイルフレンドリーテストを受けてみました。Google Search Console(旧Googleウェブマスターツール)が提供してる「自分のサイトがモバイルデバイスに対してフレンドリーか?」をテストするサイトです。

続きを読む

SyntaxHighlighter Evolved Version2系における「クリップボードにコピー」ボタンを修復する方法

fix-clipboard-button-in-syntaxhighlighter-1

WordPress上でソースコードをきれいに表示してくれる「SyntaxHighlighter Evolved」というプラグインを使用してる人も多いと思います。このプラグインはversion2とversion3…2種類の表示方法から好きな方を選べますが、前者の方が利用者が多い。ソースの折り返しが効くので横スクロールバーが出ないとう利点からversion2の方が多くの人に選ばれてるみたいです。

ただいつからか忘れましたが、version2において「クリップボードにコピーボタン」が表示されなくなりました。他の有名なブログさんを見ても表示されてなかったので…プラグインのちょっとした不具合だろう、いつかは修正されるだろうと放置プレイしていたのですが、いつまで経っても直らないので…自力で直してみました。

続きを読む

横幅いっぱに広がるつもりのheaderとfooterの右端が切れてる時の対処法

ヘッダーの右端が切れてる...

なんということでしょう… ブラウザの幅を狭めるとヘッダーの右端が見事に切れてます(;^ω^)ヘッダーが切れてるということはもちろんフッターだって…

もちろんフッターの右端も切れてます...

案の定切れてました…orz

このヘッダーやフッターの右端が切れてる状態はブラウザの横幅を狭めないと発見できないので…気がつかないことが多いのですが、もともと画面サイズが小さいスマホやタブレットでアクセスすると…もちろんヘッダーとフッターの背景が切れていますw

本当だったらヘッダーもフッターも右端まで背景が続いて欲しいはずです。今回の記事では、ヘッダーとフッターが右端で切れてる場合の対処法を考えてみます。

続きを読む

WordPressにはてなブックマークボタンを設置する方法

はてなブックマークボタンの設置

自分のホームページにはてなブックマークボタンを設置したいと思ったら、はてブ公式からブックマークボタン用のソースコードを取得して、それを自分のサイトのボタンを設置したい場所に貼り付ければOKです。

ただし、WordPressの場合は取得したコードをそっくりそのままコピペしてもボタンとして機能しません。はてブボタンのソースコード作成時にページのアドレスとページのタイトルを入力する欄がありました。ここに自分のブログのトップページURLとブログ名を入れてしまうと、毎回自分のブログのトップページとブログ名がはてブされてしまうことになります。どうせボタンを設置するなら各ブログ記事ごとに、その記事のタイトルをつけてはてブして欲しいと思いませんか?

ブログの記事を新しく書く度にはてブ用ソースコードを取得して、投稿画面に貼り付けるのも面倒です。それでは一体どうしたらよいでしょうか?

この記事では、プラグインを使わず自分のWordPressにはてブボタンを設置するためのソースコードの取得、修正方法を簡単にご説明します。

続きを読む

英語が苦手で予備知識が無くてもCodecademyでプログラミングを学習したい人へのヒント

Codecademy-mainvisual

オンライン上でHTMLやCSSの基礎、Javascript、PHP、jQueryなどのプログラミングが気軽に無料で学習できるサイトとして人気のCodecademy…ご存じの方も多いと思います。

ほんの一部分だけ日本語化されているものの…その大部分が英語表記のサイトのために、プログラミングを学習したいという人でもちょっと手が出しにくい、挫折しやすいサイトであることは間違いないと思います。

かくいう僕も結構早い段階からこのサイトを知っていて会員登録もしていたのですが、いざはじめてみると…やっぱり英語に多少の苦手意識があるせいか数時間学習してあとは挫折していました。

ただ英語もウェブ制作も勉強中の僕としては、このCodecademyを途中で挫折したことがどうしても悔しくて…再チャレンジし始めたのが今年の1月(遅い日本語化を待ってはいられませんでしたw)、ちんたらちんたら勉強してようやく…8つある大きなコースの中で一番簡単なコース「Web Fundamentals(HTMLとCSSの基礎)」が終わりました。今はJavascriptのコース(トラック)を学習中です。

今になってようやくですが…Codecademyでの勉強のコツが分かってきました。英語があんまり好きじゃないけど、Codecademyでプログラミングの勉強がしたいなぁという人向けにアドバイスを書いてみたいと思います。

続きを読む

1 / 4123...

最近の投稿

おすすめ

タグクラウド

カテゴリー