このブログを作成するに当たって使用したHTMLやCSSなど

f:id:wisdomo:20200709221328p:plain

タイトルの通り。

下に全部貼っておくので、指定する箇所に貼ればここと全く同じデザインのはてなブログができると思う。

コードはほぼ流用だし、自分でアレンジした部分も拙いので知識のある人は自分でいじったほうがいいと思う。

下のコードは具体的にはブログトップで記事を見やすくするものだったり、シェアボタンやお問い合わせだったり、上に行くオレンジ色の矢印のものだったりする。

ブログのデザインを決める
そもそもHTMLとCSSとは
どこに貼ればいいのか
さいごに

ブログのデザインを決める

まずブログのデザインを決めなければならない。

ブログ管理画面の左が↓みたいになってると思う。そこのデザインをクリック。

f:id:wisdomo:20200709220615p:plain

デザインではブログを彩る色々な設定を行うことができる。

そこで「テーマストアでテーマを探す」を選択、このブログで使用しているテーマは「絢爛　KENRAN」なのでそれを選択。↓

f:id:wisdomo:20200709221426p:plain

blog.hatena.ne.jp

「絢爛　KENRAN」が設定できたらとりあえずOK。

ちなみに他のテーマで以下のコードを貼り付けた場合、綺麗に表示されないと思うのであくまで絢爛専用だと思ってほしい。

そもそもHTMLとCSSとは

僕もめちゃめちゃ初心者だからこの解釈で合ってるのかどうかわからないけれど、とりあえずHTMLとCSSはそれぞれ助け合ってできていて、HTMLが人間の肉骨だとしたらCSSが化粧みたいな感じだと思う。

だからHTMLだけでも機能はするけど、デザイン的に綺麗ではない。みたいな感じ？

だからワンセットで考えたほうがいいと思う。

ちなみにHTMLごとに対応するCSSがあるから、本当にコンビみたいな感じで捉えるといいかも。僕はそう考えている。

どこに貼ればいいのか

下の項目にそれぞれ貼る場所とコードを載せているので、このブログと同じデザインでいいよって人はそのまま貼ってね。

ヘッダ

この項目のコードはデザインのヘッダの「タイトル下」って書いてあるところに貼ってね。

f:id:wisdomo:20200709222220p:plain

貼るコード↓

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="JavaScript">
$(document).ready( function () {
   $("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
</script>

記事内

この項目のコードはデザインの記事内って場所の「記事上」と「記事下」にそれぞれ同じコードを貼ってね。

これはSNSシェアボタンとお問い合わせのコードなんだけど、お問い合わせの所定の欄には自分のお問い合わせURLを入れてね。

グーグルお問い合わせフォームで自分のお問い合わせが簡単に作れるはず。

f:id:wisdomo:20200709222343p:plain

貼るコード↓

<!-- ここからシェアボタン -->
<div class="share-btn-type5">
  <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加" class="share-btn__item share-btn__item--hatebu" target="_blank"><span class="share-btn__icon"><i class="blogicon-bookmark lg"></i></span><span class="share-btn__small-text">hatena</span></a>
  <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share-btn__item share-btn__item--facebook" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"><span class="share-btn__icon"><i class="fa fa-facebook-square lg"></i></span><span class="share-btn__small-text">facebook</span></a>
  <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share-btn__item share-btn__item--twitter" target="_blank"><span class="share-btn__icon"><i class="blogicon-twitter lg"></i></span><span class="share-btn__small-text">Twitter</span></a>
  <a href="ここは自分のURLを入れてね?url={URLEncodedPermalink}" class="share-btn__item share-btn__item--google" target="_blank"><span class="share-btn__icon"><i class="fa fa-get-google"></i></span><span class="share-btn__small-text">お問い合わせ</span></a>
</div>
<!-- シェアボタンここまで -->

フッタ

フッタはここ↓。以下のコードを貼ってね。

f:id:wisdomo:20200709222602p:plain

貼るコード↓

<div id="page-top">
<a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>
</div>
<script>
$(window).scroll(function(){
var now = $(window).scrollTop();
if(now > 500){
$("#page-top").fadeIn("slow");
}else{
$("#page-top").fadeOut("slow");
}
});
$("#move-page-top").click(function(){
$("html,body").animate({scrollTop:0},"slow");
});
</script>

デザインCSS

はい一番長いデザインCSSね↓。以下のコードを貼ってほしい。

f:id:wisdomo:20200709222633p:plain

貼るコード↓

.page-archive .archive-entry {
  height: 260px
}
.page-archive .social-buttons {
  display: none
}
@media (max-width: 1024px){
  .page-archive .archive-entry{
    height: 210px!important
  }
}
@media (max-width: 480px){
  .page-archive .archive-entry{
    height: 230px !important
  }
}



#blog-title, #footer, .archive-heading::before, .categories::before, .entry-content h3::before, .entry-content h4::before, .entry-content h5::before, .entry-footer .hatena-module-title::after, .hatena-module .hatena-module-title, .hatena-module-search-box .search-module-button, .leave-comment-title, .page-about .entry-content dt::before, .page-index .entry-see-more, .pager a, .search-result-form .search-result-button {
  background: #5f9ea0;
}




/*上に戻る*/
#page-top {
display:none;
position:fixed;
right:10px;
bottom:20px;
margin: 0;
padding: 0;
text-align:center;
}
#move-page-top{
color:#ffa600;
text-decoration:none;
display:block;
cursor:pointer;
}
#move-page-top:hover{
color:#ffa600;
}
@media only screen and (min-width: 400px){
#page-top{
right:50%;
margin-right: -450px;
}
}







