はてなブログ固定トップページに新着記事一覧を表示する（追記）
今回もこことは別のブログの話です・・・
そのブログはトップページを未来日記形式で固定していて新着記事を表示したいと格闘していました。
まずは、リダイレクトで記事一覧を表示。
これは仕様上５０記事も１ページに表示されてしまうのでパスして外部サービスの画像ＲＳＳを利用する事にしました。
見た目上は問題無かったのですが、不満点がひとつ。
外部サービスを利用しているので仕方無いのかもしれませんが、表示スピードが遅い事です。
そのページは検索流入が８割程でトップページを経由する人は殆どいないので深く考えない事にしていたのですが、少し気になる記事を発見！
サイドバーの関連記事を本文側に表示するカスタマイズのようです。
これなら新着記事にも流用出来そうなので少し検討してみます・・・
まず変更点は新着記事にするので「 .hatena-module-related-entries 」を「 .hatena-module-recent-entries 」に変更。
CSSカスタマイズ部分はそのままでＯＫでした。
これで確認してみると・・・
なんとあっさりＯＫでした。
表示速度も問題無し。ただし、新着記事は日付の新しい記事から順に表示するので当然未来日記まで表示されてしまいます。
新着記事なので日付も表示したいのですが、このままではとっても残念な感じです。
なんとかこれを回避したいと無い知恵絞って考えました。
なかなかうまくいかなくて、このカスタマイズ自体をあきらめようかと思ったのですが、なんとかうまくいきました。
変更点はCSSカスタマイズ部分に「 #relateArticle li:nth-child(1) { display: none;
} 」を追加
これで１記事目を非表示にしています。
表示記事数、画像サイズ、文字数などは通常のサイドバーの編集画面で変更可能です。
この方法のメリットはよくある単純な記事一覧リダイレクトだと５０記事表示しか設定出来ませんが２０記事まで（からトップページ分は減ります）で任意に選択可能、表示形式も画像あり、なしなど柔軟に対応出来ます。
又リダイレクト版だと編集不可ですが、追加で文章、html記述が出来ますのでお知らせ等を追加する事も可能です。これが１番メリットだと思います。
ついで？に月別アーカイブにも手を加えました。
標準のプラグインを使うと未来日記の日付も表示されてしまうので諦めていたのですが、自分で作ればそれっぽい感じで出来ました。
アコーディオンメニューにして月別リンクにするだけです。
問題は月が変わったらきちんとリンクを追加する。これだけ気をつければ良いです。
未来日記なので月別アーカイブは使えないと諦めていた方は是非お試しください。
はてなブログでの画像配置について考えてみる
はてなブログは文章を書くという事に関しては優れていると思いますが、画像を扱う事に関してはなかなか融通が利かないかなと思います。
画面サイズで挿絵程度で使うには問題ないですが、複数枚貼るときにはなかなか融通が利きません。
さらに最近はレズポンシブデザインでブログを作成している方も多いと思いますが、PC・スマホ両方でなかなかイメージ通りに配置出来ないです。
そんな中で自分なりに考えてしている事の備忘録・・・
（見たままモードでの話しですので、その他モードでは該当しないと思います、又このブログはスマホは専用ページになっていますのでスマホで見た場合何やってんだかわからないかもしれません。。。）
はじめに・・・
はてなブログで画像を扱うには基本的にFotolifeにアップロードし、その中から選択して貼り付けになると思います。
又裏技的な方法として自分のフォルダー等からドラッグ＆ドロップには対応。
ただし、コピー＆ペーストは出来ない。（作成中のページ内でのコピペは対応している謎仕様です）
ドラッグ＆ドロップは狙った所に貼り付けられない事が結構あるのでコピー＆ペーストで処理したいです。。。
そして画像配置（例えばセンタリング）するにはHTML編集でするしか方法がありません。基本的な事はボタンでぱっとやっつけたいですよね
という事で・・・
自分の使っているテクニック？という程でもないですが、画像を使用する時のワンポイント？
横に並べる
２枚の画像を横に並べる為に画像を２枚貼り付けます。
すると横幅に余裕があってもこのように縦に２枚並んでしまいます。
どうしてか？HTML編集にしてタグを確認すると・・・
１枚毎に<p></p>の段落タグが挿入されています。ま～これは仕様としてあきらめますが、横に配置する為には何か対策しなければなりません。
タグを編集する
１枚毎に改行されているなら、１枚毎に改行しなければ良いです。
と言う事でHTML編集で少しだけ変更を加えます
<p>１枚目の画像URL<p>
<p>２枚目の画像URL<p>
を<p>１枚目の画像URL、２枚目の画像URL</p>という様に１枚目の最後の</p>と２枚目の先頭の<p>を削除します。
すると
このように横幅が十分にあれば、横並びで表示されていると思います。
閲覧中のブラウザの横幅を変更すると横並びになったり縦並びになったりすると思います。
これは複数枚でも同様です。先頭と最後を<p></p>で囲ってください。
この方法のメリットは画面サイズで横並びの数が変わるので画像サイズを維持したまま表示可能です。レスポンシブページで生かせると思います。
このようにレスポンシブページならかっちりと配置を指定しなくてちょっと指定をルーズにした方が面白い見え方になる事もあると思います。
又複数枚横に並べていた場合上と下で枚数が違ってバランスが悪くなるのでセンタリングをかけておくと良いかもしれません。
<table>タグを使う
アドセンスのダブルレクタングなどで使っている方も多いかと思いますが１つの方法だと思います。他には<li>リストタグを使うのかな？
|
|
|
この場合画面サイズに合わせて画像サイズが変化していきます。
画像はたくさん張りたいけれど、だらだらと長くなってしまう事がいやな場合はこちらをオススメします。
ただし枠線が表紙されるのでcss等で消去するか逆にアクセントとして編集すると見映えがよくなると思います。
medi8を使うなら知っておきたい事（追記）
ここは備忘録として使っているので特に書くことが無くて全く更新していなかったのですが、今年中に後１回くらいは更新しようかなっと。
ま～アクセスも全く無いようなブログですが、その中ではそこそこアクセスのあったmedi8について某掲示板のmedi8スレで話題になっていたような事、半年くらい使って思った事を自分のわかる範囲で箇条書き・・・
ちなみにmedi8を貼っているブログはPV５０００/dayくらいのページです。
支払い条件
収益が３，０００円を超えると支払い手続きが行われます。
そして実際に支払いが行われるのは月末締めの翌々月１５日（くらい）です。
振込み手数料
自分の場合５４０円でした。
ここからは推測ですが、親会社がnendと同じなので振込み手数料も同じなのかもしれません。
その為登録口座によってはもっと安くなる可能性があります。
ただし、無料にはならないと思います。
支払いまとめ
条件的には上に書いた通りなのですが、問題はnendのように繰越しが出来ない事です。自分の場合毎月３０００円を超えるくらいなのですが、毎月振り込みの為に５４０円も手数料を取られる事は非常にもったいない感じです。
ただ利用規約を見ても特にこの点は書いてないので無理なのかな～
直接問い合わせれば対応してくれるかもしれません。
利用規約
medi8を使っている人でも気がついていない人も多いかもしれません。
そんなくらい解りにくい所にリンクがあります。
とりあえず規約のリンクです（pdfファイルです）
https://www.medi-8.net/app/resources/medi8/medi8_SSP_terms_ja.pdf
リンクのある場所は管理画面フッター部分の真ん中より少し右あたりに利用規約へのリンクがあります。
文字色が背景色に近く一昔前のホームページの隠しリンク（おっさんにしか解らない事）のようです
medi8を利用するならとりあえず目を通した方が良いのかな？
収益
一様クリック課金型だと認識しているのですが、（追記でまとめています）個人的にはどちらかと言うとインプレッション収益がメインかと思っています。
その為某掲示板でもクリック単価が思うように上がらなくて使えないと判断している方も多いかと思います。
自分の場合クリック単価で表すと大体３０円くらいです。
それならアドセンスの代替になるかと思いますがクリック率（CTR）は驚愕？の0.02%
ecpmで８円程度です。
ま～クリックされにくい場所に配置（スマホからのアクセスがメインのサイトでレスポンシブページのサイドバーの下側など）しての結果なのでこんなものかなと思います。
収益を考えるならecpmを基準に他社と比較してみてください。
ただ広告サイズ、配置場所を変えれば収益を上げる事は十分可能だとは思います。
記事上、記事下などクリックされやすい場所に適切な広告サイズを選択すれば、アドセンスの変わりとは言えませんが、アドセンスを使えない方なら選択肢に入るかと思います。
まとめ
支払い条件の設定が出来れば完璧なのですが、自分の場合忍者よりは収益が良いのでしばらくはこのまま続けるかなと思います。（ホントはアドセンスの代替になって欲しいですけどね）
使い勝手に関しては正直良いとは言えなく最初は結構手間取ったりレポート画面の更新の仕方にちょっとクセがあるのですが、それ程頻繁に広告を張り替える訳でも無いので気にしないようにしています。。。
とりあえずこんな感じです。
追記・・・
もう確認した方も多いかと思いますが、ヘルプページがやっと？追加されました。
よくあるご質問として説明があります。
その中で振込み手数料の記述もありますが、大体予想通りでした。
そしてmedi8の報酬モデルはCPMとはっきり記述があります。
アドセンスで言う所のインプレッション収益のような感じで広告表示に対して収益が支払われるようです。
CPMならPVとほぼ連動して安定すると思うので毎月の収益予測が立てやすいのですが、アドセンスの代替には厳しいですよね～
ただし、一等地に掲載すればどうなるのかは気になります。
はてなブログ見たまま編集モードではてな専用絵文字は使えるの？（とりあえず解決しました）
長いタイトルそのままです。
ただ単に絵文字を使うなら外部サービスのＷＥＢフォントがあるのですが、はてなの機能としてインストールされているようです。
※少しだけ追記しました（１０月９日）
書式も公開されていたので試してみます。
「<i class="blogicon-hatenablog"></i>はてなブログ」
赤文字部分を変更する事で各種アイコンに変更出来ます・・・が・・・
見たままモードのＨＴＭＬ編集に貼り付けてプレビューしてみると表示されません。。。
という事でＨＴＭＬを確認してみるときれいにタグが無くなっています。
どうやら見たままモードでは<i>のタグはサポートされていないようです。
見たままモードは文章を書くには便利なモードですし、ちょっとした間違いは自動（勝手に）で修正してくれるので便利と言えば便利なのですが、<table>タグ内で間違えた時などは悲惨です。
もう修正するくらいなら一度破棄して書き直した方が早いくらいです。
と前置きが長くなってしまいましたが、このままでは見たままモードでは絵文字が使えない！で終わってしまいます。
そんな訳で少しだけ足掻いてみます・・・
まず確認として、はてな記法とマークダウンではＯＫでした。
その後色々試してとりあえず表示出来た方法がこれです。
「<p class="blogicon-hatenablog"></p>はてなブログ」
<i>タグを<p>タグに変更。<p>タグなので改行が入るので改行位置を変更して
「<p class="blogicon-hatenablog">はてなブログ</p>」
これをＨＴＭＬ編集に切替えて入力すると・・・
はてなブログ
見事表示出来ました。ちなみに見たままモードでは絵文字は表示されまんが、プレビューでは確認できます。
ただし絵文字を使うからには色々加工して使いたいので試してみます・・・
文字サイズの変更・・・
はてなブログ
・・・出来ません。
タグを確認すると
<p class="blogicon-hatenablog"><span style="font-size: 200%;">はてなブログ</span></p>
と言う事で文字サイズ変更タグが絵文字の後ろになってしまっているので絵文字の前に移動させてみます。
<span style="font-size: 200%;"><p class="blogicon-hatenablog">はてなブログ</span></p>
これをＨＴＭＬ編集で入力
はてなブログ
きれいに<span>タグが消去されて文字サイズが標準サイズになってしまいます。
想定している使い方として文字列の最後にリンクアイコンを使おうとしているのですが、絵文字の出力に<p>タグを使っているので改行が入ってしまいこれも不可でした。
こんな感じでギリギリ表示は出来たのですが、自由に使うには程遠い感じです。
解決方法を知っている方がいましたら教えて頂きたいと思います。
解決編（追記分）
なんとなくあちこちのブログをさまよっていたらこのブログテーマの作者さんのブログ内のコメント覧から発見しました。
ある方が質問同じ事を質問されていまして、回避方法として提案されていた方法がこちら
記入方法を
<i class="blogicon-hatenablog">はてなブログ</i>
とする事です。<i></i>内に文字入力しています。（最低１文字入力すればＯＫみたいです。アイコンのみ表示したい場合は全角スペースを入れます。空白が出来てしまいますが、工夫すればなんとかなりそうです）
はてなブログ
うまく表示されました。
ちなみにHTMLを確認すると
<p><em class="blogicon-hatenablog">はてなブログ</em></p>
となっていました。ま～表示されるならＯＫです。
そしてもう１つの問題点拡大縮小が出来るか？
はてなブログ
♪上手に出来ました～♪
ちなみにHTMLはこんな感じになっています。
<p><span style="font-size: 200%;"><em class="blogicon-hatenablog">はてなブログ</em></span></p>
これで使えそうです！
medi8はじめました！
この話も以前記事にした
この弱小ブログのお話です・・・
あれから２ヶ月・・・
一日平均５００ＰＶのブログでしたが、じわじわアクセスも増え最近は５０００ＰＶを越えるくらいにまで育ってくれました。
さすがに、ここまでくると日々それなりに収益も発生して中々喜ばしいのですが、使用している広告３社で明暗が分かれてきました。
１．ＧｏｏＧｌｅアドセンス
ＰＶ上昇にともなって収益も向上しています。
先月初めて支払い基準に到達したのですが、今月も支払い基準に到達しています。
当然最優先で継続です。
２．ｎｅｎｄ
貼っている広告の１枚が単価向上で１クリック１２円以上になり、それなりに評価はされていると思うのですが、変わりにインプレッションのみでの収益が極端に下がっているので、結局eCPMは４円台で非常に厳しいです。
ただし、来月には支払い基準に到達しそうなので、もやもやしつつも継続していますが、何か特別な事が無い限りそこで終了の予定です。
３．忍者ＡＤｍａｘ
敷居も低く支払い基準も緩いので、当初のモチベーション維持には貴重でしたが、こちらもeCPMは５円くらい。
支払い基準に到達したので申し訳無いですが、終了としました。
そしてこの空いたスペースを埋める為に採用した広告会社がこちら
medi8
という事でnendと親会社は同じのようですが、こちらはＰＣ、スマホどちらも掲載
可能な広告会社です。
登録すると最初からいわゆる担当という方がついてくれます。
だからどうって事は無いですが、何か質問をした際は毎回同じ方が答えてくれるようなので安心感はあるような気がします。
開始後２週間ほどで担当が替わったのですが（もちろん連絡がありました）
担当者が林さんになりました。
”はやし”さんね～と思っていたのですが実は”リン”さんだったのは少したってから気がつきました。。。
管理画面の見方は少し「クセ」があるので慣れるまでは少し戸惑うかもしれませんが、馴れだと思います。この辺りの解説は丁寧に解説してくれているサイトがあると思うのでそちらを参照してください。。。
広告掲載方法はまず希望のサイズを登録して審査に入り（大体２～３営業日くらいだと思います）審査終了後タグを貼り付ければＯＫです。（めんどくさいと思う方は登録時点でタグは発行されていますので貼り付けておけば審査通過後に広告が表示されると思います）
そして、そして肝心の収益の方ですが、eCPMで８円くらいです。
解説していたサイトではこれより随分良かったのですが、自分の貼っている場所、忍者の変わりと考えれば満足です。
ただし広告表示回数の増えてきた最近の方がもう少し良いので表示回数が増えればもう少し良くなるかもしれません。
忍者と比較してそれ程変わらないと思うかもしれませんが、同じ事をして１．６倍になっています。今は金額ベースではたいした事無いですが、頑張って収益が増えてくれば間違いなく大きな違いになると思います。
そしてここの収益はクリック型というよりはどちらかというとインプレッションに対しての影響が大きいと思います。
おかげで日々の収益の変動は少なくアクセス数が増えれば収益も増えるので非常に安心出来ます。
ちなみにクリック率は0.02％程です。ほんとスミマセン。
注意点としては、上にも書いた管理画面にクセがある事、ヘルプページが無い事です。
ヘルプページが無いので解らない事は解説サイトに頼るか、担当に問い合わせる形になります。
ま～返事は翌日には来ると思うのでその為の担当なのかなとも思っています。
後は広告の作成でネイティブ広告を指定した時ですが、設定画面で細かな設定が出来なかったので、これで大丈夫かなと思っていたのですが、結局メールで問い合わせを受け画像サイズ、文字数などを伝える形になりました。
ネイティブ広告を使いたいと思う方は問い合わせが来ると思いますので、想定しておいてください・・・
ただ、せっかく苦労して設定していただいたネイティブ広告ですが、収益的にはあまりよくなかった（ネイティブはインプレッション収益が発生しません）事もあって今は使っていません。
ブログのジャンル、アクセス数などの理由でここに書いた数値と違う結果になるかもしれませんが、とりあえず試して見ても良いかと思います。
その後・・・
eCPMはどんどん減少しています。。。
結局忍者とそんなに変わらない感じです。
ま～自分サイトからの成果が出ていないのかも知れませんが、結局何処でも一緒なのかな～って思っています。残念。
はてなブログ開発ブログをたまには読んだ方が良いかもしれません
というお話です。
存在くらいは皆さんも知っていると思いますが、ブログサービスをしている会社だからブログくらい書くよね～。なんて思わずにたまには覗いてみる事をオススメします。
読んでみるとわかると思いますが、結構頻繁にアップデートしています。
知らない内に以前は出来なかった事が出来るようになっていたりします。
少し前の話ですが、編集画面左下の「公開する」と「下書き保存する」を選択出来る様になった事はちょっとした事のようでなかなか大きな変化だったと思います。
最近は主にiOSのアプリ改修に力を入れているようなので個人的にあまり関係の無い記事が多いのですが、直近で気になった記事はこれです
ブログのaboutページを自由に編集できるようにしました（ページタイトルについて追記あり） - はてなブログ開発ブログ
はてなで書いているブログはここも含めて全てaboutページへのリンクを貼っていないので基本的に読まれる事は無いと思うのですが、いつ何処で読まれるかも知れません。
又、グーグル先生は何でも知っている？のであまりに貧弱な状態になっているとアドセンス絡みで警告を受けてしまうかも知れません。
警告を受けた時にこんなページ知らないと言っても後の祭りです。
これを機にaboutページを充実させたいと思います。
アドセンスのポリシー違反を解消する
別ブログが頑張ってくれたおかげでいよいよアドセンスの振り込み基準を意識する所まできました！
という事でアドセンスのポリシーを再確認・・・
一発退場では無いと思いますが・・・
違反していると思われる点が３つ程ありました。。。
１．display none で広告を非表示にしていた
これは違反でもあり違反でも無いです？？？
自分の場合通常のレクタングルの広告を画面サイズで表示制御していました。
これは×です。
但し、最近はレスポンシブのテーマを使ったり、スマホ表示を無視出来ない状況なのでやらざるをえないと思います。
という事で正規な方法をGoogle側で用意してくれています。
それは、レスポンシブ広告を利用する方法です・・・
レスポンシブ広告コードを修正する方法 - AdSense ヘルプ
ここで説明されていますが、レスポンシブ広告を使っての広告サイズの切替はＯＫです。
という事で早速レスポンシブ広告を使っての広告サイズ切替に変更しました。
実際の所今まではＰＶに対しての広告表示の数が倍くらいになっていました。。。
非表示に指定していた分もカウントしていたみたいです。
但しそれ程アクティブビューも落ちていないのでやはり良くない状況だったと思います。
これはRPMにも影響するのでいつペナルティーを受けてもおかしくなかったと思います。
２．404エラー画面の広告
これは明確にダメと言われていないような気もしますが、価値のないコンテンツという定義にあてはめれば違反になると思います。
１番簡単な方法はサイドバーに広告を貼らない事だと思います。
但し、はてなブログでの利用者が高い？と思われるスクリプトを使って記事下直下のアドセンス表示を行っている場合４０４画面でも記事下にアドセンスが表示されてしまうと思います。（通常カスタマイズの記事下にタグを貼った場合は表示されません）
自分は通常貼り付けでしたが、サイドバーにアドセンスを使っていたのでこれを削除（実際殆ど収益になっていませんでしたので特に悩む事もなく削除！）
と、ここで一様解決したのですが、どうせならと言う事で404エラー画面も価値のあるコンテンツにする為にカスタマイズ・・・
参考にしたサイトはこちら・・・
とりあえず自分の目標としては画像を使いたかった事、そしてお勧め記事が出せればなお良いという感じでした。
結構丁寧に説明されているのでコピペで楽勝！（）と思っていたのですが、これが、全く動きません。。。
という事で順番に表示出来ない原因をみつけて行きました・・・
まず、そのまま貼ってみる・・・
ダメ
この時点でかなり悲壮感漂ってましたが、もう一度説明を熟読します・・・
貼り付け箇所の指示が記事下でしたが、詳細設定のヘッダー内に貼り付け
これで、とりあえず画像は表示されました！ただしお勧め記事は表示されません。
これは自分のサイトにはてブが全く無いから（）と判断してとりあえず保留。
画像を自分のものに置き換える・・・
これがなぜかダメでした。
この問題は結構悩みました。ＵＲＬ指定も問題無いはずなのになぜかダメ。
それだけなら、まだしも画像下の文章も表示されなくなってしまったので何か問題が起きている事は間違いない状態です。
そんな訳でもう１度ソースとにらめっこです。
・・・？？？・・・！！！
という事でダメ元でと思ってやってみた変更が正解？だったようで画像表示に成功しました。
行った変更は画像参照ＵＲＬの
img src='http://cdn-ak.f.st-hatena.com/images/fotolife/c/自分のＩＤ/×××
赤字部分を色白おばけさんと同じくl（小文字のエル）にしただけです。
最初はこの部分が自分のＩＤの頭文字だと思っていたのですが、（実際自分の画像参照ＵＲＬを調べるとそうなっていました）もうここしかないっ！って感じで試しました。
なぜかうまくいった事例なので説明は出来ませんがとにかく表示出来ました。
次にお勧め記事ですが、これは普通にカテゴリリンクを文字表示にしようとしたのですが、ダメ。ここを変更すると画像すら表示されないのでやっぱり書式がまずいようです。
結構頑張ったのですが、とりあえずアドセンスは表示されていないのでＯＫという事にしてぶん投げています。。。
またいつかチャレンジしたいと思います。
と思ったらこのブログはスクリプト使って直下に表示していました。修正します。。。
３．トップに戻るボタンと広告が重なる
これも中々悩ましい問題です。
自分のページもスマホで見るには少し長めの記事があるので使っているのですが、解決方法を検討している状態です。
z-indexで重なりを指定すればＯＫかもという話もあったので少し試したのですが、うまくいきませんでした。。。
削除するしかないかなと思っていますが、とりあえず指摘を受けるまで、そのままにしよう（）なんて思ってますが、早めに修正方法を見つけたいと思います。
とりあえず対応した事はこんな感じです。
見出しをカラフルにして楽しむ！
はてなブログをカスタマイズする際に誰もがするであろう？見出しのカスタマイズですが基本はカスタムｃｓｓで定義してそれを使う感じだと思います。
ページによっては違うデザインで使用する為本文に<style></style>で再定義して使っている方もいると思います。
ただし通常は最後に定義した形でしか使えないので使える形は大見出し(h5)、中見出し(h4)、小見出し(h3)の３種類です
ま～それでも十分だとは思いますし、ＳＥＯを意識してかっちりとこの枠組みを利用している方もいると思いますが、自分の場合あまりＳＥＯは意識せずに見た目を良くしたいと思い日々奮闘しています。
という事で３種類じゃ足りない（）ので簡単に見出しの数を増やす？方法を紹介したいと思います。
それは見出しタグにid属性をつける方法です
その為まず<style></style>内に見出しを定義します
/* 見出しのリセット */
.entry-content h4,
.entry-content h4::before,
.entry-content h4::after {
background: none;
border: none;
border-radius: 0;
}
/* 見出しh4 用 */
#midasi1 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #fb90a4;
border-bottom: 1px solid #fb90a4;
}
#midasi2 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #8765c1;
border-bottom: 1px solid #8765c1;
}
#midasi3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #ff7b1d;
border-bottom: 1px solid #ff7b1d;
}
#midasi4 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #217ed6;
border-bottom: 1px solid #217ed6;
}
#midasi5 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #d70d20;
border-bottom: 1px solid #d70d20;
}
とりあえず中見出しを使っていますが、当然大見出し、小見出しでも問題無いです。
ポイントはまず最初に見出しの定義をリセットして素の状態にする事です。
これは試して見ればわかると思いますが、デザインを変更するとカスタムＣＳＳで定義した内容が残っていてデザインが崩れてしまいます。
これは本文途中で切り替えても同じ事です。
デザインによっては切替も可能だと思いますが、あまりお勧めはしません。
という事で今回は見出しの色変更のみです。。。
実際に色を切り替えて見出しを使ってみます・・・
書式は通常の見出しタグにid="定義した見出し"を挿入します。
<h4 id="midasi1"> と言う感じです。
ちなみに自分は見たままモードを使っています。id="midasi1"の部分はＨＴＭＬ編集に切替て直接入力してください。
という事で見出しにidを定義して使ってみると・・・
鹿目まどか
暁美ほむら
巴マミ
美樹さやか
佐倉杏子
こんな感じになります。
idを使えば無限？に楽しめると思います。
よろしければお試しください。
