WordPress今回は、WordPressで見出しタグを編集する方法を書いていきたいと思います。あちこち記事を見ているとセンスのいい見出しをつけている方が多いと思います。見出しを編集すると、カッコいい、見やすいといったように、同じような構造が多いために似たような見た目になりがちなページに個性を出せる一番のところではないかなと思います。逆に変に編集している人!使っていない人は記事内容がダラダラになって見にくい!ということもあると思います。SEO以前にユーザビリティを考慮した時にも重要なのが見出しタグではないでしょうか実はこの見出しタグ、HTMLの知識が少しあれば簡単にカスタマイズできちゃうんです。HタグとはどんなもんよWordPress上では段落、見出し、見出し1、見出し2...というように表示されていますが、実際はこんな風になっています。<h1>テキスト</h1><h2>テキスト</h2><h3>テキスト</h3><h4>テキスト</h4><h5>テキスト</h5><h6>テキスト</h6>1から6まで数字が少ないほうが、重要とされ、順番に使っていくことが望ましいとされ、H1は一回しか使えないといわれています。編集方法まずWordPressにログインします。外観にマウスを合わせるといくつかのメニューが現れますので、テーマの編集を選択します。この中でHタグの記述がある場所を探して編集するだけです。この際に、CSSの編集部分だけか、心配なら全部メモ帳に保存しておきましょう。テンプレートによって変わっているようですが、僕の場合このような記述があってわかりやすかったです。見出し(H1-6)************************************/プラグインを使うここまでで、わかんない!という人に朗報です。見出しタグ用のプラグインありました。エディター・ビジュアルエディターへのクイックタグの追加を容易にします。ファイルとしてエクスポートすることが可能です。インポートすることができます。Designこのブログは不定期ながらも更新しているので、少しでも見やすくしていきたいなーと思っていたところ、他のブログで時々見かける目次って自動で挿入とかできるのかな?と思って調べてみると便利なプラグインがあったのでご紹介します。...コピペして自分流にアレンジこれからオシャレなテンプレートを公開しているサイトを公開しますが、その前に一つ、各テンプレートは公開している時の色があります。この色を編集することでサイトの配色に合わせたりできます。#こんなのの後に各カラーコードがどのテンプレートにも設定されていますので、以下の記事を見ながら編集してみるといいと思います。HTMLカラーコード色の名前とカラーコードが一目でわかるWEB色見本テスト用のツールもありましたので公開しておきます。Description便利な見出しサイト次に便利な見出しサイトがたくさんあります、自分ではこういう発想はなかったと思えるような見出しタグがたくさん公開されています。画像を使用せずCSSのみで見出しを作成するCSSジェネレーター。吹き出し型、リボン型なども生成可能。WEB道のCSS見出しジェネレーターは直観的に見出しタグを作成してくれるサービスです。スタイルシート見出しメーカースタイルシート見出しメーカーは好きな色で簡単にさまざまなCSS見出しが作成できるツールです。好きな色を選んで作成ボタンを押せばシンプルなスタイルシート見出しのHTMLとCSSを自動生成します。使い方もコピーアンドペーストでOKだから簡単です!以下の記事はシンプルかつ実用的な見出しタグがおおくけいさいされていました。この記事だけで十分だと僕は思います。NxWorld以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。要素を1つ追記する程度のものです。ここでは見栄えの紹介は全て画像を使用していますが実際の表示は以下デモページで確認でき、デモでは複数行の時の見栄えも併せて確認することができます。今回は、僕も普段からよく使う「見出し(hタグ)」のテンプレート、15選をご紹介します。コピペするだけ、簡単です。利用されているテーマのCSS(スタイルシート)に、設定を追加することで、利用できます。「外観」→「テーマの編集」から、テーマの「style.css」に、以下をコピーして、追加してください。※該当の見出し箇所に、タグを挿入するものもあります。線の太さ・カラーは、お好みで変えてくださいね。田中勇輔のブログTY(てぃーわい)です。2005年にECサイトを立ち上げ、制作から運営システムまで全てを自分で作ってきた経験を元に、2012年からはサイト制作、ECコンサルティング、書籍執筆、テキスト制作などをしています。見出し・リスト・引用文のスタイルを整えるWebサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。WordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。...CSSの擬似要素を使った見出しデザインこのブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。HTMLはすべてHタグだけです。意味はありませんが今回のサンプルはh4タグを使っています。「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。今回のサンプルは別サーバにアップしていますのでご覧ください。それでは今回8つのサンプルを紹介していきます。吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付けて、他のボーダーは「transparent(透明)」にしています。あと、この正方形の一辺が100pxになることに注意してください。relative;」を指定して、矢印の場所はh4を基準とした絶対値で指定します。100%;」にすることで、h4の真下に矢印を付けることができます。WordPressについて書きたいと思います。僕も...記事を読むWordPressのショートコードでPHPを使い自由度の高いサイト作成WordPressをブログではなくCMSとして使ってサイト作成しています。無料で良質なCMSって探すのめんどくさいし使いなれたW...記事を読むWordPress運営はXserverとシックスコアがお勧めだよ今回はレンタルサーバーのXserverとその上位版とされるシックスコアがお勧めだよっていう記事を書いていきたいと思います。今回は、ブログ村やブログサークル、人気ブログランキングで新着記事が読み込まれないときの対処法を紹介したいと思います。今回はBloggerからWordPressにお引越ししたという記事を書きたいと思います。今回は、WordPressで他のブログの記事をRSSで表示する方法を書いていきたいと思います。最近、サイトのページを作り直してい...記事を読む超簡単!最短でMixhostにWordPressをインストールする方法Mixhostには様々な機能が用意されていて便利ですね。管理画面もアイコンなどが使われていてわかりやすいです。coreserver→...記事を読むWordPressの使い方からインストールまで始めたらとりあえずやっておくべきことをまとめてみた。今回はWordPress始めたらやっておくべきことを紹介したいと思います。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。さらばGoogleよ!blogcircleで誰でもシェアやランクリされるツールの仕様を考えてる。うさちゃんねるフロンティア.。