/**
 * シェアボタンここから
 */
.share-btn-type5 {
  margin: 1.2em 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.share-btn-type5 .share-btn__item {
  display: flex;
  width: 49%;
  height: 36px;
  margin-bottom: 8px;
  line-height: 36px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  color: #333;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: all .3s;
}
.share-btn-type5 .share-btn__item:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.share-btn-type5 .share-btn__item--hatebu {
  color: #00A4DE;
  border: 1px solid #00A4DE;
}
.share-btn-type5 .share-btn__item--facebook {
  color: #1778F2;
  border: 1px solid #1778F2;
}
.share-btn-type5 .share-btn__item--twitter {
  color: #1BA1F3;
  border: 1px solid #1BA1F3;
}
.share-btn-type5 .share-btn__item--pocket {
  color: #EF4155;
  border: 1px solid #EF4155;
}
.share-btn-type5 .share-btn__item--google {
  color: #ff6347;
  border: 1px solid #ff6347;
}
.share-btn-type5 .share-btn__icon {
  width: 40px;
  color: #fff;
}
.share-btn-type5 .share-btn__item--hatebu .share-btn__icon{
  background-color: #00A4DE;
}
.share-btn-type5 .share-btn__item--facebook .share-btn__icon{
  background-color: #1778F2;
}
.share-btn-type5 .share-btn__item--twitter .share-btn__icon{
  background-color: #1BA1F3;
}
.share-btn-type5 .share-btn__item--pocket .share-btn__icon{
  background-color: #EF4155;
}
.share-btn-type5 .share-btn__item--google .share-btn__icon{
  background-color: #ff6347;
}
.share-btn-type5 .share-btn__small-text {
  width: calc(100% - 40px);
  padding-left: 12px;
  box-sizing: border-box;
  letter-spacing: .04em;
  text-align: left;
  font-size: 12px;
}
@media (min-width: 768px){
  .share-btn-type5 .share-btn__item {
    width: 24%;
  }
}
/**
 * シェアボタンここまで
 */






.page-index .entry {
  width: 100%;
  height: 280px;
  box-sizing: border-box;
  padding-left: 50%
}
.page-index .entry::before {
  position: absolute;
  content: "";
  width: 50%;
  height: 100px;
  bottom: 60px;
  right: 0;
  background: linear-gradient(rgba(255,255,255,0), #FFF);
  z-index: 2
}
.page-index .entry-header {
  padding: 0 24px
}
.page-index .entry-inner {
  height: 160px;
  margin: 60px 0;
  overflow: hidden
}
.page-index .entry-title {
  font-size: 1.1em
}
.page-index .entry-content p:first-child img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 50%;
  height: 280px;
  border-radius: 5px 0 0 5px;
  object-fit: cover
}
.page-index .entry-content p:first-child img:hover {
  box-shadow: 0 0 0 10px #FFFA inset
}
.page-index .entry-content {
  padding: 0 24px 10px;
  font-size: .9em;
  line-height: 1.6em
}
.page-index .entry-content h1, .page-index .entry-content h2, .page-index .entry-content h3, .page-index .entry-content h4, .page-index .entry-content h5, .page-index .entry-content h6, .page-index p {
  display: inline;
  font-size: 1em;
  font-weight: 400;
  border: none
}
.page-index h3::before, .page-index h4::before, .page-index h5::before {
  display: none
}
@media(max-width: 480px){
  .page-index .entry {
    width: 100%;
    height: 500px;
    box-sizing: border-box;
    padding-left: 0;
    padding-top: 250px
  }
  .page-index .entry-inner{
    margin: 12px 0;
    height: 165px;
  }
  .page-index .entry-content p:first-child img {
    width: 100%;
    height: 250px;
    border-radius: 5px 5px 0 0
  }
  .page-index .date a{
    top: 24px
  }
  .page-index .categories a{
    text-shadow: 0 0 10px #000;
    color: #FFF
  }
  .page-index .entry::before{
    width: 100%;
    bottom: 73px
  }
}

その他貼るやつ

その他貼るやつはちょっとめんどいんだけど、ここの「設定」から詳細設定の「headに要素を追加」に貼ればいい。

これは確かデザインを呼ぶ用のコード。（だったと思う）↓

f:id:wisdomo:20200709220615p:plain

貼るコード↓

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

さいごに

スマホのレスポンシブデザインにすることをお忘れなく。デザインのここね↓。結構忘れてる人多いと思う。

上のコードをそのまま貼るとこのサイトと全く同じデザインになるので、それでもいいって人は貼ってみてほしい。

僕は色々サイトを見て参考にさせてもらったんだけど、どこのサイトだったか忘れてしまって参考として書けないので申し訳ない...。

色変えたりはめっちゃ簡単なのでググってもらえばすぐできると思う。

わからないところがあれば「お問い合わせ」に内容を送ってもらえれば対処できるものはしたい。ただ本当に初心者がコードを並べてちょっといじっただけなのでそこは勘弁してほしい。

それではまた。

Forest Gump

毎日がエブリデイ

このブログを作成するに当たって使用したHTMLやCSSなど

ブログのデザインを決める

そもそもHTMLとCSSとは

どこに貼ればいいのか

ヘッダ

記事内

フッタ

デザインCSS

その他貼るやつ

さいごに