diary障害年金で暮らす片づけられない女の日記2015-05-17はてなブログを使う際に覚えておくと便利なコード5選(超初心者編)はてなブログスポンサードリンクはじめにはてな村に入植からまだ5ヶ月しかたっていない私ですが、ニューカマーの方のお役に立てそうな情報を共有したいと思いたち、この記事を書きます。私自身、はてなブログの仕様や、Webに関する確かな知識がないので、間違いの指摘やアドバイスを宜しくお願いします。HTMLとCSSの基本を確認このパートは、はてなブログと関係なく、ソースコードを読むための前提知識の説明なので、ご存知の方はスキップしてください。HTML要素とはまず、見出しなど文章の構造を定義する時に使われるのがHTMLタグと呼ばれているもので、例えば以下のソースなら、「h3要素」という言い方をします。<h3>Google社の新しい取り組み</h3>属性とはまず、HTML要素のおさらいです。以下のコードは"<a"から始まって、"/a>"でタグが閉じられる部分が「a要素」だと理解できればOKです。a要素の開始タグ内にhrefと記述されていますが、これを属性と呼びます。diary</a>ここまでの内容をまとめたので、再確認ください。スタイルシート)を用いて、自分のブログを表現力豊かなデザインにカスタマイズできますが、初心者の方は以下の2つの記述場所を覚えておけば大丈夫です。出典はcite要素を使うそれでは、実際の操作に移ります。見たまま]画面では、引用ボタンを押すとblockquote要素が自動的に記述されます。以下の引用例は、出典先のURLが3行目にあるので、このp要素をcite要素に書き換えましょう。コードや空白は必ず半角で入力してください。1文字でも違っていると正しく表示できません。href="http://hatenablog.com/">はてなブログ</a></cite></blockquote>ちなみに、p要素は段落を表します。その他の引用に関する説明や、SEO上のメリットは以下の記事をご参照ください。画像にalt属性やtitle属性を記述するはてなFotolifeからアップロードした画像は、以下のようなコードが自動生成されます。f:id:自分のID名:数字:plain)が入ります。一般的には、2つの属性を以下のように使い分けます。人間title属性の値に指定したテキストは、画像の上にマウスをのせた時に吹き出し表示されます。*2これらの属性がSEO的にどう評価されるかについては諸説ありますが、はてなブログのデフォルトが意味のない値を割り当てているくらいなので、あまり厳密に考えなくても結構です。参考までに編集後のソースを掲示します。画像に枠線をつけるスタイルシートを単語登録するはてなFotolifeでアップロードした画像は、デフォルトのままだと枠線なしで表示されます。下の例のようなイラストなら、画像ファイルの四角い輪郭を明示する必要がないので、このままで結構です。下図ように白い背景のスクリーンショットなどを掲載する場合は、本文のテキストとの区別をはっきりさせるために枠線を付加した方が望ましいです。#000000"」をよく使うので、日本語入力システムに「わくせん」で単語登録しています。参考までに、コードの内容を簡単に説明します。他の属性と半角スペースで区切れば、img要素内のどこに記述しても構いません。/></p>枠線をつけた画像の表示例はこちらの記事でご確認ください。セルを右寄せにするスタイルシートを単語登録する記事の内容をわかりやすく整理するために、表をしばしば使います。簡単にtableタグを生成してくれるツールの使い方を紹介している過去記事も参考にしてください。www.kukkanen.tokyo例えば、以下のコードで表組みをしたとします。</tr></table>td要素に入力された文字はテーブル外にある本文と同様に、文字列が左側に寄ります。金額やパーセントなどの数値データは桁をそろえるために右揃えに変更しましょう。right;"」で単語登録しておくと便利です。説明リストを使うはてなブログには、[箇条書き]や[番号付きリスト]ボタンがありますが、これらと似ている構造のタグとして、以下の要素があります。▼コード記述例<dl><dt>HTMLとは</dt><dd>Webページのドキュメント構造を記述するための言語です。</dd><dt>CSSとは</dt><dd>Webサイトの書式などデザインを管理する言語でスタイルシートと呼ばれています。</dd></dl>▼表示例HTMLとはWebページのドキュメント構造を記述するための言語です。CSSとはWebサイトの書式などデザインを管理する言語でスタイルシートと呼ばれています。価格:2,700円(税込、送料込)楽天ブックスで詳細を見る*1:目次の自動表示は次の記事で解説しています。diary*2:ブラウザの仕様により、表示方法が異なる場合があります。*3:はてなブログでは、自動的にコードの位置が最適化されます。(2)ブログランキング参加中にほんブログ村にほんブログ村はてなブログをはじめよう!kukkanenさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。