はてなブログデザインテーマ「Debriefing」をリリースしました。独学から最短でWebデザイナーになろうと考えている人におすすめの勉強法WordPressでブログやるならレンタルサーバーはエックスサーバーがおすすめAmazonオーディブルは良い?料金・特典内容・レビュー・退会方法について絶対Amazonプライム会員になったほうがお得。はてなブログデザインテーマ「Debriefing」をリリースしました。2019-03-17はてなブログデザインテーマ「Debriefing」をリリースしました。hatenaはてなブログのオリジナルデザインテーマ「Debriefing」をリリース致しました。デモページはてなブログのテーマ開発はWordPressのテーマ開発のようにテンプレートファイルから作るわけではなく、CSSを適用していく割と簡単な内容でした。今回ははてなブログのデザインテーマ「Debriefing」の特徴やカスタマイズ方法について紹介していきます。最後にDebriefing(デブリーフィング)とはまずはじめに本メディアのタイトルでもありますDebriefing(デブリーフィング)というテーマ名から説明します。Debriefingとは任務を終えた兵士たちが上官に任務内容を報告することを意味します。本メディアは自分が経験したことや知り得た知識などを、悩みを抱えている人やいろんな人に情報を報告するメディアという願いを込めてDebriefingと名付けました。制作した本テーマも同じで、体験した内容や知識をいろんな人に分かりやすく、見やすく報告してほしいという願いを込めてDebriefingと名付けました。ちなみにDebriefingの反対の言葉がBriefing(ブリーフィング)です。Briefingは任務が始まる前に任務の内容について、説明を受けることを意味します。次に本テーマの特徴を説明します。本テーマはゼロからCSSを書いて制作しました。はてなブログ公式から発表されているベース用のテーマ「Boilerplate」があり、このテーマをベースに制作していけば、比較的簡単にテーマを制作できるようですが、今回はBoilerplateは使わずに、完全にスタイルが適用されていないゼロの状態からCSSを書いていきました。そのためBoilerplateのCSSは適用されていないので、Boilerplateのスタイルを相殺するCSSは1つもありません。ブログ本体のテンプレートファイル(編集できないファイル)から読み込まれているCSSについては数箇所だけ相殺している箇所はあります。レスポンシブウェブデザイン対応Googleが推奨しているこもあり、もはや今の時代レスポンシブウェブデザインが適用されたサイトが一般的になりました。本テーマもレスポンシブウェブデザインを適用しています。PC・タブレット・スマートフォンのさまざまなデバイスで、綺麗なレイアウトを保った状態で閲覧することが可能です。Width)で指定しているので、端末の解像度が違っても等倍のサイズ感で表示されています。Edge、IE11です。IE10以下のブラウザは対応していません。白と黒のシンプルなデザイン人によって多種多様さまざまなジャンルのブログがあると思いますので、ブログの配色はいろんなブログに合うように白と黒のベーシックな配色にしています。今後のアップデート内容の1つに管理画面のデザインCSSから自分好みの色に変更できるようにしたいと考えております。続きましてテーマのカスタマイズ方法について説明します。ヘッダーにナビゲーションを設置デモページヘッダーに記事のカテゴリやリンクなどのナビゲーションを設置することができます。やり方は管理画面から「デザイン」→「カスタマイズ」→「ヘッダー」→「タイトル下」へ順番に進み、下記のコードをコピペして保存すれば完了です。</div></nav>タブレットやスマートフォンで閲覧する場合はハンバーガーメニューが表示され、メニューをタップするとドロワーメニューが開きます。メインビジュアルをカスタマイズはてなブログの管理画面からタイトル画像を設置することができるのですが、はてなブログの仕様で、画像サイズが最大で横幅1000px前後のサイズになってしまいます。そのためPC表示の場合は画像が引き伸ばされて表示されたり、左右に余白が出ててかっこ悪いデザインになってしまいます。それを解決するために自分でオリジナルのメインビジュアルを設置できるようにしました。やり方は管理画面から「デザイン」→「カスタマイズ」→「ヘッダー」→「タイトル下」へ順番に進み、下記のコードをコピペして保存すれば完了です。</div></div>コードのh1タグとh2タグの部分はお好みのタイトル名や概要文に変更して使ってみてください。デフォルトでは画像のようなオーロラの画像が設定されていますが、お好きな画像に設定いただくことも可能です。やり方は記事投稿画面で表示したい画像をアップロードします。次にタイトル入力フォームの上部に位置する「HTML編集」モードに切り替えて、アップロードした画像のパスをコピーします。管理画面の「デザイン」→「カスタマイズ」→「デザインCSS」を開き、下記ソースのbackgroundのurlの部分を先程コピーした画像パスに差し替えて保存すれば、お好きな画像に差し替えることが可能です。center;}文字が画像に同化して見づらくならないように画像の上に黒いスモークを適用しているので、スモークを外したい場合は下記のコードをコピーして、デザインCSSに貼り付けて保存すれば消すことができます。.main-title」のbackgroundの#の部分をお好みのカラーコードに変更して保存すれば色を変えることができます。#000000;}オリジナル読者になるボタンはてなブログのデフォルトの読者になるボタンはサイズが小さく、若干押しづらい感があるので、オリジナルの読者になるボタンを作りました。これによりデフォルトの読者になるボタンより訴求力のあるボタンになったので、ブログの読者数獲得に繋がります。オリジナルソーシャルボタン他のブログでもオリジナルのソーシャルボタンを設置しているブログがあると思いますが、本テーマもオリジナルのソーシャルボタンを設置できます。やり方は管理画面から「デザイン」→「カスタマイズ」→「記事下」へと順番に進み、下記のコードをコピペして保存すれば完了です。</ul></div>今のところ対応しているソーシャルボタンの種類は、はてなブックマーク、Facebook、Twitter、Pocketの4種類のみです。はてなブックマークとFacebookについてシェア数を表示しようと考えましたが、表示速度が著しく低下するので今回は見送りさせていただきました。最後にざっくりとテーマの特徴やカスタマイズ方法について説明しました。今後は細かいレイアウト調整やカスタマイズ方法もアップデートをしていき、もっとオシャレで使いやすいテーマにアップデート予定ですので、よかったら本テーマを使っていただければうれしいです。テーマストア実際に使わなくても無料ですので、インストールだけでしてみて、自分のブログに合うか合わないか試していただけるだけでも幸いです。テーマを変更すると、今のテーマに適用されているデザインCSSがリセットされてしまうので、テーマを変更する時はデザインCSSに書いているソースをコピーして保存しておいてください。元のテーマに戻したい時は保存したCSSのソースを貼り直せば元の状態に戻せます。»About仕事・生活・人生に役立つ情報を書いています。日常的な雑記記事より読者の役に立つ情報にフォーカスして情報を発信します。Debriefing[デブリーフィング]とははてなテーマ「Debriefing」リリースしました。2019-11-03歯が白くなるおすすめの市販のホワイトニング歯磨き粉2019-11-02LUSH(ラッシュ)のパワーマスクが毛穴の黒ずみ・ザラつきに効果あり2019-10-26毛穴の黒ずみや角栓を取り除く方法は洗顔・保湿・日焼け止めの肌ケアが重要2019-10-22眉毛を生やす方法。まつげ美容液を眉毛に塗ったら本当に眉毛が生えてきた2019-10-19まつげを長くする方法。スカルプDの美容液を使ったら本当にまつげが伸びた2019-10-14髭脱毛おすすめ店舗3選。background-size:coverリダイレクトとは?種類や設定方法。Reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。